/* ===========================================================================
   SolutionsSales -- 画面イメージ (FRAGMENT:mock-dash), part 6:
   block 4 一斉配信・ワークフロー別の成果. One row per campaign / workflow:
   name (+ type and state, each icon + word), then 7 metrics, each headed
   by an icon AND a word (送信 / 開封（参考） / クリック / 返信 / 商談 / エラー /
   配信停止). Rates carry a bar: the longest bar is the best campaign in that
   column (sales-mock-5.js recomputes per period). エラー / 配信停止 say 良好
   or 注意 in words, the colour only backs the word.
   Wide (>= 1100px): a table. Narrower: one card per row, every metric with
   its own icon + word label (.sa-db-lb, hidden in the table: the header has it).
   Contrast: --muted on #FFF 5.48:1; --sa-acc-ink 7.4:1; #8A5A00 on #FFF3D6
   5.3:1; #1D6B47 on #E6F2EA 5.8:1.
   =========================================================================== */
.sa-db-tw { margin-top: 10px; }
.sa-db-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.sa-db-tbl th { padding: 7px 8px; border-bottom: 1px solid var(--sa-hair); background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; white-space: nowrap; vertical-align: bottom; }
.sa-db-tbl td { height: 64px; padding: 8px; border-bottom: 1px solid var(--mk-row); color: var(--ink); vertical-align: middle; }
.sa-db-tbl th:first-child, .sa-db-tbl td:first-child { padding-left: 4px; }
/* the row header (name cell) reads like a cell; metric cells top-aligned so
   the main numbers of a row share one line */
.sa-db-tbl th[scope="row"] { padding: 10px 8px 8px 4px; border-bottom: 1px solid var(--mk-row); background: none; font-size: 13px; font-weight: 400; color: var(--ink); white-space: normal; vertical-align: top; }
.sa-db-tbl td.sa-db-m { padding-top: 14px; vertical-align: top; }
.sa-db-tbl .sa-db-hm-open, .sa-db-tbl .sa-db-hm-click, .sa-db-tbl .sa-db-hm-reply { width: 104px; }
.sa-db-hd { display: inline-flex; align-items: center; gap: 4px; }
.sa-db-hd small { font-size: 13px; font-weight: 400; }
.sa-db-hd svg, .sa-db-lb svg, .sa-db-ty svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- name cell: name, then type + state ------------------------------------- */
.sa-db-nm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sa-db-cn { display: inline-block; padding: 0 11px; font-weight: 700; color: var(--navy); }
.sa-db-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 11px; }
.sa-db-ty { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 3px; background: var(--sa-flat); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--muted); white-space: nowrap; }
.sa-db-s { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.sa-db-s::before { content: ""; flex: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; background: var(--sa-acc); }
.sa-db-s--pre::before { border: 2px solid #8A99A8; background: none; }
.sa-db-s--done::before { background: #1D6B47; }

/* ---- metric cells --------------------------------------------------------------- */
.sa-db-m b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
.sa-db-m small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.sa-db-ref b { color: var(--muted); }
.sa-db-key b, .sa-db-dl b { color: var(--sa-acc-ink); }
.sa-db-dl b { font-size: 15px; }
.sa-db-na b { font-weight: 400; color: var(--muted); }
.sa-db-db { position: relative; display: block; width: 76px; height: 5px; margin: 5px 0 2px; overflow: hidden; border-radius: 3px; }   /* no track: the bar compares, it is not a 0-100% gauge */
.sa-db-db i { position: absolute; inset: 0; border-radius: 3px; background: #486581; transform: scaleX(var(--v, 0)); transform-origin: left center; }
.sa-db-ref .sa-db-db i { background: #A3B1BF; }
.sa-db-key .sa-db-db i { background: var(--sa-acc); }
.sa-db-st { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 0 6px; border-radius: 4px; background: #E6F2EA; font-size: 13px; font-weight: 700; line-height: 20px; color: #1D6B47; white-space: nowrap; }
.sa-db-st::before { content: ""; width: 6px; height: 3px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.sa-db-st--warn { background: #FFF3D6; color: #8A5A00; }
.sa-db-st--warn::before { content: "!"; content: "!" / ""; width: auto; height: auto; margin: 0; border: 0; font-weight: 800; transform: none; }
.sa-db-lb { display: none; }
.sa-db-lb small { font-size: 13px; font-weight: 400; }
.sa-db .sa-mock-btn:disabled > svg:last-child { display: none; }   /* no JS: no "go" arrow on a flat label */

/* ---- motion: bars fill each time the tab opens or the period changes -------- */
@keyframes sa-db-fill6 { from { transform: scaleX(0); } }
html.sa-motion .sa-db.is-draw .sa-db-db i { animation: sa-db-fill6 0.7s var(--ease-out) both; animation-delay: calc(250ms + var(--i, 0) * 60ms); }

/* ---- narrower than the table: one card per campaign ----------------------------- */
@media (max-width: 1099px) {
  .sa-db-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sa-db-tbl, .sa-db-tbl tbody { display: block; }
  .sa-db-tbl tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--mk-row); }
  .sa-db-tbl tr[hidden] { display: none; }
  .sa-db-tbl td, .sa-db-tbl td:first-child, .sa-db-tbl th[scope="row"] { display: block; height: auto; padding: 0; border: 0; }
  .sa-db-c0 { grid-column: 1 / -1; }
  .sa-db-lb { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .sa-db-db { width: 100%; }
  .sa-db-tbl tr[data-row="au"] td[data-k="send"] { grid-column: 1 / -1; }
  .sa-db-tbl .sa-db-na { display: none; }   /* 配信前: no metric yet, only 宛先 */
}
@media (max-width: 767px) {
  .sa-db-tbl tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .sa-db-tbl tr { gap: 10px 8px; }
  .sa-db-tbl .sa-mock-btn--row { white-space: normal; text-align: left; }
}
@media (max-width: 359px) {   /* 送信 on its own line, the other 6 in a clean 3 x 2 */
  .sa-db-tbl tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-db-tbl td[data-k="send"] { grid-column: 1 / -1; }
  .sa-db-lb { flex-wrap: wrap; align-items: flex-start; min-height: 30px; white-space: normal; }   /* 開封（参考） takes 2 lines: every label keeps 2 so the values stay level */
  .sa-db-lb small { flex-basis: 100%; }
  .sa-db-tbl td[data-k="send"] .sa-db-lb { min-height: 0; }
}