.campaigns-app { overflow: hidden; --campaign: #c4a7ff; }
.campaigns-main {
  grid-column: 2;
  min-height: 0;
  overflow-y: auto;
}
/* Full width (Safouan 2026-11-13): lines and bands run to the panel edges; text keeps the --gutter inset. */
.campaign-wrap { --gutter: 28px; padding: 18px var(--gutter) 48px; }

/* Page header: one compact line. */
.campaign-back-link { display: inline-block; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; text-decoration: none; }
.campaign-back-link:hover { color: var(--text); }
.campaign-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.campaign-head h1 { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1.3; }
.campaign-head p { margin-top: 4px; color: var(--text-secondary); font-size: 13px; }
.campaign-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; color: var(--text-secondary); font-size: 13px; }
.campaign-sub > * + *::before { content: "·"; margin-right: 12px; color: var(--muted); }
.campaign-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.campaign-actions .ui-button,
.campaign-tools .ui-button,
.campaign-pager .ui-button { height: 34px; gap: 8px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel); font-size: 13px; font-weight: 600; white-space: nowrap; }
.app-shell :is(.campaign-actions, .campaign-tools, .campaign-pager) .ui-button:hover:not(:disabled) { border-color: var(--border-strong); background-color: var(--surface-hover); box-shadow: none; }
.campaign-actions .ui-button-primary { border-color: transparent; background: var(--accent); color: #05231a; }
.app-shell .campaign-actions .ui-button-primary:hover:not(:disabled) { border-color: transparent; background-color: color-mix(in srgb, var(--accent) 86%, #000000); }
.campaign-actions .ui-button-danger { border-color: var(--border-strong); background: var(--panel); color: var(--danger); }
.campaign-replies-link { text-decoration: none; }
.campaign-actions .campaign-control { width: 34px; min-width: 34px; padding: 0; }
.campaign-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Status: dot and word. */
.campaign-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.campaign-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.campaign-status-active { color: var(--accent); }
.campaign-status-scheduled { color: var(--link); }
.campaign-status-paused { color: var(--warning); }
.campaign-status-draft,
.campaign-status-completed,
.campaign-status-canceled { color: var(--text-secondary); }
.campaign-status-draft::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.campaign-status-completed::before { background: var(--muted); }
.campaign-status-canceled::before { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* KPI strip: no frame; a line between cells (the Infrastructure figures). */
.campaign-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.campaign-strip > div { min-width: 0; padding: 4px 18px 5px; }
.campaign-strip > div:first-child { padding-left: 0; }
.campaign-strip > div + div { border-left: 1px solid var(--border); }
.campaign-strip span { display: block; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.campaign-strip strong { display: block; margin: 2px 0 1px; font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* An empty rate line keeps its height so the strip does not shrink. */
.campaign-strip em { display: block; min-height: 1lh; color: var(--muted); font-size: 13px; font-style: normal; }

/* Sections. */
.campaign-section { margin-bottom: 22px; }
.campaign-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.campaign-section-head h2 { font-size: 15px; }
.campaign-section-head h2 small { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.campaign-tools { display: flex; align-items: center; gap: 8px; }
.campaign-list-filters input[type="search"] { width: 240px; height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }
.campaign-list-filters input[type="search"]::placeholder { color: var(--muted); }
.campaign-seg { display: inline-flex; max-width: 100%; padding: 3px; overflow-x: auto; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--panel); }
.campaign-seg a { padding: 4px 10px; border-radius: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.campaign-seg a:hover { color: var(--text); }
.campaign-seg a.on { background: var(--selection); color: var(--text); }
.campaign-seg b { margin-left: 5px; color: var(--muted); font-weight: 600; }
.campaign-seg .on b { color: var(--text-secondary); }
.campaign-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 28px; }
.campaign-detail-grid > * { min-width: 0; }

/* Tables: no frame; a line under the header and under every row. */
.campaign-tbl { margin-inline: calc(-1 * var(--gutter)); overflow: hidden; }
.campaign-tw { overflow-x: auto; }
.campaign-tbl table { width: 100%; border-collapse: collapse; }
.campaign-list-table { min-width: 800px; table-layout: fixed; }
.campaign-col-reach { width: 170px; }
.campaign-col-num { width: 120px; }
.campaign-col-bounce { width: 96px; }
.campaign-col-menu { width: 44px; }
.campaign-tbl th { padding: 8px 12px; border-bottom: 1px solid var(--border-strong); background: var(--bg); color: var(--text-secondary); font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; }
html.has-bg .campaign-tbl th { background: var(--work); backdrop-filter: blur(18px); }
.campaign-tbl th:first-child,
.campaign-tbl td:first-child { padding-left: var(--gutter); text-align: left; }
.campaign-tbl th:last-child,
.campaign-tbl td:last-child { padding-right: var(--gutter); }
.campaign-tbl td { padding: 12px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; }
.campaign-tbl tbody tr:last-child td { border-bottom: 0; }
.campaign-tbl tbody tr:hover td { background: var(--surface-hover); }
.campaign-tbl td.l,
.campaign-tbl th.l { text-align: left; }
.campaign-tbl td strong { font-size: 14px; font-weight: 600; }
.campaign-tbl td.n { color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.campaign-tbl td small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.campaign-list-table tbody tr { cursor: pointer; }
/* The page scrolls and the header row stays at its top. The table box must clip, not hide:
   hidden would make the box a scroller and stop the sticky header. */
.campaign-list-section .campaign-tbl { overflow: clip; }
.campaign-list-table thead { position: sticky; top: 0; z-index: 2; }
.campaign-name-cell { overflow: hidden; }
.campaign-row-link { display: block; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.campaign-row-link:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.campaign-row-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.campaign-under { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 3px; color: var(--muted); font-size: 12px; }
.campaign-under .campaign-status { color: var(--muted); font-size: 12px; font-weight: 500; }
.campaign-under .campaign-status-paused { color: var(--warning); }
.campaign-under .campaign-status-active::before { background: var(--accent); }
.campaign-under .campaign-status-scheduled::before { background: var(--link); }
.campaign-under .campaign-status::before { width: 7px; height: 7px; }
.campaign-ready { color: var(--accent); font-weight: 600; }
.campaign-not-ready { color: var(--warning); }
.campaign-tbl tbody tr.campaign-empty-row { cursor: default; }
.campaign-empty-row td { padding: 28px 16px; color: var(--muted); text-align: center; }
.campaign-empty-row:hover td { background: none; }
.campaign-tag-step { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.campaign-step-table td.l:nth-child(2) { white-space: normal; }

/* Completed: a thin bar, the share as text beside it; hover shows completed of total and reached. */
.campaign-reach { display: inline-flex; align-items: center; gap: 10px; }
.campaign-reach i { display: block; width: 84px; height: 6px; border-radius: 3px; background: var(--surface-raised); overflow: hidden; }
.campaign-reach i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: 3px; background: #5b7aa0; }
.campaign-reach-pct { width: 44px; color: var(--text-secondary); font-size: 13px; text-align: right; }
/* One cell per metric: count large, rate small and quiet, fixed widths so counts and rates align down the column. */
.campaign-kv { display: inline-grid; grid-template-columns: 36px 52px; align-items: baseline; justify-items: end; column-gap: 6px; white-space: nowrap; }
.campaign-kv-count { color: var(--text); font-size: 15px; font-weight: 700; }
.campaign-kv-rate { color: var(--faint); font-size: 12px; font-weight: 500; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.campaign-kv-count.zero { color: var(--faint); font-weight: 500; }
.campaign-kv-count.good { color: var(--accent); }
/* Bounce: faint when healthy, flagged only past the limits; the hover splits recipient and sender. */
.campaign-bounce { display: inline-block; min-width: 56px; padding: 2px 8px; border-radius: 6px; color: var(--faint); font-size: 13px; font-weight: 500; text-align: right; }
.campaign-bounce[data-tip] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.campaign-bounce.warn { background: var(--warning-soft); color: var(--warning); font-weight: 700; }
.campaign-bounce.bad { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.campaigns-main [data-tip] { position: relative; }
.campaigns-main [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 10; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: #0b0c0e; color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); pointer-events: none; text-decoration: none; }
.campaign-kv-rate[data-tip]:hover::after,
.campaign-bounce[data-tip]:hover::after { right: 0; left: auto; }
.campaign-bounce[data-tip]:hover::after { text-align: left; white-space: pre; }
.campaign-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.campaign-sort:hover,
.campaign-sort[data-dir] { color: var(--text); }
.campaign-sort::after { content: "↕"; width: 1em; color: var(--faint); font-size: 11px; text-align: center; }
.campaign-sort[data-dir="desc"]::after { content: "↓"; color: var(--text); }
.campaign-sort[data-dir="asc"]::after { content: "↑"; color: var(--text); }
.campaign-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.campaign-tbl th[data-tip]:hover::after { right: 0; bottom: auto; left: auto; top: calc(100% + 6px); font-weight: 500; }

/* Reply outcomes. */
.campaign-bars { display: grid; gap: 12px; padding: 4px 0; }
.campaign-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.campaign-bar span { color: var(--text-secondary); }
.campaign-bar b { font-variant-numeric: tabular-nums; }
.campaign-bar i { grid-column: 1 / 3; height: 6px; border-radius: 3px; background: var(--surface-raised); }
.campaign-bar i::after { content: ""; display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--c, var(--muted)); }
.campaign-bars-empty { color: var(--muted); font-size: 13px; }
.campaign-empty-sequence { min-height: 0; padding: 16px; }

/* Chart colors are the mockup values (mock.js); campaign_activity_chart_controller.js reads them. */
.campaign-chart-box { padding: 4px 0 0; }
.campaign-activity-chart {
  --chart-sent: #78aee8;
  --chart-replies: #dfb35d;
  --chart-positive: #84ddc0;
  --chart-muted: #c3c7cf;
  --chart-subtle: #a2a7b1;
  --chart-border: #4b4f5a;
  --chart-divider: #2a2d34;
  --chart-axis-pointer: #c3c7cf;
  width: 100%;
  height: var(--chart-height, 380px);
}
/* Same height as the chart, so the page does not move when a filter has no activity. */
.campaign-empty-chart { box-sizing: border-box; height: var(--chart-height, 380px); min-height: 0; display: grid; place-items: center; }
.campaign-index { --chart-height: 340px; }

/* Operations (operators only) and the pause note. */
.campaign-alert { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid #5a4a22; border-radius: 10px; background: var(--warning-soft); color: var(--text); font-size: 13px; }
.campaign-alert b { color: var(--warning); }
.campaign-ops { border-top: 1px solid var(--border-strong); }
.campaign-ops > summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; cursor: pointer; list-style: none; }
.campaign-ops > summary::-webkit-details-marker { display: none; }
.campaign-ops > summary::after { content: "▸"; margin-left: auto; color: var(--muted); }
.campaign-ops[open] > summary::after { content: "▾"; }
.campaign-ops > summary h2 { font-size: 15px; }
.campaign-ops > summary small { color: var(--muted); font-size: 13px; }
.app-shell .campaign-ops > summary:hover { border-color: transparent; background-color: transparent; box-shadow: none; }
.app-shell .campaign-lead-company > summary:hover { border-color: transparent; background-color: var(--surface-hover); box-shadow: none; }
.campaign-ops-title { margin: 16px 0 8px; font-size: 13px; }
.campaign-ops-empty { margin: 4px 0 8px; color: var(--muted); font-size: 13px; }
/* Long lists scroll inside the section instead of stretching the page. */
.campaign-ops-scroll { max-height: 320px; overflow: auto; }
.campaign-ops-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* Leads page: one grid template keeps columns aligned across company groups. */
.campaign-leads-section { --lead-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.5fr) 120px 80px 80px; }
.campaign-lead-columns { display: grid; grid-template-columns: var(--lead-columns); gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px calc(var(--gutter) + 40px); border-bottom: 1px solid var(--border-strong); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.campaign-lead-columns span:last-child { text-align: right; }
.campaign-lead-company { margin-inline: calc(-1 * var(--gutter)); border-bottom: 1px solid var(--border); }
/* A company is a group bar (light band, bold name, arrow); its leads hang under it on a guide line, as on Infrastructure. */
.campaign-lead-company > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px var(--gutter); background: var(--panel); cursor: pointer; list-style: none; }
.campaign-lead-company-name::before { content: "▸" / ""; display: inline-block; width: 22px; padding-left: 6px; box-sizing: border-box; color: var(--muted); font-weight: 400; }
.campaign-lead-company[open] .campaign-lead-company-name::before { content: "▾" / ""; }
.campaign-lead-company > summary::-webkit-details-marker { display: none; }
.campaign-lead-company > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.campaign-lead-company-name { min-width: 0; font-size: 15px; font-weight: 700; }
.campaign-lead-company-name small { color: var(--muted); font-size: 13px; font-weight: 500; }
.campaign-lead-website { display: inline-flex; align-items: baseline; gap: 3px; min-width: 0; margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.campaign-lead-website:hover { color: var(--text-secondary); text-decoration: underline; }
.campaign-lead-company > summary .campaign-lead-website small { margin-left: 0; color: inherit; }
.campaign-lead-company-count { color: var(--muted); font-size: 13px; }
.campaign-lead-row { position: relative; display: grid; grid-template-columns: var(--lead-columns); align-items: center; gap: 12px; padding: 10px var(--gutter) 10px calc(var(--gutter) + 40px); border-top: 1px solid var(--border); font-size: 13px; }
.campaign-lead-row::before { content: ""; position: absolute; left: calc(var(--gutter) + 11px); top: 0; bottom: 0; border-left: 2px solid var(--border-strong); }
.campaign-lead-row:hover { background: var(--surface-hover); }
.campaign-lead-row > span { min-width: 0; }
.campaign-lead-name { display: flex; align-items: center; gap: 6px; }
.campaign-lead-name strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.campaign-lead-title,
.campaign-lead-email { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.campaign-lead-date { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.campaign-lead-zero { color: var(--muted); font-weight: 400; }
.campaign-linkedin-link { display: inline-flex; flex-shrink: 0; vertical-align: middle; color: var(--linkedin); cursor: pointer; }
.campaign-linkedin-link svg { width: 14px; height: 14px; fill: currentColor; }
.campaign-linkedin-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.campaign-ls { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.campaign-ls::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.campaign-ls-replied { color: var(--link); }
.campaign-ls-active { color: var(--accent); }
.campaign-ls-queued,
.campaign-ls-held,
.campaign-ls-waiting_acceptance,
.campaign-ls-paused { color: var(--warning); }
.campaign-ls-bounced { color: var(--danger); }
.campaign-ls-draft,
.campaign-ls-completed,
.campaign-ls-canceled,
.campaign-ls-unsubscribed,
.campaign-ls-suppressed,
.campaign-ls-stopped { color: var(--muted); }
.campaign-pager { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; color: var(--text-secondary); font-size: 13px; }
.campaign-leads-page-disabled { opacity: .45; }

@media (max-width: 1150px) {
  .campaign-detail-grid { grid-template-columns: 1fr; }
}

/* Narrow: the table scrolls sideways, so its header does not stick. */
@media (max-width: 1100px) {
  .campaign-list-section .campaign-tw { overflow-x: auto; }
  .campaign-list-table thead { position: static; }
}

@media (max-width: 1023px) {
  .campaigns-main { grid-column: 1; grid-row: 2; }
  .campaign-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-strip { row-gap: 14px; }
  .campaign-strip > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 900px) {
  .campaign-lead-columns { display: none; }
  .campaign-lead-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px var(--gutter) 8px calc(var(--gutter) + 28px); }
  .campaign-lead-row > span { grid-column: 1; }
  .campaign-lead-row > span:nth-child(n+4) { grid-column: 2; justify-self: end; }
  .campaign-lead-row > span:nth-child(4) { grid-row: 1; }
  .campaign-lead-row > span:nth-child(6) { grid-row: 2; }
  .campaign-lead-row > span:nth-child(5) { grid-row: 3; }
}

@media (max-width: 639px) {
  .campaign-table-viewport { position: relative; }
  .campaign-table-viewport::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 20px; background: linear-gradient(to right, transparent, var(--border-strong)); pointer-events: none; }
  .campaign-wrap { padding: 14px 12px 24px; }
  .campaign-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .campaign-actions { flex-wrap: wrap; }
  .campaign-list-filters { width: 100%; }
  .campaign-list-filters input[type="search"] { width: 100%; }
  .campaign-activity-chart,
  .campaign-empty-chart { height: 150px; }
  .campaign-lead-company > summary small { display: none; }
  .campaign-lead-website { font-size: 14px; line-height: 1; }
}

.campaign-tbl td.campaign-menu-cell { padding-inline: 6px; text-align: center; }
.campaign-menu-cell .ui-icon-button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; border: 0; border-radius: 6px; background: none; color: var(--text-secondary); font-size: 16px; }
.app-shell .campaign-menu-cell .ui-icon-button:hover:not(:disabled) { background: var(--selection); color: var(--text); box-shadow: none; }
.campaign-row-menu { inset: auto; margin: 0; min-width: 140px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--popover); box-shadow: var(--shadow); padding: 4px; color: var(--text); }
.campaign-row-menu:popover-open { position: fixed; display: grid; gap: 2px; }
.campaign-row-menu button { border: 0; border-radius: 5px; background: transparent; color: inherit; padding: 8px 10px; text-align: left; font-size: 13px; cursor: pointer; }
.campaign-row-menu button:hover,
.campaign-row-menu button:focus-visible { background: var(--surface-hover); }
.campaign-row-menu .campaign-menu-danger { color: var(--danger); }
.campaign-control-dialog { width: min(420px, calc(100vw - 32px)); margin: auto; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--popover); box-shadow: var(--shadow); padding: 20px; color: var(--text); }
.campaign-control-dialog::backdrop { background: rgba(3, 5, 8, .62); }
.campaign-control-dialog form { display: grid; gap: 16px; }
.campaign-control-dialog h2 { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.campaign-control-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Launch and schedule dialogs of a draft: the body is a Turbo frame loaded when the dialog opens. */
.campaign-wide-dialog { width: min(520px, calc(100vw - 32px)); }
.campaign-wide-dialog[open] { display: grid; gap: 16px; }
.campaign-wide-dialog turbo-frame { display: grid; gap: 16px; }
.campaign-dialog-note { color: var(--text-secondary); font-size: 13px; }
.campaign-facts { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.campaign-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.campaign-facts dt { color: var(--text-secondary); }
.campaign-facts dd { margin: 0; overflow-wrap: anywhere; }
.campaign-launch-blockers,
.campaign-launch-warnings { display: grid; gap: 4px; margin: 0; padding: 10px 14px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft); font-size: 13px; }
.campaign-launch-blockers { border-color: var(--danger); background: var(--danger-soft); }
.campaign-launch-blockers b { color: var(--danger); }
.campaign-launch-warnings b { color: var(--warning); }
.campaign-launch-blockers ul,
.campaign-launch-warnings ul { margin: 0; padding-left: 18px; }
.campaign-field { display: grid; gap: 4px; min-width: 0; border: 0; padding: 0; color: var(--text-secondary); font-size: 13px; }
.campaign-field input:not([type="checkbox"]),
.campaign-field select { height: 34px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }
.campaign-field select[size] { height: auto; padding: 4px; }
.campaign-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campaign-days { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.campaign-days legend { width: 100%; margin-bottom: 4px; padding: 0; }
.campaign-days label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.campaign-row-menu .campaign-menu-disabled { display: grid; gap: 2px; max-width: 260px; opacity: .6; cursor: not-allowed; }
.campaign-row-menu .campaign-menu-disabled small { color: var(--text-secondary); font-size: 12px; white-space: normal; }
.campaign-actions .campaign-menu-disabled { opacity: .5; cursor: not-allowed; }

/* Row selection (operators), as in the inbox: the checkbox sits where the status dot is and takes its place on row hover, keyboard
   focus and while rows are selected; the left padding and the columns are unchanged. The bar (inbox.css .inbox-bulk-bar) covers
   the header rows at their measured height. */
.campaign-check { appearance: none; box-sizing: border-box; flex: none; width: 14px; height: 14px; margin: 0; border: 1.5px solid var(--text-secondary); border-radius: 3px; background: transparent center / 10px no-repeat; cursor: pointer; }
.campaign-check:checked,
.campaign-check:indeterminate { border-color: var(--accent); background-color: var(--accent); }
.campaign-check:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5l4.5-5' fill='none' stroke='%2305231a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.campaign-check:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5h6' stroke='%2305231a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.campaign-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.campaign-under { position: relative; }
.campaign-select { position: absolute; left: -3px; top: 50%; transform: translateY(-50%); opacity: 0; }
.campaign-list-table tbody tr:hover .campaign-select,
.campaign-select:focus-visible,
.is-selecting .campaign-select { opacity: 1; }
.campaign-list-table tbody tr:hover:has(.campaign-select) .campaign-status::before,
.campaign-list-table tbody tr:has(.campaign-select:focus-visible) .campaign-status::before,
.is-selecting tr:has(.campaign-select) .campaign-status::before { visibility: hidden; }
.campaign-bulk-bar { position: sticky; top: 0; left: 0; z-index: 3; box-sizing: border-box; height: var(--bar-h, 56px); margin-bottom: calc(-1 * var(--bar-h, 56px)); display: flex; align-items: center; gap: 6px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border-strong); background: var(--panel); color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.campaign-bulk-bar[hidden] { display: none; }
.campaign-bulk-bar .campaign-check { margin-right: 8px; }
.campaign-bulk-divider { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--border-strong); }
.campaign-bulk-clear { margin-left: auto; }
.campaign-row-menu form { display: contents; }
/* Touch has no hover: the select boxes stay visible and give the status dot's place to them (as in the inbox). */
@media (hover: none) {
  .campaign-select { opacity: 1; }
  .campaign-list-table tbody tr:has(.campaign-select) .campaign-status::before { visibility: hidden; }
}