/* AERO² Corporate Design. Shared by service portal surfaces, not documents. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --aero-navy: #0f1d3d;
  --aero-blue: #1d5ca1;
  --aero-sky: #7fb0ff;
  --aero-ice: #c7dbf6;
  --aero-heat-dark: #a8391f;
  --aero-heat: #dd6a2e;
  --aero-apricot: #f2b071;
  /* Tints of the CD light colours: quiet surfaces, dark text, no status meaning. */
  --aero-heat-soft: #fcebdc;
  --aero-heat-tint: #f9e6d6;
  --aero-heat-line: #eed4bf;
  --aero-heat-button: #f7d9bb;
  --aero-power-soft: #e9f1fb;
  --aero-power-tint: #e5effc;
  --aero-power-line: #d5e1f1;
  /* Customer preference: solar yellow and storage green identify equipment. */
  --pv-ink: #7b5b13;
  --pv-soft: #fff7df;
  --pv-tint: #ffefbd;
  --pv-line: #f0dea5;
  --battery-ink: #2f6942;
  --battery-soft: #eef7ef;
  --battery-tint: #dceedf;
  --battery-line: #bfdcc6;
  --aero-sand: #f3f0e7;
  --aero-muted: #4d5b53;
  --aero-line: #e6e9e5;
  --aero-body: "Public Sans", Arial, sans-serif;
  --aero-heading: "Archivo", Arial, sans-serif;
  --ink: var(--aero-navy);
  --ink-soft: var(--aero-muted);
  --text: var(--aero-navy);
  --muted: var(--aero-muted);
  --bg: var(--aero-sand);
  --canvas: var(--aero-sand);
  --panel: #fff;
  --surface: #fff;
  --surface-soft: #f7f8f6;
  --line: var(--aero-line);
  --line-strong: #bdc6be;
  --brand: var(--aero-blue);
  --brand-dark: var(--aero-navy);
  --blue: var(--aero-blue);
  --blue-dark: var(--aero-navy);
  --blue-soft: #edf3fc;
  --navy: var(--aero-navy);
  --navy-2: var(--aero-navy);
  --accent: var(--aero-blue);
  --accent-dark: var(--aero-navy);
  --focus: var(--aero-blue);
  --lime: var(--aero-ice);
  --mint: #edf3fc;
  --faq-navy: var(--aero-navy);
  --faq-blue: var(--aero-blue);
  --faq-mint: var(--aero-blue);
  --faq-text: var(--aero-navy);
  --faq-muted: var(--aero-muted);
  --faq-line: var(--aero-line);
  --faq-soft: #f7f8f6;
  --shadow: 0 8px 26px rgb(15 29 61 / 6%);
  --product-ink: var(--aero-blue);
  --product-soft: #f5f6f3;
  --product-tint: var(--aero-power-tint);
  --product-line: var(--aero-line);
  --product-button: var(--aero-ice);
  --product-button-hover: #b6cff1;
  font-family: var(--aero-body);
  background: var(--aero-sand);
  color: var(--aero-navy);
}

body[data-portal-page] {
  background: var(--aero-sand);
  color: var(--aero-navy);
  font-family: var(--aero-body);
}
/* AERO² = warmth; user-selected yellow for PV and green for storage. */
body:is([data-portal-page="midea"], [data-portal-page="midea-fields"]),
body[data-portal-page] .product-area-wp {
  --product-ink: var(--aero-heat-dark);
  --product-soft: var(--aero-heat-soft);
  --product-tint: var(--aero-heat-tint);
  --product-line: var(--aero-heat-line);
  --product-button: var(--aero-heat-button);
  --product-button-hover: var(--aero-apricot);
}
body:is([data-portal-page="index"], [data-portal-page="vnb-energy"]),
body[data-portal-page] .product-area-pv {
  --product-ink: var(--pv-ink);
  --product-soft: var(--pv-soft);
  --product-tint: var(--pv-tint);
  --product-line: var(--pv-line);
  --product-button: var(--pv-tint);
  --product-button-hover: var(--pv-line);
}
/* Here green was a navigation brand token; equipment status greens stay intact. */
body:is([data-portal-page="admin"], [data-portal-page="installations"],
  [data-portal-page="news"], [data-portal-page="onboarding"],
  [data-portal-page="profile"], [data-portal-page="notification-report"]) {
  --green: var(--aero-blue);
  --green-dark: var(--aero-navy);
}
body[data-portal-page] :is(button, input, select, textarea),
#dwwAuthRoot {
  font-family: var(--aero-body);
}
body[data-portal-page] :is(h1, h2, h3, h4, h5, h6),
:is(.brand-copy, .admin-brand, .faq-brand, .profile-brand, .report-brand, .usage-brand) strong {
  font-family: var(--aero-heading);
  font-weight: 700;
  letter-spacing: -.025em;
}
body[data-portal-page] h1 { font-weight: 800; line-height: 1.08; }

/* Original transparent logos: positive on light surfaces, white on Navy. */
body[data-portal-page] .dww-brand-logo {
  display: block;
  width: 204px;
  min-width: 146px;
  height: auto;
  flex: 0 0 auto;
  padding: 8px;
  background: transparent;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body[data-portal-page] :is(.site-header, .admin-header, .faq-header, .profile-header, .report-header, .usage-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 88px;
  padding: 14px clamp(18px, 4vw, 64px);
  gap: 18px;
  flex-wrap: wrap;
  background: #fff;
  color: var(--aero-navy);
  border-bottom: 1px solid var(--aero-line);
  box-shadow: none;
}
body[data-portal-page] :is(.brand, .admin-brand, .faq-brand, .profile-brand, .report-brand, .usage-brand) {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--aero-navy);
  min-width: 0;
  gap: 18px;
}
body[data-portal-page] .brand-copy { display: flex; flex-direction: column; }
body[data-portal-page] :is(.brand, .admin-brand, .faq-brand, .profile-brand, .report-brand, .usage-brand) small {
  color: var(--aero-muted);
  font-size: 11px;
  line-height: 1.4;
}
body[data-portal-page] :is(.site-header, .admin-header, .profile-header, .report-header) nav {
  margin-right: 0;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-portal-page] :is(.site-header, .admin-header, .profile-header, .report-header) nav a,
body[data-portal-page] .header-faq-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--aero-line);
  border-radius: 999px;
  background: #fff;
  color: var(--aero-navy);
}
body[data-portal-page] :is(.site-header, .admin-header, .profile-header, .report-header) nav a:is(:hover, .active),
body[data-portal-page] .header-faq-link:hover { background: var(--aero-ice); }

/* Keep the complete navigation reachable, including administration on phones. */
html.dww-authenticated { --dww-auth-safe-top: 72px; }
.dww-auth-bar {
  inset: 0 0 auto;
  min-height: 64px;
  max-width: 100%;
  padding: 10px 18px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: var(--aero-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgb(15 29 61 / 10%);
  scrollbar-color: var(--aero-sky) var(--aero-navy);
}
.dww-auth-portals {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 3px;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dww-auth-portals a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.dww-auth-portals a > span { display: none; }
.dww-auth-portals a:hover { background: #24375b; color: #fff; }
.dww-auth-portals a.active { background: var(--aero-sky); color: var(--aero-navy); box-shadow: none; }
.dww-auth-portals a.active[href^="/midea"] { background: var(--aero-heat-button); }
.dww-auth-portals a.active[href^="/ultimati"] { background: var(--pv-tint); }
.dww-auth-admin-link, .dww-auth-profile-link {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #24375b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.dww-auth-admin-link:hover, .dww-auth-profile-link:hover { background: #36507a; }
.dww-auth-user-copy { flex: 0 0 auto; max-width: 130px; }
.dww-auth-user-copy strong { color: #fff; }
.dww-auth-user-copy small { color: var(--aero-ice); }
.dww-auth-role { flex-shrink: 0; }
.dww-auth-role.owner { background: var(--aero-sky); color: var(--aero-navy); box-shadow: none; }
.dww-role-preview-control { flex: 0 0 auto; }
.dww-role-preview-banner { top: 76px; }
body[data-portal-page] .dww-auth-portals a:focus-visible,
body[data-portal-page] .dww-auth-admin-link:focus-visible,
body[data-portal-page] .dww-auth-profile-link:focus-visible { outline-color: #fff; outline-offset: -3px; }

/* Calm brand surfaces. Existing status badges and warning backgrounds are retained. */
body:is([data-portal-page="customer"], [data-portal-page="news"], [data-portal-page="onboarding"]) .hero,
body[data-portal-page] :is(.admin-hero, .profile-hero, .report-hero, .faq-hero) {
  background: var(--aero-navy);
  color: #fff;
  box-shadow: none;
}
body[data-portal-page="customer"] .hero::after { background: none; }
body[data-portal-page] :is(.admin-hero, .profile-hero, .report-hero, .faq-hero) :is(.eyebrow, .faq-eyebrow),
.dww-auth-copy p, .faq-hero-stat span { color: var(--aero-sky); }
/* The service search is a working surface, so reserve Navy for the navigation. */
body[data-portal-page="customer"] .hero { background: #f7f5ef; color: var(--aero-navy); }
body[data-portal-page="customer"] .hero-copy { color: var(--aero-muted); }
body[data-portal-page="customer"] .hero .eyebrow { color: var(--aero-blue); }
body[data-portal-page="customer"] .search-card { background: #fff; border-color: var(--aero-line); box-shadow: 0 4px 18px rgb(15 29 61 / 3%); }
body[data-portal-page="customer"] .search-card > label { color: var(--aero-navy); }
body[data-portal-page="customer"] .search-card > p { color: var(--aero-muted); }
body[data-portal-page="customer"] .search-row { border-radius: 999px; }
body[data-portal-page="customer"] .search-row:focus-within { box-shadow: 0 0 0 3px var(--aero-sky); }

/* HEMS also uses primary/secondary on plain table labels, not only actions. */
body[data-portal-page] :is(button.primary, a.primary, .primary-button, .button-primary, .search-row button,
  .dww-auth-flow-primary, .dww-auth-self-service button, .dww-auth-retry, .dww-auth-signout) {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--product-button);
  color: var(--aero-navy);
  font-weight: 700;
  box-shadow: none;
}
body[data-portal-page] :is(button.primary, a.primary, .primary-button, .button-primary, .search-row button,
  .dww-auth-flow-primary, .dww-auth-self-service button, .dww-auth-retry, .dww-auth-signout):hover:not(:disabled) {
  background: var(--product-button-hover);
  color: var(--aero-navy);
}
body[data-portal-page] :is(button.secondary, a.secondary, .secondary-button, .button-quiet, .small-button, .faq-reload) {
  border-radius: 999px;
  color: var(--aero-navy);
  border-color: var(--line-strong);
}
body[data-portal-page] :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--aero-blue);
  outline-offset: 3px;
}
body[data-portal-page] :is(input, select, textarea) { accent-color: var(--aero-blue); }
/* The search control has one visible focus ring around the complete field. */
body[data-portal-page="customer"] .search-row:focus-within input:focus-visible { outline: none; }

body[data-portal-page] table thead th {
  background: var(--product-soft);
  color: var(--aero-navy);
  border-bottom-color: var(--product-line);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: .035em;
}
body[data-portal-page] table thead th :is(button, a) { color: inherit; }
body[data-portal-page] table thead th button { background: transparent; }
body[data-portal-page] .sort-header { background: transparent; }
body[data-portal-page] table tbody td { line-height: 1.5; }
body[data-portal-page] table thead th :is(button, a):focus-visible { outline-color: var(--aero-blue); }
body[data-portal-page="index"] > .site-header { margin-bottom: 4px; }
body[data-portal-page="index"] .topbar { flex-wrap: wrap; }

/* Product colours identify the equipment family, never its operational state. */
body[data-portal-page="customer"] .product-area > .source-head {
  border-top: 3px solid var(--product-line);
  background: var(--product-soft);
}
body[data-portal-page="customer"] .product-area-wp > .source-head { border-top-color: var(--aero-apricot); }
body[data-portal-page="customer"] .product-area-pv > .source-head { border-top-color: var(--pv-line); }
body[data-portal-page="customer"] :is(.tag-wp, .delivery-type.outdoor) {
  background: var(--aero-heat-tint);
  color: var(--aero-heat-dark);
}
body[data-portal-page="customer"] :is(.tag-pv, .delivery-type.inverter) {
  background: var(--pv-tint);
  color: var(--pv-ink);
}
body[data-portal-page="customer"] .delivery-type.storage {
  background: var(--battery-tint);
  color: var(--battery-ink);
}
body[data-portal-page="customer"] :is(.button-midea, .midea-system-card .button-primary) {
  background: var(--aero-heat-button);
  color: var(--aero-navy);
  border-color: var(--aero-heat-line);
  border-radius: 999px;
}
body[data-portal-page="customer"] .button-midea:hover { background: var(--aero-apricot); }
body[data-portal-page="customer"] .button-customer-app {
  background: var(--aero-power-tint);
  border-color: var(--aero-power-line);
  color: var(--aero-navy);
}
body[data-portal-page="customer"] .button-customer-app:hover { background: var(--aero-ice); }
body[data-portal-page="customer"] .midea-onboarding { border-color: var(--aero-heat-line); }
body[data-portal-page="customer"] .midea-onboarding-head { background: var(--aero-heat-soft); border-color: var(--aero-heat-line); }
body[data-portal-page="customer"] .midea-onboarding-head .eyebrow { color: var(--aero-heat-dark); }
body[data-portal-page="customer"] .midea-system-meta span { background: var(--aero-heat-tint); color: var(--aero-heat-dark); }
body[data-portal-page="customer"] .midea-system-card { background: #fffdfa; border-color: var(--aero-heat-line); }
body[data-portal-page="customer"] :is(.pv-service-overview, .pv-service-head) { border-color: var(--pv-line); background: var(--pv-soft); }
body[data-portal-page="customer"] .pv-service-head .eyebrow { color: var(--pv-ink); }
body[data-portal-page="customer"] .pv-service-actions > a:hover { border-color: var(--pv-line); background: var(--pv-tint); }
body[data-portal-page="customer"] .product-area .text-link { color: var(--product-ink); }

body:is([data-portal-page="midea"], [data-portal-page="midea-fields"]) :is(.page-head, .hero) > div > .eyebrow {
  color: var(--aero-heat-dark);
}
body[data-portal-page="midea"] :is(.system-kind.heatingSystem, .system-kind.vrf, .cop-product.atom_t, .cop-product.hygge, .device-kind, .empty-icon) {
  background: var(--aero-heat-tint);
  color: var(--aero-heat-dark);
}
body[data-portal-page="midea"] :is(.stat:hover, .stat.active, .device-tab:hover, .device-tab.active, .compact-system-grid > div, .hydraulic-status-card, .metric-highlight) {
  background: var(--aero-heat-soft);
  border-color: var(--aero-heat-line);
}
body[data-portal-page="midea"] .stat.active { box-shadow: inset 0 -3px 0 var(--aero-apricot); }
body[data-portal-page="midea"] :is(.midea-sync-card, .midea-sync-card.retry) {
  background: var(--aero-heat-soft);
  border-color: var(--aero-heat-line);
  box-shadow: none;
}
body[data-portal-page="midea"] .midea-sync-card:hover { background: #fffaf5; border-color: var(--aero-apricot); box-shadow: none; }
body[data-portal-page="midea"] :is(.midea-sync-icon, .midea-sync-card.retry .midea-sync-icon) {
  background: var(--aero-heat-tint);
  color: var(--aero-heat-dark);
}
body[data-portal-page="midea"] :is(.midea-sync-arrow, .midea-sync-copy small) { color: var(--aero-heat-dark); }
body[data-portal-page="midea"] .details-button { background: var(--aero-heat-soft); color: var(--aero-heat-dark); border-color: var(--aero-heat-line); }
body[data-portal-page="midea"] .cop-table thead tr:first-child th { background: var(--aero-heat-tint); color: var(--aero-navy); }
body[data-portal-page="midea"] :is(tbody tr:hover, tbody tr.active, .cop-table tbody tr:hover .cop-system) { background: #fffaf5; }
body[data-portal-page="midea"] .sort-button i { color: var(--aero-heat-dark); }
body[data-portal-page="midea"] .heating-curve9-editor { background: #fff; border-color: var(--aero-heat-line); box-shadow: none; }
body[data-portal-page="midea"] .heating-curve9-head { background: var(--aero-heat-soft); border-color: var(--aero-heat-line); }
body[data-portal-page="midea"] .heating-curve9-badge { background: var(--aero-heat-tint); color: var(--aero-heat-dark); }

body[data-portal-page="index"] .metric.metric-pv { background: var(--pv-soft); border-color: var(--pv-line); }
body[data-portal-page="index"] #totalPv { color: var(--pv-ink); }
body[data-portal-page="index"] .metric.metric-battery { background: var(--battery-soft); border-color: var(--battery-line); }
body[data-portal-page="index"] #totalBattery { color: var(--battery-ink); }
body[data-portal-page="index"] .battery-module-table thead th { background: var(--battery-soft); border-bottom-color: var(--battery-line); }

.dww-auth-screen { background: var(--aero-sand); color: var(--aero-navy); }
.dww-auth-brand { background: var(--aero-navy); }
.dww-auth-logo { flex-wrap: wrap; gap: 16px; }
.dww-auth-copy h1 { font-family: var(--aero-heading); letter-spacing: -.025em; line-height: 1.08; }
.dww-auth-copy span { color: var(--aero-ice); }
.dww-auth-security svg { stroke: var(--aero-sky); }
.dww-auth-transition-popup { background: #fff; }
.dww-auth-transition-speech { background: var(--aero-navy); color: var(--aero-ice); }
.dww-auth-transition-speech::after { border-top-color: var(--aero-navy); }
.dww-auth-transition-progress i { background: var(--aero-sky); }
.dww-feedback-dialog { font-family: var(--aero-body); color: var(--aero-navy); background: var(--aero-sand); }
.dww-feedback-head, .dww-feedback-restore-toast { background: var(--aero-navy); }
.dww-feedback-head small { color: var(--aero-ice); }
.dww-feedback-head strong { font-family: var(--aero-heading); }
.dww-feedback-launch, .dww-feedback-send {
  background: var(--aero-sky);
  color: var(--aero-navy);
  border-radius: 999px;
  font-family: var(--aero-body);
  box-shadow: 0 4px 14px rgb(15 29 61 / 15%);
}
.dww-feedback-launch:hover, .dww-feedback-send:hover { background: var(--aero-ice); }
.dww-feedback-button { color: var(--aero-navy); border-color: var(--line-strong); border-radius: 999px; }

@media (max-width: 1100px) {
  .dww-auth-user-copy, .dww-auth-role { display: none; }
}
@media (max-width: 820px) {
  .dww-auth-bar { left: 0; right: 0; padding-inline: 10px; }
  .dww-auth-portals { flex: 0 0 auto; overflow: visible; }
  .dww-auth-portals a { flex: 0 0 auto; padding-inline: 12px; }
  .dww-auth-admin-link { display: inline-flex; }
  body[data-portal-page] .dww-brand-logo { width: 162px; }
  body[data-portal-page] :is(.brand, .admin-brand, .faq-brand, .profile-brand, .report-brand, .usage-brand) { gap: 10px; }
  body[data-portal-page] :is(button.primary, a.primary, .primary-button, .button-primary, button.secondary, a.secondary, .secondary-button, .button-quiet, .faq-reload) { min-height: 44px; }
}
/* HEMS rows become cards here; drop the desktop table width with that layout. */
@media (max-width: 680px) {
  body[data-portal-page="hems-overview"] :is(.table-wrap > table, .probe-table-wrap > .probe-table) { min-width: 0; }
  body[data-portal-page="hems-overview"] .probe-table td { min-width: 0; }
}
@media (max-width: 480px) {
  body[data-portal-page] :is(.site-header, .admin-header, .faq-header, .profile-header, .report-header, .usage-header) { padding-inline: 16px; }
  body[data-portal-page] .dww-brand-logo { width: 146px; }
  body[data-portal-page] :is(.brand, .admin-brand, .faq-brand, .profile-brand, .report-brand, .usage-brand) strong { font-size: 14px; }
  body[data-portal-page] .header-statuses { justify-content: flex-start; width: 100%; }
  body[data-portal-page="customer"] .search-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  body[data-portal-page="customer"] .search-row button { padding-inline: 13px; gap: 4px; }
}