:root {
  color-scheme: dark;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #0c1117;
  color: #f4f7fa;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at top left,
      #1b2d3d 0,
      transparent 35rem
    ),
    #0c1117;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid #26303a;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  margin-top: 0.3rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

h2 {
  font-size: 1.4rem;
}

.eyebrow {
  color: #8da2b5;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.top-status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 12rem;
}

.top-status small {
  display: block;
  margin-top: 0.2rem;
  color: #8da2b5;
}

.status-dot {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #67717c;
  box-shadow: 0 0 0 0.3rem #67717c22;
}

.status-dot.ok {
  background: #41c982;
  box-shadow: 0 0 0 0.3rem #41c98222;
}

.status-dot.degraded {
  background: #f5aa42;
  box-shadow: 0 0 0 0.3rem #f5aa4222;
}

.status-dot.unavailable {
  background: #e56262;
  box-shadow: 0 0 0 0.3rem #e5626222;
}

main {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 4rem) 4rem;
}

.hero-grid,
.services-grid {
  display: grid;
  gap: 1rem;
}

.hero-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.services-grid {
  grid-template-columns:
    repeat(auto-fit, minmax(230px, 1fr));
}

.card,
.service-card {
  border: 1px solid #293440;
  border-radius: 1.1rem;
  background: #141b23dd;
  box-shadow: 0 1rem 2rem #00000018;
}

.card {
  padding: 1.4rem;
  min-height: 10rem;
}

.primary-card {
  background:
    linear-gradient(
      140deg,
      #1c3448,
      #14212c
    );
}

.card-label,
.service-name {
  color: #9eb0c1;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.large-value {
  margin-top: 1rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 750;
}

.muted {
  margin-top: 0.5rem;
  color: #8da2b5;
}

.section {
  margin-top: 2.5rem;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 1rem;
}

button {
  border: 1px solid #3a4856;
  border-radius: 0.7rem;
  padding: 0.65rem 1rem;
  background: #19232d;
  color: #f4f7fa;
  cursor: pointer;
}

button:hover {
  background: #23313e;
}

.service-card {
  padding: 1.1rem;
}

.service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.service-status {
  margin-top: 1.1rem;
  font-size: 1.35rem;
  font-weight: 700;
}

.service-meta {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.9rem;
  color: #8da2b5;
  font-size: 0.86rem;
}

.badge {
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: #67717c22;
  color: #aab5c0;
}

.badge.ok {
  color: #77e4aa;
  background: #41c98222;
}

.badge.degraded,
.badge.starting {
  color: #ffd08b;
  background: #f5aa4222;
}

.badge.unavailable,
.badge.unhealthy,
.badge.exited {
  color: #ff9b9b;
  background: #e5626222;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 4vw, 4rem);
  border-top: 1px solid #26303a;
  color: #748596;
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  footer {
    flex-direction: column;
  }
}

.inventory-table-wrapper {
  overflow-x: auto;
  border: 1px solid #293440;
  border-radius: 1.1rem;
  background: #141b23dd;
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.inventory-table th,
.inventory-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #26313c;
  text-align: left;
}

.inventory-table th {
  color: #9eb0c1;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inventory-table td {
  color: #dce5ed;
}

.inventory-table tbody tr:last-child td {
  border-bottom: 0;
}

.inventory-table tbody tr:hover {
  background: #1b2631;
}

.inventory-value-unknown {
  color: #f5aa42;
}

.inventory-value-yes {
  color: #77e4aa;
}

.inventory-value-no {
  color: #ff9b9b;
}

.admin-floating-button {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
}

.hidden {
  display: none !important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #02060bdd;
  backdrop-filter: blur(8px);
}

.modal-card {
  width: min(460px, 100%);
  padding: 1.5rem;
  border: 1px solid #344351;
  border-radius: 1.2rem;
  background: #141b23;
}

.admin-panel {
  width: min(1500px, calc(100% - 2rem));
  margin: 2rem auto 4rem;
  padding: 2rem;
  border: 1px solid #684f28;
  border-radius: 1.2rem;
  background: #171712;
}

.admin-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.admin-session-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #ffd08b;
}

.field-label {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
  color: #aebdca;
  font-size: 0.84rem;
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #3a4856;
  border-radius: 0.65rem;
  padding: 0.7rem 0.8rem;
  background: #0f161d;
  color: #f4f7fa;
  font: inherit;
}

textarea {
  resize: vertical;
}

form button[type="submit"] {
  margin-top: 1rem;
}

.form-message {
  min-height: 1.4rem;
  margin-top: 0.8rem;
  color: #9eb0c1;
}

.form-message.error {
  color: #ff9b9b;
}

.form-message.ok {
  color: #77e4aa;
}

.audit-card {
  margin-top: 1rem;
}

.audit-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.audit-entry {
  display: grid;
  grid-template-columns:
    minmax(9rem, auto)
    minmax(5rem, auto)
    minmax(7rem, auto)
    1fr;
  gap: 0.8rem;
  padding: 0.7rem;
  border-bottom: 1px solid #293440;
}

@media (max-width: 850px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .audit-entry {
    grid-template-columns: 1fr;
  }
}

/* HOMEPOWER NETWORK OBSERVATION START */

.network-subnet {
  font-size: clamp(1.1rem, 3vw, 2rem);
}

.network-observed {
  color: #f5aa42;
}

.network-ping-yes {
  color: #77e4aa;
}

.network-ping-no {
  color: #9eb0c1;
}

/* HOMEPOWER NETWORK OBSERVATION END */

/* HOMEPOWER NETWORK IDENTITY START */

.identity-confirmed,
.identity-hint,
.identity-limited,
.identity-unknown {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.identity-confirmed {
  border: 1px solid #2e8a5d;
  background: #173d2d;
  color: #8df0ba;
}

.identity-hint {
  border: 1px solid #8c682f;
  background: #3b2c16;
  color: #ffd08b;
}

.identity-limited {
  border: 1px solid #735a9b;
  background: #302341;
  color: #d8bfff;
}

.identity-unknown {
  border: 1px solid #465563;
  background: #202a33;
  color: #b9c5cf;
}

#network-observation-section
.inventory-table-wrapper {
  overflow-x: auto;
}

#network-observation-section
.inventory-table {
  min-width: 1120px;
}

/* HOMEPOWER NETWORK IDENTITY END */

/* HOMEPOWER NETWORK LINK ADMIN START */

.network-link-admin-card {
  grid-column: 1 / -1;
}

.network-link-admin-card form {
  display: grid;
  gap: 1rem;
}

.network-link-preview {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8rem;
}

.network-link-preview > div {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
  border: 1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
  background:
    rgba(255, 255, 255, 0.035);
}

.network-link-current {
  margin-top: 1.4rem;
}

.network-link-list {
  display: grid;
  gap: 0.65rem;
}

.network-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
}

.network-link-row .muted {
  margin-top: 0.25rem;
}

@media (max-width: 700px) {
  .network-link-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* HOMEPOWER NETWORK LINK ADMIN END */

/* HOMEPOWER INVENTORY INLINE EDIT START */

.inventory-table {
  min-width: 1450px;
}

.inventory-secondary {
  margin-top: 0.3rem;
  color: #8294a4;
  font-size: 0.78rem;
  line-height: 1.35;
}

.inventory-monospace {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  white-space: nowrap;
}

.inventory-admin-column {
  width: 1%;
  white-space: nowrap;
}

.inventory-edit-button {
  padding: 0.45rem 0.7rem;
  border: 1px solid #526779;
  border-radius: 0.55rem;
  background: #202d39;
  color: #dce8f2;
  cursor: pointer;
}

.inventory-edit-button:hover {
  background: #2a3a48;
}

.inventory-edit-row td {
  padding: 1rem;
  background: #111820;
}

.inventory-inline-form {
  display: grid;
  gap: 1rem;
}

.inventory-edit-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(180px, 1fr));
  gap: 0.8rem;
}

.inventory-edit-grid label {
  display: grid;
  gap: 0.35rem;
}

.inventory-edit-grid label > span {
  color: #9eb0c1;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inventory-edit-grid input,
.inventory-edit-grid select,
.inventory-edit-grid textarea {
  width: 100%;
  box-sizing: border-box;
}

.inventory-edit-notes {
  grid-column: 1 / -1;
}

.inventory-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.inventory-inline-message {
  color: #f5c16c;
}

@media (max-width: 1100px) {
  .inventory-edit-grid {
    grid-template-columns:
      repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 650px) {
  .inventory-edit-grid {
    grid-template-columns: 1fr;
  }

  .inventory-edit-notes {
    grid-column: auto;
  }
}

/* HOMEPOWER INVENTORY INLINE EDIT END */

/* HOMEPOWER VAILLANT UI START */

.vaillant-section {
  scroll-margin-top: 1rem;
}

.vaillant-heading-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.secondary-button {
  padding: 0.55rem 0.85rem;
  border: 1px solid #526779;
  border-radius: 0.6rem;
  background: #202d39;
  color: #dce8f2;
  cursor: pointer;
}

.secondary-button:hover {
  background: #2a3a48;
}

.vaillant-status-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.vaillant-primary-card {
  grid-column: span 2;
}

.vaillant-state-list {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.25rem;
}

.vaillant-state-list > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem;
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 0.7rem;
  background:
    rgba(255, 255, 255, 0.025);
}

.vaillant-state-list span {
  color: #8294a4;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vaillant-state-list strong {
  color: #e5edf4;
  font-size: 0.92rem;
}

.vaillant-history-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.9rem;
}

.vaillant-range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vaillant-range-buttons button {
  padding: 0.45rem 0.75rem;
  border: 1px solid #425464;
  border-radius: 999px;
  background: #18232d;
  color: #aebdca;
  cursor: pointer;
}

.vaillant-range-buttons button.active {
  border-color: #4d9f76;
  background: #173d2d;
  color: #9bf0c1;
}

.vaillant-chart-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.vaillant-chart-card {
  min-width: 0;
}

.vaillant-chart {
  min-height: 270px;
  margin-top: 0.8rem;
  overflow: hidden;
}

.vaillant-chart svg {
  display: block;
  width: 100%;
  height: 270px;
}

.vaillant-chart-empty {
  display: grid;
  min-height: 270px;
  place-items: center;
  color: #8294a4;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.chart-axis-line {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
}

.chart-axis-label {
  fill: #7f91a1;
  font-size: 12px;
}

.vaillant-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.vaillant-line.pressure {
  stroke: #65c49a;
}

.vaillant-line.flow {
  stroke: #f2a65a;
}

.vaillant-line.setpoint {
  stroke: #ffd166;
  stroke-dasharray: 7 5;
}

.vaillant-line.outdoor {
  stroke: #66b3ff;
}

.vaillant-line.dhw {
  stroke: #d68cff;
}

.vaillant-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  color: #9eb0c1;
  font-size: 0.76rem;
}

.vaillant-legend span::before {
  display: inline-block;
  width: 0.65rem;
  height: 0.18rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  vertical-align: middle;
  content: "";
}

.vaillant-legend .flow::before {
  background: #f2a65a;
}

.vaillant-legend .setpoint::before {
  background: #ffd166;
}

.vaillant-legend .outdoor::before {
  background: #66b3ff;
}

.vaillant-legend .dhw::before {
  background: #d68cff;
}

#vaillant-environment-pressure {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

@media (max-width: 1000px) {
  .vaillant-status-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .vaillant-primary-card {
    grid-column: 1 / -1;
  }

  .vaillant-chart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .vaillant-status-grid {
    grid-template-columns: 1fr;
  }

  .vaillant-primary-card {
    grid-column: auto;
  }

  .vaillant-state-list {
    grid-template-columns: 1fr;
  }

  .vaillant-heading-actions {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .vaillant-history-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .vaillant-chart {
    min-height: 230px;
  }

  .vaillant-chart svg {
    height: 230px;
  }
}

/* HOMEPOWER VAILLANT UI END */

/* HOMEPOWER APP STRUCTURE START */

body {
  overflow-x: hidden;
}

.app-shell {
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: 252px;
  flex-direction: column;
  padding: 1.4rem 1rem;
  border-right: 1px solid #26303a;
  background:
    linear-gradient(
      180deg,
      #101820 0%,
      #0c1218 100%
    );
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.55rem 1.5rem;
}

.brand-mark {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border-radius: 0.85rem;
  background:
    linear-gradient(
      145deg,
      #4fd08a,
      #2b9b66
    );
  color: #07140d;
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow:
    0 0.7rem 1.6rem
    rgba(65, 201, 130, 0.2);
}

.brand-name {
  color: #f4f7fa;
  font-size: 1.15rem;
  font-weight: 800;
}

.brand-subtitle {
  margin-top: 0.18rem;
  color: #728595;
  font-size: 0.7rem;
}

.sidebar-navigation {
  display: grid;
  gap: 0.28rem;
}

.app-navigation-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.8rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: #94a5b4;
  text-align: left;
}

.app-navigation-item:hover {
  border-color:
    rgba(255, 255, 255, 0.06);
  background:
    rgba(255, 255, 255, 0.04);
  color: #e7eef4;
}

.app-navigation-item.active {
  border-color:
    rgba(65, 201, 130, 0.22);
  background:
    linear-gradient(
      90deg,
      rgba(65, 201, 130, 0.18),
      rgba(65, 201, 130, 0.05)
    );
  color: #86e8b2;
}

.navigation-icon {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  place-items: center;
  font-size: 1.05rem;
}

.navigation-divider {
  height: 1px;
  margin: 0.65rem 0.45rem;
  background: #26303a;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding: 0.8rem;
  color: #728595;
  font-size: 0.75rem;
}

.sidebar-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #41c982;
  box-shadow:
    0 0 0 0.25rem
    rgba(65, 201, 130, 0.12);
}

.app-content {
  min-height: 100vh;
  margin-left: 252px;
}

.app-content .topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background:
    rgba(12, 17, 23, 0.88);
  backdrop-filter: blur(18px);
}

.app-page[hidden] {
  display: none !important;
}

.app-page.active {
  animation:
    homepower-page-enter
    180ms ease-out;
}

@keyframes homepower-page-enter {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-context-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.35rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid #26303a;
}

.page-context-heading h2 {
  margin-top: 0.35rem;
  font-size:
    clamp(1.75rem, 3vw, 2.5rem);
}

.page-context-heading p {
  max-width: 48rem;
  margin-top: 0.55rem;
  color: #8da2b5;
  line-height: 1.55;
}

.page-status-badge {
  flex: 0 0 auto;
  padding: 0.45rem 0.75rem;
  border: 1px solid
    rgba(65, 201, 130, 0.3);
  border-radius: 999px;
  background:
    rgba(65, 201, 130, 0.12);
  color: #86e8b2;
  font-size: 0.75rem;
  font-weight: 700;
}

.placeholder-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.placeholder-primary {
  grid-column: span 2;
  background:
    linear-gradient(
      140deg,
      #19362c,
      #14241f
    );
}

.placeholder-value {
  margin-top: 1rem;
  font-size:
    clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 760;
}

.placeholder-state {
  margin-top: 1.2rem;
  color: #d8e2ea;
  font-size: 1.2rem;
  font-weight: 700;
}

.empty-page-card {
  display: grid;
  min-height: 22rem;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.empty-page-card h3 {
  margin: 1rem 0 0;
  font-size: 1.35rem;
}

.empty-page-card p {
  max-width: 34rem;
  margin-top: 0.5rem;
  color: #8da2b5;
  line-height: 1.5;
}

.empty-page-icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border: 1px solid
    rgba(65, 201, 130, 0.25);
  border-radius: 1.35rem;
  background:
    rgba(65, 201, 130, 0.1);
  color: #75dda3;
  font-size: 2rem;
}

.mobile-navigation {
  display: none;
}

@media (max-width: 1100px) {
  .app-sidebar {
    width: 210px;
  }

  .app-content {
    margin-left: 210px;
  }

  .brand-subtitle {
    display: none;
  }

  .placeholder-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 5.4rem;
  }

  .app-sidebar {
    display: none;
  }

  .app-content {
    margin-left: 0;
  }

  .app-content .topbar {
    position: static;
  }

  .page-context-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .placeholder-grid {
    grid-template-columns: 1fr;
  }

  .placeholder-primary {
    grid-column: auto;
  }

  .mobile-navigation {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.8rem, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding:
      0.45rem
      max(0.35rem, env(safe-area-inset-right))
      calc(
        0.45rem
        + env(safe-area-inset-bottom)
      )
      max(0.35rem, env(safe-area-inset-left));
    border-top: 1px solid #293440;
    background:
      rgba(12, 17, 23, 0.96);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-navigation::-webkit-scrollbar {
    display: none;
  }

  .mobile-navigation button {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 0.18rem;
    scroll-snap-align: center;
    padding: 0.45rem 0.15rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: #7f91a1;
  }

  .mobile-navigation button.active {
    background:
      rgba(65, 201, 130, 0.12);
    color: #78e1a7;
  }

  .mobile-navigation span {
    font-size: 1.12rem;
  }

  .mobile-navigation small {
    overflow: hidden;
    width: 100%;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* HOMEPOWER APP STRUCTURE END */


/* HOMEPOWER MOCKUP PALETTE START */

:root {
  --hp-bg-main: #0c1118;
  --hp-bg-header: #0d121a;
  --hp-bg-sidebar: #101820;
  --hp-bg-card: #151c26;
  --hp-bg-card-soft: #121923;
  --hp-bg-card-green: #18352d;
  --hp-bg-active: #17342f;

  --hp-border: #2c3945;
  --hp-border-soft: #24313c;

  --hp-text-primary: #f0f3f7;
  --hp-text-secondary: #9cabb8;
  --hp-text-muted: #7f929f;
  --hp-text-dim: #667885;

  --hp-green: #3dbb7c;
  --hp-green-bright: #52cf8d;
  --hp-green-light: #91e2b8;
  --hp-green-dark: #20513d;
}

html {
  background: var(--hp-bg-main);
}

body {
  background:
    radial-gradient(
      circle at 12% 6%,
      rgba(54, 126, 105, 0.09),
      transparent 28rem
    ),
    var(--hp-bg-main);
  color: var(--hp-text-primary);
}

.app-sidebar {
  border-right-color: var(--hp-border);
  background:
    linear-gradient(
      180deg,
      #111a23 0%,
      var(--hp-bg-sidebar) 100%
    );
}

.app-content {
  background: var(--hp-bg-main);
}

.app-content .topbar {
  border-bottom: 1px solid var(--hp-border);
  background:
    rgba(13, 18, 26, 0.94);
}

.card,
.service-card,
.modal-card {
  border-color: var(--hp-border);
  background: var(--hp-bg-card);
  box-shadow:
    0 0.65rem 1.8rem
    rgba(0, 0, 0, 0.12);
}

.placeholder-primary,
.primary-card {
  border-color:
    rgba(61, 187, 124, 0.24);
  background:
    linear-gradient(
      135deg,
      #1a3b32 0%,
      #173029 100%
    );
}

.sidebar-brand,
.brand-name,
h1,
h2,
h3,
.metric-value,
.placeholder-value,
.service-name,
.service-status {
  color: var(--hp-text-primary);
}

.brand-subtitle,
.muted,
.metric-detail,
.page-context-heading p,
.service-meta,
.inventory-secondary,
.updated-text {
  color: var(--hp-text-secondary);
}

.eyebrow,
.card-label {
  color: #99aebe;
}

.app-navigation-item {
  color: #a4b5c2;
}

.app-navigation-item:hover {
  border-color:
    rgba(255, 255, 255, 0.08);
  background:
    rgba(255, 255, 255, 0.045);
  color: var(--hp-text-primary);
}

.app-navigation-item.active {
  border-color:
    rgba(61, 187, 124, 0.38);
  background:
    linear-gradient(
      90deg,
      rgba(61, 187, 124, 0.20),
      rgba(61, 187, 124, 0.08)
    );
  color: var(--hp-green-light);
}

.navigation-divider,
.page-context-heading {
  border-color: var(--hp-border);
}

.sidebar-footer {
  color: var(--hp-text-muted);
}

.sidebar-status-dot,
.status-dot.ok {
  background: var(--hp-green-bright);
  box-shadow:
    0 0 0 0.28rem
    rgba(82, 207, 141, 0.14);
}

.brand-mark {
  background:
    linear-gradient(
      145deg,
      #55d694,
      #31ad70
    );
  color: #092116;
  box-shadow:
    0 0.7rem 1.8rem
    rgba(61, 187, 124, 0.24);
}

.badge.ok,
.page-status-badge {
  border-color:
    rgba(61, 187, 124, 0.42);
  background:
    rgba(61, 187, 124, 0.12);
  color: var(--hp-green-light);
}

.badge.degraded,
.badge.starting {
  border-color: #8f7337;
  background: #372c18;
  color: #f1cd7a;
}

.badge.unavailable,
.badge.unhealthy,
.badge.exited {
  border-color: #85474c;
  background: #351d22;
  color: #f1a4aa;
}

.inventory-table th {
  color: #9eb0be;
}

.inventory-table td {
  border-color: var(--hp-border-soft);
  color: #dce5ec;
}

.inventory-table tbody tr:hover {
  background:
    rgba(255, 255, 255, 0.025);
}

input,
select,
textarea {
  border-color: #3a4855;
  background: #111923;
  color: var(--hp-text-primary);
}

button {
  border-color: #40515f;
}

.secondary-button,
.inventory-edit-button {
  border-color: #465a6a;
  background: #202b36;
  color: #dce6ee;
}

.secondary-button:hover,
.inventory-edit-button:hover {
  background: #293743;
}

.mobile-navigation {
  border-top-color: var(--hp-border);
  background:
    rgba(15, 22, 30, 0.97);
}

.mobile-navigation button {
  color: #8ea1b0;
}

.mobile-navigation button.active {
  background:
    rgba(61, 187, 124, 0.14);
  color: var(--hp-green-light);
}

.empty-page-icon {
  border-color:
    rgba(61, 187, 124, 0.35);
  background:
    rgba(61, 187, 124, 0.12);
  color: var(--hp-green-light);
}

/* HOMEPOWER MOCKUP PALETTE END */


/* HOMEPOWER VAILLANT PAGE START */

.vaillant-page-heading-status {
  display: grid;
  justify-items: end;
  gap: 0.55rem;
}

.vaillant-page-message {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #85474c;
  border-radius: 0.75rem;
  background: #351d22;
  color: #f1a4aa;
}

.vaillant-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.vaillant-hero-card {
  grid-column: span 2;
  border-color:
    rgba(61, 187, 124, 0.28);
  background:
    linear-gradient(
      135deg,
      #1a3b32 0%,
      #173029 100%
    );
}

.vaillant-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.vaillant-hero-value {
  margin-top: 0.8rem;
  color: var(--hp-text-primary);
  font-size:
    clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
}

.vaillant-hero-detail {
  margin-top: 0.75rem;
  color: var(--hp-text-secondary);
  line-height: 1.5;
}

.vaillant-state-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.vaillant-state-grid > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem;
  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 0.72rem;
  background:
    rgba(255, 255, 255, 0.035);
}

.vaillant-state-grid span {
  color: var(--hp-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.vaillant-state-grid strong {
  overflow-wrap: anywhere;
  color: var(--hp-text-primary);
  font-size: 0.9rem;
}

.vaillant-metric-card {
  min-height: 10.5rem;
}

.vaillant-metric-value {
  margin-top: 1rem;
  color: var(--hp-text-primary);
  font-size:
    clamp(1.8rem, 2.7vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
}

.vaillant-history-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.6rem 0 0.85rem;
}

.vaillant-range-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.vaillant-range-selector button {
  padding: 0.48rem 0.8rem;
  border: 1px solid #40515f;
  border-radius: 999px;
  background: #17202a;
  color: var(--hp-text-secondary);
  cursor: pointer;
}

.vaillant-range-selector button:hover {
  background: #202c37;
  color: var(--hp-text-primary);
}

.vaillant-range-selector button.active {
  border-color:
    rgba(61, 187, 124, 0.46);
  background:
    rgba(61, 187, 124, 0.15);
  color: var(--hp-green-light);
}

.vaillant-chart-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.vaillant-chart-card {
  min-width: 0;
}

.vaillant-chart {
  min-height: 280px;
  margin-top: 1rem;
  overflow: hidden;
}

.vaillant-chart svg {
  display: block;
  width: 100%;
  height: 280px;
}

.vaillant-chart-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: var(--hp-text-muted);
  text-align: center;
}

.vaillant-grid-line {
  stroke:
    rgba(255, 255, 255, 0.075);
  stroke-width: 1;
}

.vaillant-axis-line {
  stroke:
    rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.vaillant-axis-label {
  fill: #8295a4;
  font-size: 11px;
}

.vaillant-chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.vaillant-chart-line.pressure {
  stroke: #52cf8d;
}

.vaillant-chart-line.flow {
  stroke: #f0a45d;
}

.vaillant-chart-line.setpoint {
  stroke: #f0cf6c;
  stroke-dasharray: 7 5;
}

.vaillant-chart-line.outdoor {
  stroke: #72b7f2;
}

.vaillant-chart-line.dhw {
  stroke: #c995ed;
}

.vaillant-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.45rem;
  color: var(--hp-text-secondary);
  font-size: 0.72rem;
}

.vaillant-chart-legend span::before {
  display: inline-block;
  width: 0.7rem;
  height: 0.18rem;
  margin-right: 0.3rem;
  border-radius: 999px;
  vertical-align: middle;
  content: "";
}

.vaillant-chart-legend .flow::before {
  background: #f0a45d;
}

.vaillant-chart-legend .setpoint::before {
  background: #f0cf6c;
}

.vaillant-chart-legend .outdoor::before {
  background: #72b7f2;
}

.vaillant-chart-legend .dhw::before {
  background: #c995ed;
}

.vaillant-info-card {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.vaillant-info-card > div {
  display: grid;
  gap: 0.35rem;
}

.vaillant-info-card strong {
  color: var(--hp-text-primary);
}

@media (max-width: 1200px) {
  .vaillant-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .vaillant-hero-card {
    grid-column: 1 / -1;
  }

  .vaillant-chart-grid {
    grid-template-columns: 1fr;
  }

  .vaillant-info-card {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .vaillant-page-heading-status {
    justify-items: start;
  }

  .vaillant-summary-grid {
    grid-template-columns: 1fr;
  }

  .vaillant-hero-card {
    grid-column: auto;
  }

  .vaillant-state-grid {
    grid-template-columns: 1fr;
  }

  .vaillant-history-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .vaillant-chart {
    min-height: 235px;
  }

  .vaillant-chart svg {
    height: 235px;
  }

  .vaillant-info-card {
    grid-template-columns: 1fr;
  }
}

/* HOMEPOWER VAILLANT PAGE END */


/* HOMEPOWER VAILLANT CHART POINT FIX START */

.vaillant-chart-point {
  vector-effect: non-scaling-stroke;
}

.vaillant-chart-point.pressure {
  fill: #52cf8d;
}

.vaillant-chart-point.flow {
  fill: #f0a45d;
}

.vaillant-chart-point.setpoint {
  fill: #f0cf6c;
}

.vaillant-chart-point.outdoor {
  fill: #72b7f2;
}

.vaillant-chart-point.dhw {
  fill: #c995ed;
}

/* HOMEPOWER VAILLANT CHART POINT FIX END */

/* HOMEPOWER TIBBER POWER PAGE START */

.power-page-heading-status {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}

.power-page-message {
  border: 1px solid var(--hp-border);
  border-radius: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
}

.power-page-message.degraded {
  background: rgba(230, 177, 71, 0.1);
}

.power-page-message.unavailable {
  background: rgba(217, 92, 92, 0.1);
}

.power-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.power-hero-card {
  grid-column: span 2;
}

.power-hero-value {
  display: block;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
  margin: 1rem 0 0.6rem;
}

.power-hero-detail,
.power-metric-card span {
  color: var(--hp-text-secondary);
}

.power-state-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.power-state-grid > div {
  display: grid;
  gap: 0.35rem;
}

.power-state-grid span {
  color: var(--hp-text-secondary);
  font-size: 0.8rem;
}

.power-metric-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.power-metric-value {
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.power-chart-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.power-chart-card {
  min-width: 0;
}

.power-card-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.power-chart {
  min-height: 280px;
}

.power-chart-empty {
  align-items: center;
  color: var(--hp-text-secondary);
  display: flex;
  justify-content: center;
  min-height: 260px;
}

.power-bars {
  align-items: end;
  display: flex;
  gap: 0.25rem;
  height: 250px;
  overflow: hidden;
}

.power-bar-column {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: 100%;
  justify-content: end;
  min-width: 0;
}

.power-bar {
  background: #52cf8d;
  border-radius: 0.25rem 0.25rem 0 0;
  min-height: 3px;
  opacity: 0.86;
  width: min(100%, 1.4rem);
}

.power-bar-column span {
  color: var(--hp-text-secondary);
  font-size: 0.62rem;
  margin-top: 0.35rem;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  width: 100%;
}

.power-info-card {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.power-info-card > div {
  display: grid;
  gap: 0.35rem;
}

.power-info-card span {
  color: var(--hp-text-secondary);
  font-size: 0.8rem;
}

@media (max-width: 1200px) {
  .power-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .power-chart-grid {
    grid-template-columns: 1fr;
  }

  .power-info-card {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .power-page-heading-status {
    justify-items: start;
  }

  .power-summary-grid {
    grid-template-columns: 1fr;
  }

  .power-hero-card {
    grid-column: auto;
  }

  .power-state-grid {
    grid-template-columns: 1fr;
  }

  .power-info-card {
    grid-template-columns: 1fr;
  }

  .power-bar-column span {
    display: none;
  }
}

/* HOMEPOWER TIBBER POWER PAGE END */

/* HOMEPOWER NORGESPRIS DASHBOARD START */

.power-norgespris-section {
  margin-top: 1rem;
}

.power-section-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.power-section-heading h3 {
  margin: 0.25rem 0;
}

.power-section-heading p {
  color: var(--hp-text-secondary);
  margin: 0;
}

.power-norgespris-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}

.power-norgespris-hero {
  grid-column: span 2;
}

.power-norgespris-hero-value {
  display: block;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  margin: 1rem 0 0.6rem;
}

.power-norgespris-costs {
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.power-norgespris-costs > div {
  display: grid;
  gap: 0.35rem;
}

.power-norgespris-costs span {
  color: var(--hp-text-secondary);
  font-size: 0.8rem;
}

.power-norgespris-cap-card {
  margin-top: 1rem;
}

.power-cap-heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.power-cap-heading > div {
  display: grid;
  gap: 0.35rem;
}

.power-cap-heading span {
  color: var(--hp-text-secondary);
  font-size: 0.8rem;
}

.power-cap-track {
  background: rgba(127, 127, 127, 0.18);
  border-radius: 999px;
  height: 0.8rem;
  margin-top: 1rem;
  overflow: hidden;
}

.power-cap-fill {
  background: #52cf8d;
  border-radius: inherit;
  height: 100%;
  min-width: 0;
  transition: width 0.35s ease;
}

.power-norgespris-disclaimer {
  color: var(--hp-text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 1rem 0 0;
}

@media (max-width: 1200px) {
  .power-norgespris-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .power-section-heading,
  .power-cap-heading {
    align-items: start;
    flex-direction: column;
  }

  .power-norgespris-grid {
    grid-template-columns: 1fr;
  }

  .power-norgespris-hero {
    grid-column: auto;
  }

  .power-norgespris-costs {
    grid-template-columns: 1fr;
  }
}

/* HOMEPOWER NORGESPRIS DASHBOARD END */

/* HOMEPOWER TIBBER LIVE UI START */

.power-live-section {
  margin-bottom: 1.25rem;
}

.power-live-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.power-live-hero {
  grid-column: span 2;
}

.power-live-value {
  display: block;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 0.95;
  margin: 1rem 0 0.65rem;
  letter-spacing: -0.045em;
}

.power-live-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.power-live-stats div {
  display: grid;
  gap: 0.35rem;
}

.power-live-stats span,
.power-quality-list dt,
.power-card-heading span {
  color: var(--hp-text-secondary);
  font-size: 0.8rem;
}

.power-live-detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  margin-top: 1rem;
}

.power-live-chart {
  min-height: 250px;
  margin-top: 1rem;
}

.power-live-chart svg {
  display: block;
  height: 250px;
  overflow: visible;
  width: 100%;
}

.power-live-grid-line {
  stroke: currentColor;
  stroke-opacity: 0.12;
  stroke-width: 1;
}

.power-live-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.power-quality-list {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
}

.power-quality-list > div {
  align-items: baseline;
  border-top: 1px solid rgba(127, 127, 127, 0.16);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.72rem 0;
}

.power-quality-list dd {
  font-weight: 700;
  margin: 0;
  text-align: right;
}

.power-quality-note {
  color: var(--hp-text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 1rem 0 0;
}

@media (max-width: 1100px) {
  .power-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .power-live-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .power-live-grid {
    grid-template-columns: 1fr;
  }

  .power-live-hero {
    grid-column: auto;
  }

  .power-live-stats {
    grid-template-columns: 1fr;
  }
}

/* HOMEPOWER TIBBER LIVE UI END */
/* HOMEPOWER WEATHER MODULE START */
.weather-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr))}.weather-hero{grid-column:span 2;grid-row:span 2}.weather-temp{display:block;font-size:clamp(3.5rem,8vw,6.5rem);letter-spacing:-.06em;line-height:.95;margin:1rem 0}.weather-grid .card>strong:not(.weather-temp){display:block;font-size:2rem;margin-top:1rem}.weather-hourly-card,.weather-source-note{margin-top:1rem}.weather-hourly{display:grid;gap:.65rem;grid-template-columns:repeat(6,minmax(110px,1fr));margin-top:1rem;overflow-x:auto}.weather-hour{background:rgba(127,127,127,.08);border-radius:.8rem;display:grid;gap:.35rem;padding:.8rem}.weather-hour span,.weather-hour small{color:var(--hp-text-secondary);font-size:.78rem}.weather-source-note p{color:var(--hp-text-secondary);margin-bottom:0}@media(max-width:900px){.weather-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weather-hourly{grid-template-columns:repeat(12,minmax(105px,1fr))}}@media(max-width:620px){.weather-grid{grid-template-columns:1fr}.weather-hero{grid-column:auto;grid-row:auto}}
/* HOMEPOWER WEATHER MODULE END */


/* Stage 5E: weather visual polish, presentation only. */
.weather-hero{background:radial-gradient(circle at 86% 18%,rgba(118,171,214,.16),transparent 38%),var(--hp-card-bg)}
.weather-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.weather-current-icon{font-size:clamp(4.5rem,9vw,7.5rem);line-height:1;opacity:.92;filter:saturate(.8)}
.weather-current-label{font-size:1.15rem;font-weight:700;margin:.4rem 0 .25rem}
.weather-metric small{display:block;color:var(--hp-text-secondary);margin-top:.55rem}
.weather-hour{position:relative;min-height:178px;grid-template-rows:auto auto auto auto 12px auto;align-content:start;transition:transform .16s ease,background .16s ease}
.weather-hour:hover{background:rgba(127,127,127,.13);transform:translateY(-2px)}
.weather-hour-time{font-weight:600;text-transform:capitalize}
.weather-hour-icon{font-size:2rem;line-height:1.2;margin:.15rem 0}
.weather-hour-condition{color:var(--hp-text-secondary);font-size:.78rem;min-height:2.1em}
.weather-temp-track{background:rgba(127,127,127,.14);border-radius:999px;height:3px;position:relative;margin:.35rem 0}
.weather-temp-track i{background:currentColor;border:2px solid var(--hp-card-bg);border-radius:50%;height:9px;position:absolute;top:50%;transform:translate(-50%,-50%);width:9px}
.weather-rain-active{font-weight:700}
@media(max-width:620px){.weather-current-icon{font-size:4rem}.weather-hour{min-height:164px}}

/* Stage 5J: BoatPower-inspired weather timeline and isolated MET alerts. */
.weather-alerts{display:grid;gap:1rem;margin-top:1rem}.weather-alerts-loading p,.weather-alert-unavailable p{color:var(--hp-text-secondary);margin:.45rem 0 0}.weather-alert-clear{align-items:center;display:flex;justify-content:space-between}.weather-alert-clear strong{display:block;font-size:1.15rem;margin-top:.25rem}.weather-alert-clear p{color:var(--hp-text-secondary);font-size:.82rem;margin:.35rem 0 0}.weather-alert-clear>span{font-size:1.8rem;opacity:.7}.weather-alert{border-left:5px solid rgba(127,127,127,.5)}.weather-alert-yellow{border-left-color:#f1c84b;background:linear-gradient(90deg,rgba(241,200,75,.12),transparent 45%),var(--hp-card-bg)}.weather-alert-orange{border-left-color:#ef8d32;background:linear-gradient(90deg,rgba(239,141,50,.13),transparent 45%),var(--hp-card-bg)}.weather-alert-red{border-left-color:#e45b5b;background:linear-gradient(90deg,rgba(228,91,91,.14),transparent 45%),var(--hp-card-bg)}.weather-alert-head{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.weather-alert h3{font-size:1.3rem;margin:.25rem 0}.weather-alert-head p,.weather-alert details p{color:var(--hp-text-secondary)}.weather-alert-level{border:1px solid currentColor;border-radius:999px;font-size:.75rem;font-weight:800;padding:.35rem .65rem;text-transform:uppercase}.weather-alert details{border-top:1px solid rgba(127,127,127,.17);margin-top:1rem;padding-top:.8rem}.weather-alert summary{cursor:pointer;font-weight:700}.weather-timeline-heading{align-items:flex-start;display:flex;justify-content:space-between}.weather-timeline-heading h3{font-size:1.35rem;margin:.25rem 0}.weather-timeline-heading p{color:var(--hp-text-secondary);margin:0}.weather-timeline{display:grid;grid-template-columns:82px minmax(0,1fr);overflow-x:auto}.weather-timeline-labels{background:rgba(7,24,39,.32);border-right:1px solid rgba(127,127,127,.15);display:grid;grid-template-rows:36px 70px 42px 42px 46px;min-width:82px;padding-top:.8rem}.weather-timeline-labels span{align-items:center;color:var(--hp-text-secondary);display:flex;font-size:.68rem;font-weight:800;padding:0 .35rem;text-transform:uppercase}.weather-timeline-columns{display:grid;grid-auto-columns:minmax(112px,1fr);grid-auto-flow:column;min-width:1344px}.weather-timeline-cell{border-right:1px solid rgba(127,127,127,.15);display:grid;grid-template-rows:36px 70px 42px 42px 46px;padding-top:.8rem;text-align:center}.weather-timeline-cell>*{align-items:center;display:flex;justify-content:center}.weather-hour-time{font-size:.9rem}.weather-hour-icon{font-size:2rem}.weather-hour-condition{display:none}.weather-hour-temp{font-size:1.2rem}.weather-hour-rain{font-size:.9rem}.weather-hour-wind{font-size:.82rem;font-weight:700;gap:.25rem}.weather-hour-wind small{color:var(--hp-text-secondary)}.weather-wind-arrow{display:inline-block;font-size:1.15rem;transform-origin:center}.weather-empty{color:var(--hp-text-secondary);padding:1rem}.weather-hourly-card{overflow:hidden;padding-bottom:0}.weather-hourly-card .weather-timeline{margin-left:-1rem;margin-right:-1rem;margin-top:1rem}@media(max-width:620px){.weather-alert-head{display:block}.weather-alert-level{display:inline-block;margin-top:.6rem}.weather-timeline{grid-template-columns:68px minmax(0,1fr)}.weather-timeline-labels{min-width:68px}.weather-timeline-columns{grid-auto-columns:104px;min-width:1248px}}

/* Final Stage 5J weather UI adjustment: localized alert metadata and mobile timeline affordance. */
.weather-timeline-hint{display:none;color:var(--hp-text-secondary);font-size:.75rem;font-weight:700;white-space:nowrap}
.weather-timeline-shell{position:relative;margin-left:-1rem;margin-right:-1rem;margin-top:1rem}
.weather-timeline-shell .weather-timeline{margin:0}
.weather-timeline-shell::after{position:absolute;top:0;right:0;bottom:0;width:2.5rem;content:"";pointer-events:none;background:linear-gradient(90deg,transparent,var(--hp-bg-card))}
@media(max-width:760px){.weather-page-heading{align-items:flex-start;flex-direction:row;gap:.75rem;margin-bottom:1rem;padding-bottom:.9rem}.weather-page-heading>div{min-width:0}.weather-page-heading .badge{flex:0 0 auto;margin-top:.1rem}.weather-source-note{margin-bottom:1rem}}
@media(max-width:620px){.weather-timeline-heading{display:block}.weather-timeline-hint{display:block;margin-top:.55rem}.weather-timeline-shell::after{width:2rem}.weather-alert h3{overflow-wrap:anywhere}}

/* HOMEPOWER TESLA MAP MODULE START */
.tesla-page-heading{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.tesla-page-message{background:rgba(224,90,90,.12);border:1px solid rgba(224,90,90,.3);border-radius:.85rem;margin:0 0 1rem;padding:.85rem 1rem}.tesla-map-card{margin-bottom:1rem}.tesla-section-heading{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.tesla-section-heading h3{font-size:1.35rem;margin:.25rem 0}.tesla-section-heading p{color:var(--hp-text-secondary);margin:0}.tesla-map-privacy{border:1px solid rgba(127,127,127,.25);border-radius:999px;color:var(--hp-text-secondary);font-size:.72rem;font-weight:700;padding:.35rem .65rem;white-space:nowrap}.tesla-map{border-radius:.9rem;height:min(52vh,520px);margin-top:1rem;min-height:340px;overflow:hidden;z-index:0}.tesla-map-message{align-items:center;background:rgba(127,127,127,.08);border-radius:.9rem;color:var(--hp-text-secondary);display:flex;justify-content:center;margin-top:1rem;min-height:180px;padding:1rem;text-align:center}.tesla-map-note{color:var(--hp-text-secondary);font-size:.78rem;line-height:1.5;margin:.8rem 0 0}.tesla-vehicle-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.tesla-card-heading{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.tesla-card-heading h3{font-size:1.55rem;margin:.25rem 0}.tesla-state-dot{border-radius:50%;box-shadow:0 0 0 5px rgba(127,127,127,.09);height:.75rem;margin-top:.35rem;width:.75rem}.tesla-state-dot.online{background:#52cf8d}.tesla-state-dot.asleep{background:#72a9d6}.tesla-state-dot.offline{background:#e09a54}.tesla-state-dot.unknown{background:#999}.tesla-activity{display:block;font-size:1.05rem;margin-top:.45rem}.tesla-primary-metrics{display:grid;gap:.8rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.2rem}.tesla-primary-metrics>div{background:rgba(127,127,127,.07);border-radius:.75rem;padding:.8rem}.tesla-primary-metrics span{color:var(--hp-text-secondary);display:block;font-size:.72rem;margin-bottom:.3rem}.tesla-primary-metrics strong{font-size:1.05rem}.tesla-detail-list{display:grid;margin:1rem 0 0}.tesla-detail-list>div{align-items:baseline;border-top:1px solid rgba(127,127,127,.14);display:flex;gap:1rem;justify-content:space-between;padding:.65rem 0}.tesla-detail-list dt{color:var(--hp-text-secondary);font-size:.78rem}.tesla-detail-list dd{font-weight:700;margin:0;max-width:70%;overflow-wrap:anywhere;text-align:right}.tesla-card-footnote{color:var(--hp-text-secondary);font-size:.76rem;line-height:1.5;margin:1rem 0 0}.leaflet-popup-content-wrapper,.leaflet-popup-tip{color:#1e2933}.leaflet-container{font-family:inherit}
@media(max-width:1050px){.tesla-primary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tesla-page-heading,.tesla-section-heading{display:block}.tesla-page-heading .status-pill,.tesla-map-privacy{display:inline-block;margin-top:.7rem}.tesla-vehicle-grid{grid-template-columns:1fr}.tesla-map{height:420px;min-height:300px}}
@media(max-width:480px){.tesla-primary-metrics{grid-template-columns:1fr 1fr}.tesla-map{height:360px}}
/* HOMEPOWER TESLA MAP MODULE END */

.tesla-wake-button{margin-top:1rem;width:100%}.tesla-wake-button:disabled{cursor:wait;opacity:.7}

/* HOMEPOWER TESLA DAILY TRACK FOUNDATION START */
.tesla-map-vehicle-icon{background:transparent;border:0;overflow:visible}.tesla-map-car{align-items:center;background:var(--hp-accent,#4d90c8);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35);color:#fff;display:flex;font-size:.8rem;height:30px;justify-content:center;width:30px}.tesla-map-label{background:rgba(10,24,37,.92);border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#fff;font-size:.72rem;font-weight:800;left:36px;line-height:1;padding:.36rem .55rem;position:absolute;top:3px;white-space:nowrap}.leaflet-container .tesla-map-vehicle-icon{font-family:inherit}
/* HOMEPOWER TESLA DAILY TRACK FOUNDATION END */


/* HOMEPOWER LOCAL CAMERA MODULE START */
.camera-page-heading{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.camera-page-message{background:rgba(224,90,90,.12);border:1px solid rgba(224,90,90,.3);border-radius:.85rem;margin:0 0 1rem;padding:.85rem 1rem}.camera-grid{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}.camera-card{overflow:hidden}.camera-card-heading{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.camera-card-heading h3{font-size:1.45rem;margin:.2rem 0}.camera-card-heading p{color:var(--hp-text-secondary);margin:.25rem 0 0}.camera-live-status{border:1px solid rgba(127,127,127,.3);border-radius:999px;font-size:.74rem;font-weight:800;padding:.35rem .65rem;white-space:nowrap}.camera-live-status.online{background:rgba(82,207,141,.12);border-color:rgba(82,207,141,.5)}.camera-live-status.offline{background:rgba(224,90,90,.12);border-color:rgba(224,90,90,.5)}.camera-live-status.degraded{background:rgba(224,154,84,.12);border-color:rgba(224,154,84,.5)}.camera-preview-shell{align-items:center;aspect-ratio:16/9;background:#07131d;border-radius:.9rem;display:flex;justify-content:center;margin-top:1rem;overflow:hidden;position:relative}.camera-preview{height:100%;object-fit:cover;width:100%}.camera-preview-placeholder{color:#c5d0d8;padding:2rem;text-align:center}.camera-actions{display:flex;gap:.75rem;margin-top:1rem}.camera-actions .primary-button,.camera-actions .secondary-button{align-items:center;display:inline-flex;justify-content:center;text-decoration:none}.camera-card-note{color:var(--hp-text-secondary);font-size:.78rem;line-height:1.5;margin:.9rem 0 0}@media(max-width:620px){.camera-page-heading{display:block}.camera-page-heading .status-pill{display:inline-block;margin-top:.7rem}.camera-card-heading{display:block}.camera-live-status{display:inline-block;margin-top:.7rem}.camera-actions{flex-direction:column}.camera-actions>*{width:100%}}
.camera-live-shell{isolation:isolate}.camera-live-frame{background:#07131d;border:0;height:100%;inset:0;position:absolute;width:100%;z-index:2}.camera-live-frame[hidden]{display:none}.camera-live-fallback{inset:0;position:absolute;z-index:1}.camera-preview-placeholder{position:relative;z-index:0}.camera-live-shell.is-connected .camera-preview-placeholder{display:none}
/* HOMEPOWER LOCAL CAMERA MODULE END */

.camera-controls{margin-top:1rem;padding:1rem;border:1px solid var(--border-color,#d8dee7);border-radius:14px}.camera-ptz-pad{display:grid;grid-template-columns:repeat(3,3rem);grid-template-areas:". up ." "left stop right" ". down .";gap:.45rem;justify-content:center}.camera-ptz-pad button{min-height:3rem;border-radius:10px;border:1px solid #cbd5e1;background:#fff;font-size:1.35rem;touch-action:none}.camera-ptz-pad [data-ptz="MOVE_UP"]{grid-area:up}.camera-ptz-pad [data-ptz="MOVE_LEFT"]{grid-area:left}.camera-ptz-pad [data-ptz-stop]{grid-area:stop}.camera-ptz-pad [data-ptz="MOVE_RIGHT"]{grid-area:right}.camera-ptz-pad [data-ptz="MOVE_DOWN"]{grid-area:down}.camera-presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.camera-control-status{margin:.75rem 0 0;color:#64748b;font-size:.9rem}.camera-preset-button{text-transform:none}

/* HOMEPOWER FUNCTIONAL NAVIGATION STAGE5N START */
.context-tabs {
  display: flex;
  gap: 0.55rem;
  margin: 0 0 1.35rem;
  padding: 0.35rem;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(18px);
}
.context-tab {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0.68rem 1rem;
  border: 0;
  border-radius: 12px;
  color: var(--muted, #94a3b8);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.context-tab:hover { color: var(--text, #f8fafc); transform: translateY(-1px); }
.context-tab.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.82));
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.22);
}
.context-panel[hidden] { display: none !important; }
.functional-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.functional-placeholder-card h3 { margin: 0.5rem 0 0.45rem; }
.functional-placeholder-card p { margin: 0; color: var(--muted, #94a3b8); line-height: 1.55; }
.source-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.source-tags span { padding: 0.36rem 0.66rem; border-radius: 999px; background: rgba(59, 130, 246, 0.14); color: #bfdbfe; font-size: 0.82rem; font-weight: 700; }
@media (max-width: 760px) {
  .functional-placeholder-grid { grid-template-columns: 1fr; }
  .context-tabs { margin-inline: -0.15rem; }
}
/* HOMEPOWER FUNCTIONAL NAVIGATION STAGE5N END */

/* Stage 5O: live Netatmo weather station */
.netatmo-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:1.4rem 0 1rem}.netatmo-heading h3{margin:.25rem 0 .35rem;font-size:1.7rem}.netatmo-heading p{margin:0;color:var(--muted)}.netatmo-station-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}.netatmo-station-card{grid-column:span 12}.netatmo-module-card{grid-column:span 4;min-height:190px}.netatmo-module-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.netatmo-module-top h4{margin:.25rem 0 0;font-size:1.25rem}.netatmo-health{font-size:.78rem;padding:.35rem .6rem;border-radius:999px;background:rgba(126,146,172,.15);color:var(--muted)}.netatmo-health.ok{background:rgba(45,196,128,.14);color:#83e1b4}.netatmo-health.critical{background:rgba(255,90,90,.14);color:#ff9e9e}.netatmo-measures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}.netatmo-measure{padding:.7rem .8rem;border:1px solid rgba(139,159,184,.14);border-radius:14px;background:rgba(255,255,255,.025)}.netatmo-measure span{display:block;color:var(--muted);font-size:.75rem}.netatmo-measure strong{display:block;margin-top:.2rem;font-size:1.05rem}.netatmo-meta{margin-top:1rem;color:var(--muted);font-size:.83rem}.netatmo-empty{grid-column:span 12}.netatmo-loading-card{grid-column:span 12}@media(max-width:1050px){.netatmo-module-card{grid-column:span 6}}@media(max-width:680px){.netatmo-heading{align-items:center}.netatmo-module-card{grid-column:span 12}.netatmo-measures{grid-template-columns:1fr 1fr}}


/* Stage 5T: unified inventory and network presence list. */
.device-list-heading { align-items: flex-start; }
.device-summary-grid { margin-bottom: 1rem; }
.device-filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1rem; }
.device-filter-bar button { border-radius: 999px; padding: .55rem .9rem; }
.device-filter-bar button.active { background: rgba(61,187,124,.18); border-color: rgba(61,187,124,.6); color: var(--hp-green-light); }
.device-state { border: 1px solid transparent; border-radius: 999px; display: inline-block; font-size: .74rem; font-weight: 800; padding: .28rem .55rem; white-space: nowrap; }
.device-state-online { background: rgba(82,207,141,.12); border-color: rgba(82,207,141,.45); color: #8be8b6; }
.device-state-offline { background: rgba(224,90,90,.12); border-color: rgba(224,90,90,.4); color: #ffaaaa; }
.device-state-unregistered { background: rgba(224,154,84,.12); border-color: rgba(224,154,84,.45); color: #f3c286; }
.unified-device-table { min-width: 980px; }
@media (max-width: 760px) { .device-filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; } .device-filter-bar button { flex: 0 0 auto; } }


/* Stage 5U: sortable and inline-editable unified device list. */
.device-sort-button {
  appearance: none; border: 0; background: transparent; color: inherit; font: inherit;
  font-weight: 700; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.device-sort-button::after { content: "↕"; opacity: .38; font-size: .85em; }
.device-sort-button.active[data-sort-direction="asc"]::after { content: "↑"; opacity: 1; }
.device-sort-button.active[data-sort-direction="desc"]::after { content: "↓"; opacity: 1; }
.device-inline-input { display: none; width: 100%; min-width: 8rem; border: 1px solid var(--border, #334155); border-radius: .45rem; background: var(--surface, #111827); color: inherit; padding: .42rem .55rem; font: inherit; }
html[data-homepower-admin-unlocked="yes"] .device-inline-value { display: none; }
html[data-homepower-admin-unlocked="yes"] .device-inline-input { display: block; }
.device-inline-input.saving { opacity: .55; }
.device-inline-input.error { border-color: #ef4444; }
.device-inline-cell { min-width: 10rem; }

/* Stage 5W: controlled inventory actions from unified device list. */
.device-inventory-action { min-width: 12rem; max-width: 100%; }
.device-inventory-dialog { border: 0; border-radius: 1rem; padding: 0; width: min(34rem, calc(100vw - 2rem)); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.28); }
.device-inventory-dialog::backdrop { background: rgba(9,18,32,.58); }
.device-inventory-dialog-card { display: grid; gap: .85rem; padding: 1.1rem; }
.device-inventory-dialog-card header, .device-inventory-dialog-card footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.device-inventory-dialog-card label { display: grid; gap: .35rem; font-weight: 650; }
.device-inventory-dialog-card input, .device-inventory-dialog-card select, .device-inventory-dialog-card textarea { width: 100%; }
.device-inventory-dialog-card textarea { min-height: 5rem; resize: vertical; }

/* Tesla factual-now presentation */
.tesla-vehicle-card{border-top:3px solid var(--tesla-vehicle-color,#6f8497)}
.tesla-live-status{align-items:center;color:var(--hp-text-secondary);display:inline-flex;font-size:.76rem;font-weight:800;gap:.45rem;letter-spacing:.01em}
.tesla-live-status i{background:#8a96a0;border-radius:50%;box-shadow:0 0 0 4px rgba(127,127,127,.09);height:.55rem;width:.55rem}
.tesla-live-status.active i{background:#52cf8d}.tesla-live-status.asleep i{background:#72a9d6}.tesla-live-status.offline i{background:#e09a54}.tesla-live-status.recent i{background:var(--tesla-vehicle-color)}
.tesla-metric span{align-items:center;display:flex;gap:.45rem;justify-content:space-between}.tesla-metric span small{font-size:.62rem;font-weight:700;text-transform:none}.tesla-metric.fresh span small{color:#52a878}.tesla-metric.stale{opacity:.66}.tesla-metric.stale span small{color:var(--hp-text-secondary)}.tesla-metric time{color:var(--hp-text-secondary);display:block;font-size:.66rem;margin-top:.25rem}
.tesla-card-footnote{display:grid;gap:.35rem;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:.2rem}.tesla-card-footnote span{display:flex;flex-direction:column}.tesla-card-footnote strong{color:var(--hp-text-primary);font-size:.8rem;margin-top:.1rem}
.tesla-map-vehicle-icon{background:transparent;border:0;overflow:visible}.tesla-map-car{align-items:center;background:var(--tesla-vehicle-color,#6f8497);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35);display:flex;height:32px;justify-content:center;transform:rotate(var(--tesla-heading,0deg));width:32px}.tesla-map-car svg{fill:#fff;height:20px;transform:rotate(calc(-1 * var(--tesla-heading,0deg)));width:20px}.tesla-map-label{background:rgba(10,24,37,.92);border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#fff;font-size:.72rem;font-weight:800;left:var(--tesla-label-x,34px);line-height:1;padding:.36rem .55rem;position:absolute;top:var(--tesla-label-y,4px);white-space:nowrap}
@media(max-width:760px){.tesla-card-footnote{grid-template-columns:1fr 1fr}.tesla-card-footnote span:last-child{grid-column:1/-1}}