/* ============================================================
   TTI Inspection Modal — paste into Mappr's <style> block
   Prefix: insp- on all classes to avoid collision with Mappr
   ============================================================ */

/* Backdrop + sheet */
.insp-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10, 18, 28, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .22s ease;
  pointer-events: none;
}
.insp-backdrop:has(#inspModal.open) { opacity: 1; pointer-events: all; }

.insp-sheet {
  width: 100%; max-width: 640px;
  max-height: 92dvh;
  background: #F4F7F9;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,1,.28,1);
  overflow: hidden;
}
#inspModal.open { transform: translateY(0); }

/* Header */
.insp-header {
  background: #2E7DB5;
  padding: 14px 16px 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.insp-headid {
  display: flex; align-items: center; gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; font-weight: 800; color: #fff; line-height: 1;
}
.insp-headid-sep { opacity: .45; font-weight: 400; }
.insp-headid-hole { }
.insp-headid-zone { }
.insp-headid-stn  { }
.insp-header-label {
  flex: 1; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75);
  letter-spacing: .06em; text-transform: uppercase;
}
.insp-close {
  width: 36px; height: 36px; border: 0; background: rgba(255,255,255,.15);
  border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0;
}
.insp-close svg { width: 16px; height: 16px; }
.insp-close:active { background: rgba(255,255,255,.28); }

/* Scrollable body */
.insp-body {
  flex: 1; overflow-y: auto; padding: 12px 12px 8px;
  -webkit-overflow-scrolling: touch;
}

/* Cards */
.insp-card {
  background: #fff; border: 1px solid #D7DFE6;
  border-radius: 14px; padding: 14px; margin-bottom: 10px;
}
.insp-sec {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #1F5E8C;
}
.insp-label {
  display: block; font-size: 13px; font-weight: 700;
  color: #4A5A68; margin: 0 0 6px;
}
.insp-hint {
  font-size: 12px; color: #8494A2; margin-top: 6px; line-height: 1.4;
}

/* Inputs */
.insp-input {
  width: 100%; border: 1.5px solid #D7DFE6; border-radius: 10px;
  padding: 11px 13px; font-size: 16px; background: #fff;
  color: #1A2530; font-family: inherit; min-height: 48px;
}
.insp-input:focus { outline: 2px solid #2E7DB5; border-color: #2E7DB5; }
textarea.insp-input { resize: vertical; min-height: 72px; line-height: 1.5; }
.insp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Wheel picker (Head Details' Hole/Zone/Station — see index.html's shared
   wp-* component). This modal keeps its own fixed insp- skin rather than the
   host page's --bg/--accent theme variables (see the big comment at the top
   of this file), so the wp-* custom properties are overridden here to match
   it, instead of inheriting whatever theme happens to be active. */
.insp-card .wp-box {
  --wp-bg: #fff; --wp-border: #D7DFE6; --wp-text: #1A2530;
  --wp-dim: #8494A2; --wp-hl: rgba(46, 125, 181, 0.08); --wp-accent: #2E7DB5;
  min-height: 48px; font-size: 16px;
}

/* Segmented controls */
.insp-seg {
  display: flex; gap: 7px; flex-wrap: wrap;
}
.insp-seg button {
  flex: 1; min-height: 48px; min-width: 60px;
  border: 1.5px solid #D7DFE6; background: #fff;
  border-radius: 10px; font-size: 15px; font-weight: 700;
  color: #4A5A68; cursor: pointer; padding: 8px 6px;
  transition: background .12s, border-color .12s, color .12s;
}
.insp-seg button.on     { background: #2E7DB5; border-color: #2E7DB5; color: #fff; }
.insp-seg-green button.on { background: #3D9B4F; border-color: #3D9B4F; color: #fff; }
.insp-seg button.on.bad  { background: #C0392B; border-color: #C0392B; color: #fff; }
.insp-seg button.on.good { background: #3D9B4F; border-color: #3D9B4F; color: #fff; }
.insp-seg button:active  { transform: scale(.97); }

/* Yes/no rows */
.insp-yn {
  display: flex; align-items: center; gap: 10px;
}
.insp-yn-q {
  flex: 1; font-size: 14.5px; font-weight: 600; color: #4A5A68;
}
.insp-yn .insp-seg { flex: 0 0 150px; }

/* ── Nozzle photo slots ── */
.insp-noz-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px;
}
.insp-noz-slot { display: flex; flex-direction: column; gap: 5px; }
.insp-noz-label {
  font-size: 12px; font-weight: 700; color: #8494A2;
  text-align: center; letter-spacing: .04em;
}
.insp-noz-thumb {
  position: relative; aspect-ratio: 1; border-radius: 12px;
  overflow: hidden; border: 2px solid #D7DFE6; background: #F4F7F9;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.insp-noz-thumb.empty { border-style: dashed; }
.insp-noz-thumb.empty svg { width: 28px; height: 28px; color: #8494A2; }
.insp-noz-thumb.empty span { font-size: 12px; font-weight: 600; color: #8494A2; }
.insp-noz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp-noz-rm {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0;
  font-size: 15px; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.insp-noz-ai-badge {
  position: absolute; bottom: 5px; left: 5px;
  background: #22c55e; color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 6px; letter-spacing: .04em;
}

/* AI identify button row */
.insp-noz-ai {
  grid-column: 1 / -1; display: flex; justify-content: center;
}
.insp-btn-ai {
  display: flex; align-items: center; gap: 8px; padding: 11px 20px;
  background: #1A2530; color: #fff; border: 0; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; width: 100%;
  justify-content: center;
}
.insp-btn-ai svg { width: 18px; height: 18px; }
.insp-btn-ai:disabled { opacity: .6; }
.insp-btn-ai:active { background: #0a0e16; }

/* AI result banner */
.insp-ai-result {
  background: #E8F1F8; border: 1px solid #2E7DB5;
  border-radius: 10px; padding: 11px 13px; margin-top: 10px;
}
.insp-ai-row {
  display: flex; align-items: center; gap: 8px;
}
.insp-ai-icon { font-size: 16px; color: #2E7DB5; flex-shrink: 0; }
.insp-ai-text { flex: 1; font-size: 14px; color: #1A2530; line-height: 1.3; }
.insp-ai-conf {
  font-size: 11px; font-weight: 800; padding: 3px 8px;
  border-radius: 6px; letter-spacing: .05em; text-transform: uppercase;
  flex-shrink: 0;
}
.insp-ai-notes {
  font-size: 12px; color: #4A5A68; margin-top: 6px; line-height: 1.4;
  font-style: italic;
}
.insp-ai-confirm {
  font-size: 11.5px; color: #2E7DB5; margin-top: 6px; font-weight: 600;
}

/* Nozzle set grid */
.insp-noz-grid {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.insp-noz-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border: 1.5px solid #D7DFE6; border-radius: 20px;
  background: #fff; font-size: 13px; font-weight: 700; color: #4A5A68;
  cursor: pointer; min-height: 40px;
}
.insp-noz-chip.on {
  border-color: #2E7DB5; background: #E8F1F8; color: #1F5E8C;
  box-shadow: inset 0 0 0 1px #2E7DB5;
}
.insp-noz-sw {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}

/* General photo grid */
.insp-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 7px;
}
.insp-photo-thumb {
  position: relative; aspect-ratio: 1; border-radius: 10px;
  overflow: hidden; border: 1px solid #D7DFE6;
}
.insp-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp-photo-rm {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.insp-photo-add {
  aspect-ratio: 1; border: 2px dashed #2E7DB5; border-radius: 10px;
  background: #E8F1F8; color: #1F5E8C; font-size: 12px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; cursor: pointer;
}
.insp-photo-add svg { width: 22px; height: 22px; }

/* Footer */
.insp-footer {
  display: flex; gap: 10px; padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #D7DFE6; background: #fff; flex-shrink: 0;
}
.insp-btn {
  flex: 1; min-height: 52px; border-radius: 12px; border: 0;
  font-size: 16px; font-weight: 800; cursor: pointer;
}
.insp-btn-ghost {
  background: #fff; border: 1.5px solid #D7DFE6; color: #4A5A68;
  flex: 0 0 100px;
}
/* Icon-only, always — same treatment as insp-btn-delete below. Five ghost/
   save buttons no longer fit with any two of them showing a text label at
   the sheet's actual rendered width (460px on desktop, where it's a fixed-
   size floating panel per makeModalFloatable's defaultW, not the full
   browser viewport the old @media(max-width:768px) rule below keyed off —
   that rule "worked" for 4 buttons only by coincidence, since a phone's
   viewport and the sheet's width happen to be close on mobile but are
   nowhere near each other on desktop). The label span still renders in the
   DOM (kept for a possible future wider-screen treatment) but is hidden
   unconditionally; aria-label carries the accessible name at every width.
   Delete has always worked this way. */
.insp-btn-move, .insp-btn-log {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
}
.insp-btn-move .insp-btn-label, .insp-btn-log .insp-btn-label { display: none; }
.insp-btn-delete {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; color: #ef4444;
}
.insp-btn-save { background: #3D9B4F; color: #fff; }
.insp-btn-save:disabled { opacity: .55; }
.insp-btn-save:active { background: #2C7A3B; }

/* Busy overlay — scoped inside the sheet */
.insp-busy {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(244, 247, 249, .82);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  border-radius: 20px 20px 0 0;
}
.insp-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3.5px solid #D7DFE6; border-top-color: #2E7DB5;
  animation: insp-spin .75s linear infinite;
}
@keyframes insp-spin { to { transform: rotate(360deg); } }
.insp-busy-msg { font-size: 14px; font-weight: 700; color: #1F5E8C; }

/* Toast */
.insp-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 1300; background: #1A2530; color: #fff;
  padding: 11px 18px; border-radius: 10px; font-size: 14px;
  font-weight: 600; max-width: 88vw; text-align: center;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.insp-toast.open  { opacity: 1; }
.insp-toast.err   { background: #C0392B; }

/* Ensure #inspectionModalWrap doesn't block Mappr when empty */
#inspectionModalWrap:empty { pointer-events: none; }

/* Drag-to-dismiss pill — mobile bottom-sheet only (see the max-width:768px block
   below); wired by _wireInspDismiss() in inspection-modal.js. */
.insp-pill {
  display: none; width: 36px; height: 4px; border-radius: 2px;
  background: rgba(0,0,0,.18); margin: 8px auto 0; flex-shrink: 0; cursor: grab;
}

/* Collapsible section toggle (currently used by the Distance Calculator card —
   collapsed by default on mobile only, see _buildModal() in inspection-modal.js).
   Not mobile-specific itself: clicking to collapse/expand works at any size. */
.insp-collapsible-toggle { cursor: pointer; display: flex; align-items: center; gap: 7px; }
.insp-collapsible-caret { display: inline-block; font-size: 10px; color: #8494A2; transition: transform .12s ease; }
.insp-collapsible-caret.collapsed { transform: rotate(-90deg); }
.insp-collapsible-body.collapsed { display: none; }

@media (max-width: 768px) {
  /* Part 4.1 — header/footer are already flex-shrink:0 and .insp-body is already
     flex:1 with overflow-y:auto, so shrinking max-height from 92dvh to 70vh is
     the only change needed for internal scrolling to kick in on a short viewport. */
  .insp-sheet { max-height: 70vh; }
  .insp-pill { display: block; }
  /* Part 4.4 */
  .insp-card { padding: 8px 10px; }
  /* Part 4.2 — 4-per-row via flex-basis (not a strict grid) so longer chip labels
     (e.g. "Set 51 — Yellow (5x)") can still wrap within their cell instead of
     overflowing a fixed grid column. */
  .insp-noz-chip { flex: 0 1 calc(25% - 6px); }
  /* Part 3 — iOS auto-zoom prevention: inputs already ship at 16px (.insp-input),
     confirmed here explicitly per the checklist. */
  .insp-input { font-size: 16px; }
}