.staff-page .card, .staff-page .card-body, .staff-page .row > * { min-width: 0; }
.staff-page .dash-graph { width: 100%; max-width: 100%; }
.staff-page .tabulator { max-width: 100%; }
.staff-kpi-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .4rem;
  margin-top: .5rem;
  color: var(--text);
}
.staff-kpi-number { font-size: 1.65rem; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.staff-kpi-unit { color: var(--text-muted); font-size: .9rem; }
@media (max-width: 767.98px) {
  /* Same spacing and surfaces as the mobile Channels / Payments pages. */
  .staff-page { padding: 0 12px 28px !important; }
  .staff-page h2 { font-size: 1.65rem; line-height: 1.15; }
  .staff-page > p { font-size: .9rem; }
  #staff-content { display: flex; flex-direction: column; min-width: 0; }
  #staff-content > * { min-width: 0; }
  .staff-kpis { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
  .staff-page .card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }
  .staff-page .card-body { padding: 14px 12px; }
  .staff-kpis .tuco-kpi-label { font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
  .staff-kpi-number { font-size: clamp(1.15rem, 5vw, 1.65rem); line-height: 1.25; }
  .staff-kpi-unit { font-size: .8rem; }
  .staff-page .card-header {
    padding: 15px 16px;
    background: var(--filter-surface);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-weight: var(--fw-semibold);
    font-size: .95rem;
  }
  .staff-panel { margin-bottom: 16px !important; }
  .staff-trend, .staff-ratio-charts { order: 1; }
  .staff-matrix { order: 2; }
  .staff-detail-table { order: 3; }
  .staff-method { order: 4; }
  .staff-page .tabulator-tableHolder, .staff-page .tuco-grid-scroll {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .staff-page .tabulator .tabulator-footer { white-space: normal; }
  .staff-page .tabulator .tabulator-paginator { white-space: normal; }
  .staff-page .tabulator .tabulator-page {
    min-width: 36px;
    min-height: 44px;
    margin-top: 4px;
  }
  .staff-page .tabulator input, .staff-page .tabulator select { min-height: 44px; }
  .staff-page .tuco-grid-export { min-width: 44px; min-height: 44px; }
  .staff-page summary { min-height: 44px; padding: 10px 0; }
}


/* Staff follows the concise Mix products mobile view. */
.staff-mobile-summary { display: none; }
@media (max-width: 767.98px) {
  .staff-mobile-summary { display: block; }
  .staff-page > p,
  #staff-content > p,
  .staff-desktop-only,
  .staff-matrix,
  .staff-trend,
  .staff-ratio-charts,
  .staff-detail-table,
  .staff-method { display: none !important; }
}

@media (max-width: 767.98px) {
  .staff-mobile-restaurants { overflow: hidden; }
  .staff-mobile-restaurants .card-body { padding: 0; }
  .staff-mobile-restaurants .sales-mobile-restaurant-header,
  .staff-mobile-restaurants .sales-mobile-restaurant-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(96px, 1fr) minmax(54px, .65fr);
  }
  .staff-mobile-restaurants .sales-mobile-restaurant-name,
  .staff-mobile-restaurants .sales-mobile-restaurant-value {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}