/* Marketing Hub live-state and phone usability refinements. */
.marketing-hub .mh-storage-note {
  display: block;
  margin-top: 7px;
  color: #7f93a7;
  font-size: 11px;
  line-height: 1.35;
}

.marketing-hub .mh-quiet-state {
  margin: 0;
  padding: 14px;
  border: 1px dashed #304a60;
  border-radius: 7px;
  color: #9fb0c0;
  background: #0a141e;
  font-size: 12px;
  line-height: 1.5;
}

.marketing-hub .mh-empty-live {
  min-height: 230px;
  padding: 28px 18px;
}

.marketing-hub .mh-empty-live p {
  max-width: 560px;
  margin: 0;
  line-height: 1.55;
}

.marketing-hub .mh-empty-live .mh-primary {
  margin-top: 18px;
}

.marketing-hub .mh-phone-scroll-hint {
  display: none;
}

.marketing-hub .mh-calendar-blank {
  background: #08111a;
}

@media (max-width: 760px) {
  .marketing-hub {
    min-width: 0;
    padding: 10px 10px calc(112px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }

  .marketing-hub .mh-hero {
    gap: 11px;
    padding: 14px;
  }

  .marketing-hub .mh-hero-icon {
    width: 42px;
    height: 42px;
  }

  .marketing-hub .mh-hero h2 {
    font-size: 23px;
  }

  .marketing-hub .mh-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .marketing-hub .mh-live {
    grid-column: 1 / -1;
  }

  .marketing-hub .mh-hero-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
  }

  .marketing-hub .mh-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .marketing-hub .mh-metric {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 8px;
    min-width: 0;
    min-height: 112px;
    padding: 11px 9px;
  }

  .marketing-hub .mh-metric .mh-round-icon {
    width: 34px;
    height: 34px;
  }

  .marketing-hub .mh-metric .mh-round-icon svg {
    width: 17px;
    height: 17px;
  }

  .marketing-hub .mh-metric small {
    font-size: 9px;
    line-height: 1.25;
    white-space: normal;
  }

  .marketing-hub .mh-metric strong {
    font-size: 22px;
    line-height: 1.1;
  }

  .marketing-hub .mh-metric em {
    font-size: 9px;
    line-height: 1.3;
  }

  .marketing-hub .mh-page-head .mh-secondary,
  .marketing-hub .mh-page-head > button {
    width: auto;
  }

  .marketing-hub .mh-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .marketing-hub .mh-phone-scroll-hint {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
    color: #ff9b4f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
  }

  .marketing-hub .mh-phone-scroll-hint::before {
    content: "↔";
    margin-right: 7px;
    font-size: 15px;
  }

  .marketing-hub .mh-report-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-hub .mh-report-filters label:first-child {
    grid-column: 1 / -1;
  }

  .marketing-hub .mh-empty-live {
    min-height: 210px;
  }
}

@media (max-width: 350px) {
  .marketing-hub .mh-hero-actions,
  .marketing-hub .mh-report-filters {
    grid-template-columns: 1fr;
  }

  .marketing-hub .mh-report-filters label:first-child {
    grid-column: auto;
  }
}