#adminMassEmailPanel { min-width: 0; }
#adminMassEmailPanel [hidden] { display: none !important; }
#adminMassEmailPanel .mass-email-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "audience message" "preview message";
  gap: var(--admin-group-inset);
  margin: var(--admin-group-inset);
  align-items: start;
}
.mass-email-audience { grid-area: audience; }
.mass-email-message { grid-area: message; }
.mass-email-preview { grid-area: preview; }
#adminMassEmailPanel .mass-email-card {
  min-width: 0;
  padding: var(--admin-card-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
#adminMassEmailPanel label { display: grid; gap: .35rem; min-width: 0; font-size: var(--text-sm); }
#adminMassEmailPanel label > span { font-weight: 800; }
#adminMassEmailPanel :is(input:not([type=checkbox]), textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 2.625rem;
  padding: .5rem .6875rem;
  border: 1px solid #d8d2ce;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}
#adminMassEmailPanel :is(input, textarea, select):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--cgi-red); }
#adminMassEmailPanel input[type=checkbox] { width: 1.0625rem; height: 1.0625rem; min-width: 1.0625rem; margin: 0; accent-color: var(--cgi-red); }
#adminMassEmailPanel textarea { resize: vertical; }
.mass-email-fields { display: grid; gap: .85rem; }
.mass-email-button-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.mass-email-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.mass-email-actions > button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.mass-email-actions > label { flex: 1 1 8rem; }
.mass-email-language-field { display: grid; gap: .375rem; }
.mass-email-language-field .mass-email-actions > select { flex: 1 1 8rem; min-width: 0; }
#adminMassEmailPanel fieldset { min-width: 0; margin: 0 0 .85rem; padding: 0; border: 0; }
#adminMassEmailPanel legend { margin-bottom: .5rem; font-size: var(--text-sm); font-weight: 700; }
.mass-email-selection { display: grid; gap: .5rem; }
#adminMassEmailPanel .mass-email-selection label { display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
#adminMassEmailPanel .mass-email-selection label > span { font-weight: 600; }
.mass-email-selection label { min-height: 2.125rem; }
.mass-email-selection input { flex: 0 0 auto; }
.mass-email-counts, .mass-email-confirm-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .75rem; margin: .875rem 0 0; font-size: var(--text-sm); }
.mass-email-counts dd, .mass-email-confirm-summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.mass-email-counts { align-items: center; border-top: 1px solid var(--line); padding-top: .875rem; }
.mass-email-counts:empty { display: none; }
.mass-email-counts dd { color: var(--cgi-purple); font-size: 1.75rem; line-height: 1.2; }
.mass-email-confirm-summary { margin-bottom: 1rem; }
.mass-email-confirm-summary dd { max-width: 22rem; text-align: right; }
.mass-email-status, .mass-email-muted { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.mass-email-muted { color: var(--muted); }
#massEmailDeliveryDisabled { margin-top: .75rem; }
#massEmailPreviewSubject { font-weight: 700; overflow-wrap: anywhere; }
#massEmailPreview { max-width: 100%; overflow-x: auto; }
#massEmailPreviewStatus { margin-bottom: .5rem; }
.mass-email-history { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.mass-email-history-card { display: grid; gap: .6rem; }
.mass-email-history-heading { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: .5rem; }
.mass-email-history-heading strong { overflow-wrap: anywhere; }
.mass-email-progress { display: flex; flex-wrap: wrap; gap: .4rem .5rem; font-size: var(--text-sm); }
.mass-email-count-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mass-email-count-pill[data-status="sent"] { border-color: #b9d3c5; background: #e7f4ec; color: var(--success); }
.mass-email-count-pill[data-status="failed"] { border-color: #eac2ca; background: #fff1f3; color: #a91630; }
.mass-email-count-pill[data-status="needsReview"] { border-color: #e6c680; background: #fff5da; color: var(--warning); }
.mass-email-count-pill:is([data-status="skipped"], [data-status="cancelled"]) { border-color: var(--line); background: var(--soft); color: var(--muted); }
.mass-email-history progress { width: 100%; accent-color: var(--cgi-purple); }
.mass-email-selected-details { margin-top: .75rem; }
.mass-email-selected-details details + details { margin-top: .75rem; }
.mass-email-selected-details summary { cursor: pointer; font-weight: 700; overflow-wrap: anywhere; }
.mass-email-recipients-wrap { max-height: 22rem; overflow: auto; margin-top: .75rem; }
.mass-email-recipients { width: 100%; min-width: 44rem; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); }
.mass-email-recipients :is(th, td) { padding: .5rem; text-align: left; border-bottom: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; }
.mass-email-recipients th { position: sticky; top: 0; background: #fff; }
.mass-email-audit { display: grid; gap: .75rem; padding-left: 1.25rem; font-size: var(--text-sm); overflow-wrap: anywhere; }
.mass-email-confirm { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: auto; }
.mass-email-confirm::backdrop { background: rgb(0 0 0 / 45%); }
.mass-email-confirm form { display: grid; gap: 1rem; }
.mass-email-confirm h2, .mass-email-confirm p { margin: 0; }
#adminMassEmailPanel :is(.mass-email-status, .mass-email-muted, .mass-email-selection, .mass-email-history-card, .mass-email-confirm-summary)[hidden] { display: none; }
@media (max-width: 900px) {
  #adminMassEmailPanel .mass-email-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "audience" "message" "preview"; }
}
@media (max-width: 600px) {
  .mass-email-button-fields { grid-template-columns: minmax(0, 1fr); }
  .mass-email-confirm { padding: 1rem; }
  .mass-email-confirm .mass-email-actions > button { width: 100%; }
  .mass-email-confirm-summary { grid-template-columns: minmax(0, 1fr); }
  .mass-email-confirm-summary dd { text-align: left; margin-bottom: .4rem; }
}
