/* DM2 Approval Queue (list page) — Wave 3 ui-list, §E-2 + §E-5 + §E-6.
   `.dma-` prefix to avoid collision with operator-review (`.or-`) and the
   sister detail page (`.dma-detail-` if needed). Uses tokens from style.css. */

.dma-intro {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.dma-intro strong { color: var(--text-primary); }

/* ── AI quality panel (D-7 / E-2 — rolling 7d) ──────────────────── */
.dma-quality-panel {
  margin-bottom: var(--space-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.dma-quality-heading {
  margin: 0 0 var(--space-md) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.dma-quality-window {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dma-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.dma-quality-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) 0;
}
.dma-quality-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.dma-quality-value {
  font-family: var(--font-number, var(--font-heading));
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.dma-quality-hint {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* ── Status summary panel (E-2 / E-5 / E-6) ─────────────────────── */
.dma-summary-panel {
  margin-bottom: var(--space-lg);
}
.dma-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
}
.dma-summary-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.dma-summary-item[hidden] {
  display: none;
}
.dma-summary-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.dma-summary-value {
  font-family: var(--font-number, var(--font-heading));
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dma-summary-fail-active {
  background: var(--alert-critical-bg);
  border-color: var(--alert-critical);
}
.dma-summary-fail-active .dma-summary-value {
  color: var(--alert-critical);
}
.dma-summary-stuck {
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning);
}
.dma-summary-stuck .dma-summary-value {
  color: var(--alert-warning);
}
.dma-summary-stuck-link {
  color: var(--alert-warning);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.dma-summary-stuck-link:visited {
  color: var(--alert-warning);
}
.dma-summary-stuck-link:hover,
.dma-summary-stuck-link:focus {
  text-decoration: underline;
}
.dma-summary-stuck-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.dma-toolbar {
  /* Inherits filter-bar layout from style.css */
}

/* ── Table ───────────────────────────────────────────────────── */
.dma-table-wrapper {
  /* Inherits .table-wrapper basics */
}
.dma-table th,
.dma-table td {
  vertical-align: middle;
}
.dma-col-created  { width: 96px;  white-space: nowrap; color: var(--text-primary); }
/* These two carry client / target names, and `width` on a table cell is a
   SUGGESTION under table-layout:auto — the global `.data-table td` nowrap gave
   the text no wrap opportunity, so 案件 rendered at 458px against its declared
   160px and squeezed .dma-col-text (max-width:0, sized from the remainder)
   down to 101px at 1440px, clipping its own 候補プレビュー header.
   That failure mode produces NO horizontal scrollbar — the flex column simply
   absorbs the excess and truncates — which is why an overflow probe reports the
   table clean. Letting the names wrap makes the declared widths hold. */
.dma-col-client   { width: 160px; color: var(--text-primary); }
.dma-col-target   { width: 200px; color: var(--text-primary); }

/* Note the `.dma-table td` qualifier: it is required, not stylistic. The
   global rule is `.data-table td { white-space: nowrap }` at (0,1,1), so a bare
   `.dma-col-client` at (0,1,0) loses and the declaration is silently inert —
   which is exactly how `.dma-col-created`/`.dma-col-text` below have been
   restating nowrap to no effect. (0,2,1) wins. */
.dma-table td.dma-col-client,
.dma-table td.dma-col-target {
  white-space: normal;
  overflow-wrap: anywhere;
}
.dma-col-status   { width: 96px;  text-align: center; }
.dma-col-text     { /* flex */ }
.dma-col-actions  { width: 84px;  text-align: right; }

.dma-row {
  cursor: pointer;
}
.dma-row:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
.dma-row:hover {
  background: var(--bg-tertiary) !important;
}
.dma-row-selected {
  background: rgba(74, 127, 196, 0.08) !important;
}
.dma-row-selected:hover {
  background: rgba(74, 127, 196, 0.14) !important;
}

.dma-col-text {
  color: var(--text-primary);
  max-width: 0; /* with white-space:nowrap + overflow:hidden lets ellipsis fire */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dma-edit-mark {
  display: inline-block;
  margin-left: var(--space-xs);
  color: var(--alert-warning);
  font-weight: 600;
}

.dma-stage-badge {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 1px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.dma-empty-row td {
  padding: var(--space-3xl) !important;
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Status badges ───────────────────────────────────────────── */
.dma-status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  white-space: nowrap;
}
.dma-status-pending_approval {
  color: var(--alert-warning);
  background: var(--alert-warning-bg);
  border-color: var(--alert-warning);
}
.dma-status-approved {
  color: var(--status-active);
  background: var(--status-active-bg);
  border-color: var(--status-active);
}
.dma-status-sending {
  color: #0369a1;
  background: rgba(2,132,199,0.14);
  border-color: #0284c7;
}
.dma-status-sent {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}
.dma-status-cancelled {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}
.dma-status-dm2_send_failed_terminal {
  color: var(--alert-critical);
  background: var(--alert-critical-bg);
  border-color: var(--alert-critical);
}
.dma-status-archived {
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

/* ── Sidebar nav badges (pending / fail) ─────────────────────── */
.dma-nav-badge {
  margin-left: var(--space-xs);
  padding: 1px 6px;
  font-size: 0.625rem;
  min-width: 16px;
}
.dma-nav-badge-fail {
  background: var(--alert-critical);
}

/* ── Mobile card list (≤480px) ───────────────────────────────── */
.dma-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none; /* Hidden by default; @media unhides on narrow screens */
}
.dma-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.dma-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.dma-card-target {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.dma-card-meta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.dma-card-text {
  font-size: 0.8125rem;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dma-card-actions {
  display: flex;
  justify-content: flex-end;
}
.dma-card-empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}

@media (max-width: 480px) {
  .dma-table-scroll { display: none; }
  .dma-card-list    { display: block; }
  .dma-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .dma-quality-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
  .dma-quality-panel { padding: var(--space-md); }
}

@media (max-width: 768px) {
  .dma-col-client { width: auto; }
  .dma-col-target { width: auto; }
}

/* ── prefers-reduced-motion (r6 MED-5) ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* No sortable-header override needed here, deliberately. This table is a
   .data-table, so its <th> and .sort-toggle-btn already read the SAME
   --table-py/--table-px tokens; style.css's `th:has(> .sort-toggle-btn)
   { padding: 0 }` is sufficient and the two stay in step if those tokens are
   retuned. .ng-table / .pool-table pad from --space-* instead and DO need a
   local restatement — see page-ng-list.css. Measured here: 16px, matching. */