/* ─── STAFFING PAGE ──────────────────────────────────────── */

.staffing-page-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-height: 0;
}

.staffing-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.staffing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.staffing-table thead th {
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.staffing-tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.staffing-tr:last-child { border-bottom: none; }
.staffing-tr:hover { background: var(--surface2); }

.staffing-td {
  padding: 11px 14px;
  vertical-align: middle;
}

.staffing-td-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}

.staffing-event-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  display: block;
}

.staffing-client {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  display: block;
}

.staffing-td-date   { color: var(--text-muted); white-space: nowrap; }
.staffing-td-office { color: var(--text-muted); white-space: nowrap; font-size: 12px; }
.staffing-td-pm     { color: var(--text-muted); white-space: nowrap; font-size: 12px; }

.staffing-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.staffing-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  overflow: hidden;
}

.staffing-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.staffing-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.staffing-td-positions {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.staffing-filled { font-weight: 600; color: var(--text); }
.staffing-slash  { color: var(--text-dim); }
.staffing-total  { color: var(--text-muted); }

.staffing-open-badge {
  display: inline-block;
  margin-left: 8px;
  background: rgba(239,68,68,0.15);
  color: #f87171;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
}

.staffing-lightning-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.staffing-lightning-link:hover { opacity: 1; }