/* ocr.css — OCR Intake + review UI. Reuses index.html :root tokens (--navy,--blue,--green,...). */

.ocr-fab {
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:55;
  width:72px; height:72px;
  border-radius:50%;
  border:none;
  background:var(--navy,#082f49);
  color:#fff;
  font-size:32px;
  line-height:72px;
  text-align:center;
  padding:0;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  cursor:pointer;
}
.ocr-fab:active { transform:scale(0.94); }

/* Simple View — collapses the map + full unit list so a phone-mounted, one-hand
   glance-and-tap at a gate stop lands on search/scan, not a scroll-hunt. */
body.simple-view .workspace .panel:first-child { display:none; }
body.simple-view .list-panel:not(.search-active) .unit-list { display:none; }
body.simple-view .list-panel:not(.search-active) .list-controls { display:none; }
.simple-view-note {
  display:none;
  margin:10px 0 0;
  padding:14px;
  border-radius:10px;
  background:#eef3f7;
  color:#0f172a;
  font-size:15px;
  line-height:1.5;
  text-align:center;
}
body.simple-view .list-panel:not(.search-active) .simple-view-note { display:block; }
.simple-view-note button {
  display:inline-block;
  margin-top:8px;
  background:none;
  border:none;
  color:var(--navy,#082f49);
  text-decoration:underline;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
/* Cab-readable, one-thumb targets for the controls actually used at a stop */
body.simple-view #searchInput { font-size:18px; min-height:52px; }
body.simple-view #showAllSearch { min-height:52px; font-size:17px; font-weight:700; }
#viewModeToggle { min-height:44px; font-weight:700; }
#drivingModeBtn { min-height:44px; font-weight:700; background:var(--navy,#082f49); color:#fff; border-color:var(--navy,#082f49); }

/* Driving Mode — location picker + single-location big-button view + post-import prompt.
   Big, high-contrast, one-thumb targets: designed for a phone-mounted glance-and-tap at a
   stop, not a sit-down browse. See /root/.claude/plans/abstract-painting-lynx.md. */
.driving-card {
  width:min(720px,100%);
  max-height:88vh;
  display:flex;
  flex-direction:column;
}
.driving-prompt-card { width:min(420px,100%); text-align:center; }
.driving-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.driving-head h2 { font-size:20px; margin:0; }
#drivingSort, #drivingChangeLoc { min-height:44px; font-weight:700; }
.driving-loc-list, .driving-unit-list {
  overflow-y:auto;
  display:grid;
  gap:10px;
  padding-right:2px;
}
.driving-loc-btn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  padding:14px 20px;
  border-radius:14px;
  border:2px solid #e2e8f0;
  background:#f8fafc;
  color:#0f172a;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}
.driving-loc-btn .driving-loc-count {
  font-size:16px;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  background:var(--navy,#082f49);
  color:#fff;
  min-width:2.4em;
  text-align:center;
}
.driving-loc-btn:active { transform:scale(0.98); }
.driving-loc-btn.empty { opacity:.55; }
.driving-unit-btn {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:68px;
  padding:14px 20px;
  border-radius:14px;
  border:2px solid #e2e8f0;
  background:#fff;
  font-size:19px;
  font-weight:700;
  color:#0f172a;
}
.driving-unit-btn .driving-unit-status {
  font-size:14px;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  background:#eef3f7;
  color:#0f172a;
}
.driving-unit-actions { display:flex; gap:8px; flex-wrap:wrap; }
.driving-unit-actions button {
  min-height:52px;
  padding:0 16px;
  font-size:16px;
  font-weight:700;
  border-radius:10px;
  border:2px solid #e2e8f0;
  background:#f8fafc;
  cursor:pointer;
}
.driving-empty { padding:24px; text-align:center; color:#64748b; font-size:16px; }

.ocr-modal { position:fixed; inset:0; z-index:60; display:none; background:rgba(8,15,25,.55); }
.ocr-modal.open { display:block; }
.ocr-sheet {
  position:absolute; inset:0; background:var(--page); overflow-y:auto;
  padding:14px clamp(12px,3vw,26px) 40px;
}
.ocr-topbar {
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:-14px -14px 14px; padding:14px clamp(12px,3vw,26px);
  background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff;
}
.ocr-topbar h1 { margin:0; font-size:clamp(17px,3vw,22px); }
.ocr-stage { width:min(980px,100%); margin:0 auto; }
.ocr-h { margin:6px 0 4px; font-size:20px; }
.ocr-sub { margin:2px 0; color:var(--muted); font-size:13px; }

.ocr-engine-status { display:inline-block; margin:8px 0; padding:8px 12px; border-radius:999px; font-size:13px; font-weight:700; }
.ocr-engine-status.ok { background:var(--green-soft); color:var(--green); }
.ocr-engine-status.warn { background:var(--amber-soft); color:var(--amber); }

#ocrFiles { display:block; width:100%; margin:12px 0; padding:16px; border:2px dashed var(--line);
  border-radius:14px; background:#fff; font-size:16px; min-height:56px; }
.ocr-filelist { list-style:none; margin:8px 0; padding:0; color:var(--muted); font-size:13px; }
.ocr-filelist li { padding:4px 0; }

.ocr-controls { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.ocr-controls .primary-btn, .ocr-controls .secondary-btn, .ocr-controls .danger-btn { min-height:50px; padding:12px 18px; font-size:16px; }
.ocr-sticky { position:sticky; bottom:0; background:var(--page); padding-top:10px; box-shadow:0 -8px 16px rgba(15,23,42,.06); }

.ocr-progress { white-space:pre-line; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; min-height:120px; }

.ocr-summary { background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px; }

.ocr-cardlist { display:flex; flex-direction:column; gap:12px; }
.ocr-card { display:grid; grid-template-columns:120px 1fr; gap:12px; background:#fff;
  border:1px solid var(--line); border-left:6px solid var(--line); border-radius:14px; padding:12px; }
.ocr-card.level-green { border-left-color:var(--green); }
.ocr-card.level-amber { border-left-color:var(--amber); }
.ocr-card.level-red   { border-left-color:var(--red); background:#fff7f7; }
.ocr-crop { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fafafa; max-height:220px; }
.ocr-crop img { width:100%; height:auto; display:block; }
.ocr-fields { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ocr-fields label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); font-weight:700; }
.ocr-in { min-height:44px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; font-size:16px; color:var(--ink); background:#fff; }
.ocr-lot-wrap { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }

.ocr-badge { align-self:flex-start; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.ocr-badge.green { background:var(--green-soft); color:var(--green); }
.ocr-badge.amber { background:var(--amber-soft); color:var(--amber); }
.ocr-badge.red   { background:var(--red-soft); color:var(--red); }

.ocr-warns { display:flex; flex-wrap:wrap; gap:6px; }
.ocr-warn { background:var(--amber-soft); color:var(--amber); border-radius:8px; padding:3px 8px; font-size:11px; font-weight:700; }
.ocr-row-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.ocr-include { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink); }
.ocr-include input { width:22px; height:22px; }
.ocr-restore { min-height:40px; padding:8px 12px; }

.ocr-import-choice { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0; }
.ocr-import-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.ocr-import-card h3 { margin:0 0 6px; }
.ocr-import-card .primary-btn, .ocr-import-card .danger-btn { margin-top:10px; min-height:48px; width:100%; }

/* The launcher buttons injected into the existing app */
.ocr-launch { min-height:52px; padding:14px 18px; font-size:16px; width:100%;
  color:#fff; background:linear-gradient(135deg,var(--blue),#1d4ed8); }
.ocr-launch-sm { min-height:44px; padding:10px 14px; color:#fff; background:var(--blue); }

@media (max-width:720px) {
  .ocr-import-choice { grid-template-columns:1fr; }
  .ocr-card { grid-template-columns:1fr; }
  .ocr-crop { max-height:300px; }
}