/* ==========================================================================
   Wrenmark Staffing — brand override
   app.css supplies every component; this only re-points the brand tokens.
   Load AFTER app.css.
   ========================================================================== */

:root {
  --brand:      #3d2b56;   /* plum — distinct from the other three clients */
  --brand-deep: #2b1e3d;
  --brand-tint: #efeaf5;
  --brass:      #2aa79b;   /* teal accent */
}

.avatar.brass { background: #d9f2ef; color: #14615a; }

/* --------------------------------------------------------------------------
   Document matrix — a worker's file at a glance.
   Parallel expiries rather than a sequence: the earliest date governs
   whether the worker can be placed at all.
   -------------------------------------------------------------------------- */

.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }

.doccard {
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  background: var(--card);
}

.doccard .d-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.doccard .d-exp { font: 500 11.5px var(--mono); color: var(--ink-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.doccard .d-days { font: 600 15px var(--mono); margin-top: 6px; font-variant-numeric: tabular-nums; }

.doccard.ok       { border-top-color: var(--good); }
.doccard.ok .d-days { color: #0a6b0a; }
.doccard.soon     { border-top-color: var(--warning); background: #fffdf6; }
.doccard.soon .d-days { color: #8a6008; }
.doccard.binding  { border-top-color: var(--critical); background: #fff8f8; box-shadow: inset 0 0 0 1px #f0c8c8; }
.doccard.binding .d-days { color: #9e2b2b; }
.doccard.gone     { border-top-color: var(--ink-3); background: var(--sunken); }
.doccard.gone .d-days { color: var(--ink-3); }

/* The one date that decides everything */
.binding-note {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--critical-bg);
  border: 1px solid #f0c8c8;
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 13.5px;
  color: #8a2626;
  line-height: 1.55;
}

.binding-note b { font-weight: 600; }

.binding-note .bn-date {
  flex: none;
  font: 600 13px var(--mono);
  background: #fff;
  border: 1px solid #f0c8c8;
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  color: #9e2b2b;
  white-space: nowrap;
}