/* FA-04 Job screen — header/status band, customer card, tabs, Overview,
   status confirmations (boards 19-right, 20, 30, 49). [data-look="v2"] only.
   See frontend/js/jobDetailV2.js for the JS half (relocating a small set of
   existing v1 sections into the panes below, mirroring status text, and
   forwarding taps to the real v1 buttons/handlers — nothing here re-derives
   job data or status logic). With the switch OFF this file has no effect and
   the v1 job screen (still fully intact underneath) renders unchanged. */

/* ---- existing v1 job-screen pieces this package replaces the PRESENTATION
   of — hidden here, not removed; their JS keeps running (setStatus(),
   renderServiceFeeStatus(), etc. all still fire normally). Scoped to
   #scr-detail's own children only — these class/id names are reused by
   other screens elsewhere in the app, untouched. ---- */
[data-look="v2"] #scr-detail > .detail-row,
[data-look="v2"] #scr-detail #d-notes-label,
[data-look="v2"] #scr-detail #d-photos-label,
[data-look="v2"] #scr-detail #d-equipment-label,
[data-look="v2"] #scr-detail #d-status-actions-label,
[data-look="v2"] #scr-detail .status-row,
[data-look="v2"] #scr-detail .action-row,
[data-look="v2"] #scr-detail #btn-service-fee,
[data-look="v2"] #scr-detail #svc-fee-status,
[data-look="v2"] #scr-detail #btn-callflow,
[data-look="v2"] #scr-detail #btn-arrival-inspection,
[data-look="v2"] #scr-detail #btn-new-estimate,
[data-look="v2"] #scr-detail #btn-club-enroll,
[data-look="v2"] #scr-detail #btn-post-debrief {
  display: none;
}

/* ---- status band (the real #status-band element, shared app-wide; v1's own
   style.css already colors it via .next/.done — this just re-themes those
   same states with the reserved §4 status-pair tokens instead of --orange/
   --good, same "recolor in place" convention as tokens.css's task 4). ---- */
[data-look="v2"] .status-band {
  min-height: 36px;
  padding: var(--field-space-2) var(--field-space-4);
  background: var(--field-status-scheduled-fill);
  color: var(--field-status-scheduled-ink);
  font: var(--field-text-label);
  display: flex;
  align-items: center;
}
[data-look="v2"] .status-band.next,
[data-look="v2"] .status-band.done {
  background: var(--field-status-inprogress-fill);
  color: var(--field-status-inprogress-ink);
}

/* ---- customer card (§6) ---- */
[data-look="v2"] .jobv2-customer-card {
  display: flex;
  gap: var(--field-space-3);
  padding: var(--field-space-4);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  margin-bottom: var(--field-space-3);
}
[data-look="v2"] .jobv2-customer-info { flex: 1 1 auto; min-width: 0; }
[data-look="v2"] .jobv2-appt { font: var(--field-text-meta); color: var(--field-text-secondary); margin-bottom: 2px; }
[data-look="v2"] .jobv2-name { font: var(--field-text-card-heading); color: var(--field-text-primary); margin-bottom: 4px; }
[data-look="v2"] .jobv2-line {
  display: flex;
  align-items: center;
  gap: var(--field-space-2);
  font: var(--field-text-body);
  color: var(--field-text-secondary);
  margin: 4px 0;
}
[data-look="v2"] .jobv2-line-icon { font: var(--field-icon-inline); flex-shrink: 0; }
[data-look="v2"] .jobv2-phone-btn {
  border: none;
  background: none;
  padding: 0;
  min-height: 48px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
[data-look="v2"] .jobv2-phone-btn:empty,
[data-look="v2"] .jobv2-phone-btn:has(#jobv2-phone:empty) { display: none; }
[data-look="v2"] .jobv2-service { font: var(--field-text-meta); color: var(--field-text-secondary); margin-top: 6px; }
[data-look="v2"] .jobv2-photo {
  flex-shrink: 0;
  width: 96px;
  height: 72px;
  border-radius: var(--field-radius-control);
  background: var(--field-raised) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23496b80"><path d="M4 6h3l2-2h6l2 2h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm8 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/></svg>') center/32px no-repeat;
  /* Quiet property placeholder (§6): no per-property photo field exists
     anywhere in this app today (confirmed by FA-03's own gap line) — this
     is the same documented gap, not re-solved here. */
}

[data-look="v2"] .jobv2-navigate-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: var(--field-space-4);
  border: none;
  border-radius: var(--field-radius-control);
  background: var(--field-action-fill);
  color: var(--field-action-text);
  font: var(--field-text-button);
}

/* ---- Overview/Photos/Notes/Equipment/Activity tab bar (§6) ---- */
[data-look="v2"] .jobv2-tabs {
  display: flex;
  gap: var(--field-space-2);
  overflow-x: auto;
  min-height: 48px;
  border-bottom: 1px solid var(--field-border);
  margin-bottom: var(--field-space-4);
}
[data-look="v2"] .jobv2-tab {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0 var(--field-space-4);
  min-height: 48px;
  font: var(--field-text-label);
  color: var(--field-text-secondary);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
[data-look="v2"] .jobv2-tab.on { color: var(--field-active-text); border-bottom-color: var(--field-active-text); }
[data-look="v2"] .jobv2-tab-count { font: var(--field-text-meta); margin-left: 4px; }

/* ---- Overview task rows (§6) ---- */
[data-look="v2"] .jobv2-task-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: var(--field-space-3);
  gap: var(--field-space-3);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  margin-bottom: var(--field-space-2);
  text-align: left;
}
[data-look="v2"] .jobv2-task-icon { font: var(--field-icon-main); flex-shrink: 0; }
[data-look="v2"] .jobv2-task-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--field-text-primary); font: var(--field-text-body); }
[data-look="v2"] .jobv2-task-sub { font: var(--field-text-meta); color: var(--field-text-secondary); }
[data-look="v2"] .jobv2-task-status {
  flex-shrink: 0;
  font: var(--field-text-meta);
  font-weight: 600;
  color: var(--field-status-inprogress-ink);
  background: var(--field-status-inprogress-fill);
  border-radius: var(--field-radius-pill);
  padding: 2px 10px;
}
[data-look="v2"] .jobv2-task-chev { flex-shrink: 0; color: var(--field-text-secondary); }

/* ---- Call Flow Guide / Diamond Club / Post-Job Debrief tile row (§6) ---- */
[data-look="v2"] .jobv2-tile-row { display: flex; gap: var(--field-space-2); margin: var(--field-space-3) 0; }
[data-look="v2"] .jobv2-tile {
  flex: 1 1 0;
  min-height: 88px;
  padding: var(--field-space-3);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  color: var(--field-text-primary);
  font: var(--field-text-label);
  text-align: center;
}
[data-look="v2"] .jobv2-tile-icon { display: block; font: var(--field-icon-main); margin-bottom: 4px; }

/* ---- Photos preview / Recent Activity preview sections (§6) ---- */
[data-look="v2"] .jobv2-section { margin-top: var(--field-space-4); }
[data-look="v2"] .jobv2-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--field-space-2); }
[data-look="v2"] .jobv2-section-title { font: var(--field-text-section); color: var(--field-text-primary); }
[data-look="v2"] .jobv2-seeall { border: none; background: none; color: var(--field-active-text); font: var(--field-text-label); min-height: 44px; }
[data-look="v2"] #jobv2-photos-preview-section.hidden,
[data-look="v2"] #jobv2-activity-preview-section:has(#jobv2-activity-slot:empty) { display: none; }
[data-look="v2"] .jobv2-photo-thumbs { display: flex; gap: var(--field-space-2); }
[data-look="v2"] .jobv2-photo-thumbs .photo-thumb { width: 0; flex: 1 1 0; aspect-ratio: 4/3; border-radius: var(--field-radius-control); overflow: hidden; }
[data-look="v2"] .jobv2-photo-thumbs .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-look="v2"] .jobv2-photo-thumbs .photo-delete { display: none; }

[data-look="v2"] .jobv2-more-label { font: var(--field-text-section); color: var(--field-text-primary); margin-top: var(--field-space-5); }
[data-look="v2"] .jobv2-pane-label { font: var(--field-text-section); color: var(--field-text-primary); margin-bottom: var(--field-space-2); }

/* ---- status confirmation dialog (§7, board 30) ---- */
[data-look="v2"] .jobv2-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
}
@media (min-width: 480px) {
  [data-look="v2"] .jobv2-confirm-backdrop { align-items: center; }
}
[data-look="v2"] .jobv2-confirm-backdrop.hidden { display: none; }
[data-look="v2"] .jobv2-confirm-dialog {
  position: relative;
  width: min(480px, 100vw - 32px);
  max-width: 480px;
  padding: 24px;
  background: var(--field-surface);
  color: var(--field-text-primary);
  border-radius: var(--field-radius-sheet) var(--field-radius-sheet) 0 0;
}
@media (min-width: 480px) {
  [data-look="v2"] .jobv2-confirm-dialog { border-radius: var(--field-radius-sheet); }
}
[data-look="v2"] .jobv2-confirm-close { position: absolute; top: 12px; right: 12px; border: none; background: none; color: var(--field-text-secondary); min-width: 48px; min-height: 48px; }
[data-look="v2"] .jobv2-confirm-dialog h3 { font: var(--field-text-page-title); margin: 0 0 12px; }
[data-look="v2"] .jobv2-confirm-dialog p { font: var(--field-text-body); color: var(--field-text-secondary); margin: 0 0 4px; }
[data-look="v2"] .jobv2-confirm-address { color: var(--field-text-primary) !important; }
[data-look="v2"] .jobv2-confirm-actions { display: flex; gap: 8px; margin-top: 24px; }
[data-look="v2"] .jobv2-confirm-actions button { flex: 1 1 0; min-height: 48px; }
[data-look="v2"] .jobv2-confirm-readiness.hidden { display: none; }
[data-look="v2"] .jobv2-confirm-readiness-row { font: var(--field-text-body); color: var(--danger); margin-bottom: 6px; }

/* ---- Completion readiness (FA-15, board 41) ---- */
[data-look="v2"] .jobv2-readiness-section.hidden { display: none; }
[data-look="v2"] #jobv2-readiness-section #install-required-banner { margin: 0 0 var(--field-space-2); }
[data-look="v2"] #jobv2-readiness-section #d-documents-section {
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  padding: var(--field-space-3);
  color: var(--field-text-primary);
  font: var(--field-text-body);
}
[data-look="v2"] #jobv2-readiness-section #d-documents-section.hidden { display: none; }
[data-look="v2"] .jobv2-readiness-ready {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--field-space-3);
  color: var(--field-text-primary);
  font: var(--field-text-body);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
}
[data-look="v2"] .jobv2-readiness-ready.hidden { display: none; }