/**
 * Marketing Operations dashboard.
 *
 * Deliberately thin: the stat cards, tables, and badges all come from main.css,
 * and the section chrome from dashboard.css. This file covers the sub-table
 * hierarchy, the capacity heat grid, and the print rules — a printed copy is how
 * this gets attached to the meeting invite.
 */

.mo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.mo-title {
  margin: 0;
  font-size: 1.5rem;
}

/* Reuses .cal-viewbtn so the sub-tabs match the calendar's view switcher
   rather than introducing a third tab idiom. */
.mo-tabs {
  display: flex;
  gap: 2px;
}

.mo-section {
  scroll-margin-top: 80px; /* the stat cards are anchor links into these */
}

.mo-tablewrap {
  overflow-x: auto;
}

.mo-table {
  font-size: 0.85rem;
}

.mo-table td {
  vertical-align: top;
}

/* Sub-tables sit visually inside their parent section rather than reading as
   another top-level section. */
.mo-sub {
  margin-top: var(--spacing-md);
  padding-left: var(--spacing-md);
  border-left: 3px solid var(--border-color);
}

.mo-subhead {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* An empty section is often the right answer ("nothing flagged, skip this"), so
   it reads as a calm statement rather than a warning. */
.mo-empty {
  margin: 0;
  padding: var(--spacing-md) 0;
  font-size: 0.85rem;
}

.mo-note {
  margin: var(--spacing-sm) 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mo-warn {
  margin: 0 0 var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 3px solid #c53030;
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.mo-ok {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--success-text);
}

.mo-ok-mark {
  color: var(--success-text);
  font-size: 0.8rem;
}

/* ── Capacity heat grid ─────────────────────────────────────────────────────
   A table, not a canvas: it prints, it keyboard-navigates, and it needs no
   destroy/resize lifecycle to survive the router re-running the handler. */

.mo-heatgrid {
  font-size: 0.82rem;
  border-collapse: collapse;
}

.mo-heatgrid th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-align: center;
}

.mo-heatgrid th:first-child {
  text-align: left;
}

.mo-heat-name {
  white-space: nowrap;
  font-weight: 600;
}

.mo-heat {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  border: 1px solid var(--bg-primary);
}

.mo-heat-zero {
  color: var(--vmdo-gray-4);
}

.mo-heat-total {
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Print ──────────────────────────────────────────────────────────────────
   The dashboard is a live route, but "publish it three business days before"
   in practice means someone hits Ctrl+P and attaches the PDF. Body copy at 9pt
   with 14pt leading and half-inch margins matches the house document standard. */

@media print {
  @page { margin: 0.5in; }

  body { font-size: 9pt; line-height: 14pt; }

  .app-header,
  .mo-tabs,
  .ai-chat-panel,
  .ai-chat-fab,
  .dash-section-head a {
    display: none !important;
  }

  .mo-section {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-top: 14pt;
  }

  .mo-tablewrap {
    overflow: visible;
  }

  /* Tinted badges and heat cells lose their meaning in greyscale, so keep the
     backgrounds rather than letting the browser strip them. */
  .feedback-badge,
  .mo-heat {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[data-route] {
    color: inherit;
    text-decoration: none;
  }
}