/* commission.css — Phase 2.4b on-screen styles for the commission statement.
   Screen only; print.css handles the PDF/print layout. */

/* Inline "?" help affordance (CLAUDE.md §4.10). */
.help-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.25em;
  border-radius: 50%;
  background: var(--color-fill-secondary, #e5e5ea);
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.72em;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

/* DRAFT / LOCKED status pills (reuse the .badge base). */
.badge-status-draft  { background: #fff3cd; color: #8a6d00; }
.badge-status-locked { background: #d1e7dd; color: #0f5132; }

/* Commission statement table (the paper layout). */
.commission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.commission-table th,
.commission-table td {
  border: 1px solid var(--color-separator, #d1d1d6);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.commission-table th { background: var(--color-fill-secondary, #f2f2f7); font-weight: 600; }
.commission-table td.num,
.commission-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.commission-table tr.commission-group td {
  background: var(--color-fill-secondary, #ececf0);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.commission-table tr.commission-row:hover td { background: var(--color-fill-hover, #f7f7fa); }
.commission-table tr.commission-row.bf td { font-style: italic; }

.commission-totals { margin-top: var(--space-3, 12px); }
.commission-total-claim { border-top: 2px solid var(--color-text-primary, #1c1c1e); }

.commission-print-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.85rem;
}
.commission-print-foot .approved-line { font-weight: 600; }