/* ==========================================================================
   Merrivale Health Staffing — brand override
   app.css supplies every component. Load AFTER app.css.
   ========================================================================== */

:root {
  --brand:      #7a2f5c;   /* rose-plum — the ninth distinct client identity */
  --brand-deep: #5b1f44;
  --brand-tint: #f7ebf2;
  --brass:      #e8b04a;
}

.avatar.brass { background: #fbeed3; color: #7d5a10; }

/* --------------------------------------------------------------------------
   Pay breakdown — one shift, decomposed into the bands the award actually
   pays on. Two columns: what was paid, and what should have been.
   -------------------------------------------------------------------------- */

.paybreak { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.pb-row {
  display: grid;
  grid-template-columns: 168px 1fr 104px 104px 92px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.pb-row:last-child { border-bottom: 0; }

.pb-row.head {
  background: var(--sunken);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pb-row .pb-band { font-weight: 500; }
.pb-row .pb-band span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.pb-row .pb-n { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--mono); font-size: 12.5px; }
.pb-row .pb-delta { font-variant-numeric: tabular-nums; text-align: right; font: 600 12.5px var(--mono); }

.pb-row.wrong { background: #fff8f8; }
.pb-row.wrong .pb-delta { color: #9e2b2b; }
.pb-row.ok .pb-delta { color: var(--ink-3); }

.pb-row.total { background: var(--brand-tint); font-weight: 600; border-top: 1px solid var(--line); }
.pb-row.total .pb-delta { color: #9e2b2b; font-size: 14px; }

/* The compounding strip — an error in a pay run does not sit still */
.compound { display: flex; align-items: stretch; border-radius: var(--radius-sm); overflow: hidden; height: 44px; }
.compound div {
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px; font: 600 11.5px var(--sans);
  white-space: nowrap; min-width: 0; overflow: hidden;
}
.compound .y1 { background: #f6d9d9; color: #8a2626; }
.compound .y2 { background: #efc2c2; color: #8a2626; }
.compound .y3 { background: #e5a8a8; color: #6d1c1c; }
.compound .y4 { background: #d88d8d; color: #fff; }
.compound .now { background: var(--critical); color: #fff; flex: 1; }