/* CRM tab: Email activity. Every rule is scoped to ac- classes the activity module creates.
   admin.html's own <style> loads after this file, so overrides of its shared classes use two classes. */

.ac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ac-nav { align-items: center; }
.ac-updated { font: 500 0.72rem/1.3 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.ac-updated:empty { display: none; }
.ac-body { transition: opacity 0.15s; }
.ac-body[aria-busy="true"] { opacity: 0.6; }

/* Not connected yet */
.ac-notice { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-left: 6px solid var(--asphalt); margin-bottom: 24px; }
.ac-notice p { margin: 0; flex: 1 1 240px; }
.ac-notice-mark { width: 30px; height: 30px; flex: none; color: var(--asphalt); }
.ac-notice-btn.btn { background: var(--asphalt); color: var(--hivis); border-color: var(--asphalt); }
.ac-notice-btn.btn:hover { background: transparent; color: var(--asphalt); }

/* Rate tiles (the shared .stats/.stat, four across) */
.ac-rates.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
@media (max-width: 900px) { .ac-rates.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-rates .stat { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 0; }
.ac-rates .ac-big { margin: 10px 0 0; font-size: clamp(2.2rem, 4vw, 2.9rem); }
.ac-rates .ac-of { margin: 8px 0 0; font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.02em; color: var(--on-dark-soft); }
.ac-rates .ac-flag { margin: 4px 0 0; font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.02em; color: var(--on-dark); }
.ac-rates .ac-flag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--hivis); vertical-align: 1px; }
.ac-rates .ac-flag.ac-over { color: var(--orange); }
.ac-rates .ac-flag.ac-over::before { background: var(--orange); }
.ac-rates .ac-meter { margin: auto -18px 0; padding-top: 16px; height: 21px; }
.ac-rates .ac-meter::before { content: ""; display: block; height: 5px; background: var(--asphalt-3); }
.ac-rates .ac-meter i { display: block; height: 5px; margin-top: -5px; position: relative; background: var(--hivis); }
.ac-rates .stat.warm .ac-meter i { background: var(--orange); }

/* 30-day counts: a light strip under the tiles */
.ac-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0 0 36px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .ac-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ac-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-count { min-width: 0; padding: 12px 14px 14px; background: #fff; }
.ac-count.ac-warn { box-shadow: inset 0 4px 0 var(--orange); }
.ac-count dt { font: 500 0.66rem/1.3 var(--f-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.ac-count .ac-num { margin: 6px 0 0; font: 400 1.75rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ac-count .ac-note { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft); }

/* Two columns on desktop, stacked below */
.ac-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 1000px) { .ac-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
.ac-col { display: grid; gap: 36px; align-content: start; min-width: 0; }
.ac-block { min-width: 0; }
.ac-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.ac-block-head h2 { margin: 0; font-size: 1.35rem; }
.ac-block-head h2:focus { outline: none; }
.ac-meta { font: 500 0.7rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ac-hint { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.45; color: var(--ink-soft); }
.ac-empty { margin: 0; padding: 28px 18px; background: #fff; border: 1.5px dashed var(--line); text-align: center; color: var(--ink-soft); }
.ac-empty p { margin: 0 0 14px; }
.ac-error { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--error); padding: 16px 18px; }
.ac-error .err { margin: 0 0 12px; }

/* Recent campaigns */
.ac-ctable th.ac-r { text-align: right; }
.ac-ctable td.ac-cname { white-space: normal; min-width: 150px; overflow-wrap: anywhere; }
.ac-pct { display: inline-block; min-width: 3.6em; margin-left: 4px; font: 500 0.74rem/1 var(--f-mono); color: var(--ink-soft); text-align: right; }

/* Problem addresses (the shared .c-list, each row a button) */
.ac-plist.c-list { margin: 0; }
.ac-plist.c-list li { display: block; padding: 0; }
.ac-prob {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ac-prob:hover { background: #FAFBF6; }
.ac-prob:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
.ac-prob-who { flex: 1 1 180px; min-width: 0; }
.ac-prob-who b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ac-prob-who small { overflow-wrap: anywhere; }
.ac-prob-why { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ac-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Show more / Show all, attached under a list */
.ac-more {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0;
  background: var(--chalk-2);
  color: var(--ink);
  font: 600 0.9rem/1 var(--f-cond);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}
.ac-more:hover { background: var(--asphalt); color: var(--hivis); }
.ac-more:focus-visible { outline-offset: -3px; }

/* Recent events */
.ac-chips.chips { margin-bottom: 10px; }
.ac-chips .chip { padding: 8px 10px; font-size: 0.85rem; }
.ac-feed { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--asphalt); }
.ac-ev { padding: 10px 14px 11px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.ac-ev:last-child { border-bottom: 0; }
.ac-ev.ac-ev-bad { border-left-color: var(--error); background: #FFF8F6; }
.ac-ev-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-ev-top .badge { flex: none; }
.ac-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
button.ac-who {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}
button.ac-who:hover { text-decoration-color: var(--ink); }
.ac-ev-time { flex: none; margin-left: auto; font: 400 0.74rem/1.3 var(--f-mono); color: var(--ink-soft); white-space: nowrap; }
.ac-ev-sub { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 4px 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--ink-soft); }
.ac-ev-subj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-ev-kind { flex: none; font: 500 0.64rem/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ac-ev-detail { margin: 6px 0 0; font: 400 0.78rem/1.45 var(--f-mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.ac-ev-reason { color: var(--error); }
.ac-link { color: var(--ink); }

/* Event badges (on top of the shared .badge) */
.ac-b-sent, .ac-b-other { background: var(--chalk-2); color: var(--ink-soft); }
.ac-b-delivered { background: #DDF0E5; color: #145C39; }
.ac-b-delayed { background: #FFE2D4; color: #8A2F0A; }
.ac-b-opened { background: #DCEBFA; color: #1A4F86; }
.ac-b-clicked { background: var(--asphalt); color: var(--hivis); }
.ac-b-bounced, .ac-b-complained { background: var(--error); color: #fff; }
.ac-b-failed, .ac-b-suppressed { background: var(--orange); color: var(--asphalt); }
.ac-b-unsub { background: var(--chalk-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

@media (max-width: 560px) {
  .ac-rates .stat { padding: 14px 14px 0; }
  .ac-rates .ac-meter { margin-left: -14px; margin-right: -14px; }
  .ac-prob-why { flex-direction: row; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ac-body { transition: none; } }