@import url('/css/slim5.css');

.mm-drone-shell { padding: 10px 10px 24px; }
.mm-drone-top { margin-bottom: 8px; }
.mm-drone-title { font-size: 18px; font-weight: 900; color: #1a2a1a; margin-bottom: 8px; }

.mm-drone-switch { display: flex; gap: 6px; }
.mm-switch-btn {
  border: 1px solid #d1ddd1;
  background: #fff;
  color: #244024;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}
.mm-switch-btn.active { background: #2d5a2d; color: #fff; border-color: #2d5a2d; }

.mm-panel { display: none; }
.mm-panel.active { display: block; }

.mm-card {
  border: 1px solid #dce6dc;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(30, 50, 30, 0.06);
}

.mm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mm-row-space { justify-content: space-between; }

.mm-title { font-weight: 800; color: #1a2a1a; margin-bottom: 2px; }
.mm-mini-title { font-size: 13px; font-weight: 800; color: #1e351e; }
.mm-sub { font-size: 12px; color: #6a786a; }

.mm-link {
  font-size: 12px;
  color: #2d5a2d;
  text-decoration: none;
  border: 1px solid #d1ddd1;
  padding: 6px 10px;
  border-radius: 999px;
}

.mm-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d0ddd0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.mm-btn {
  border: 1px solid #d1ddd1;
  background: #f4f7f4;
  color: #233c23;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}
.mm-btn-primary { background: #2d5a2d; border-color: #2d5a2d; color: #fff; }
.mm-btn:disabled { opacity: 0.45; }

.mm-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin: 10px 0;
}

.mm-map-wrap { min-width: 0; }
.mm-map {
  height: 290px;
  border-radius: 10px;
  border: 1px solid #cfdbcf;
  overflow: hidden;
}
.mm-map-note { margin-top: 6px; font-size: 12px; color: #667366; }

.mm-assets-wrap { min-width: 0; }
.mm-asset-list {
  margin-top: 8px;
  max-height: 250px;
  overflow: auto;
  border: 1px solid #d9e4d9;
  border-radius: 10px;
}
.mm-asset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #edf2ed;
  cursor: pointer;
}
.mm-asset-row:last-child { border-bottom: none; }
.mm-asset-row:hover { background: #f8fbf8; }
.mm-asset-row.selected { background: #eef7ee; }
.mm-asset-check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 1px solid #c8d8c8;
  color: transparent;
}
.mm-asset-row.selected .mm-asset-check {
  background: #FF6600;
  border-color: #e05500;
  color: #fff;
  font-weight: 900;
}

.mm-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.mm-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mm-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f7faf7;
  border: 1px solid #e3ece3;
  font-size: 12px;
  color: #2b3d2b;
  white-space: pre-wrap;
}

.mm-mission-list { margin-top: 8px; }
.mm-mission-item {
  border: 1px solid #e2eae2;
  border-radius: 9px;
  padding: 8px 10px;
  margin-top: 7px;
  font-size: 12px;
}

.mm-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.mm-photo-card {
  border: 1px solid #dfe8df;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.mm-photo-card img { width: 100%; height: 92px; object-fit: cover; display: block; }
.mm-photo-meta { padding: 6px; font-size: 11px; color: #354335; }

@media (max-width: 820px) {
  .mm-split { grid-template-columns: 1fr; }
  .mm-map { height: 240px; }
  .mm-fields, .mm-fields-2 { grid-template-columns: 1fr 1fr; }
  .mm-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wide-pane desktop: content pane is ~380px so the 2-col mm-split is too cramped.
   Force single column so map and assets each use the full pane width. */
@media (min-width: 900px) {
  #contentPane .mm-split { grid-template-columns: 1fr; }
  #contentPane .mm-map { height: 340px; }
  #contentPane .mm-asset-list { max-height: 320px; }
}

/* -------------------------------------------------------------------------
   Assets dashboard (Option 2)
   ------------------------------------------------------------------------- */
.mm-empty {
  border: 1px dashed #d8e3d8;
  border-radius: 10px;
  padding: 14px;
  color: #6d7a6d;
  font-size: 13px;
  text-align: center;
  background: #fbfdfb;
}

/* Section title row: heading + add button */
.mm-sec-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.mm-sec-title-row .mm-sec-title,
.mm-sec-title-row .mm-sec-title-btn {
  flex: 1;
  margin: 0;
  width: auto;   /* override standalone width:100% */
}
.mm-sec-add-btn {
  flex-shrink: 0;
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  border-radius: 14px;
  border: none;
  background: #3a7a3a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  order: -1;      /* appear before the title text */
}
.mm-sec-add-btn:hover { background: #2d622d; }

/* Empty-state CTA card */
.mm-empty-cta {
  border: 1.5px dashed #b6cbb6;
  border-radius: 12px;
  padding: 16px 14px;
  background: #f5fbf5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  text-align: center;
}
.mm-empty-cta-icon { font-size: 26px; line-height: 1; }
.mm-empty-cta-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mm-empty-cta-body strong {
  font-size: 13px;
  font-weight: 800;
  color: #2a3a2a;
}
.mm-empty-cta-body span {
  font-size: 12px;
  color: #5a6a5a;
}
.mm-empty-cta-btn {
  margin-top: 4px;
  padding: 7px 18px;
  border-radius: 20px;
  border: none;
  background: #3a7a3a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mm-empty-cta-btn:hover { background: #2d622d; }

.mm-hero-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  border: 1px solid #d9e5d9;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(145deg, #2f5f2f, #244924);
  color: #fff;
  margin-bottom: 10px;
}

.mm-hero-ring {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12) 0 45%, transparent 46% 100%);
  border: 5px solid rgba(255,255,255,0.2);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--mm-score-color, #a8e6c8) 65%, #ffffff 35%);
}

.mm-hero-score { font-size: 20px; font-weight: 900; line-height: 1; }
.mm-hero-denom { position: absolute; bottom: 11px; font-size: 10px; opacity: 0.9; }
.mm-hero-farm { font-size: 16px; font-weight: 900; }
.mm-hero-label { font-size: 13px; opacity: 0.95; margin-top: 2px; }
.mm-hero-flight { font-size: 12px; opacity: 0.92; margin-top: 8px; }

.mm-sec-title {
  margin: 10px 2px 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b685b;
}

.mm-alerts { display: grid; gap: 6px; }
.mm-alert-card {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  border: 1px solid #ece4d6;
  border-radius: 10px;
  padding: 9px 10px;
  background: #fffdf8;
}
.mm-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 5px;
}
.mm-alert-title { font-size: 12px; font-weight: 800; color: #2a372a; }
.mm-alert-text { font-size: 12px; color: #4b5a4b; }

.mm-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.mm-stat-card {
  border: 1px solid #e1ebdf;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  background: #fbfdf9;
}
.mm-stat-val { font-size: 17px; font-weight: 900; color: #263826; }
.mm-stat-lbl { font-size: 11px; color: #6a766a; margin-top: 2px; }

.mm-flight-card {
  border: 1px solid #d9e4f0;
  background: #f7fbff;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}
.mm-flight-title { font-size: 13px; font-weight: 800; color: #22354a; }
.mm-flight-sub {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #41576f;
}
.mm-flight-sub a { color: #1f5a91; text-decoration: none; font-weight: 700; }

.mm-paddock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mm-pad-card {
  border: 1px solid #dee8de;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mm-pad-img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}
.mm-pad-svg {
  width: 100%;
  height: 88px;
  display: block;
}
.mm-pad-ph {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a7a6a;
  background: #f5f9f5;
  font-size: 22px;
}
.mm-pad-body { padding: 8px; }
.mm-pad-name { font-size: 12px; font-weight: 800; color: #283828; }
.mm-pad-meta { font-size: 11px; color: #647464; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.mm-pad-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.mm-sec-title-btn {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  /* Inside .mm-sec-title-row, width:auto overrides this via the row rule */
}
.mm-sec-caret { color: #4d5e4d; font-size: 12px; }

.mm-infra-list { display: grid; gap: 6px; margin-bottom: 8px; }
.mm-infra-row {
  border: 1px solid #e2eadf;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
}
.mm-infra-icon { font-size: 16px; line-height: 1.2; }
.mm-infra-name { font-size: 12px; font-weight: 800; color: #2a3a2a; }
.mm-infra-meta { font-size: 11px; color: #687868; margin-top: 2px; }

.mm-maint-count {
  margin-top: 4px;
  font-size: 11px;
  color: #576857;
  font-weight: 700;
}

.mm-maint-list {
  margin-top: 5px;
  display: grid;
  gap: 3px;
}

.mm-maint-item {
  font-size: 11px;
  color: #5f6e5f;
  line-height: 1.3;
}

.mm-maint-date {
  font-weight: 700;
  color: #425342;
}

.mm-maint-action {
  margin-left: 5px;
}

.mm-mini-btn {
  border: 1px solid #d0dcd0;
  background: #f4f8f4;
  color: #294129;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.mm-mini-btn-primary {
  background: #2d5a2d;
  border-color: #2d5a2d;
  color: #fff;
}

.mm-mini-input {
  width: 100%;
  border: 1px solid #d1ddd1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  margin-top: 6px;
}

.mm-maint-msg {
  margin-top: 5px;
  font-size: 11px;
  color: #4f6150;
}

.mm-expand {
  margin-top: 6px;
  border: 1px solid #e3ece3;
  border-radius: 8px;
  background: #fbfdfb;
}

.mm-expand > summary {
  list-style: none;
  cursor: pointer;
}

.mm-expand > summary::-webkit-details-marker {
  display: none;
}

.mm-expand-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  color: #2f402f;
}

.mm-expand-meta {
  font-weight: 600;
  color: #5f6f5f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-expand-body {
  border-top: 1px solid #e8efe8;
  padding: 8px 9px;
}

.mm-mini-list {
  display: grid;
  gap: 5px;
}

.mm-mini-muted {
  font-size: 11px;
  color: #6b7a6b;
}

.mm-task-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  align-items: start;
  font-size: 11px;
  color: #3d4f3d;
}

.mm-task-item input[type="checkbox"] {
  margin-top: 2px;
}

.mm-task-main {
  font-weight: 700;
  color: #2e3f2e;
}

.mm-task-sub {
  margin-left: 2px;
  font-size: 10px;
  color: #6a796a;
}

.mm-obs-item {
  font-size: 11px;
  color: #405240;
}

.mm-obs-date {
  color: #617261;
  font-weight: 700;
}

.mm-obs-text {
  margin-left: 5px;
}

.mm-thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mm-thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #dce7dc;
  cursor: zoom-in;
  background: #f5f8f5;
}

.mm-sec-group {
  margin-top: 6px;
}

.mm-sec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mm-sec-tab {
  border: 1px solid #dbe6db;
  background: #f7fbf7;
  color: #314631;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.mm-sec-tab.active {
  background: #2d5a2d;
  border-color: #2d5a2d;
  color: #fff;
}

.mm-sec-tab-ok {
  background: #eef8ef;
  border-color: #bfe2c2;
  color: #2f5a2f;
}

.mm-sec-tab-warn {
  background: #fff4df;
  border-color: #f2c88f;
  color: #7a4a00;
}

.mm-sec-tab-critical {
  background: #ffe3e6;
  border-color: #e05a6e;
  color: #7a0a1f;
  border-width: 2px;
}

.mm-alert-card-action {
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.mm-alert-card-action:hover {
  box-shadow: 0 4px 12px rgba(60, 80, 60, 0.18);
  transform: translateY(-1px);
}

.mm-sec-panel {
  margin-top: 6px;
  border: 1px solid #e3ece3;
  border-radius: 8px;
  background: #fbfdfb;
  padding: 8px 9px;
}

@media (max-width: 680px) {
  .mm-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =========================================================================
   Mass Photo Import  (#mi-* prefix)
   ========================================================================= */

/* ── Utility ── */
.mi-hidden   { display: none !important; }
.mi-mt4      { margin-top: 4px; }
.mi-mt6      { margin-top: 6px; }
.mi-mt8      { margin-top: 8px; }
.mi-mt10     { margin-top: 10px; }
.mi-mb8      { margin-bottom: 8px; }
.mi-ml4      { margin-left: 4px; }
.mi-warn     { color: #c0392b; font-size: 12px; }

.mi-shell {
  gap: 12px;
}

.mi-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5ece0;
}

.mi-kicker {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef4ea;
  color: #48603d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mi-hero-note {
  display: grid;
  gap: 4px;
  min-width: 220px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e2d6ad;
  background: linear-gradient(180deg, #fffdf4 0%, #fff8e6 100%);
  color: #6d5412;
  font-size: 11px;
  line-height: 1.4;
}

.mi-step {
  display: grid;
  gap: 10px;
}

.mi-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mi-step-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eff5ef;
  color: #466146;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.mi-step-title {
  font-size: 15px;
  font-weight: 800;
  color: #1d301d;
  line-height: 1.2;
}

.mi-step-copy {
  max-width: 340px;
  text-align: right;
}

.mi-summary-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mi-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f3f7f1;
  color: #476047;
  font-size: 11px;
  line-height: 1;
}

.mi-summary-chip.is-strong {
  background: #e8f4e8;
  color: #244824;
}

.mi-summary-chip.is-warn {
  background: #fff5e6;
  color: #9b5b00;
}

/* ── Step 1 inputs ── */
.mi-fields-gap { margin: 10px 0; }

.mi-label-field {
  display:     flex;
  flex-direction: column;
  gap:         5px;
  font-size:   11px;
  color:       #5a6a5a;
  font-weight: 600;
}

.mi-label-field-end {
  justify-content: flex-end;
}

.mi-inline-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #2f472f;
}

.mi-primary-action-row {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Step 2 header ── */
.mi-step2-header { margin-bottom: 2px; align-items: center; flex-wrap: wrap; gap: 8px; }

.mi-step-feature-row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.mi-ai-feature {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  background: #edf5ff;
  color: #28507d;
  font-size: 11px;
  font-weight: 700;
}

.mi-step-actions {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mi-ai-chip {
  border: 1px solid #d0ddd0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  color: #405140;
  cursor: pointer;
}
.mi-ai-chip.is-on {
  border-color: #2d5a2d;
  background: #eef8ee;
  color: #244824;
}
.mi-ai-chip.is-off {
  border-color: #c8d8c8;
  background: #f8fbf8;
  color: #627262;
}
.mi-ai-chip.is-disabled {
  border-color: #d7d7d7;
  background: #f2f2f2;
  color: #9a9a9a;
  cursor: not-allowed;
}

/* ── Checklist ── */
.mi-checklist {
  margin-top: 2px;
  display: grid;
  gap: 8px;
}

.mi-photo-row {
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  padding:       10px 11px;
  border:        1px solid #dde8d9;
  border-radius: 14px;
  background:    #fff;
  box-shadow:    0 1px 0 rgba(26,42,26,0.04);
  transition:    opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mi-photo-row.mi-row-nogps    {
  border-color: #efd7a8;
  background: linear-gradient(180deg, #fffef8 0%, #fffaf0 100%);
}
.mi-photo-row.mi-row-needs-location {
  box-shadow: 0 0 0 1px rgba(232, 137, 43, 0.14);
}
.mi-photo-row.mi-row-outside  { border-left: 3px solid #c0392b; }
.mi-photo-row.mi-row-excluded { opacity: 0.62; background: #f5f7f3; }

.mi-chk {
  margin-top: 3px;
  width:  18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #2d5a2d;
  cursor: pointer;
}

.mi-thumb {
  width:          60px;
  height:         60px;
  flex-shrink:    0;
  border-radius:  8px;
  overflow:       hidden;
  background:     #e8ece8;
  display:        flex;
  align-items:    center;
  justify-content: center;
}
.mi-thumb-img          { width: 60px; height: 60px; object-fit: cover; display: block; }
.mi-thumb-placeholder  { font-size: 24px; }

.mi-info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.mi-filename {
  font-size:    13px;
  font-weight:  700;
  color:        #1a2a1a;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}
.mi-date { font-size: 11px; color: #6a786a; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mi-date-text     { font-size: 11px; color: #6a786a; }
.mi-date-edit-btn { font-size: 10px; background: none; border: none; padding: 0 2px; cursor: pointer; opacity: 0.55; line-height: 1; }
.mi-date-edit-btn:hover { opacity: 1; }
.mi-date-input    { font-size: 11px; border: 1px solid #d0ddd0; border-radius: 6px; padding: 2px 4px; background: #fff; }
.mi-no-date-label { font-size: 11px; color: #b05000; font-weight: 500; }

/* ── Location line ── */
.mi-loc-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.mi-location-prompt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #efd7a8;
  background: #fff8ea;
}

.mi-location-prompt-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mi-location-prompt-title {
  font-size: 11px;
  font-weight: 800;
  color: #8b5a00;
}

.mi-location-prompt-sub {
  font-size: 11px;
  color: #7a6738;
  line-height: 1.35;
}

.mi-loc-chip {
  font-size:     12px;
  color:         #1565c0;
  border:        1px solid #c8d8f0;
  border-radius: 999px;
  padding:       2px 9px;
  background:    #f0f4ff;
}
.mi-loc-chip.mi-loc-manual {
  border-color: #2d5a2d;
  color:        #2d5a2d;
  background:   #eef8ee;
}
.mi-loc-chip.mi-loc-asset {
  border-color: #9a7000;
  color:        #7a5800;
  background:   #fffbe6;
}
.mi-loc-cta {
  white-space: nowrap;
  padding: 5px 10px !important;
  font-size: 11px !important;
}
.mi-pick-btn { padding: 3px 8px !important; font-size: 11px !important; }

/* ── Per-row fields ── */
.mi-field-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}

.mi-ai-row {
  padding: 6px 8px;
  border-radius: 10px;
  background: #f5f9ff;
  border: 1px solid #d9e5f5;
}
.mi-field-label {
  font-size:   12px;
  color:       #5a6a5a;
  white-space: nowrap;
  min-width:   34px;
}
.mi-select {
  border:        1px solid #d0ddd0;
  border-radius: 8px;
  padding:       4px 6px;
  font-size:     12px;
  background:    #fff;
  max-width:     160px;
}
.mi-caption {
  flex:          1;
  min-width:     0;
  border:        1px solid #d0ddd0;
  border-radius: 8px;
  padding:       4px 8px;
  font-size:     12px;
}

/* Schema-driven extra fields rendered per obs type in mass importer */
.mi-schema-fields {
  width:      100%;
  padding:    4px 0 2px 40px; /* indent under the type row */
  box-sizing: border-box;
}
.mi-schema-field {
  font-size: 12px;
  gap:       6px;
}
.mi-schema-field .mi-field-label {
  min-width: 90px;
  color:     #4a6a8a;
  text-transform: capitalize;
}

/* ── Filterable entity picker ── */
.mi-entity-pick-outer { align-items: flex-start; }

.mi-entity-pick {
  position:  relative;
  flex:      1;
  min-width: 0;
}
.mi-entity-filter {
  width:         100%;
  border:        1px solid #d0ddd0;
  border-radius: 8px;
  padding:       4px 8px;
  font-size:     12px;
  box-sizing:    border-box;
  background:    #fff;
}
.mi-entity-dropdown {
  position:   absolute;
  z-index:    300;
  left:       0;
  top:        100%;
  min-width:  260px;
  max-width:  min(360px, 92vw);
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border:     1px solid #c8d8c8;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.14);
  margin-top: 2px;
}
.mi-entity-group {
  font-size:      10px;
  font-weight:    800;
  color:          #8a9a8a;
  padding:        5px 10px 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mi-entity-item {
  padding:  7px 10px;
  font-size: 12px;
  cursor:   pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mi-entity-item:hover     { background: #f0f7f0; }
.mi-entity-item.selected  { background: #e6f3e6; font-weight: 700; }
.mi-entity-item.mi-entity-noResult { color: #9aa99a; cursor: default; }

/* ── Progress bar ── */
.mi-progress-wrap {
  margin:        10px 0;
  height:        10px;
  background:    #e3ece3;
  border-radius: 999px;
  overflow:      hidden;
}
.mi-progress-bar {
  height:        100%;
  background:    linear-gradient(90deg, #2d5a2d, #4a8a4a);
  border-radius: 999px;
  transition:    width 0.35s ease;
}
.mi-progress-log {
  margin-top:  8px;
  max-height:  190px;
  overflow-y:  auto;
  font-size:   11px;
  border:      1px solid #e3ece3;
  border-radius: 8px;
  padding:     6px 8px;
  background:  #fafcfa;
}
.mi-log-line { padding: 2px 0; border-bottom: 1px solid #f0f4f0; }
.mi-log-line:last-child { border-bottom: none; }
.mi-log-ok   { color: #2d5a2d; }
.mi-log-err  { color: #c0392b; }
.mi-log-skip { color: #e8892b; }

/* ── Map overlay (position:fixed, moved to <body> by JS) ── */
.mi-map-overlay {
  position:        fixed;
  inset:           0;
  z-index:         9000;
  background:      rgba(0, 0, 0, 0.62);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.mi-map-overlay-inner {
  width:         min(94vw, 660px);
  background:    #fff;
  border-radius: 16px;
  /* overflow:hidden clipped Leaflet popups/tooltips and corrupted internal
     z-index stacking — use clip-path on the map element instead for rounding */
  overflow:      visible;
  box-shadow:    0 10px 48px rgba(0,0,0,0.38);
}
.mi-map-el {
  /* Clip the bottom corners to match inner container border-radius */
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.mi-map-overlay-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  background:      #2d5a2d;
  color:           #fff;
  font-weight:     700;
  font-size:       13px;
}
.mi-map-cancel-btn {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
}
.mi-map-el { height: 440px; }

/* Marker icon for current photo location */
.mi-map-cur-icon { font-size: 20px; line-height: 1; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .mi-hero {
    flex-direction: column;
  }
  .mi-hero-note,
  .mi-step-copy {
    max-width: none;
    min-width: 0;
    width: 100%;
    text-align: left;
  }
  .mi-photo-row   { flex-direction: column; }
  .mi-thumb       { width: 100%; height: 110px; }
  .mi-thumb-img   { width: 100%; height: 110px; }
  .mi-location-prompt {
    flex-direction: column;
    align-items: stretch;
  }
  .mi-loc-cta {
    width: 100%;
  }
  .mi-map-el      { height: 320px; }
  .mi-entity-dropdown { min-width: 90vw; }
}
/* ─────────────────────────────────────────────────────────────────────────
   Drone creator: fly-order list, edit mode, orange map markers
   ───────────────────────────────────────────────────────────────────────── */

/* Selected asset check badge – shows fly-order number when selected (orange – see block above) */

/* Fly-order list (appears between map/assets and flight fields) */
.mm-sel-order {
  margin: 8px 0;
  border: 1px solid #f5dfc8;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fffaf6;
}
.mm-sel-heading { margin-bottom: 6px; }
.mm-sel-list { display: grid; gap: 4px; }
.mm-sel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #ede7e1;
}
.mm-sel-num {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FF6600;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mm-sel-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #1e351e;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-sel-btns { display: flex; gap: 3px; flex-shrink: 0; }
.mm-sel-btn {
  padding: 3px 7px;
  border: 1px solid #d1ddd1;
  border-radius: 6px;
  background: #f4f7f4;
  color: #233c23;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.mm-sel-btn:hover { background: #e8f0e8; }
.mm-sel-btn-rm { border-color: #e0c0b0; background: #fdf5f0; color: #7a3820; }
.mm-sel-btn-rm:hover { background: #fce8e0; }
.mm-sel-btn-ph { display: inline-block; width: 28px; }

/* Edit mode banner */
.mm-edit-banner {
  margin-top: 4px;
  padding: 4px 9px;
  background: #fff3e0;
  border: 1px solid #FF9933;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #7a3800;
}

/* Orange primary button – used when in edit mode */
.mm-btn-orange { background: #FF6600; border-color: #e05500; color: #fff; }
.mm-btn-orange:hover { background: #e05500; }
.mm-btn-cancel { background: #fdf0f0; border-color: #e0b0b0; color: #7a2020; }
.mm-btn-cancel:hover { background: #fce4e4; }
.mm-btn-edit { border-color: #c8d4f0; background: #f0f4fd; color: #1e3068; }
.mm-btn-edit:hover { background: #e4ecfc; }

/* Numbered orange marker bubble rendered by Leaflet divIcon */
.mm-map-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FF6600;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
  cursor: pointer;
}

/* ── Labeled flight fields ─────────────────────────────────────────────── */
.mm-field-lbl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #5a6a5a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mm-field-lbl .mm-input {
  margin-top: 0;
  padding: 7px 10px;
  font-size: 13px;
}

/* ── Paddock label in asset list and fly-order list ────────────────────── */
.mm-asset-paddock {
  display: inline-block;
  background: #eef4ff;
  color: #1e3870;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #c8d8f0;
}
.mm-sel-pad {
  font-size: 10px;
  font-weight: 700;
  color: #1e3870;
  opacity: 0.85;
}

/* ── Quick-add recent type chips (feed + assets tab list-tops) ─────────── */
.quick-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 3px 12px 6px;
  min-height: 0;
}
.quick-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid #d4e4d4;
  background: #f3f8f3;
  color: #2a4a2a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.quick-add-chip:hover,
.quick-add-chip:active {
  background: #daeeda;
  border-color: #8db88d;
}

/* ── Inline-edit controls in the detail sheet ─────────────────────────── */

/* Boolean toggle: larger touch target, accent colour matches app green */
.ii-bool {
  width: 20px;
  height: 20px;
  accent-color: #2d5a2d;
  cursor: pointer;
  flex-shrink: 0;
}
.ii-bool:disabled { opacity: 0.5; }

/* Text field: subtle dashed underline signals editability */
.ii-text {
  cursor: text;
  border-bottom: 1.5px dashed #c0d4c0;
  padding-bottom: 1px;
  border-radius: 2px;
  outline: none;
  transition: background 0.12s, border-color 0.12s;
}
.ii-text:hover  { background: #f2f8f2; border-color: #7aaa7a; }
.ii-text:focus  { background: #f2f8f2; border-color: #4a8a4a; }
/* While the input is live the span wraps the ii-edit-wrap, reset visual chrome */
.ii-text.ii-editing {
  display: block;
  width: 100%;
  border-bottom: none;
  background: none;
}

/* Flex row: input grows, ✓ and ✗ sit beside it — all truly inline */
.ii-edit-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

/* The actual <input> / <textarea> rendered inside the span */
.ii-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #7aaa7a;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-family: inherit;
  color: #2a3a2a;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
}
.ii-input:focus {
  border-color: #4a8a4a;
  box-shadow: 0 0 0 2px rgba(74,138,74,0.15);
}

/* ✓ / ✗ buttons side-by-side to the right of the input */
.ii-save-ok,
.ii-save-cancel {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 5px;
  border: 1px solid;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ii-save-ok     { background: #2d5a2d; color: #fff; border-color: #2d5a2d; }
.ii-save-ok:hover { background: #3a7a3a; }
.ii-save-cancel { background: #f5f5f5; color: #555; border-color: #ccc; }
.ii-save-cancel:hover { background: #e8e8e8; }

/* Paddock list: grazing-available inline checkbox */
.mm-pad-graze {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  cursor: pointer;
  font-size: 11px;
  color: #555;
  vertical-align: middle;
  user-select: none;
}
.mm-pad-graze input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #2d5a2d;
  cursor: pointer;
  flex-shrink: 0;
}
.mm-pad-graze-lbl {
  white-space: nowrap;
}