/* Additive Oberfläche für Belege und Rechnungsteilzahlungen. */

.mm-fo-visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.mm-fo-hidden-receipt-check { display:none !important; }

.mm-fo-receipt-drop {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:82px;
  padding:14px;
  border:1.5px dashed rgba(35,40,28,.25);
  border-radius:15px;
  background:#fafbf7;
  color:var(--ink,#23281c);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}

.mm-fo-receipt-drop:hover,
.mm-fo-receipt-drop:focus-visible,
.mm-fo-receipt-drop.dragging {
  border-color:rgba(35,40,28,.62);
  background:#f4f6ee;
  box-shadow:0 0 0 3px rgba(35,40,28,.07);
  outline:0;
}

.mm-fo-receipt-drop.has-file {
  border-style:solid;
  border-color:#8fc7a8;
  background:#f1faf5;
}

.mm-fo-receipt-drop.has-error {
  border-style:solid;
  border-color:#e2a39e;
  background:#fff7f6;
}

.mm-fo-receipt-icon {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:12px;
  background:var(--ink,#23281c);
  color:#fff;
  font-size:20px;
  font-weight:700;
}

.mm-fo-receipt-drop > span:last-child { display:grid; gap:4px; min-width:0; }
.mm-fo-receipt-drop strong { font-size:12.5px; line-height:1.35; overflow-wrap:anywhere; }
.mm-fo-receipt-drop small { color:var(--muted,#74796d); font-size:10.5px; line-height:1.4; }

.mm-fo-receipt-filter {
  display:grid;
  gap:4px;
  min-width:170px;
  margin-left:auto;
}

.mm-fo-receipt-filter span {
  color:var(--muted,#74796d);
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.mm-fo-receipt-filter select {
  min-height:38px;
  padding:8px 28px 8px 10px;
  border:1px solid var(--line,#dde0d6);
  border-radius:10px;
  background:#fff;
  color:var(--ink,#23281c);
  font:600 11px/1.2 var(--font,inherit);
}

.mm-fo-receipt-status {
  display:inline-flex;
  align-items:center;
  min-height:23px;
  padding:3px 8px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:750;
  white-space:nowrap;
}

.mm-fo-receipt-status.verified,
.mm-fo-receipt-status.stored { background:#eaf6ef; color:#216e45; }
.mm-fo-receipt-status.pending { background:#fff2d8; color:#8a5a12; }
.mm-fo-receipt-status.conflict { background:#feecec; color:#9f1f18; box-shadow:inset 0 0 0 1px rgba(159,31,24,.14); }
.mm-fo-receipt-status.external { background:#eef1ea; color:#565c4f; }
.mm-fo-receipt-status.missing { background:#feecec; color:#b42318; }

.mm-fo-receipt-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:5px; }
.mm-fo-link {
  padding:0;
  border:0;
  background:transparent;
  color:#3c5142;
  font:700 10.5px/1.35 var(--font,inherit);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.mm-fo-link:hover { color:#11170e; }
.mm-fo-link:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:3px; }

.mm-fo-repair-notice {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10060;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(560px,calc(100vw - 36px));
  padding:12px 14px;
  border:1px solid #edb4ae;
  border-radius:12px;
  background:#fff7f6;
  color:#842019;
  box-shadow:0 14px 36px rgba(45,22,18,.16);
  font:650 11px/1.45 var(--font,inherit);
}

.mm-fo-repair-notice .mm-fo-link { flex:none; color:#842019; }

.mm-fo-invoice-payment-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:9px 11px;
  border:1px solid var(--line,#dde0d6);
  border-radius:11px;
  background:#fafbf7;
  color:var(--ink-soft,#4e5448);
  font-size:11px;
  font-weight:650;
}
.mm-fo-invoice-payment-line.partial { border-color:#ead39c; background:#fffaf0; color:#775310; }
.mm-fo-invoice-payment-line.paid { border-color:#b9dcc8; background:#f2faf5; color:#216e45; }
.mm-fo-invoice-payment-line.overpaid { border-color:#b9cbed; background:#f4f7ff; color:#345890; }
.mm-fo-invoice-payment-line.sync-warning { border-color:#dfb96d; background:#fff8e8; color:#74500f; }
.mm-fo-invoice-payment-line.sync-error { border-color:#e2a39e; background:#fff5f4; color:#842019; }

.status.mm-fo-invoice-status.partial { background:#fff2d8; color:#8a5a12; }
.status.mm-fo-invoice-status.open { background:#f1f2ee; color:#5b6055; }
.status.mm-fo-invoice-status.paid { background:#e8f8f1; color:#087858; }
.status.mm-fo-invoice-status.overpaid { background:#eaf0ff; color:#355ec9; }

body.mm-fo-modal-open { overflow:hidden; }
.mm-fo-modal-overlay {
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(18,22,15,.48);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.mm-fo-modal-overlay.open { display:flex; }

.mm-fo-modal {
  width:min(720px,100%);
  max-height:min(880px,calc(100dvh - 48px));
  overflow:auto;
  padding:24px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:22px;
  background:#fff;
  box-shadow:0 30px 90px rgba(12,18,10,.3);
  color:var(--ink,#23281c);
}

.mm-fo-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.mm-fo-eyebrow {
  display:block;
  margin-bottom:5px;
  color:var(--muted,#74796d);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.mm-fo-modal-head h2 { margin:0; font-size:24px; line-height:1.15; }
.mm-fo-modal-head p { margin:6px 0 0; color:var(--muted,#74796d); font-size:12px; }
.mm-fo-icon-button {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line,#dde0d6);
  border-radius:12px;
  background:#fafbf7;
  color:var(--ink,#23281c);
  font-size:23px;
  line-height:1;
  cursor:pointer;
}

.mm-fo-payment-balance {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:18px 0;
}
.mm-fo-payment-balance > div {
  display:grid;
  gap:5px;
  min-height:78px;
  padding:13px;
  border:1px solid var(--line,#dde0d6);
  border-radius:14px;
  background:#fafbf7;
}
.mm-fo-payment-balance span { color:var(--muted,#74796d); font-size:10px; font-weight:700; }
.mm-fo-payment-balance b { align-self:end; font-size:18px; font-variant-numeric:tabular-nums; }
.mm-fo-payment-balance .partial { border-color:#ead39c; background:#fffaf0; color:#775310; }
.mm-fo-payment-balance .paid { border-color:#b9dcc8; background:#f2faf5; color:#216e45; }
.mm-fo-payment-balance .overpaid { border-color:#b9cbed; background:#f4f7ff; color:#345890; }

.mm-fo-owner-notice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-7px 0 15px;
  padding:10px 12px;
  border:1px solid #ead39c;
  border-radius:11px;
  background:#fffaf0;
  color:#775310;
  font-size:11px;
  font-weight:650;
}
.mm-fo-owner-notice[hidden] { display:none; }

.mm-fo-payment-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mm-fo-payment-form label { display:grid; gap:6px; min-width:0; }
.mm-fo-payment-form label.wide,
.mm-fo-form-error,
.mm-fo-modal-actions { grid-column:1/-1; }
.mm-fo-payment-form label > span { color:var(--ink-soft,#4e5448); font-size:10.5px; font-weight:750; }
.mm-fo-payment-form input,
.mm-fo-payment-form select,
.mm-fo-payment-form textarea {
  width:100%;
  min-height:44px;
  padding:10px 11px;
  border:1px solid var(--line,#dde0d6);
  border-radius:11px;
  outline:0;
  background:#fafbf7;
  color:var(--ink,#23281c);
  font:500 13px/1.35 var(--font,inherit);
}
.mm-fo-payment-form textarea { min-height:76px; resize:vertical; }
.mm-fo-payment-form input:focus,
.mm-fo-payment-form select:focus,
.mm-fo-payment-form textarea:focus { border-color:#7d8375; box-shadow:0 0 0 3px rgba(35,40,28,.07); }
.mm-fo-money-input { position:relative; }
.mm-fo-money-input input { padding-right:34px; }
.mm-fo-money-input b { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted,#74796d); }
.mm-fo-form-error { min-height:18px; color:#b42318; font-size:11.5px; font-weight:650; }
.mm-fo-modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:2px; }
.mm-fo-modal-actions .mm-fo-secondary { background:#fff; color:var(--ink,#23281c); border:1px solid var(--line,#dde0d6); }

.mm-fo-entry-history { margin-top:20px; padding-top:17px; border-top:1px solid var(--line,#dde0d6); }
.mm-fo-entry-history h3 { margin:0 0 8px; font-size:13px; }
.mm-fo-history-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:10px 2px;
  border-bottom:1px solid rgba(35,40,28,.08);
}
.mm-fo-history-row:last-child { border-bottom:0; }
.mm-fo-history-row > div { display:grid; gap:3px; min-width:0; }
.mm-fo-history-row strong { font-size:11.5px; }
.mm-fo-history-row span { color:var(--muted,#74796d); font-size:10.5px; overflow-wrap:anywhere; }
.mm-fo-history-row > b { white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; }
.mm-fo-history-row.payment > b { color:#216e45; }
.mm-fo-history-row.refund > b { color:#b42318; }
.mm-fo-history-row.legacy > b { color:#565c4f; }
.mm-fo-history-row.sync-pending,
.mm-fo-history-row.sync-quarantined,
.mm-fo-history-row.sync-conflict {
  margin:6px 0;
  padding:10px;
  border:1px solid #dfb96d;
  border-radius:11px;
  background:#fff8e8;
}
.mm-fo-history-row.sync-quarantined,
.mm-fo-history-row.sync-conflict { border-color:#e2a39e; background:#fff5f4; }
.mm-fo-history-row.sync-pending > b { color:#74500f; }
.mm-fo-history-row.sync-quarantined > b,
.mm-fo-history-row.sync-conflict > b { color:#b42318; }
.mm-fo-history-row .mm-fo-sync-reason { color:#842019; line-height:1.4; }
.mm-fo-empty { margin:0; padding:12px 0; color:var(--muted,#74796d); font-size:11.5px; }

@media (max-width:760px) {
  .mm-fo-modal-overlay { align-items:flex-end; padding:0; }
  .mm-fo-modal {
    width:100%;
    max-height:calc(100dvh - 18px);
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
  }
  .mm-fo-modal-head h2 { font-size:21px; }
  .mm-fo-payment-balance { grid-template-columns:1fr 1fr; }
  .mm-fo-payment-balance > div:last-child { grid-column:1/-1; min-height:68px; }
  .mm-fo-payment-form { grid-template-columns:1fr; }
  .mm-fo-payment-form label.wide,
  .mm-fo-form-error,
  .mm-fo-modal-actions { grid-column:auto; }
  .mm-fo-modal-actions { display:grid; grid-template-columns:1fr 1fr; }
  .mm-fo-modal-actions .toolbar-btn { width:100%; min-height:46px; }
  .mm-fo-receipt-filter { width:100%; margin:10px 0 0; }
  .mm-fo-invoice-payment-line { align-items:flex-start; flex-direction:column; }
}

@media (max-width:390px) {
  .mm-fo-payment-balance { grid-template-columns:1fr; }
  .mm-fo-payment-balance > div:last-child { grid-column:auto; }
  .mm-fo-modal-actions { grid-template-columns:1fr; }
}