/* Newsletters and contacts: the send dialog, reports, lists.
   docs/NEWSLETTER.md. Colours are the admin's tokens (application.css). */

/* ---------- lists and tables ---------- */
.empty-state { padding: 2rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; }
.empty-state p { max-width: 36rem; margin: .35rem auto; }
.check-cell { width: 2.25rem; padding-right: 0 !important; }
.check-cell input { width: 1rem; height: 1rem; }
.bulk-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0 0 .75rem; }
.bulk-bar select { width: auto; min-width: 12rem; padding: .35rem .6rem; font-size: .85rem; }
.pager { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; margin: 1rem 0; }
.pager .muted { margin-right: auto; }
.tag { display: inline-block; font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--fg-muted) !important; text-decoration: none; font-weight: 500 !important; margin-top: .25rem; }
.tag:hover { color: var(--fg) !important; }
.badge + .badge { margin-left: .15rem; }
.badge { white-space: nowrap; margin-bottom: .2rem; }
.badge.pending { border-style: dashed; }
.badge.status-subscribed, .badge.cstatus-sent, .badge.outcome-delivered, .badge.outcome-opened, .badge.outcome-clicked { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.badge.status-bounced, .badge.status-complained, .badge.cstatus-failed, .badge.outcome-bounced, .badge.outcome-complained, .badge.outcome-failed { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.badge.cstatus-scheduled, .badge.cstatus-sending { background: color-mix(in srgb, var(--link) 12%, transparent); color: var(--link); border-color: color-mix(in srgb, var(--link) 30%, transparent); }
table.compact { font-size: .85rem; }
/* Phones: the columns that matter; the rest is a click away. */
@media (max-width: 700px) { .wide-only { display: none; } td.title-cell { word-break: break-word; } }
table.compact th, table.compact td { padding: .5rem .7rem; }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .88rem; }
dl.facts { margin: 0; }
dl.facts dt:first-child { margin-top: 0; }
.nl-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; margin-bottom: 1.5rem; }
.nl-columns > div { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) { .nl-columns { grid-template-columns: 1fr; } }

/* ---------- import ---------- */
.stack.wide-stack { max-width: none; }
.import-scroll { overflow-x: auto; border-radius: var(--radius); }
.import-map th { text-transform: none; letter-spacing: 0; min-width: 11rem; vertical-align: bottom; }
.import-head { display: block; font-size: .78rem; margin-bottom: .35rem; color: var(--fg); }
.import-map select { font-size: .82rem; padding: .35rem .5rem; }

/* ---------- the email editor (the post editor, email-sized) ---------- */
/* The page is the email: a 536px column with 32px gutters, like the send. */
.pe-email .pe-page { padding: 40px 32px 72px; border-radius: 12px; }
.pe-title.pe-title-small { font-size: 1.35em; font-family: inherit; color: var(--pe-text); }

/* ---------- the send dialog ---------- */
.nl-dialog {
  width: min(1180px, calc(100vw - 2rem)); height: min(880px, calc(100vh - 2rem)); max-width: none; max-height: none;
  padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--fg);
  box-shadow: 0 24px 64px rgb(0 0 0 / .28);
}
.nl-dialog::backdrop { background: rgb(0 0 0 / .45); }
.nl-dialog-body { height: 100%; }
.nl-panel { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); height: 100%; }
.nl-form { overflow-y: auto; padding: 0 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; border-right: 1px solid var(--border); }
.nl-form-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 .6rem; background: var(--panel); }
.nl-form-head h2 { margin: 0; font-size: 1.15rem; }
.nl-form .flash { margin: 0; }
.nl-field { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; font-weight: 550; margin: 0; }
fieldset.nl-field { padding: .75rem .9rem; }
.nl-form input, .nl-form select, .nl-field .muted, .nl-hint { font-weight: 400; }
.nl-field .check, .nl-step .check, .nl-warn .check { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 450; font-size: .875rem; }
.nl-field .check input, .nl-step .check input, .nl-warn .check input { width: auto; }
.nl-lists { display: flex; flex-direction: column; gap: .35rem; }
.nl-lists .check span .muted { margin-left: .25rem; }
.nl-count { margin: .35rem 0 0; font-weight: 450; }
.nl-more summary { font-size: .8rem; margin-top: .2rem; }
.nl-more[open] > :not(summary) { margin-top: .6rem; }
.nl-from { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .4rem; font-weight: 450; }
.nl-from .nl-more { flex-basis: 100%; }
.nl-hint { margin-top: -.6rem; }
.nl-warn { padding: .7rem .85rem; border-radius: 8px; font-size: .85rem; background: color-mix(in srgb, #f59e0b 12%, var(--panel)); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); display: flex; flex-direction: column; gap: .45rem; }
.nl-warn.nl-danger { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.nl-warn[hidden] { display: none; }
.nl-step { border-top: 1px solid var(--border); padding-top: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.nl-step h3 { margin: 0; font-size: .92rem; }
.nl-step .row input[type=email] { flex: 1 1 12rem; }
.nl-step input[type=datetime-local] { width: auto; padding: .3rem .5rem; font-size: .85rem; }
.nl-step p.muted { margin: 0; min-height: 1.2em; }
.nl-problems { margin: 0; padding: 0 0 0 1.1rem; color: var(--warn-fg); font-size: .85rem; }
.nl-problems:empty { display: none; }
.nl-form-foot { position: sticky; bottom: -1.2rem; margin: auto -1.4rem -1.2rem; padding: .9rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--panel); border-top: 1px solid var(--border); }
.nl-form-foot .button:disabled { opacity: .4; cursor: not-allowed; }
.nl-preview { display: flex; flex-direction: column; min-width: 0; background: var(--bg-subtle); border-radius: 0 14px 14px 0; }
.nl-preview-bar { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: .8rem; padding: .3rem .75rem; border: 0; background: var(--panel); color: var(--fg-muted); cursor: pointer; }
.seg button.is-on { background: var(--accent); color: var(--accent-fg); }
.nl-frame-wrap { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 1rem; overflow: hidden; }
.nl-frame { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: width .2s; }
.nl-panel.is-phone .nl-frame { width: 390px; }

@media (max-width: 860px) {
  .nl-dialog { width: 100vw; height: 100dvh; border-radius: 0; margin: 0; }
  .nl-panel { grid-template-columns: 1fr; grid-template-rows: auto; overflow-y: auto; }
  .nl-form { overflow: visible; border-right: 0; }
  .nl-form-foot { bottom: 0; margin: 0 -1.4rem; }
  .nl-preview { border-radius: 0; min-height: 80vh; }
}