/* Canonical dashboard style: reuse the lean Marina/Parking/EV visual language.
   Rule: dashboards sharing a level (`customer` or `egi`) must share this base. */

#content-main.dashboard-canonical {
  --dash-gap: 12px;
  --dash-border: var(--hairline-color, #d4d4d4);
  --dash-surface: var(--body-bg, #fff);
  --dash-surface-muted: var(--darkened-bg, #f8f8f8);
  --dash-muted: var(--body-quiet-color, #666);
  --dash-ink: var(--body-fg, #111);
  --dash-card-min: 220px;
  --dash-card-columns-xl: 4;
  /* Canonical dashboard action button tokens (master source). */
  --dash-action-button-bg: #417690;
  --dash-action-button-bg-hover: #365f73;
  --dash-action-button-ink: #ffffff;
  --dash-action-button-border: #417690;
  --dash-action-button-radius: var(--egi-button-radius);
  --dash-action-button-padding: 3px 10px;
  --dash-action-button-height: 24px;
  --dash-action-panel-button-height: calc(var(--dash-action-button-height, 24px) * 2);
  --dash-action-button-font-size: 13px;
  --dash-filter-action-width: 72px;
}

/* Customer dashboards share one design token set. */
#content-main.dashboard-canonical[data-dashboard-level="customer"] {
  --dash-card-columns-xl: 5;
}

/* EGI/admin dashboards share one design token set. */
#content-main.dashboard-canonical[data-dashboard-level="egi"] {
  --dash-card-columns-xl: 4;
}

#content-main.dashboard-canonical > .module {
  --dash-section-inset: 12px;
  margin-bottom: 12px !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 6px !important;
  background: var(--dash-surface) !important;
  box-shadow: none !important;
  overflow: hidden;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#content-main.dashboard-canonical > .module > h2 {
  margin: 0;
  padding: 10px var(--dash-section-inset);
  border-bottom: 1px solid var(--dash-border);
  background: var(--dash-surface-muted);
  color: var(--dash-ink);
  font-size: 15px;
  font-weight: 600;
}

#content-main.dashboard-canonical > .module > * {
  margin-left: var(--dash-section-inset);
  margin-right: var(--dash-section-inset);
  order: 5;
}

#content-main.dashboard-canonical > .module > h2 {
  margin-left: 0;
  margin-right: 0;
}

#content-main.dashboard-canonical > .module > h2,
#content-main.dashboard-canonical > .module > .dash-title {
  order: 1;
}

#content-main.dashboard-canonical > .module > .actions {
  order: 2;
}

#content-main.dashboard-canonical > .module > .filters {
  order: 3;
}

#content-main.dashboard-canonical > .module > .dash-grid.cards {
  order: 4;
}

#content-main.dashboard-canonical > .module > .quick-action-panels {
  order: 4;
}

#content-main.dashboard-canonical .dash-title {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#content-main.dashboard-canonical .dash-title h2 {
  margin: 0;
}

#content-main.dashboard-canonical .view-switch {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

#content-main.dashboard-canonical .view-switch .button {
  margin: 0;
  text-decoration: none;
}

#content-main.dashboard-canonical .view-switch .button.is-active {
  background: var(--egi-accent);
  color: var(--egi-accent-ink);
  border-color: var(--egi-accent);
}

#content-main.dashboard-canonical .view-switch .button.is-disabled {
  opacity: 0.58;
  pointer-events: none;
}

#content-main.dashboard-canonical .dash-grid {
  display: grid;
  gap: var(--dash-gap);
}

#content-main.dashboard-canonical [hidden] {
  display: none !important;
}

#content-main.dashboard-canonical .dash-grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(var(--dash-card-min), 1fr));
}

@media (min-width: 1024px) {
  #content-main.dashboard-canonical .dash-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1400px) {
  #content-main.dashboard-canonical .dash-grid.cards {
    grid-template-columns: repeat(var(--dash-card-columns-xl), 1fr);
  }
}

#content-main.dashboard-canonical .dash-card,
#content-main.dashboard-canonical .subsystem-card,
#content-main.dashboard-canonical .gauge-card,
#content-main.dashboard-canonical .object-card,
#content-main.dashboard-canonical .thermostat-card,
#content-main.dashboard-canonical .thermostat-fact,
#content-main.dashboard-canonical .inline-command-dialog,
#content-main.dashboard-canonical .quick-form,
#content-main.dashboard-canonical .occupancy-group {
  border: 1px solid var(--dash-border) !important;
  border-radius: 6px !important;
  padding: 12px;
  background: var(--dash-surface) !important;
  box-shadow: none !important;
}

#content-main.dashboard-canonical .dash-label {
  color: var(--dash-muted);
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 4px;
}

#content-main.dashboard-canonical .dash-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}

#content-main.dashboard-canonical .dash-value a {
  text-decoration: none;
}

/* KPI cards (cards grid) get a compact "metric tile" treatment similar to
   the reference: soft surface, stronger value hierarchy, optional sparkline. */
#content-main.dashboard-canonical .dash-grid.cards > .dash-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
  padding: 12px 14px 10px;
  border-radius: 12px !important;
  border-color: rgba(113, 128, 150, 0.26) !important;
  background: var(--dash-surface-muted) !important;
}

#content-main.dashboard-canonical .dash-grid.cards > .dash-card .dash-label {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 500;
}

#content-main.dashboard-canonical .dash-grid.cards > .dash-card .dash-value {
  font-size: clamp(30px, 2.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

#content-main.dashboard-canonical .dash-grid.cards > .dash-card .dash-value a {
  color: inherit;
}

#content-main.dashboard-canonical .dash-grid.cards > .dash-card .dash-chart {
  margin-top: auto;
  padding-top: 8px;
  min-height: 34px;
}

#content-main.dashboard-canonical .dash-sparkline {
  width: 100%;
  height: 32px !important;
  display: block;
}

#content-main.dashboard-canonical .dash-sparkline-baseline {
  stroke: rgba(116, 136, 160, 0.34);
  stroke-width: 1;
}

#content-main.dashboard-canonical .dash-sparkline-area {
  fill: var(--egi-accent-soft, rgba(44, 106, 160, 0.18));
}

#content-main.dashboard-canonical .dash-sparkline-line {
  fill: none;
  stroke: var(--egi-accent, #2c6aa0);
  stroke-width: 2;
  stroke-linecap: round;
}

#content-main.dashboard-canonical .kpi-trend,
#content-main.dashboard-canonical .kpi-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
}

#content-main.dashboard-canonical .kpi-trend.up,
#content-main.dashboard-canonical .kpi-change.up {
  color: #118a45;
}

#content-main.dashboard-canonical .kpi-trend.down,
#content-main.dashboard-canonical .kpi-change.down {
  color: #cf2f2f;
}

#content-main.dashboard-canonical .dash-inline-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#content-main.dashboard-canonical .quick-action-panels {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

#content-main.dashboard-canonical .quick-action-panel {
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  background: var(--dash-surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

#content-main.dashboard-canonical .quick-action-panel-copy {
  color: var(--dash-muted);
  font-size: 12px;
  line-height: 1.3;
}

#content-main.dashboard-canonical .quick-action-panel .button,
#content-main.dashboard-canonical .quick-action-panel a.button,
#content-main.dashboard-canonical .quick-action-panel button,
#content-main.dashboard-canonical .quick-action-panel input[type="submit"] {
  margin-top: auto !important;
  width: 100%;
  min-height: var(--dash-action-panel-button-height, 48px);
  height: var(--dash-action-panel-button-height, 48px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#content-main.dashboard-canonical .quick-form > button[type="submit"],
#content-main.dashboard-canonical .quick-form > input[type="submit"] {
  margin-top: auto !important;
  min-height: var(--dash-action-panel-button-height, 48px);
  height: var(--dash-action-panel-button-height, 48px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#content-main.dashboard-canonical .filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 0;
}

#content-main.dashboard-canonical .filters label {
  font-size: 12px;
  color: var(--dash-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#content-main.dashboard-canonical .filters select,
#content-main.dashboard-canonical .filters input[type="text"],
#content-main.dashboard-canonical .filters input[type="search"],
#content-main.dashboard-canonical .filters input[type="number"],
#content-main.dashboard-canonical .filters input[type="date"],
#content-main.dashboard-canonical .filters input[type="datetime-local"],
#content-main.dashboard-canonical .filters input[type="month"],
#content-main.dashboard-canonical .filters input[type="week"],
#content-main.dashboard-canonical .filters input[type="time"] {
  height: 24px;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 13px;
  border-radius: var(--egi-button-radius);
  box-sizing: border-box;
  min-width: 120px;
  max-width: 220px;
  width: auto;
}

#content-main.dashboard-canonical .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

#content-main.dashboard-canonical .actions a {
  margin-right: 0;
}

#content-main.dashboard-canonical .dash-bars {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

#content-main.dashboard-canonical .dash-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr minmax(30px, auto);
  gap: 10px;
  align-items: center;
}

#content-main.dashboard-canonical .dash-bar-label {
  font-size: 12px;
  color: var(--dash-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#content-main.dashboard-canonical .dash-bar-label a {
  color: inherit;
  text-decoration: none;
}

#content-main.dashboard-canonical .dash-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--egi-accent-soft);
  overflow: hidden;
}

#content-main.dashboard-canonical .dash-bar-fill {
  height: 100%;
  background: var(--egi-accent);
  border-radius: 999px;
}

#content-main.dashboard-canonical .dash-bar-value {
  font-size: 12px;
  text-align: right;
  color: var(--dash-muted);
}

#content-main.dashboard-canonical .dash-card h3 {
  margin-top: 0;
}

#content-main.dashboard-canonical .mini-key {
  color: var(--dash-muted);
  font-size: 11px;
}

#content-main.dashboard-canonical .muted {
  color: var(--dash-muted);
  font-size: 12px;
}

#content-main.dashboard-canonical .pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--dash-border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--dash-muted);
  background: var(--egi-accent-softer);
}

#content-main.dashboard-canonical .pill strong {
  color: var(--dash-ink);
}

#content-main.dashboard-canonical .badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

#content-main.dashboard-canonical .badge-system {
  border-style: solid;
}

#content-main.dashboard-canonical .dash-card-active {
  border-color: var(--egi-accent);
  box-shadow: inset 0 0 0 1px var(--egi-accent-strong-soft);
}

#content-main.dashboard-canonical .value-stale {
  color: var(--egi-status-stale);
  font-weight: 600;
}

#content-main.dashboard-canonical .value-good {
  color: var(--egi-status-good);
  font-weight: 600;
}

#content-main.dashboard-canonical .inline-command-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1300;
}

#content-main.dashboard-canonical .inline-command-modal[hidden] {
  display: none;
}

#content-main.dashboard-canonical .inline-command-backdrop {
  position: absolute;
  inset: 0;
  background: var(--egi-overlay);
}

#content-main.dashboard-canonical .inline-command-dialog {
  position: relative;
  width: min(560px, calc(100vw - 24px));
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: var(--dash-surface);
  padding: 14px;
  box-shadow: var(--egi-elevated-shadow);
  display: grid;
  gap: 10px;
}

#content-main.dashboard-canonical .inline-command-head {
  display: grid;
  gap: 4px;
}

#content-main.dashboard-canonical .inline-command-head h3 {
  margin: 0;
}

#content-main.dashboard-canonical .inline-command-meta {
  color: var(--dash-muted);
  font-size: 12px;
}

#content-main.dashboard-canonical .inline-command-fields {
  display: grid;
  gap: 8px;
}

#content-main.dashboard-canonical .inline-command-fields label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--dash-muted);
}

#content-main.dashboard-canonical .inline-command-fields input,
#content-main.dashboard-canonical .inline-command-fields select,
#content-main.dashboard-canonical .inline-command-fields textarea {
  width: 100%;
  box-sizing: border-box;
}

#content-main.dashboard-canonical .inline-command-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#content-main.dashboard-canonical .graph-board {
  display: grid;
  gap: 14px;
}

#content-main.dashboard-canonical .gauge-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

#content-main.dashboard-canonical .gauge-card {
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--dash-surface);
  display: grid;
  justify-items: center;
  gap: 6px;
}

#content-main.dashboard-canonical .gauge-ring {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
}

#content-main.dashboard-canonical .gauge-ring svg {
  width: 118px;
  height: 118px;
  transform: rotate(-90deg);
}

#content-main.dashboard-canonical .gauge-ring circle {
  fill: none;
  stroke-width: 10;
}

#content-main.dashboard-canonical .gauge-track {
  stroke: var(--egi-gauge-track);
}

#content-main.dashboard-canonical .gauge-fill {
  stroke-linecap: round;
}

#content-main.dashboard-canonical .gauge-fill.tone-info {
  stroke: var(--egi-gauge-info);
}

#content-main.dashboard-canonical .gauge-fill.tone-good {
  stroke: var(--egi-gauge-good);
}

#content-main.dashboard-canonical .gauge-fill.tone-warning {
  stroke: var(--egi-gauge-warning);
}

#content-main.dashboard-canonical .gauge-fill.tone-critical {
  stroke: var(--egi-gauge-critical);
}

#content-main.dashboard-canonical .gauge-center {
  position: absolute;
  display: grid;
  justify-items: center;
  line-height: 1.1;
}

#content-main.dashboard-canonical .gauge-center .num {
  font-size: 20px;
  font-weight: 700;
}

#content-main.dashboard-canonical .gauge-center .pct {
  font-size: 11px;
  color: var(--dash-muted);
}

#content-main.dashboard-canonical .gauge-label {
  font-size: 12px;
  color: var(--dash-muted);
  text-align: center;
}

#content-main.dashboard-canonical .gauge-detail {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

#content-main.dashboard-canonical .object-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#content-main.dashboard-canonical .object-card {
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--dash-surface);
  display: grid;
  gap: 8px;
}

#content-main.dashboard-canonical .object-card.status-online {
  border-color: var(--egi-status-online-border);
}

#content-main.dashboard-canonical .object-card.status-alarm {
  border-color: var(--egi-status-alarm-border);
}

#content-main.dashboard-canonical .object-card.status-stale {
  border-color: var(--egi-badge-warning-border);
}

#content-main.dashboard-canonical .object-card.status-offline {
  border-color: var(--egi-status-offline-border);
  opacity: 0.9;
}

#content-main.dashboard-canonical .object-head {
  display: block;
}

#content-main.dashboard-canonical .object-name {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#content-main.dashboard-canonical .object-icon {
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-ink);
  border: 1px solid var(--dash-border);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--dash-surface-muted);
}

#content-main.dashboard-canonical .object-meta {
  font-size: 12px;
  color: var(--dash-muted);
  display: grid;
  gap: 2px;
}

#content-main.dashboard-canonical .object-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}

#content-main.dashboard-canonical .object-stats strong {
  font-weight: 700;
}

#content-main.dashboard-canonical .thermostat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#content-main.dashboard-canonical .thermostat-card {
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--dash-surface);
  display: grid;
  gap: 10px;
}

#content-main.dashboard-canonical .thermostat-head h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

#content-main.dashboard-canonical .thermostat-building {
  color: var(--dash-muted);
  font-size: 12px;
  margin-top: 4px;
}

#content-main.dashboard-canonical .thermostat-main {
  display: grid;
  gap: 4px;
}

#content-main.dashboard-canonical .thermostat-primary-value {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#content-main.dashboard-canonical .thermostat-primary-value span {
  font-size: 16px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--dash-muted);
}

#content-main.dashboard-canonical .thermostat-primary-label {
  color: var(--dash-muted);
  font-size: 12px;
}

#content-main.dashboard-canonical .thermostat-facts {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

#content-main.dashboard-canonical .thermostat-fact {
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  padding: 6px 8px;
}

#content-main.dashboard-canonical .thermostat-fact .key {
  display: block;
  font-size: 11px;
  color: var(--dash-muted);
}

#content-main.dashboard-canonical .thermostat-fact .value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

#content-main.dashboard-canonical .thermostat-controls {
  display: grid;
  gap: 8px;
}

#content-main.dashboard-canonical .thermostat-controls label {
  display: block;
  font-size: 12px;
  color: var(--dash-muted);
  margin-bottom: 4px;
}

#content-main.dashboard-canonical .thermostat-stepper-controls,
#content-main.dashboard-canonical .thermostat-select-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

#content-main.dashboard-canonical .thermostat-step-btn {
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

#content-main.dashboard-canonical .thermostat-step-input {
  width: 96px;
}

#content-main.dashboard-canonical .thermostat-stepper-controls .button,
#content-main.dashboard-canonical .thermostat-select-controls .button {
  margin-left: auto;
}

#content-main.dashboard-canonical .thermostat-select-controls select,
#content-main.dashboard-canonical .thermostat-select-controls input {
  flex: 1 1 auto;
  min-width: 0;
}

#content-main.dashboard-canonical .thermostat-power-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#content-main.dashboard-canonical .thermostat-power-buttons form {
  margin: 0;
}

/* Normalize dashboard action/filter button geometry so customer_db pages
   match admin dashboard buttons (same size + vertical position). */
#content-main.dashboard-canonical .actions .button,
#content-main.dashboard-canonical .actions a.button,
#content-main.dashboard-canonical .actions button,
#content-main.dashboard-canonical .actions input[type="submit"],
#content-main.dashboard-canonical .filters .button,
#content-main.dashboard-canonical .filters a.button,
#content-main.dashboard-canonical .filters button,
#content-main.dashboard-canonical .filters input[type="submit"],
#content-main.dashboard-canonical .quick-form button,
#content-main.dashboard-canonical .quick-form input[type="submit"],
#content-main.dashboard-canonical .quick-form-visit button,
#content-main.dashboard-canonical .quick-form-visit input[type="submit"] {
  margin: 0 !important;
  padding: 3px 10px !important;
  padding: var(--dash-action-button-padding, 3px 10px) !important;
  min-height: 24px;
  min-height: var(--dash-action-button-height, 24px);
  font-size: var(--dash-action-button-font-size, 13px);
  border-radius: var(--dash-action-button-radius, var(--egi-button-radius)) !important;
  border: 1px solid var(--dash-action-button-border, var(--egi-accent)) !important;
  background: var(--dash-action-button-bg, var(--egi-accent)) !important;
  color: var(--dash-action-button-ink, var(--egi-accent-ink)) !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

#content-main.dashboard-canonical .filters .button,
#content-main.dashboard-canonical .filters a.button,
#content-main.dashboard-canonical .filters button,
#content-main.dashboard-canonical .filters input[type="submit"] {
  min-width: var(--dash-filter-action-width, 72px);
  inline-size: var(--dash-filter-action-width, 72px);
  width: var(--dash-filter-action-width, 72px);
  max-width: var(--dash-filter-action-width, 72px);
  flex: 0 0 var(--dash-filter-action-width, 72px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

#content-main.dashboard-canonical .actions .button:hover,
#content-main.dashboard-canonical .actions a.button:hover,
#content-main.dashboard-canonical .actions button:hover,
#content-main.dashboard-canonical .actions input[type="submit"]:hover,
#content-main.dashboard-canonical .filters .button:hover,
#content-main.dashboard-canonical .filters a.button:hover,
#content-main.dashboard-canonical .filters button:hover,
#content-main.dashboard-canonical .filters input[type="submit"]:hover,
#content-main.dashboard-canonical .quick-form button:hover,
#content-main.dashboard-canonical .quick-form input[type="submit"]:hover,
#content-main.dashboard-canonical .quick-form-visit button:hover,
#content-main.dashboard-canonical .quick-form-visit input[type="submit"]:hover {
  background: var(--dash-action-button-bg-hover, var(--egi-accent-hover)) !important;
  border-color: var(--dash-action-button-bg-hover, var(--egi-accent-hover)) !important;
}

#content-main.dashboard-canonical .actions .button:focus-visible,
#content-main.dashboard-canonical .actions a.button:focus-visible,
#content-main.dashboard-canonical .actions button:focus-visible,
#content-main.dashboard-canonical .actions input[type="submit"]:focus-visible,
#content-main.dashboard-canonical .filters .button:focus-visible,
#content-main.dashboard-canonical .filters a.button:focus-visible,
#content-main.dashboard-canonical .filters button:focus-visible,
#content-main.dashboard-canonical .filters input[type="submit"]:focus-visible,
#content-main.dashboard-canonical .quick-form button:focus-visible,
#content-main.dashboard-canonical .quick-form input[type="submit"]:focus-visible,
#content-main.dashboard-canonical .quick-form-visit button:focus-visible,
#content-main.dashboard-canonical .quick-form-visit input[type="submit"]:focus-visible {
  outline: 2px solid var(--egi-accent-strong-soft);
  outline-offset: 1px;
}

/* Canonical dashboards use module <h2> as the single visible title. */
#content:has(> #content-main.dashboard-canonical) > h1 {
  display: none;
}

#content-main.dashboard-canonical .table-wrap {
  overflow-x: auto;
}

#content-main.dashboard-canonical table {
  width: 100%;
  border-collapse: collapse;
}

#content-main.dashboard-canonical th,
#content-main.dashboard-canonical td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--dash-border);
  vertical-align: top;
}

#content-main.dashboard-canonical th {
  color: var(--dash-muted);
  font-size: 12px;
}

#content-main.dashboard-canonical .status-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--dash-border);
}

/* Newsletter dashboard blocks inherit canonical card styling/tokens. */
#content-main.dashboard-canonical .newsletter-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

#content-main.dashboard-canonical .newsletter-editor-grid > div {
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  padding: 12px;
  background: var(--dash-surface);
}

#content-main.dashboard-canonical .newsletter-editor-grid h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--dash-ink);
}

#content-main.dashboard-canonical .editor-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

#content-main.dashboard-canonical .editor-toolbar button {
  margin: 0 !important;
  padding: var(--dash-action-button-padding, 3px 10px) !important;
  min-height: var(--dash-action-button-height, 24px);
  font-size: var(--dash-action-button-font-size, 13px);
  border-radius: var(--dash-action-button-radius, var(--egi-button-radius)) !important;
  border: 1px solid var(--dash-action-button-border, var(--egi-accent)) !important;
  background: var(--dash-action-button-bg, var(--egi-accent)) !important;
  color: var(--dash-action-button-ink, var(--egi-accent-ink)) !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

#content-main.dashboard-canonical .editor-toolbar button:hover {
  background: var(--dash-action-button-bg-hover, var(--egi-accent-hover)) !important;
  border-color: var(--dash-action-button-bg-hover, var(--egi-accent-hover)) !important;
}

#content-main.dashboard-canonical .editor-toolbar button:focus-visible {
  outline: 2px solid var(--egi-accent-strong-soft);
  outline-offset: 1px;
}

#content-main.dashboard-canonical .newsletter-designer,
#content-main.dashboard-canonical .newsletter-preview {
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  padding: 12px;
  background: var(--dash-surface-muted);
}

#content-main.dashboard-canonical .newsletter-designer {
  min-height: 220px;
  margin-bottom: 8px;
}

#content-main.dashboard-canonical .newsletter-preview {
  min-height: 260px;
  overflow: auto;
}

@media (max-width: 980px) {
  #content-main.dashboard-canonical .newsletter-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* Override docked-surface gradients for canonical dashboards. */
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical > .module,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical > .module {
  border: 1px solid var(--dash-border) !important;
  background: var(--dash-surface) !important;
  box-shadow: none !important;
}

.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .dash-card,
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .subsystem-card,
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .gauge-card,
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .object-card,
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .thermostat-card,
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .thermostat-fact,
.main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .inline-command-dialog,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .dash-card,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .subsystem-card,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .gauge-card,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .object-card,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .thermostat-card,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .thermostat-fact,
body.copilot-sidebar-focus-mode .main.shifted > #nav-sidebar + .content #content-main.dashboard-canonical .inline-command-dialog {
  border: 1px solid var(--dash-border) !important;
  background: var(--dash-surface) !important;
  box-shadow: none !important;
}