* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: #1a2218; color: #e8efe2;
  height: 100%; overflow: hidden;
  font-size: 17px; line-height: 1.4;
  -webkit-user-select: none; user-select: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font-family: inherit; font-size: 17px; }
button { font-family: inherit; font-size: 17px; }

#app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar {
  flex: 0 0 auto;
  background: #2a3f2a;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid #1a2218;
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sub { font-size: 13px; opacity: 0.7; }
.topbar button { background: transparent; border: 1px solid #4a6a4a; color: #e8efe2; padding: 6px 12px; border-radius: 8px; }
.topbar button.primary { background: #d97a3a; border-color: #d97a3a; color: #1a2218; font-weight: 600; }
.topbar .back { padding: 6px 10px; font-size: 22px; line-height: 1; }
.topbar .gps { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: #3a2218; color: #ff9a6a; }
.topbar .gps.ok { background: #1a3a1a; color: #6aff9a; }

main {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}

.screen { display: none; }
.screen.active { display: block; }

.row { margin-bottom: 16px; }
.row label { display: block; font-size: 13px; opacity: 0.7; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.row input, .row textarea, .row select {
  width: 100%;
  background: #2a3422; border: 1px solid #3a4a32; color: #e8efe2;
  padding: 11px 12px; border-radius: 10px;
  font-size: 17px;
}
.row textarea { min-height: 80px; resize: vertical; }
.row .hint { font-size: 12px; opacity: 0.6; margin-top: 4px; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.section-title { font-size: 13px; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #2a3422; }

button.big {
  width: 100%;
  background: #d97a3a; color: #1a2218; font-weight: 600;
  border: 0; padding: 16px; border-radius: 12px;
  font-size: 18px;
  margin-top: 8px;
}
button.big.secondary { background: #3a4a32; color: #e8efe2; }
button.big.danger { background: #5a2a2a; color: #ffd0d0; }

button.gps-btn { width: 100%; padding: 12px; border-radius: 10px; background: #3a4a32; border: 0; color: #e8efe2; font-size: 16px; }
button.gps-btn.acquired { background: #1a3a1a; color: #6aff9a; }

/* Home screen */
.visit-list { list-style: none; padding: 0; margin: 0; }
.visit-list li {
  background: #2a3422; padding: 14px; border-radius: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.visit-list .name { font-size: 17px; font-weight: 600; }
.visit-list .meta { font-size: 13px; opacity: 0.7; }
.visit-list .status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.visit-list .status.open { background: #d97a3a; color: #1a2218; }
.visit-list .status.closed { background: #3a4a32; color: #e8efe2; }

/* Live log */
.timeline { padding: 0; margin: 0 0 14px 0; list-style: none; }
.timeline li {
  background: #2a3422; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px;
}
.timeline .ts { font-size: 12px; opacity: 0.6; flex: 0 0 auto; width: 52px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.timeline .body { flex: 1; }
.timeline .kind { font-size: 12px; opacity: 0.7; }
.timeline .summary { font-size: 15px; }
.timeline .thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.timeline .empty { background: transparent; opacity: 0.5; text-align: center; padding: 20px; font-style: italic; }

.action-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px;
  position: sticky; bottom: 0;
  padding: 10px 0;
  background: linear-gradient(to top, #1a2218 80%, transparent);
}
.action-grid button {
  background: #2a3422; border: 1px solid #3a4a32; color: #e8efe2;
  padding: 10px 4px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; line-height: 1.1; min-height: 60px;
}
.action-grid button .emoji { font-size: 22px; }
.action-grid button:active { background: #3a4a32; }

/* Modal */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: flex-end;
  z-index: 100;
}
.modal-bg.active { display: flex; }
.modal {
  background: #1a2218;
  width: 100%;
  max-height: 85vh;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal h2 { margin: 0 0 14px 0; font-size: 19px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.modal-actions button { flex: 1; padding: 14px; border-radius: 10px; border: 0; font-size: 17px; font-weight: 600; }
.modal-actions button.save { background: #d97a3a; color: #1a2218; }
.modal-actions button.cancel { background: #3a4a32; color: #e8efe2; }
.modal-actions button.delete { background: #5a2a2a; color: #ffd0d0; }

.photo-preview { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; margin-bottom: 12px; background: #000; }

/* Attachment strip in modal */
.attach-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #2a3422; }
.attach-section h3 { margin: 0 0 10px 0; font-size: 13px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; }
.attach-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-bottom: 10px; }
.attach-item { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #000; }
.attach-item img, .attach-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-item .badge { position: absolute; bottom: 2px; left: 2px; background: rgba(0,0,0,0.6); color: #fff; padding: 1px 5px; border-radius: 3px; font-size: 10px; }
.attach-item .remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.7); color: #fff; border: 0; font-size: 16px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; }
.attach-buttons { display: flex; gap: 8px; }
.attach-buttons label {
  flex: 1; background: #3a4a32; color: #e8efe2; border: 0; padding: 12px; border-radius: 10px;
  text-align: center; font-size: 15px; cursor: pointer; user-select: none;
}
.attach-buttons label:active { background: #4a5a42; }
.attach-buttons input[type="file"] { display: none; }
.attach-hint { font-size: 12px; opacity: 0.6; margin-top: 6px; }

/* Read-only modal state */
.modal.readonly input, .modal.readonly textarea, .modal.readonly select { opacity: 0.7; pointer-events: none; }
.modal.readonly .attach-section .remove, .modal.readonly .attach-buttons { display: none; }

/* Disabled topbar button */
.topbar button[disabled] { background: #3a4a32; color: #8a9a82; border-color: #3a4a32; }

.banner {
  background: #3a2a18; color: #ffd9a8; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; margin-bottom: 12px;
}
.banner.ok { background: #1a3a1a; color: #c8ffc8; }
.banner.err { background: #5a2a2a; color: #ffd0d0; }

/* End screen */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.summary-grid .card { background: #2a3422; padding: 12px; border-radius: 10px; }
.summary-grid .card .label { font-size: 12px; opacity: 0.7; text-transform: uppercase; }
.summary-grid .card .value { font-size: 22px; font-weight: 600; margin-top: 4px; }

.hidden { display: none !important; }