/* HOMEBASE Desktop V1 · additive presentation only · 2026-10-14
   Loaded AFTER theme-ivory.css; the existing mobile UI is unchanged. */
.desktop-overview,.desktop-home-rail{display:none}
.app-tabs .desktop-finance-tab{display:none!important}

@media (min-width:701px){
  body{padding-bottom:0!important}
  footer{padding-bottom:24px!important}
  .shell{max-width:1140px!important;padding:22px 24px 38px}
  .topbar{margin-bottom:18px}
  .app-tabs{
    position:sticky!important;top:0!important;bottom:auto!important;left:auto!important;
    transform:none!important;width:100%!important;max-width:none!important;
    display:flex!important;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-start;gap:7px!important;
    margin:0 0 20px!important;padding:10px!important;
    border:1px solid #E3DDCF!important;border-radius:16px!important;
    background:rgba(255,253,249,.98)!important;box-shadow:0 6px 24px rgba(81,64,38,.06)!important;
    overflow:visible!important;z-index:30;
  }
  .app-tabs .app-tab:not(.capture-tab),
  .app-tabs .desktop-finance-tab{
    position:relative!important;display:flex!important;flex:0 0 auto!important;
    flex-direction:row!important;align-items:center!important;gap:8px!important;
    width:auto!important;min-width:0!important;min-height:40px!important;
    margin:0!important;padding:9px 13px!important;
    border:1px solid transparent!important;border-radius:11px!important;
    color:#545E50!important;background:transparent!important;
    box-shadow:none!important;
  }
  .app-tabs .app-tab:not(.capture-tab).active{
    color:#294528!important;background:#E9EEDC!important;border-color:#CEDABB!important;
  }
  .app-tabs .app-tab:not(.capture-tab) span{display:inline!important;font-size:12px!important;font-weight:750!important}
  .app-tabs .app-tab:not(.capture-tab) .ui-icon{width:17px!important;height:17px!important}
  .app-tabs .app-tab:not(.capture-tab).active::after{display:none!important}
  .app-tabs .capture-tab{
    position:relative!important;top:auto!important;left:auto!important;bottom:auto!important;
    order:8!important;transform:none!important;display:flex!important;
    flex:0 0 auto!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
    gap:8px!important;margin:0 0 0 auto!important;padding:9px 14px!important;
    width:auto!important;height:auto!important;min-height:40px!important;
    border-radius:11px!important;border:1px solid #A3B879!important;
    background:#DCE7C9!important;color:#294225!important;box-shadow:none!important;
  }
  .app-tabs .capture-tab span{display:inline!important;font-size:12px!important}
  .app-tabs .capture-tab .ui-icon{width:18px!important;height:18px!important;color:#294225!important}
  .app-tabs .app-tab[data-view="today"]{order:1!important}
  .app-tabs .app-tab[data-view="home"]{order:2!important}
  .app-tabs .app-tab[data-view="shopping"]{order:3!important}
  .app-tabs .app-tab[data-view="finance"]{order:4!important}
  .app-tabs .app-tab[data-view="more"]{order:5!important}
  .app-tabs .desktop-finance-tab{display:flex!important}
  .desktop-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
  .desktop-home-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
  .desktop-overview .desktop-kpi,.desktop-home-rail .desktop-rail-card{
    display:flex!important;flex-direction:column;align-items:flex-start;justify-content:space-between;
    gap:9px;min-width:0;width:100%;height:100%;
    text-align:left;white-space:normal;
    padding:16px!important;border:1px solid #E3DDCF!important;border-radius:16px!important;
    background:#FFFDF9!important;color:#20241F!important;box-shadow:0 4px 15px rgba(81,64,38,.035)!important;
    transition:border-color .15s,transform .15s;
  }
  .desktop-overview button:hover,.desktop-home-rail button:hover{border-color:#A8BD88!important;transform:translateY(-1px)}
  .desktop-overview button:focus-visible,.desktop-home-rail button:focus-visible{outline:3px solid #7E9B55!important;outline-offset:2px}
  .desktop-card-heading{display:flex;align-items:center;gap:9px;color:#596454;font-weight:800;font-size:12px}
  .desktop-card-heading .ui-icon{width:20px;height:20px;color:#567247}
  .desktop-card-value{display:block;color:#263725;font-size:clamp(17px,1.65vw,24px);line-height:1.16;font-weight:850;letter-spacing:-.025em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
  .desktop-card-note{color:#6C756B;font-size:11px;line-height:1.35}
  .desktop-home-rail .desktop-rail-card{min-height:119px}
  .desktop-home-rail .desktop-card-value{font-size:18px}
  #view-today.active-view{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
  #view-today .v2-welcome,#view-today .desktop-overview,#view-today .desktop-home-rail,
  #view-today #today,#view-today .next-panel{min-width:0;margin-top:0}
  #view-today .v2-welcome{margin:8px 2px 0}
  #view-today .v2-welcome{grid-template-columns:minmax(0,1fr)}
  #view-today .v2-welcome .weather-glance{display:none!important} /* weather lives in the right dashboard rail */
  #view-today .today-status-strip{display:none!important}
  #view-today .today-attention,#view-today .next-panel{padding:20px}
  #view-today .today-attention .section-head h2,#view-today .next-panel h2{font-size:21px}
}
@media (min-width:900px) and (max-width:1199px){
  #view-today.active-view{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr)}
  #view-today .v2-welcome,#view-today .desktop-overview{grid-column:1/-1}
  #view-today .today-attention{grid-column:1;grid-row:3}
  #view-today .desktop-home-rail{grid-column:2;grid-row:3 / span 2;display:grid;grid-template-columns:1fr;align-content:start}
  #view-today .next-panel{grid-column:1;grid-row:4}
}
@media (min-width:701px) and (max-width:899px){
  .desktop-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desktop-home-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .desktop-overview .desktop-kpi,.desktop-home-rail .desktop-rail-card{padding:12px!important}
  .desktop-home-rail .desktop-card-value{font-size:15px}
}
@media (min-width:1200px){
  .shell{max-width:1580px!important;padding:26px clamp(24px,3vw,56px) 40px!important}
  .topbar{margin:0 0 18px!important}
  #appPanel{display:grid;grid-template-columns:218px minmax(0,1fr);column-gap:24px;align-items:start}
  #appPanel>.app-view{grid-column:2;min-width:0}
  #appTabs{
    grid-column:1;grid-row:1 / span 5;
    position:sticky!important;top:24px!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:5px!important;padding:14px!important;margin:0!important;border-radius:18px!important;
  }
  #appTabs .app-tab:not(.capture-tab),#appTabs .desktop-finance-tab{
    display:flex!important;flex-direction:row!important;justify-content:flex-start!important;
    width:100%!important;min-height:47px!important;padding:11px 13px!important;
  }
  #appTabs .capture-tab{width:100%!important;margin:14px 0 0!important;order:8!important;min-height:45px!important}
  #view-today.active-view{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(285px,.95fr);gap:14px}
  #view-today .v2-welcome{grid-column:1/-1;grid-row:1}
  #view-today .desktop-overview{grid-column:1/-1;grid-row:2}
  #view-today .today-attention{grid-column:1;grid-row:3}
  #view-today .desktop-home-rail{grid-column:2;grid-row:3 / span 2;grid-template-columns:1fr;align-content:start}
  #view-today .next-panel{grid-column:1;grid-row:4}
  #view-today .desktop-home-rail .desktop-rail-card{min-height:133px}
  #view-home.active-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  #view-home>.panel{min-width:0;margin-top:0}
  #view-home>#zsdEnergyPanel{grid-column:1/-1}
  #view-shopping .shopping-panel,#view-finance .panel{max-width:none}
  .overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
 .desktop-overview .desktop-kpi,.desktop-home-rail .desktop-rail-card{transition:none}
}

/* HOMEBASE Home V1.1 — independent card stacks.
   Two CSS columns are only safe if they do not share the same grid rows.
   DOM content and API behavior are deliberately unchanged. */
#view-home .home-layout-column{
  min-width:0;
}
#view-home .home-layout-column>.panel{
  min-width:0;
  margin-top:0;
  overflow-wrap:anywhere;
}
#view-home .home-layout-column>.panel+.panel{margin-top:16px}
#view-home .home-interior-panel .climate-card{
  min-width:0;
}
#view-home .home-interior-panel .climate-values{
  flex-wrap:wrap;
  gap:8px 14px;
}
#view-home .home-interior-panel .climate-card .source-note{
  overflow-wrap:anywhere;
  line-height:1.5;
}
#view-home .compact-details[open]{
  min-width:0;
}
#view-home .compact-details summary{
  border-radius:7px;
  padding:10px 4px;
}
#view-home .compact-details summary:hover{
  background:#F5F1E8;
}
#view-home .weather-now-stats{
  gap:7px 13px;
}
#view-home #zsdEnergyPanel,
#view-home #zsdStoredHistory,
#view-home .zsd-comparison-chart{
  min-width:0;
  max-width:100%;
}
#view-home #zsdEnergyPanel{
  overflow-wrap:anywhere;
}
@media (min-width:900px){
  #view-home.active-view{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:16px;
    align-items:start;
  }
  #view-home .home-layout-left{
    grid-column:1;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  #view-home .home-layout-right{
    grid-column:2;
    display:block;
  }
  #view-home .home-layout-column>.panel+.panel{margin-top:0}
  #view-home .home-interior-panel .climate-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:10px;
  }
  #view-home .home-interior-panel .climate-card{
    height:100%;
  }
  #view-home #zsdEnergyPanel{
    grid-column:1/-1;
    margin-top:0;
  }
}
@media (max-width:899px){
  /* display:contents lets mobile/tablet keep the original reading order:
     weather -> interior -> heating -> distributor data. */
  #view-home.active-view{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  #view-home .home-layout-column{display:contents}
  #view-home .home-weather-panel{order:1}
  #view-home .home-interior-panel{order:2}
  #view-home .home-heating-panel{order:3}
  #view-home #zsdEnergyPanel{order:4}
  #view-home .home-layout-column>.panel,
  #view-home #zsdEnergyPanel{margin-top:0}
  #view-home .home-interior-panel .climate-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));
  }
}
@media (max-width:500px){
  #view-home .home-interior-panel .climate-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  #view-home .home-interior-panel .climate-card{
    padding:10px;
  }
  #view-home .home-interior-panel .climate-value b{
    font-size:clamp(17px,4.7vw,21px);
  }
}
@media (max-width:365px){
  #view-home .home-interior-panel .climate-grid{
    grid-template-columns:1fr;
  }
}