/* Scope Compass - Meld een probleem (sprint CP, ticket CP4): het formulier en de knop in het
   gebruikersblok. Eigen bestand, zodat styles.css (een hotspot) erbuiten blijft. Wit, één indigo
   accent; rood alleen voor de foutregel. Op een telefoon (onder 640px) wordt het formulier een vel
   over de hele breedte vanaf de onderkant, met velden van 16px (geen zoom in iOS) en tikdoelen van
   44px. */

/* ---- de knop in het gebruikersblok, naast Uitloggen ---- */
.side-user-meld:hover { color: var(--pri-text); }
.app.side-collapsed .side-user-meld { display: none; }

/* ---- het formulier ---- */
.mp-ov {
  position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
  padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); background: rgba(15, 23, 42, .45);
}
.mp-kaart {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .20); width: 100%; max-width: 560px;
  max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden;
}
.mp-kop { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px 20px; }
.mp-kop > .ic { font-size: 20px; color: var(--pri-text); }
.mp-kop .mp-ok { color: var(--green-strong, #15803D); }
.mp-kop h2 { margin: 0; flex: 1; min-width: 0; font-size: 17px; font-weight: 650; line-height: 1.3; }
.mp-sluit {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: var(--r);
}
.mp-sluit:hover { background: var(--sunken); color: var(--text); }
.mp-body { padding: 4px 20px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.mp-body p { margin: 0; font-size: 14px; line-height: 1.5; }
.mp-intro { color: var(--text-2); }
.mp-veld { display: flex; flex-direction: column; gap: 6px; }
.mp-veld > span { font-size: 13px; font-weight: 600; }
.mp-veld em { font-style: normal; font-weight: 400; color: var(--text-3); }
.mp-veld textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface);
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--text);
}
.mp-veld textarea:focus { outline: 2px solid var(--pri); outline-offset: 0; border-color: transparent; }
.mp-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.mp-shot { display: flex; flex-direction: column; gap: 6px; }
.mp-shot-kies {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; padding: 0 14px;
  border: 1px dashed var(--border-2); border-radius: var(--r); cursor: pointer; font-size: 14px; color: var(--text-2);
}
.mp-shot-kies:hover { border-color: var(--pri); color: var(--pri-text); }
.mp-shot-kies input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mp-shot-kies:focus-within { outline: 2px solid var(--pri); outline-offset: 2px; }
.mp-shot-vol { display: flex; gap: 12px; align-items: center; }
.mp-shot-vol img {
  flex: none; width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--sunken);
}
.mp-shot-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 13px; }
.mp-shot-info > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-mee summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 4px 0; }
.mp-mee[open] summary { margin-bottom: 6px; }
.mp-ctx { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-ctx li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
.mp-ctx li > span { color: var(--text-3); }
.mp-ctx code { font-size: 12px; overflow-wrap: anywhere; color: var(--text-2); }
.mp-fout { font-size: 13.5px; color: var(--red-strong); background: var(--red-soft, #FEF2F2); border-radius: var(--r); padding: 8px 10px; }
.mp-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }

/* ---- telefoon ---- */
@media (max-width: 640px) {
  .mp-ov { align-items: flex-end; padding: 0; }
  .mp-kaart { max-width: none; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none; }
  .mp-kop { padding: 12px 8px 4px 16px; }
  .mp-sluit { width: 44px; height: 44px; }
  .mp-body { padding: 4px 16px 8px; }
  .mp-veld textarea { font-size: 16px; }
  /* Leesbaar op de telefoon (mobile-design-guidelines): lopende tekst 16px, secundair 14px. */
  .mp-body p, .mp-shot-kies { font-size: 16px; }
  .mp-veld > span, .mp-hint, .mp-mee summary, .mp-ctx li, .mp-ctx code, .mp-shot-info, .mp-fout { font-size: 14px; }
  .mp-shot-kies { min-height: 44px; }
  .mp-shot-info .btn { min-height: 44px; }
  .mp-voet { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .mp-voet .btn { flex: 1; min-height: 44px; justify-content: center; }
  .side-user-meld { width: 44px; height: 44px; }
}