/* Demo controls and scoped theme fixes for the native dashboard components. */
.interactive-demo .sidebar,
.interactive-demo #sidebarShowBtn,
.interactive-demo #mobileSidebarBackdrop,
.interactive-demo #dashboardViewportControls,
.interactive-demo #sharedDashboardMenu,
.interactive-demo [data-me-menu],
.interactive-demo #addDashboardDeviceTile{display:none!important}
.interactive-demo #appView{grid-template-columns:minmax(0,1fr)!important}
.interactive-demo #appView>.main{grid-column:1;width:100%;max-width:none;margin:0;padding-bottom:calc(108px + env(safe-area-inset-bottom))}
.interactive-demo[data-demo-page]:not([data-demo-page="dashboard"]) #demoToolbar{display:none}
.interactive-demo #demoBottomNav{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:4px;padding:8px max(6px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:1px solid var(--line);background:var(--card);box-shadow:0 -4px 24px rgba(18,49,68,.08)}
.interactive-demo #demoBottomNav button{min-width:0;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 2px;border:0;border-radius:15px;background:transparent;color:var(--muted);font:inherit;font-size:clamp(9px,2.3vw,12px);font-weight:850;line-height:1.2;cursor:pointer}
.interactive-demo #demoBottomNav button.active{background:var(--orange);color:#fff;box-shadow:0 5px 18px rgba(255,122,0,.2)}
.interactive-demo #demoBottomNav button:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.interactive-demo #demoBottomNav i{display:grid;place-items:center;height:25px;font-style:normal;font-size:24px;line-height:1}
.interactive-demo #demoBottomNav svg{width:24px;height:24px}
.interactive-demo #demoBottomNav button>span{max-width:100%;overflow-wrap:anywhere}
.interactive-demo #demoMePage .shared-me-panel{margin-top:0}
.demo-profile-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.demo-profile-actions a{text-decoration:none;color:var(--text)}
.demo-profile-notice{font-size:12px;color:var(--muted)}
.interactive-demo .demo-device-dialog{position:fixed;inset:0;width:min(760px,calc(100% - 24px));max-height:90dvh;overflow:auto;margin:auto;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--text)}
.demo-device-dialog::backdrop{background:rgba(7,25,36,.68)}
.demo-device-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.demo-device-dialog header small{color:var(--orange);font-weight:900;letter-spacing:.1em}
.demo-device-dialog h2{margin:6px 0 14px}.demo-device-dialog h3{margin:20px 0 12px}
.demo-device-dialog p,.demo-guest-card p{font-size:13px;line-height:1.5;color:var(--muted)}
.demo-device-dialog video{display:block;width:100%;aspect-ratio:16/9;background:#071924;border-radius:14px;object-fit:contain}
.demo-device-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.demo-device-actions a{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--text);border:1px solid var(--line)}
.demo-device-actions a.primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.demo-lock-state{display:flex;align-items:center;gap:18px;margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}
.demo-lock-state>span{font-size:42px}.demo-lock-state strong{display:block;font-size:26px}.demo-lock-state small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.demo-device-dialog label{display:grid;gap:6px;min-width:0;margin:10px 0;font-size:13px;font-weight:750}
.demo-device-dialog input{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.demo-date-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.demo-guest-code{display:block;font-size:24px;letter-spacing:.08em;color:var(--text)}
#demoGuestResult{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:16px}
.demo-pass-list{margin-top:20px}.demo-pass-list summary{cursor:pointer;font-weight:800}
#demoGuestPasses>div{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px 0}
#demoGuestPasses small{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.interactive-demo.demo-guest-view #appView,.interactive-demo.demo-guest-view #demoBottomNav{display:none!important}
#demoGuestPage{width:min(620px,100%);margin:0 auto;padding:24px 16px;min-height:100dvh;display:grid;align-items:center}
.demo-guest-card{padding:26px;overflow-wrap:anywhere}.demo-guest-card h1{font-size:28px}.demo-guest-card>button{width:100%;min-height:52px}.demo-guest-card a{color:var(--text)}
@media(max-width:520px){.interactive-demo .demo-device-dialog{padding:16px}.demo-date-grid{grid-template-columns:1fr;gap:0}.demo-device-actions>button,.demo-device-actions>a{flex:1 1 auto}.demo-guest-card{padding:20px}}
.interactive-demo #dashboardDesignerNav,.interactive-demo .admin-only-nav,.interactive-demo [data-page="settings"],.interactive-demo #dashboardAudiencePreviewWrap,.interactive-demo #dashboardDirectEditBtn,.interactive-demo #dashboardMenuEditBtn,.interactive-demo #dashboardSharingBtn,.interactive-demo .interactive-demo-nav,.interactive-demo .dashboard-device-order-controls,.interactive-demo .dashboard-remove-device,.interactive-demo .dashboard-automate-device,.interactive-demo .dashboard-edit-rule,.interactive-demo .dashboard-unpin-rule,.interactive-demo .dashboard-unpin-auto,.interactive-demo .dashboard-master-edit-direct,.interactive-demo #newAnalysisBtn,.interactive-demo .edit-analysis,.interactive-demo .delete-analysis,.interactive-demo #saveAnalyticsSettingsBtn,.interactive-demo #clearAnalyticsHistoryBtn{display:none!important}
.demo-toolbar{padding:18px;margin-bottom:20px;color:var(--text);background:var(--card);border:1px solid var(--line)}
.demo-language-switcher{display:inline-flex;flex:0 0 auto;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.demo-language-switcher button{min-width:46px;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-weight:800;cursor:pointer}
.demo-language-switcher button[aria-pressed="true"]{background:var(--orange);color:#102a3a}
.demo-language-switcher button:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.demo-toolbar-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}.demo-toolbar-heading span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.demo-toolbar-heading output{font-size:12px;color:var(--muted)}
.demo-toolbar-row{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.demo-toolbar-row label{flex:1 1 145px;min-width:0;margin:0}.demo-toolbar-row label input,.demo-toolbar-row label select{width:100%;box-sizing:border-box}.demo-toolbar-row>button,.demo-toolbar-row>a{min-height:42px;white-space:nowrap}.demo-toolbar details{margin-top:12px}.demo-toolbar summary{cursor:pointer;color:var(--muted);font-size:13px}.demo-toolbar details .demo-toolbar-row{margin-top:12px}.demo-toolbar p,.demo-section p,.demo-share-dialog p{font-size:13px;line-height:1.6;color:var(--muted)}.demo-totals{margin:12px 0 0}
.demo-section{padding:22px;margin-bottom:18px;color:var(--text);background:var(--card)}.demo-section h2{margin-top:0}.demo-rule{cursor:pointer}.demo-rule small{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px}.demo-rule input{width:22px;height:22px;flex-shrink:0;accent-color:var(--orange)}
.demo-share-dialog{position:fixed;inset:0;width:min(480px,calc(100% - 32px));max-height:85dvh;overflow:auto;margin:auto;padding:22px;box-sizing:border-box;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:20px}.demo-share-dialog::backdrop{background:rgba(0,0,0,.5)}.demo-share-dialog h3{margin:0}.demo-share-dialog label{display:grid;gap:7px;margin-bottom:16px}.demo-share-dialog a.primary{display:inline-flex;align-items:center;text-decoration:none;padding:10px 16px;border-radius:12px;box-sizing:border-box}.demo-share-dialog input{width:100%;box-sizing:border-box}
.demo-ev-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.demo-ev-totals>div{border:1px solid var(--line);border-radius:16px;padding:18px}.demo-ev-totals span{display:block;font-size:12px;color:var(--muted)}.demo-ev-totals strong{display:block;font-size:24px;margin-top:10px}
#demoDevicesGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
@media(max-width:700px){.demo-toolbar,.demo-section{padding:15px}.demo-toolbar-row{align-items:stretch}.demo-toolbar-row>button,.demo-toolbar-row>a{flex:1 1 auto}.demo-ev-totals{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-ev-totals>div{padding:12px}.demo-ev-totals strong{font-size:20px}.demo-share-dialog{padding:18px}.demo-toolbar-heading{gap:8px}}

/* Reference screenshot: native Template 02 in the orange outlined card. */
.interactive-demo #dashboardEnergyFlowTile,.interactive-demo #dashboardSiteWeatherTile{border:1px solid #ff6633}
.interactive-demo #energyFlowTextShortcut,.interactive-demo #energyFlowConnectedShortcut,.interactive-demo #energyFlowImageShortcut{display:none!important}

/* Native weather and Energy Flow defaults use dark gradients even in Light.
   Override the complete demo cards, including their fixed white text. */
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile,
html[data-theme="light"] .interactive-demo #dashboardEnergyFlowTile{
  background:var(--card);
  color:var(--text);
}
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile::after,
html[data-theme="light"] .interactive-demo #dashboardEnergyFlowTile::before{
  background:none;
}
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile h2,
html[data-theme="light"] .interactive-demo #siteLocation,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .status-dot,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-temperature,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-temperature b,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-temperature span,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-reading>strong,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-stat strong,
html[data-theme="light"] .interactive-demo #dashboardEnergyFlowTile .flow-head h3{
  color:var(--text);
}
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-reading>small,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-stat span,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-stat small,
html[data-theme="light"] .interactive-demo #dashboardEnergyFlowTile .flow-head p,
html[data-theme="light"] .interactive-demo #dashboardEnergyFlowTile .flow-meta span{
  color:var(--muted);
}
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .weather-icon-large,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-stat{
  background:var(--card);
  border-color:var(--line);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .interactive-demo #siteIdentityIcon{
  background:#fff0e8;
  border-color:#ffc3a8;
}
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .eyebrow,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-clock,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-clock>b,
html[data-theme="light"] .interactive-demo #dashboardSiteWeatherTile .dashboard-weather-clock>span,
html[data-theme="light"] .interactive-demo #dashboardEnergyFlowTile .live-kicker{
  color:#ff6633;
}