/* ─── Workforce Suite — Shared Shell Styles ───────────────────
   Owner: pages/staff/staff.css (workforce suite shared)
   Wave 8 / PR-308-E (Workforce Suite migration)
   Rule: Shell layout + workforce-specific tokens only.
   Rule: workforce-dashboard.css handles attendance module CSS.
   ─────────────────────────────────────────────────────────── */

/* ── Workforce tab bar (all workforce pages) ────────────── */
.wf-tab-bar {
  margin-bottom: var(--mr-space-md);
}

.wf-sub-tab-bar {
  margin-bottom: var(--mr-space-md);
  border-bottom-color: var(--mr-border);
}

/* ── Stat cards (Payroll, Staff, Returns summaries) ─────── */
.wf-stat-card {
  text-align: center;
  padding: var(--mr-space-md) !important;
}

.wf-stat-card .stat-label,
.wf-stat-card .mr-caption {
  display: block;
  margin-bottom: var(--mr-space-xs);
}

/* ── Payroll + HR form cards ────────────────────────────── */
.wf-form-card {
  max-width: 640px;
  padding: var(--mr-space-xl) !important;
}

.wf-card-compact {
  padding: var(--mr-space-md) var(--mr-space-lg) !important;
}

.wf-info-card {
  background: var(--mr-neutral-subtle) !important;
  padding: var(--mr-space-md) var(--mr-space-lg) !important;
}

/* ── Payroll stat grid ──────────────────────────────────── */
.wf-stat-grid {
  display: flex;
  gap: var(--mr-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--mr-space-md);
}

/* ── HR policies section headers ────────────────────────── */
.wf-policy-section {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: var(--mr-space-sm);
  padding-bottom: var(--mr-space-xs);
  border-bottom: 1px solid var(--mr-border);
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .wf-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}