/* 現場調査写真 — iPhone Safari 縦持ち前提のシンプルCSS */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 16px;
  background: #f4f5f7;
  color: #1c1c1e;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea {
  font: inherit; color: inherit;
}

button {
  background: #fff; border: 1px solid #c4c4c6; border-radius: 8px;
  padding: 10px 16px; min-height: 44px;  /* iOS タップ最低サイズ */
  cursor: pointer;
}
button:active { background: #e5e5ea; }
.btn-primary {
  background: #0a84ff; color: #fff; border-color: #0a84ff;
}
.btn-primary:active { background: #0066d6; }

/* トップバー */
.topbar {
  background: #fff;
  padding: 8px 12px;
  border-bottom: 1px solid #d1d1d6;
  position: sticky; top: 0; z-index: 10;
  padding-top: env(safe-area-inset-top, 8px);
}
.topbar-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px;
}
.topbar-row:last-child { margin-bottom: 0; }
.topbar select, .topbar input {
  flex: 1; min-width: 0;
  padding: 10px 12px; min-height: 44px;
  border: 1px solid #c4c4c6; border-radius: 8px;
  background: #fff;
}
.sync-row { justify-content: space-between; }
.sync-status {
  font-size: 13px; padding: 4px 10px; border-radius: 6px;
}
.sync-saved   { background: #d4edda; color: #155724; }
.sync-saving  { background: #fff3cd; color: #856404; }
.sync-error   { background: #f8d7da; color: #721c24; }

/* タブバー */
.tabbar {
  display: flex; background: #fff; border-bottom: 1px solid #d1d1d6;
}
.tab {
  flex: 1; padding: 12px 0; border: none; background: none;
  font-size: 15px; color: #6e6e73;
  border-radius: 0; border-bottom: 3px solid transparent;
}
.tab.tab-active {
  color: #0a84ff; border-bottom-color: #0a84ff;
}

/* スロットリスト */
.slot-list {
  padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 60px;
}

.slot-card {
  background: #fff; border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.slot-card-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.slot-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #0a84ff; color: #fff;
  font-size: 13px; font-weight: 600;
}
.slot-label-input {
  flex: 1; padding: 10px 12px; min-height: 44px;
  border: 1px solid #c4c4c6; border-radius: 8px;
  background: #fff;
}
.slot-label-input::placeholder { color: #b0b0b5; }

.tier-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 8px;
}
.tier-cell {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f4f5f7; border: 1px dashed #c4c4c6; border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
}
.tier-cell.has-photo { border-style: solid; }
.tier-cell .tier-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.tier-cell .tier-label {
  position: absolute; bottom: 4px; left: 4px;
  font-size: 11px; color: #fff;
  background: rgba(0,0,0,0.55); padding: 2px 6px; border-radius: 4px;
  pointer-events: none;
}
.tier-cell .tier-camera {
  font-size: 28px; opacity: 0.4;
}
.tier-cell input[type=file] { display: none; }

/* ドローン用シングル大スロット */
.slot-card.drone .tier-row {
  grid-template-columns: 1fr;
}
.slot-card.drone .tier-cell {
  aspect-ratio: 16 / 9;
}

/* 写真モーダル */
.photo-modal {
  border: none; border-radius: 12px;
  max-width: 90vw; width: 420px;
  padding: 16px;
}
.photo-modal::backdrop {
  background: rgba(0,0,0,0.5);
}
.photo-modal-form {
  display: flex; flex-direction: column; gap: 12px;
}
.photo-modal h3 { margin: 0; }
#modal-thumb {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 8px; background: #f4f5f7;
}
.photo-modal label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px; color: #6e6e73;
}
.photo-modal input[type=text], .photo-modal textarea {
  padding: 10px 12px; min-height: 44px;
  border: 1px solid #c4c4c6; border-radius: 8px;
  background: #fff;
}
.photo-modal textarea { min-height: 60px; resize: vertical; }
.tag-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tag-chip {
  padding: 6px 12px; border-radius: 16px; min-height: 32px;
  border: 1px solid #c4c4c6; background: #fff;
  font-size: 13px; color: #6e6e73; cursor: pointer;
}
.tag-chip.on {
  background: #0a84ff; color: #fff; border-color: #0a84ff;
}
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.btn-danger {
  background: #ff3b30; color: #fff; border-color: #ff3b30;
}
.btn-danger:active { background: #d32f2f; }

/* + スロット追加ボタン */
.btn-add-slot {
  width: 100%; min-height: 48px; margin-top: 8px;
  background: #fff; border: 2px dashed #0a84ff; color: #0a84ff;
  border-radius: 12px; font-size: 15px; font-weight: 500;
}
.btn-add-slot:active { background: #e7f1ff; }
.btn-add-slot:disabled { opacity: 0.5; cursor: not-allowed; }

/* tier-cell の編集ボタン */
.tier-cell .tier-edit-btn {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; min-height: 28px; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,0.55);
  color: #fff; border: none; font-size: 14px; line-height: 1;
}
.tier-cell .tier-edit-btn:active { background: rgba(0,0,0,0.8); }