/* DriveBase: dialogen Utskick på #/admin/utskick (beslut 0008 nr 3). Översikten står bakom, och allt här ligger inne i
   dialogen (DB.ui.modal), som är en ljus yta. Bara klasser med prefixet .utskick- och bara variabler ur tokens.css. */

.dialog--utskick { width: min(600px, calc(100% - 32px)); }

.utskick { display: grid; gap: var(--s-5); min-width: 0; }
.utskick-ingress { color: var(--text-dampad); font-size: var(--fs-m); line-height: 1.45; }

/* ================= Mottagare ================= */
.utskick-mottagare { display: grid; gap: 0; margin: 0; }
.utskick-val { display: flex; width: 100%; }
.utskick-val__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); }
.utskick-val__namn { font-weight: var(--vikt-fet); }
.utskick-val__antal { color: var(--text-dampad); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.utskick-system { margin: var(--s-2) 0 0 calc(24px + var(--s-3)); }

/* ================= Meddelandet ================= */
.utskick-meddelande { margin: 0; }
.utskick-meddelande textarea { resize: vertical; min-height: 7rem; }
.utskick-raknare { font-variant-numeric: tabular-nums; }
.utskick-raknare.is-nara { color: var(--text); font-weight: var(--vikt-fet); }
.utskick-epost { display: grid; gap: 0; }
.utskick-epost .falt__hjalp { margin-left: calc(24px + var(--s-3)); margin-top: -6px; }
.utskick-nar {
  font-weight: var(--vikt-fet);
  font-variant-numeric: tabular-nums;
}

/* ================= Aktiva utskick ================= */
.utskick-aktiva { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1.5px solid var(--linje); }
.utskick-aktiva__rubrik {
  font-family: var(--font-rubrik);
  font-size: var(--fs-l);
  font-weight: var(--vikt-rubrik);
  line-height: 1.2;
}
.utskick-aktiva__rubrik:focus-visible { outline: var(--fokus-bredd) solid var(--fokus); outline-offset: 4px; border-radius: var(--r-xs); }
.utskick-aktiva__antal { color: var(--text-dampad); font-variant-numeric: tabular-nums; }
.utskick-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.utskick-post {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--linje);
}
.utskick-post:first-child { border-top: 0; }
.utskick-post__innehall { display: grid; gap: var(--s-1); min-width: 0; }
.utskick-post__text { overflow-wrap: anywhere; line-height: 1.4; }
.utskick-post__meta { color: var(--text-dampad); font-size: var(--fs-s); line-height: 1.4; }
.utskick-post .knapp { flex: none; }
.utskick-tomt { color: var(--text-dampad); font-size: var(--fs-m); }
.utskick-lage { color: var(--text-dampad); font-size: var(--fs-s); overflow-wrap: anywhere; }
.utskick-lage:empty { display: none; }

@media (max-width: 559.98px) {
  .utskick-post { flex-direction: column; align-items: stretch; }
  .utskick-post .knapp { align-self: flex-start; }
}