/* PCG Market — staff console. Built for a phone in a shop, not a desk. */

.pcg-staff {
  max-width: 780px; margin: 0 auto;
  font-family: var(--pcg-font); color: var(--pcg-text);
}
.pcg-staff *, .pcg-staff a { text-decoration: none; }
.pcg-staff a:not(.pcg-btn):hover { text-decoration: underline; }

.pcg-staff__back { font-size: var(--pcg-fs-sm); margin: 0 0 var(--pcg-space-3); }
.pcg-staff__head { margin-bottom: var(--pcg-space-4); }
.pcg-staff__eyebrow {
  margin: 0 0 var(--pcg-space-1);
  font-size: var(--pcg-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--pcg-text-faint);
}
.pcg-staff__head h1 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-2xl); letter-spacing: -0.02em; }
.pcg-staff__head p { margin: 0; color: var(--pcg-text-muted); max-width: 64ch; }
.pcg-staff__h2 { margin: var(--pcg-space-5) 0 var(--pcg-space-3); font-size: var(--pcg-fs-lg); }

/* Which shop you are typing for has to be unmissable — entering forty prices
   against the wrong shop is a long evening undone. */
.pcg-staff__acting {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-3);
  padding: var(--pcg-space-4);
  margin-bottom: var(--pcg-space-4);
  background: var(--pcg-primary-soft);
  border-left: 3px solid var(--pcg-primary);
  border-radius: var(--pcg-radius);
}
.pcg-staff__acting > div:first-child { flex: 1; min-width: 200px; }
.pcg-staff__acting-label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pcg-text-faint);
}
.pcg-staff__acting strong { display: block; font-size: var(--pcg-fs-lg); }
.pcg-staff__acting .pcg-muted { display: block; font-size: var(--pcg-fs-xs); }
.pcg-staff__acting-actions { display: flex; flex-wrap: wrap; gap: var(--pcg-space-2); }

.pcg-staff__tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pcg-space-3); margin: 0; padding: 0; list-style: none;
}
.pcg-staff__tiles > li { list-style: none; margin: 0; }
.pcg-tile {
  position: relative; display: block; height: 100%;
  padding: var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius); color: var(--pcg-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pcg-tile:hover { border-color: var(--pcg-primary); box-shadow: var(--pcg-shadow); color: var(--pcg-text); }
.pcg-tile strong { display: block; margin-bottom: 3px; }
.pcg-tile span { font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-tile em {
  position: absolute; top: var(--pcg-space-3); right: var(--pcg-space-3);
  font-style: normal; font-weight: 700; font-size: var(--pcg-fs-sm);
  padding: 1px 9px; border-radius: 999px;
  background: var(--pcg-primary); color: #fff;
}

/* The count leads, because it is what decides where to start. */
.pcg-jobs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-job a {
  display: flex; align-items: center; gap: var(--pcg-space-4);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-left-width: 3px; border-radius: var(--pcg-radius); color: var(--pcg-text);
}
.pcg-job a:hover { border-color: var(--pcg-primary); color: var(--pcg-text); }
.pcg-job--urgent a { border-left-color: var(--pcg-warn); }
.pcg-job--data a { border-left-color: var(--pcg-border-strong); }
.pcg-job__count {
  min-width: 54px; text-align: right;
  font-size: var(--pcg-fs-xl); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pcg-job__body { flex: 1; min-width: 0; }
.pcg-job__body strong { display: block; line-height: 1.3; }
.pcg-job__body span { font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); line-height: 1.4; }

.pcg-staff__search { display: flex; gap: var(--pcg-space-2); margin-bottom: var(--pcg-space-4); }
.pcg-staff__search .pcg-input {
  flex: 1; min-height: 44px; padding: 0 var(--pcg-space-3);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  font: inherit; box-sizing: border-box;
}

.pcg-staff__shops { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-staff__shops li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pcg-space-3);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-staff__shops li.is-current { border-color: var(--pcg-success); background: #fbfefc; }
.pcg-staff__shops span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-staff__areas { margin-top: var(--pcg-space-5); font-size: var(--pcg-fs-sm); color: var(--pcg-text-faint); }

@media (max-width: 600px) {
  .pcg-job a { gap: var(--pcg-space-3); padding: var(--pcg-space-3); }
  .pcg-job__count { min-width: 44px; font-size: var(--pcg-fs-lg); }
}

/* ── Fast product entry ────────────────────────────────────────────────────
   Ten people entering twenty models each is two hundred passes through this
   form, so every avoidable click is real hours. The layout keeps the running
   list beside the form so progress against a batch is always visible. */

.pcg-staff__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--pcg-space-5); align-items: start;
}
.pcg-staff__form { max-width: none; }
.pcg-staff__tally { margin: var(--pcg-space-2) 0 0; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-staff__tally strong { color: var(--pcg-text); font-variant-numeric: tabular-nums; }

/* The save bar follows you down a long form: with twenty-seven laptop fields,
   scrolling back to a button at the bottom every time is its own tax. */
.pcg-staff__save {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-3);
  margin-top: var(--pcg-space-4); padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius); box-shadow: var(--pcg-shadow);
}

.pcg-staff__side {
  position: sticky; top: var(--pcg-space-4);
  padding: var(--pcg-space-4);
  background: var(--pcg-surface); border-radius: var(--pcg-radius);
}
.pcg-staff__side h2 { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-base); }

.pcg-staff__recentlist, .pcg-staff__recent ul {
  margin: 0; padding: 0 0 0 1.2em; font-size: var(--pcg-fs-sm);
}
.pcg-staff__recentlist li, .pcg-staff__recent li { padding: 3px 0; }
.pcg-staff__recentlist span, .pcg-staff__recent span {
  display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint);
}
.pcg-staff__recent { margin-top: var(--pcg-space-5); }
.pcg-staff__recent h2 { font-size: var(--pcg-fs-lg); }

@media (max-width: 900px) {
  .pcg-staff__cols { grid-template-columns: 1fr; }
  .pcg-staff__side { position: static; }
}

/* ── Working through a job ─────────────────────────────────────────────── */

.pcg-joblist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-joblist li {
  display: flex; align-items: center; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-joblist img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.pcg-joblist__noimg {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--pcg-surface); border-radius: var(--pcg-radius-sm);
  font-size: 9px; color: var(--pcg-text-faint); text-align: center;
}
.pcg-joblist__body { flex: 1; min-width: 0; }
.pcg-joblist__body span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-joblist__view { font-size: var(--pcg-fs-xs); }
.pcg-joblist__nav { display: flex; gap: var(--pcg-space-2); margin-top: var(--pcg-space-4); }

/* Marks the fields the job is actually about, so a long form does not mean
   hunting for the blank one. */
.pcg-field__missing {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #fdf3e0; color: #8a6100;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.pcg-staff__lead { max-width: 70ch; margin: 0 0 var(--pcg-space-4); color: var(--pcg-text-muted); font-size: var(--pcg-fs-sm); }
.pcg-shopstate { display: inline-block; font-size: var(--pcg-fs-xs); }
.pcg-shopstate--mine { color: var(--pcg-success); font-weight: 600; margin-right: var(--pcg-space-2); }
.pcg-shopstate--taken { color: var(--pcg-text-faint); margin-left: var(--pcg-space-2); }
.pcg-shopstate--claimed { color: var(--pcg-text-muted); }

/* A field a compatibility rule reads. Blank here does not look like a problem,
   which is exactly why it needs saying: the rule just stops working. */
.pcg-field__compat {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--pcg-primary-soft); color: var(--pcg-primary);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  cursor: help;
}
.pcg-moredetails { margin-top: var(--pcg-space-4); }
.pcg-moredetails > summary {
  cursor: pointer; padding: var(--pcg-space-2) 0;
  font-weight: 600; font-size: var(--pcg-fs-base);
}

/* Approve / reject on a queue row. Kept together and to the left of "Fix", so
   the two decisions read as one pair and the edit route stays available. */
.pcg-joblist__decide { display: inline-flex; gap: 6px; margin: 0; }
.pcg-btn--danger { color: var(--pcg-danger, #96313a); border-color: var(--pcg-danger, #96313a); }
.pcg-btn--danger:hover { background: var(--pcg-danger, #96313a); color: #fff; }

/* Data-quality issues on job rows and the edit form. */
.pcg-joblist__issues { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--pcg-fs-xs); }
.pcg-joblist__issues li { color: var(--pcg-warn); }
.pcg-joblist__issues li.is-compat { color: var(--pcg-danger); font-weight: 600; }
.pcg-dq ul { margin: 6px 0 0 18px; padding: 0; }
.pcg-dq li.is-compat { font-weight: 600; }
.pcg-dq em { font-weight: 400; }
.pcg-field--issue { outline: 2px solid var(--pcg-danger); outline-offset: 4px; border-radius: var(--pcg-radius-sm); }