/* ============================================================
   Midwest Mole — Setup Sheet styles
   Append-only. Uses the same CSS custom properties as style.css
   (--primary-red etc.). Prefixed mm- to avoid collisions.
   ============================================================ */

.mm-setup .mm-header-title h2 { display:flex; align-items:center; gap:8px; }

/* four-quadrant layout echoing the paper Setup Sheet */
.mm-setup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:10px;
}
@media (max-width: 820px){
  .mm-setup-grid{ grid-template-columns:1fr; }
}

.mm-quad{
  border:1px solid #d9d9d9;
  border-radius:6px;
  padding:14px 16px 16px;
  background:#fff;
}
.mm-quad-title{
  font-family:"Roboto Condensed",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:14px;
  text-align:center;
  color:var(--primary-red, #c0392b);
  border-bottom:2px solid var(--primary-red, #c0392b);
  padding-bottom:6px;
  margin-bottom:12px;
}

.mm-field{ margin-bottom:10px; }
.mm-lbl{
  display:block;
  font-size:12px;
  font-weight:600;
  color:#333;
  margin-bottom:3px;
}
.mm-in{ font-size:14px; }

/* computed / read-only calc fields */
.mm-field.mm-calc .mm-lbl{ color:var(--primary-red, #c0392b); }
.mm-computed{
  background:#f4f6f8 !important;
  border-style:dashed !important;
  color:#1a1a1a;
  font-weight:600;
  cursor:not-allowed;
}
.mm-computed:focus{ box-shadow:none; outline:none; }

/* autosave status pip */
.mm-autosave-pip{
  margin-left:auto;
  font-size:12px;
  font-weight:600;
  min-height:16px;
  padding:2px 8px;
  border-radius:10px;
  color:#666;
}
.mm-autosave-pip.saving{ color:#8a6d3b; background:#fcf8e3; }
.mm-autosave-pip.saved{ color:#1e7e34; background:#eaf6ec; }
.mm-autosave-pip.error{ color:#fff; background:var(--primary-red, #c0392b); }

.mm-autosave-note{
  margin-left:14px;
  font-size:12px;
  color:#1e7e34;
}
.mm-autosave-note i{ margin-right:4px; }

/* ---- photos ---- */
.mm-photos-wrap{ margin-top:6px; }
.mm-photo-drop{
  border:2px dashed #bbb;
  border-radius:8px;
  padding:22px;
  text-align:center;
  color:#666;
  cursor:pointer;
  transition:.15s;
  background:#fafafa;
}
.mm-photo-drop.dragover{ border-color:var(--primary-red,#c0392b); background:#fff5f4; color:#333; }
.mm-photo-drop i{ font-size:26px; display:block; margin-bottom:6px; color:var(--primary-red,#c0392b); }
.mm-photo-drop small{ display:block; margin-top:4px; font-size:11px; color:#999; }

.mm-photo-progress{ margin:10px 0; }
.mm-photo-prow{
  display:flex; align-items:center; gap:10px;
  font-size:12px; padding:4px 0;
}
.mm-photo-prow .fn{ flex:0 0 40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-photo-prow .track{ flex:1; height:8px; background:#e6e6e6; border-radius:5px; overflow:hidden; }
.mm-photo-prow .bar{ display:block; height:100%; width:0; background:var(--primary-red,#c0392b); }
.mm-photo-prow.err .bar{ background:#999; }
.mm-photo-prow .pct{ flex:0 0 42px; text-align:right; }
.mm-photo-err{ color:var(--primary-red,#c0392b); font-size:12px; margin-top:4px; }

.mm-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:12px;
  margin-top:12px;
}
.mm-photo-item{
  position:relative;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.mm-photo-item img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}
.mm-photo-del{
  position:absolute; top:4px; right:4px;
  width:24px; height:24px;
  border:none; border-radius:50%;
  background:rgba(192,57,43,.9); color:#fff;
  cursor:pointer; line-height:1;
}
.mm-photo-del:hover{ background:#c0392b; }
.mm-photo-caption{
  width:100%; border:none; border-top:1px solid #eee;
  font-size:11px; padding:5px 6px;
}
.mm-photo-caption:focus{ outline:none; background:#fffdf5; }