/* HQ clean operations theme: light surfaces, one work queue, predictable contrast. */

html body.dashboard-body {
  --hq-canvas: #f8fafc;
  --hq-surface: #ffffff;
  --hq-surface-muted: #f1f5f9;
  --hq-text: #0f172a;
  --hq-text-secondary: #334155;
  --hq-text-muted: #475569;
  --hq-border: #cbd5e1;
  --hq-border-soft: #e2e8f0;
  --hq-action: #1d4ed8;
  --hq-action-hover: #1e40af;
  --hq-action-soft: #eff6ff;
  --hq-focus: #2563eb;
  color: var(--hq-text) !important;
  background: var(--hq-canvas) !important;
}

/* Authoritative HQ presentation layer. Legacy dashboard rules remain loaded for non-HQ
   panels, but this layer owns the HQ canvas, navigation, status states, and contrast. */
html body.dashboard-body .dashboard-page #hq-tab-nav[hidden],
html body.dashboard-body .dashboard-page .hq-section-index-shell[hidden] {
  display: none !important;
}

html body.dashboard-body .dashboard-page .hq-primary-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 16px !important;
  border-top: 1px solid var(--hq-border-soft) !important;
  padding-top: 14px !important;
}

html body.dashboard-body .dashboard-page .hq-primary-nav button {
  min-height: 44px !important;
  border: 1px solid var(--hq-border) !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text-secondary) !important;
}

html body.dashboard-body .dashboard-page .hq-primary-nav button.is-current {
  background: var(--hq-action) !important;
  color: #fff !important;
}

html body.dashboard-body .dashboard-page .hq-overview-data-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 24px 16px !important;
  padding: 12px 14px !important;
  border: 1px solid #f59e0b !important;
  border-left: 4px solid #b45309 !important;
  border-radius: 10px !important;
  background: #fffbeb !important;
  color: #78350f !important;
}

html body.dashboard-body .dashboard-page .hq-overview-data-banner[hidden] {
  display: none !important;
}

html body.dashboard-body .dashboard-page .hq-overview-data-banner strong,
html body.dashboard-body .dashboard-page .hq-overview-data-banner span,
html body.dashboard-body .dashboard-page .hq-overview-data-banner small {
  color: #78350f !important;
}

html body.dashboard-body .dashboard-page .hq-overview-data-banner span {
  min-width: 0 !important;
}

html body.dashboard-body .dashboard-page .hq-overview-data-banner button {
  min-height: 36px !important;
  border: 1px solid #b45309 !important;
  background: #fff !important;
  color: #78350f !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--hq-text-secondary) !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
  background: #64748b !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip.status-healthy::before {
  background: #15803d !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip.status-warning::before,
html body.dashboard-body .dashboard-page .hq-health-chip.status-degraded::before {
  background: #b45309 !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip.status-critical::before {
  background: #b91c1c !important;
}

html body.dashboard-body .dashboard-page .mission-unavailable {
  min-height: 72px !important;
  border: 1px dashed var(--hq-border) !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text-secondary) !important;
}

html body.dashboard-body .dashboard-page .mission-unavailable strong,
html body.dashboard-body .dashboard-page .mission-unavailable span {
  color: var(--hq-text-secondary) !important;
}

body.dashboard-body .dashboard-page #hq-telnyx-numbers-panel .table-scroll {
  position: relative !important;
  overflow-x: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

body.dashboard-body .dashboard-page #hq-telnyx-numbers-panel .table-scroll::after {
  content: "" !important;
  position: sticky !important;
  right: 0 !important;
  display: block !important;
  float: right !important;
  width: 28px !important;
  height: 1px !important;
  margin-top: -1px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 85%) !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  html body.dashboard-body .dashboard-page .hq-primary-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-data-banner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-data-banner span {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}

html body.dashboard-body .dashboard-page {
  color: var(--hq-text) !important;
  background: transparent !important;
}

html body.dashboard-body .dashboard-page .dashboard-topbar,
html body.dashboard-body .dashboard-page .dashboard-hero-panel,
html body.dashboard-body .dashboard-page .hq-tab-shell {
  border: 1px solid var(--hq-border-soft) !important;
  border-radius: 12px !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important;
  backdrop-filter: none !important;
}

html body.dashboard-body .dashboard-page .dashboard-hero-panel::before {
  display: none !important;
}

html body.dashboard-body .dashboard-page .dashboard-brand,
html body.dashboard-body .dashboard-page .dashboard-hero-panel .title,
html body.dashboard-body .dashboard-page .dashboard-hero-panel .subtitle,
html body.dashboard-body .dashboard-page .dashboard-hero-panel label,
html body.dashboard-body .dashboard-page .dashboard-hero-panel .meta,
html body.dashboard-body .dashboard-page .hq-tab-shell .card-title,
html body.dashboard-body .dashboard-page .hq-tab-shell .subtitle,
html body.dashboard-body .dashboard-page .hq-tab-shell .meta {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .dashboard-eyebrow,
html body.dashboard-body .dashboard-page .dashboard-hero-copy,
html body.dashboard-body .dashboard-page .dashboard-page .meta,
html body.dashboard-body .dashboard-page .dashboard-page label {
  color: var(--hq-text-muted) !important;
}

html body.dashboard-body .dashboard-page .dashboard-stat-grid,
html body.dashboard-body .dashboard-page .dashboard-access-card-secondary,
html body.dashboard-body .dashboard-page .dashboard-command-grid,
html body.dashboard-body .dashboard-page #dashboard-shortcuts {
  display: none !important;
}

html body.dashboard-body .dashboard-page .dashboard-access-card-primary,
html body.dashboard-body .dashboard-page .dashboard-account-field,
html body.dashboard-body .dashboard-page .dashboard-stat-card {
  border: 1px solid var(--hq-border-soft) !important;
  border-radius: 10px !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text) !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page .dashboard-access-card-primary h2,
html body.dashboard-body .dashboard-page .dashboard-access-card-primary p,
html body.dashboard-body .dashboard-page .dashboard-access-card-primary .dashboard-access-kicker,
html body.dashboard-body .dashboard-page .dashboard-account-field label {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page input,
html body.dashboard-body .dashboard-page select,
html body.dashboard-body .dashboard-page textarea {
  border-color: var(--hq-border) !important;
  border-radius: 8px !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text) !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page button,
html body.dashboard-body .dashboard-page .button {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

html body.dashboard-body .dashboard-page button:focus-visible,
html body.dashboard-body .dashboard-page a:focus-visible,
html body.dashboard-body .dashboard-page input:focus-visible,
html body.dashboard-body .dashboard-page select:focus-visible,
html body.dashboard-body .dashboard-page textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .38) !important;
  outline-offset: 2px !important;
}

html body.dashboard-body .dashboard-page .secondary,
html body.dashboard-body .dashboard-page .hq-tab-nav,
html body.dashboard-body .dashboard-page .hq-tab-panel-nav,
html body.dashboard-body .dashboard-page .hq-primary-nav button {
  border-color: var(--hq-border) !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text-secondary) !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page .secondary:hover,
html body.dashboard-body .dashboard-page .secondary:focus-visible,
html body.dashboard-body .dashboard-page .hq-primary-nav button:hover,
html body.dashboard-body .dashboard-page .hq-primary-nav button:focus-visible {
  border-color: var(--hq-action) !important;
  background: var(--hq-action-soft) !important;
  color: var(--hq-action-hover) !important;
}

html body.dashboard-body .dashboard-page .hq-tab-nav .hq-tab-button[aria-selected="true"],
html body.dashboard-body .dashboard-page .hq-tab-nav .hq-tab-button.is-current,
html body.dashboard-body .dashboard-page .hq-primary-nav button.is-current {
  border-color: var(--hq-action) !important;
  background: var(--hq-action) !important;
  color: #ffffff !important;
}

html body.dashboard-body .dashboard-page .hq-topbar-badge,
html body.dashboard-body .dashboard-page .hq-sync-status {
  border-color: var(--hq-border) !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text-secondary) !important;
}

/* Replace the dark mission surface with a calm enterprise workspace. */
html body.dashboard-body .dashboard-page #hq-mission-control-panel.mission-premium {
  --mission-bg: var(--hq-canvas) !important;
  --mission-surface: var(--hq-surface) !important;
  --mission-elevated: var(--hq-surface-muted) !important;
  --mission-border: var(--hq-border-soft) !important;
  --mission-primary: var(--hq-action) !important;
  --mission-secondary: #0f766e !important;
  --mission-text: var(--hq-text) !important;
  --mission-muted: var(--hq-text-muted) !important;
  border: 1px solid var(--hq-border-soft) !important;
  border-radius: 12px !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06) !important;
}

html body.dashboard-body .dashboard-page .mission-premium .meta,
html body.dashboard-body .dashboard-page .mission-premium p,
html body.dashboard-body .dashboard-page .mission-premium small,
html body.dashboard-body .dashboard-page .mission-premium em {
  color: var(--hq-text-muted) !important;
}

html body.dashboard-body .dashboard-page .mission-premium-top {
  border-bottom: 1px solid var(--hq-border-soft) !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text) !important;
  backdrop-filter: none !important;
}

html body.dashboard-body .dashboard-page .mission-premium-top h2,
html body.dashboard-body .dashboard-page .mission-premium-top p {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .mission-top-actions input,
html body.dashboard-body .dashboard-page .mission-premium select {
  border-color: var(--hq-border) !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .hq-overview-context {
  margin: 14px 24px 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--hq-border-soft) !important;
  border-radius: 8px !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body.dashboard-body .dashboard-page .hq-overview-health-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 12px 24px 0 !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip {
  min-height: 36px !important;
  border-color: var(--hq-border) !important;
  border-radius: 8px !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text-secondary) !important;
  font-size: 12px !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip.status-healthy {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip.status-warning,
html body.dashboard-body .dashboard-page .hq-health-chip.status-degraded {
  border-color: #fbbf24 !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

html body.dashboard-body .dashboard-page .hq-health-chip.status-critical {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

html body.dashboard-body .dashboard-page .hq-overview-action-summary {
  margin: 12px 24px !important;
  border-color: var(--hq-border) !important;
  border-radius: 8px !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .hq-overview-action-summary strong,
html body.dashboard-body .dashboard-page .hq-overview-action-summary span {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .hq-overview-action-summary.is-warning {
  border-left: 4px solid #d97706 !important;
  background: #fffbeb !important;
}

html body.dashboard-body .dashboard-page .hq-overview-action-summary.is-healthy {
  border-left: 4px solid #15803d !important;
  background: #f0fdf4 !important;
}

html body.dashboard-body .dashboard-page .hq-overview-action-summary .hq-overview-action-primary {
  border-color: var(--hq-action) !important;
  background: var(--hq-action) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page .hq-overview-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 24px 12px !important;
}

html body.dashboard-body .dashboard-page .hq-overview-kpi {
  border-color: var(--hq-border-soft) !important;
  border-radius: 10px !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text) !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page .hq-overview-kpi span,
html body.dashboard-body .dashboard-page .hq-overview-kpi small {
  color: var(--hq-text-muted) !important;
}

html body.dashboard-body .dashboard-page .hq-overview-kpi strong {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .hq-overview-grid {
  display: block !important;
  padding: 0 24px 24px !important;
}

/* Overview owns the work queue. Detail boards remain available from their destination tabs. */
html body.dashboard-body .dashboard-page .hq-overview-grid > .hq-overview-panel:not(.hq-overview-alerts) {
  display: none !important;
}

html body.dashboard-body .dashboard-page .hq-overview-alerts {
  display: block !important;
  grid-row: auto !important;
  border: 1px solid var(--hq-border) !important;
  border-left: 4px solid var(--hq-action) !important;
  border-radius: 10px !important;
  background: var(--hq-surface) !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page .hq-overview-alerts .mission-panel-head {
  align-items: start !important;
}

html body.dashboard-body .dashboard-page .hq-panel-description {
  margin: 4px 0 0 !important;
  color: var(--hq-text-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html body.dashboard-body .dashboard-page .hq-overview-panel .mission-panel-head h3,
html body.dashboard-body .dashboard-page .mission-panel-head h3 {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .mission-feed-item,
html body.dashboard-body .dashboard-page .hq-tenant-card,
html body.dashboard-body .dashboard-page .hq-provider-card,
html body.dashboard-body .dashboard-page .mission-health-row,
html body.dashboard-body .dashboard-page .mission-empty-state {
  border-color: var(--hq-border-soft) !important;
  border-radius: 8px !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text) !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page .mission-feed-item strong,
html body.dashboard-body .dashboard-page .mission-empty-state strong,
html body.dashboard-body .dashboard-page .hq-tenant-card strong,
html body.dashboard-body .dashboard-page .hq-provider-card strong {
  color: var(--hq-text) !important;
}

html body.dashboard-body .dashboard-page .mission-feed-item p,
html body.dashboard-body .dashboard-page .mission-feed-item small,
html body.dashboard-body .dashboard-page .mission-empty-state span,
html body.dashboard-body .dashboard-page .hq-tenant-card span,
html body.dashboard-body .dashboard-page .hq-tenant-card small,
html body.dashboard-body .dashboard-page .hq-provider-card span,
html body.dashboard-body .dashboard-page .hq-provider-card small,
html body.dashboard-body .dashboard-page .hq-provider-reason,
html body.dashboard-body .dashboard-page .hq-provider-impact {
  color: var(--hq-text-secondary) !important;
}

html body.dashboard-body .dashboard-page .hq-attention-row {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 14px !important;
}

html body.dashboard-body .dashboard-page .hq-attention-copy {
  min-width: 0 !important;
}

html body.dashboard-body .dashboard-page .hq-attention-title {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body.dashboard-body .dashboard-page .hq-attention-kind {
  padding: 3px 7px !important;
  border: 1px solid var(--hq-border) !important;
  border-radius: 999px !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

html body.dashboard-body .dashboard-page .hq-attention-row .pill {
  border: 1px solid var(--hq-border) !important;
  background: var(--hq-surface) !important;
  color: var(--hq-text-secondary) !important;
}

html body.dashboard-body .dashboard-page .hq-attention-row .readiness-warn,
html body.dashboard-body .dashboard-page .hq-attention-row .readiness-warning {
  border-color: #fbbf24 !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

html body.dashboard-body .dashboard-page .hq-attention-row .readiness-error,
html body.dashboard-body .dashboard-page .hq-attention-row .readiness-critical {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

html body.dashboard-body .dashboard-page .hq-attention-row .mission-feed-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

html body.dashboard-body .dashboard-page .hq-attention-row .mission-feed-actions button {
  min-height: 36px !important;
  white-space: nowrap !important;
}

/* Keep only the short “where next?” rail below Overview; hide the duplicate KPI/boards. */
html body.dashboard-body .dashboard-page .mission-premium-layout {
  display: block !important;
  min-height: 0 !important;
}

html body.dashboard-body .dashboard-page .mission-side-nav,
html body.dashboard-body .dashboard-page .mission-main > .mission-health-strip,
html body.dashboard-body .dashboard-page .mission-main > .mission-banner,
html body.dashboard-body .dashboard-page .mission-main > .mission-kpis,
html body.dashboard-body .dashboard-page .mission-main > .mission-grid-primary,
html body.dashboard-body .dashboard-page .mission-main > .mission-grid-secondary,
html body.dashboard-body .dashboard-page .mission-alert-rail {
  display: none !important;
}

html body.dashboard-body .dashboard-page .mission-main {
  padding: 0 24px 24px !important;
}

html body.dashboard-body .dashboard-page .hq-review-executive-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body.dashboard-body .dashboard-page .hq-review-executive-strip button {
  min-height: 76px !important;
  border: 1px solid var(--hq-border-soft) !important;
  border-radius: 8px !important;
  background: var(--hq-surface-muted) !important;
  color: var(--hq-text) !important;
  text-align: left !important;
}

html body.dashboard-body .dashboard-page .hq-review-executive-strip strong,
html body.dashboard-body .dashboard-page .hq-review-executive-strip small,
html body.dashboard-body .dashboard-page .hq-review-executive-strip span {
  color: var(--hq-text) !important;
}

@media (max-width: 900px) {
  html body.dashboard-body .dashboard-page .hq-overview-health-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.dashboard-body .dashboard-page .hq-attention-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.dashboard-body .dashboard-page .hq-attention-row .mission-feed-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 600px) {
  html body.dashboard-body .dashboard-page .hq-overview-context,
  html body.dashboard-body .dashboard-page .hq-overview-action-summary,
  html body.dashboard-body .dashboard-page .hq-overview-grid,
  html body.dashboard-body .dashboard-page .hq-overview-kpis,
  html body.dashboard-body .dashboard-page .mission-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-health-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-health-strip .hq-health-chip {
    min-height: 48px !important;
  }

  html body.dashboard-body .dashboard-page #hq-command-open-top.hq-compact-action,
  html body.dashboard-body .dashboard-page #refresh-all.hq-compact-action,
  html body.dashboard-body .dashboard-page #hq-mission-command-open.hq-compact-action,
  html body.dashboard-body .dashboard-page #hq-refresh-mission.hq-compact-action {
    display: inline-flex !important;
    width: auto !important;
    min-width: 64px !important;
    max-width: 96px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  html body.dashboard-body .dashboard-page .hq-compact-action .hq-action-label {
    display: inline !important;
  }

  html body.dashboard-body .dashboard-page #hq-command-open-top.hq-compact-action::after,
  html body.dashboard-body .dashboard-page #refresh-all.hq-compact-action::after,
  html body.dashboard-body .dashboard-page #hq-mission-command-open.hq-compact-action::after,
  html body.dashboard-body .dashboard-page #hq-refresh-mission.hq-compact-action::after {
    content: none !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.dashboard-body .dashboard-page .hq-review-executive-strip {
    grid-template-columns: 1fr !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-alerts .mission-panel-head {
    grid-template-columns: 1fr !important;
  }

  html body.dashboard-body .dashboard-page .hq-overview-alerts .mission-panel-head button {
    width: 100% !important;
  }

  html body.dashboard-body .dashboard-page .hq-attention-row {
    grid-template-columns: 1fr !important;
  }

  html body.dashboard-body .dashboard-page .hq-attention-row .pill {
    justify-self: start !important;
  }

  html body.dashboard-body .dashboard-page .hq-attention-row .mission-feed-actions,
  html body.dashboard-body .dashboard-page .hq-attention-row .mission-feed-actions button {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------------------------
   Account directory: layout repair.

   The directory is styled by more than 180 rules across three stylesheets, many contradicting one
   another with !important. Two of them made the overlaps: `.mono { display: inline-flex }` and
   `.actions { display: flex }` both matched <td> elements, and a cell with a non-table display no
   longer obeys its column. Under table-layout: fixed the External ID column is about 67px while
   an older rule forces its content to 148px, so the ID floated over the account name; the actions
   cell overflowed the table edge and cut "Select" off. Cells are restored to table cells, columns
   get widths matching their content, and the actions column stays pinned so it is reachable at any
   width. Colours follow the panel's dark surface - the header and ID text had been left on
   light-theme values, a near-white header over dark rows and navy text on navy.
   --------------------------------------------------------------------------------------------- */

html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td.hq-directory-external-id,
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td.hq-directory-row-actions {
  display: table-cell !important;
  vertical-align: middle !important;
}

html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 1100px !important;
}

/* Fixed widths for fixed-width content; the account name takes whatever remains. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(1),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(1) { width: 128px !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(2),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(2) { width: auto !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(3),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(3),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(4),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(4) { width: 108px !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(5),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(5) { width: 118px !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(6),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(6),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(7),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(7) { width: 96px !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(8),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(8) { width: 120px !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(9),
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(9) { width: 176px !important; }

html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll thead th {
  background: #0d182b !important;
  color: #b3c1da !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* External ID: truncate inside its own column; the full value is the cell's title. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td.hq-directory-external-id {
  max-width: 128px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-external-id span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #c7d4ec !important;
  font-weight: 700 !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-external-id small {
  display: none !important;
}

/* Actions: one row, compact, pinned to the right edge so horizontal scrolling never hides them. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td.hq-directory-row-actions {
  min-width: 0 !important;
  text-align: right !important;
  padding-right: 12px !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-row-actions-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
/* Older rules size the menu wrapper to the whole cell, which pushed Select out over the Charges
   column; each control is exactly as wide as its content. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-row-actions-inner > * {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-row-actions .hq-directory-select-btn {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-actions-menu > summary {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #dbe6f7 !important;
  background: rgba(148, 163, 184, 0.14) !important;
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  box-shadow: none !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-actions-menu > summary:hover,
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-actions-menu[open] > summary {
  background: rgba(148, 163, 184, 0.26) !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:last-child,
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 2 !important;
  box-shadow: -12px 0 12px -12px rgba(0, 0, 0, 0.6) !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll thead th:last-child { z-index: 3 !important; }
/* Opaque, so rows scrolled underneath the pinned column do not show through it. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll tbody td:last-child { background: #0b1628 !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll tbody tr:nth-child(even) td:last-child { background: #0d182b !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll tbody tr:hover td:last-child { background: #182a46 !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll tbody tr.row-selected td:last-child { background: #13244a !important; }

/* Every pinned cell is its own stacking layer at the same z-index, so a later row paints over an
   earlier row's open menu. Lift the row whose menu is open above its neighbours. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll tbody tr:has(details.hq-directory-actions-menu[open]) td:last-child {
  z-index: 6 !important;
}

/* Row menu: placed against the viewport by positionHqDirectoryActionsMenu, so the table's scroll
   container can no longer clip it. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-actions-menu-body.is-floating {
  position: fixed !important;
  top: var(--hq-menu-top, -9999px) !important;
  left: var(--hq-menu-left, -9999px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1200 !important;
  min-width: 200px !important;
  max-width: min(280px, calc(100vw - 16px)) !important;
  max-height: calc(100vh - 16px) !important;
  overflow-y: auto !important;
}

/* Header, toolbar and selected-account card. */
/* The link rendered as a block, so its label sat at the top of the button beside a centred one. */
html body.dashboard-body .dashboard-page #hq-directory-panel > .topbar a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-toolbar { align-items: end !important; }
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-toolbar .checkbox-row {
  margin-top: 0 !important;
  min-height: 40px !important;
  align-items: center !important;
}
/* A disabled action has to look disabled; Activate read as live while it was locked. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-actions button:disabled {
  opacity: 0.5 !important;
  filter: saturate(0.4) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-danger-zone summary,
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-danger-zone summary strong,
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-danger-zone summary span {
  color: #b3c1da !important;
}

@media (max-width: 900px) {
  /* The guide column had a 320px minimum, squeezing the selected-account copy to about 14px wide:
     one word per line. Stack instead. */
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-focus,
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-card,
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-card.is-empty {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-actions { justify-self: start !important; }
  /* Four tiles in a tablet width leave about 140px each, narrower than a six-figure charge total. */
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.dashboard-body .dashboard-page #hq-directory-panel > .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body.dashboard-body .dashboard-page #hq-directory-panel > .topbar .actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  html body.dashboard-body .dashboard-page #hq-directory-panel > .topbar .actions > * {
    flex: 1 1 0 !important;
    width: auto !important;
  }
}

@media (max-width: 600px) {
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.dashboard-body .dashboard-page #hq-directory-panel .kpi-card .kpi-value {
    font-size: 19px !important;
    overflow-wrap: anywhere !important;
  }
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-actions button { min-width: 0 !important; }
  /* Tapping a row already selects it, so the explicit Select button goes first when space runs
     out; More keeps every row action reachable. */
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-row-actions .hq-directory-select-btn { display: none !important; }
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll th:nth-child(9),
  html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-scroll td:nth-child(9) { width: 84px !important; }
}

/* ---------------------------------------------------------------------------------------------
   HQ surface contrast.

   Dark panels repaint headings/strong to #f4f8ff and p/small/meta/label to #b8c8df with
   !important, which is correct on the panel itself but not on the light cards the app nests
   inside it. Painted-pixel measurement put the evidence cards' "0" at 1.07:1 and "No rows" at
   1.16:1 - effectively invisible - and the reverse case, light-theme navy left on a dark card,
   at 1.22:1. dashboard.js measures each element's real surface and tags it; these two classes
   carry the corrected colour, so panels not yet audited are covered by the same rule.
   --------------------------------------------------------------------------------------------- */

html body.dashboard-body .dashboard-page .hq-force-dark-text,
html body.dashboard-body .dashboard-page article.panel[data-hq-tab] .hq-force-dark-text {
  color: #17324f !important;
}

html body.dashboard-body .dashboard-page .hq-force-light-text,
html body.dashboard-body .dashboard-page article.panel[data-hq-tab] .hq-force-light-text {
  color: #e5edf9 !important;
}

/* Section label strips: a label that jumps to a real evidence section reads as a control, and one
   that names no destination is plain text rather than a pill that does nothing when clicked. */
html body.dashboard-body .dashboard-page .hq-section-tabs span.hq-section-tab-static {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  color: #8ea2bf !important;
  font-weight: 600 !important;
  cursor: default !important;
}

html body.dashboard-body .dashboard-page .hq-section-tabs span.hq-section-tab-link {
  cursor: pointer !important;
}

html body.dashboard-body .dashboard-page .hq-section-tabs span.hq-section-tab-link:hover,
html body.dashboard-body .dashboard-page .hq-section-tabs span.hq-section-tab-link:focus-visible {
  border-color: rgba(37, 99, 235, .65) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .25) !important;
}

html body.dashboard-body .dashboard-page .hq-live-panel.is-jump-target {
  outline: 2px solid rgba(37, 99, 235, .65) !important;
  outline-offset: 3px !important;
}

/* The one disabled-state pair the audit flagged in the directory: dark grey on light grey at
   3.0:1. Disabled controls are exempt from the AA minimum, but this one is genuinely hard to
   read, and the pattern still reads as disabled at a legible weight. */
html body.dashboard-body .dashboard-page #hq-directory-panel .hq-directory-selected-actions button:disabled {
  color: #1f2d3f !important;
}

/* Warn buttons: `.dashboard-page button` (styles.css:21955) overrides only the background with the
   blue brand gradient, while `button.warn` (styles.css:4904) keeps amber text - so "Release" and
   "Set LIVE" painted amber on blue at 1.19:1 and 1.34:1. The runtime pass cannot correct a gradient
   surface it has no way to read, so restore the pale amber the warn style intends, which keeps the
   button distinguishable from the primary action instead of bleaching it to look like one. */
html body.dashboard-body .dashboard-page button.warn,
html body.dashboard-body .dashboard-page .button.warn {
  background: #fff6ec !important;
  background-image: none !important;
  border: 1px solid #e8b871 !important;
  color: #8a4b00 !important;
  box-shadow: none !important;
}

html body.dashboard-body .dashboard-page button.warn:hover,
html body.dashboard-body .dashboard-page .button.warn:hover {
  background: #ffedd8 !important;
  background-image: none !important;
}

/* ---------------------------------------------------------------------------------------------
   HQ actions: row/surface buttons and the reason dialog.

   Every HQ action endpoint rejects a blank reason and writes a HIGH-severity audit event, so the
   dialog makes the reason a first-class required field rather than a confirm() the operator can
   dismiss thoughtlessly. The dialog is appended to <body>, outside [data-hq-tab], so the runtime
   contrast pass never touches it - it carries its own palette.
   --------------------------------------------------------------------------------------------- */

html body.dashboard-body .dashboard-page .hq-live-action-btn {
  min-height: 30px !important;
  margin-left: 6px !important;
  padding: 0 10px !important;
  background: #eef4ff !important;
  background-image: none !important;
  border: 1px solid #b8cdf0 !important;
  color: #17324f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body.dashboard-body .dashboard-page .hq-live-action-btn.is-danger {
  background: #fff1f1 !important;
  border-color: #e7b0b0 !important;
  color: #8a1c1c !important;
}

html body.dashboard-body .dashboard-page .hq-live-action-btn:hover {
  background: #dfe9fc !important;
}

html body.dashboard-body .dashboard-page .hq-live-action-btn.is-danger:hover {
  background: #ffe3e3 !important;
}

html body.dashboard-body .dashboard-page .hq-live-surface-action {
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body.dashboard-body .dashboard-page .hq-live-rows-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #b8c8df !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

html body.dashboard-body .dashboard-page .hq-live-rows-label select {
  min-height: 32px !important;
  min-width: 72px !important;
}

html body.dashboard-body .dashboard-page .hq-live-cap-note {
  margin: 0 0 8px !important;
}

/* Dialog */
html body .hq-action-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

html body .hq-action-dialog[hidden] { display: none !important; }

html body .hq-action-dialog .hq-action-dialog-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8, 15, 28, .55) !important;
}

html body .hq-action-dialog .hq-action-dialog-card {
  position: relative !important;
  width: min(460px, 100%) !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  display: grid !important;
  gap: 12px !important;
  padding: 20px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35) !important;
  color: #17324f !important;
}

html body .hq-action-dialog .hq-action-dialog-title {
  margin: 0 !important;
  font-size: 17px !important;
  color: #0f1f36 !important;
}

html body .hq-action-dialog .hq-action-dialog-subtitle {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 12px !important;
}

html body .hq-action-dialog .hq-action-dialog-fields { display: grid !important; gap: 10px !important; }

html body .hq-action-dialog .hq-action-dialog-field {
  display: grid !important;
  gap: 4px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body .hq-action-dialog .hq-action-dialog-field input,
html body .hq-action-dialog .hq-action-dialog-field textarea,
html body .hq-action-dialog .hq-action-dialog-field select {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #17324f !important;
  font: inherit !important;
  font-weight: 500 !important;
}

html body .hq-action-dialog .hq-action-dialog-error {
  margin: 0 !important;
  color: #8a1c1c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body .hq-action-dialog .hq-action-dialog-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

html body .hq-action-dialog .hq-action-dialog-submit.danger {
  background: #b42318 !important;
  background-image: none !important;
  color: #ffffff !important;
}