/* ============================================================
   Project 86 — Review & approve (js/work-order-review.js)
   ------------------------------------------------------------
   The bar under the work order's stepper, the full review sheet (z 1090) and
   the reason dialogs. The dialogs reuse .p86-st-modal-back (z 1100 in
   styles.css) so they stack above the sheet; the photo viewer (z 9999) sits
   above both.
   ============================================================ */

/* ── Bar, stamps, sent-back note ───────────────────────────────────────── */
.p86-wor-wrap { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.p86-wor-wrap > * { margin: 0; }

.p86-wor-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 8px 0 12px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #4f8cff) 45%, transparent);
  border-left: 4px solid var(--accent, #4f8cff);
  background: color-mix(in srgb, var(--accent, #4f8cff) 9%, transparent);
  border-radius: 8px;
}
.p86-wor-bar-text { flex: 1 1 260px; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text, #fff); }
.p86-wor-bar-text strong { font-weight: 700; }
.p86-wor-open { flex: 0 0 auto; }

.p86-wor-stamp {
  margin: 8px 0 12px; padding: 6px 10px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; color: var(--text, #fff);
  border-left: 3px solid #16a34a;
  background: color-mix(in srgb, #16a34a 10%, transparent);
}
.p86-wor-stamp.is-cancel {
  border-left-color: var(--red, #dc2626);
  background: color-mix(in srgb, var(--red, #dc2626) 9%, transparent);
}

.p86-wor-sentback {
  margin: 8px 0 12px; padding: 8px 10px; border-radius: 0 6px 6px 0;
  font-size: 12.5px; line-height: 1.45; color: var(--text, #fff);
  white-space: pre-wrap;
  border-left: 4px solid var(--red, #dc2626);
  background: color-mix(in srgb, var(--red, #dc2626) 8%, transparent);
}
.p86-wor-sentback strong { color: var(--red, #dc2626); }

/* ── The review sheet ──────────────────────────────────────────────────── */
.p86-wor-back {
  position: fixed; inset: 0; z-index: 1090;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.p86-wor-sheet {
  display: flex; flex-direction: column;
  width: min(1100px, calc(100% - 40px)); max-height: 92vh;
  background: var(--panel-bg, #141419); color: var(--text, #fff);
  border: 1px solid var(--border, #333); border-radius: 12px;
  overflow: hidden;
}
.p86-wor-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px 10px; border-bottom: 1px solid var(--border, #333);
}
.p86-wor-head-text { flex: 1 1 auto; min-width: 0; }
.p86-wor-h { margin: 0; font-size: 17px; font-weight: 700; color: var(--text, #fff); }
.p86-wor-title { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--text, #fff); overflow-wrap: anywhere; }
.p86-wor-site { margin-top: 2px; font-size: 12px; color: var(--text-dim, #888); overflow-wrap: anywhere; }
.p86-wor-x {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  background: transparent; color: var(--text, #fff);
  border: 1px solid var(--border, #333); font-size: 20px; line-height: 1; cursor: pointer;
}
.p86-wor-x:hover { background: var(--surface2, rgba(255,255,255,0.06)); }
.p86-wor-x:focus-visible, .p86-wor-pill:focus-visible, .p86-wor-shot:focus-visible {
  outline: 2px solid var(--accent, #4f8cff); outline-offset: 2px;
}

.p86-wor-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.p86-wor-pill {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 4px 11px; border-radius: 999px;
  background: transparent; color: var(--text-dim, #888);
  border: 1px solid var(--border, #333);
}
.p86-wor-pill.is-on {
  color: var(--text, #fff);
  background: color-mix(in srgb, var(--accent, #4f8cff) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 60%, transparent);
}

.p86-wor-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; padding: 12px 18px 16px;
}
.p86-wor-empty { flex: 1 1 auto; padding: 24px 18px; font-size: 13px; color: var(--text-dim, #888); }

.p86-wor-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface, #17171c);
  border: 1px solid var(--border, #333);
}
.p86-wor-card[hidden] { display: none; }
.p86-wor-card.needs-look { border-left: 4px solid #d97706; }
.p86-wor-card-head { font-size: 14px; font-weight: 700; color: var(--text, #fff); overflow-wrap: anywhere; }
.p86-wor-card-status { font-size: 12px; color: var(--text-dim, #888); }

.p86-wor-strip { display: flex; flex-direction: column; gap: 3px; }
.p86-wor-strip-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim, #888);
}
.p86-wor-shots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 24px; }
.p86-wor-shot {
  width: 72px; height: 72px; padding: 0; overflow: hidden; cursor: zoom-in;
  border-radius: 6px; border: 1px solid var(--border, #333); background: var(--input-bg, #101014);
}
.p86-wor-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.p86-wor-miss {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, #d97706 16%, transparent); color: #d97706;
}
.p86-wor-miss.soft { background: transparent; color: var(--text-dim, #888); font-weight: 500; padding-left: 0; }

.p86-wor-notes { display: flex; flex-direction: column; gap: 3px; }
.p86-wor-note { font-size: 12px; line-height: 1.4; color: var(--text, #fff); white-space: pre-wrap; overflow-wrap: anywhere; }

.p86-wor-pick { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; color: var(--text, #fff); cursor: pointer; }
.p86-wor-pick input { width: 16px; height: 16px; margin: 0; }
.p86-wor-pick-note, .p86-wor-rnote {
  width: 100%; background: var(--input-bg, #101014); color: var(--text, #fff);
  border: 1px solid var(--border, #333); border-radius: 6px;
  padding: 6px 9px; font-size: 13px; font-family: inherit;
}
.p86-wor-pick-note[hidden], .p86-wor-rnote[hidden] { display: none; }

.p86-wor-foot {
  position: sticky; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px;
  padding: 10px 18px; border-top: 1px solid var(--border, #333);
  background: var(--panel-bg, #141419);
}
.p86-wor-count { margin-right: auto; font-size: 12.5px; color: #d97706; font-weight: 600; }
.p86-wor-foot-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.p86-wor-danger { color: var(--red, #dc2626) !important; border-color: color-mix(in srgb, var(--red, #dc2626) 55%, transparent) !important; }

/* ── Dialogs ───────────────────────────────────────────────────────────── */
.p86-wor-dlg-body { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text, #fff); line-height: 1.45; }
.p86-wor-lbl { margin-bottom: 2px; }
.p86-wor-req { color: var(--red, #dc2626); font-weight: 700; }
.p86-wor-help, .p86-wor-hint { font-size: 11.5px; color: var(--text-dim, #888); line-height: 1.4; }
.p86-wor-msg, .p86-wor-sum { font-size: 13px; color: var(--text, #fff); }
.p86-wor-warn {
  font-size: 12.5px; color: var(--text, #fff);
  border-left: 3px solid #d97706; padding: 4px 8px;
  background: color-mix(in srgb, #d97706 12%, transparent); border-radius: 0 4px 4px 0;
}
.p86-wor-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text, #fff); cursor: pointer; }
.p86-wor-check input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.p86-wor-reopen { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
.p86-wor-rrow { display: flex; flex-direction: column; gap: 4px; }
.p86-wor-rhead { font-weight: 600; }
.p86-wor-err { color: var(--red, #dc2626); font-size: 12.5px; margin-top: 8px; }
.p86-wor-err[hidden] { display: none; }

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .p86-wor-back { padding: 0; align-items: stretch; }
  .p86-wor-sheet {
    width: 100%; max-height: none; height: 100%;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .p86-wor-head { padding: 12px 14px 8px; }
  .p86-wor-filter { padding: 8px 14px 0; }
  .p86-wor-grid { grid-template-columns: 1fr; padding: 10px 14px 14px; }
  .p86-wor-shot { width: 64px; height: 64px; }
  .p86-wor-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .p86-wor-foot-btns { width: 100%; }
  .p86-wor-foot-btns .ee-btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .p86-wor-x { width: 44px; height: 44px; }
  .p86-wor-pick input, .p86-wor-check input { width: 20px; height: 20px; }
  .p86-wor-pick-note, .p86-wor-rnote { font-size: 16px; min-height: 44px; }
}