/* GROW Member Portal -> Opportunities (public/staff-opportunities.js), on
   the staff site, and the "Opportunities and key dates" section it adds to
   a firm's page. Staff pages use the staff site's own tokens and
   components (--blue, .badge, .btn, .panel, .history-table, .chip,
   .stat-tile, .pm-dialog), never colours of their own; this file only
   lays them out. */

/* A panel's title with its main button beside it, wrapping on a phone. */
.op-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px;
}
.op-head .planner-subtitle { margin: 0; }
.op-head .hint { margin: 0; flex: 1 1 280px; }

/* What just happened (a save, a send), and what went wrong. */
.op-message { margin: 0 0 14px; }
.op-said { color: var(--ink); background: var(--blue-pale); border-radius: 10px; padding: 10px 14px; font-weight: 700; }

/* The list. Firm is pinned on the left as the table scrolls (md-code-table);
   the title may wrap, the dates and buttons do not. */
.op-table td, .op-table tbody th, .op-firm-table td, .op-firm-table tbody th { vertical-align: top; }
/* A firm's or a title's words break between words, never inside one ("Northbridge"
   whole), on a phone too, where the pinned column is held narrow. */
.table-wrap .op-table tbody th, .table-wrap .op-firm-table tbody th { overflow-wrap: break-word; word-break: normal; }
.op-title-cell { min-width: 180px; }
.op-title { font-weight: 700; }
.op-link { font-size: 0.85rem; color: var(--blue); white-space: nowrap; }
.op-table td:nth-child(4), .op-table td:nth-child(5) { white-space: nowrap; }
/* A row's buttons stacked, each as wide as the widest, so the column stays
   narrow and the table fits a laptop's width. A firm's page has fewer
   columns, so there they sit side by side. */
.op-table .row-actions .md-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: max-content;
}
.op-firm-table .row-actions .md-actions { flex-wrap: nowrap; }
.op-row-archived td, .op-row-archived th { color: var(--muted); }
.op-sends td { vertical-align: top; }

/* The dialogs. */
.op-dialog select { width: 100%; }
.op-dialog-meta { margin: 0 0 14px; }
.op-dialog-meta .badge { margin-right: 4px; }
.op-rolling { margin-top: 30px; }
.op-dialog-actions #opDeleteBtn { margin-left: auto; }
.op-audience { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.op-audience .pm-check { margin-bottom: 8px; }
.op-why { color: var(--danger); font-weight: 700; margin: 0 0 12px; }
.op-preview-box {
  white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.9rem; line-height: 1.5; max-height: 320px; overflow-y: auto;
  background: var(--blue-wash); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px;
}

/* On a firm's page. */
.op-firm .op-head { align-items: flex-start; }
.op-firm-list > .hint { margin: 0; }

@media (max-width: 720px) {
  .op-rolling { margin-top: 0; }
  .op-dialog-actions #opDeleteBtn { margin-left: 0; }
}