/* Offene Posten — das Aussehen der Liste auf der Startseite UND im Zahlungen-Werkzeug.
   Gehoert zu shared/offene-posten.js; die Begruendung steht dort oben.
   Der Block stand vorher in beiden Seiten und war auseinandergelaufen (Bearbeiten-Feld,
   Knopffarben, Rahmen). Die Zeile selbst kommt jetzt aus einer Hand, das Aussehen auch.
   Nicht hier drin: .pay-card — die Karte sitzt auf der Startseite im Widget-Raster
   (Aussenabstand) und im Werkzeug in der Seitenspalte (Rahmen). */

.pay-row{display:flex;align-items:flex-start;gap:8px;padding:7px 12px;border-bottom:1px solid var(--sand-300)}
.pay-row:last-child{border-bottom:none}
/* -webkit-appearance:auto — im Zahlungen-Werkzeug setzt ein Grundstil alle input auf
   appearance:none; ohne diese Zeile bliebe das Kaestchen dort unsichtbar. */
.pay-cb{-webkit-appearance:auto;appearance:auto;width:15px;height:15px;padding:0;border:0;border-radius:0;background:none;cursor:pointer;flex-shrink:0;margin-top:3px;accent-color:var(--gold-500)}
.pay-main{flex:1;min-width:0}
.pay-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:baseline}
.pay-name{font-size:12px;font-weight:600;color:var(--navy-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.1px;min-width:0;justify-self:start}
.pay-date{justify-self:center;font-size:10px;font-weight:400;color:var(--gold-700);font-variant-numeric:tabular-nums;letter-spacing:.2px;white-space:nowrap}
.pay-amt{justify-self:end;font-size:11px;font-weight:600;color:var(--navy-800);font-variant-numeric:tabular-nums;flex-shrink:0;letter-spacing:.1px}
.pay-desc-row{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.pay-rn{font-size:10px;color:var(--gold-700);font-weight:400;letter-spacing:.2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pay-rn::after{content:' · ';color:var(--sand-500)}
.pay-comment{font-size:10px;color:var(--gold-700);font-weight:400;font-style:italic;border:none;outline:none;background:transparent;flex:1;min-width:0;font-family:inherit;padding:0;letter-spacing:.2px}
.pay-comment::placeholder{color:var(--sand-500);font-weight:400}
.pay-row.paid .pay-name,.pay-row.paid .pay-amt{text-decoration:line-through;color:var(--sand-500)}
.pay-row.paid .pay-date,.pay-row.paid .pay-rn,.pay-row.paid .pay-comment{text-decoration:line-through;color:var(--sand-500)}
.pay-actions{display:flex;flex-direction:column;gap:1px;flex-shrink:0;margin-left:2px;opacity:.55}
.pay-actions:hover{opacity:1}
.pay-icon{background:none;border:none;color:var(--sand-500);cursor:pointer;font-size:11px;padding:1px 3px;line-height:1;border-radius:3px}
.pay-icon:hover{background:var(--sand-100);color:var(--navy-800)}
.pay-icon.del:hover{color:#dc2626;background:#fee2e2}

/* Zeile im Bearbeiten-Modus */
.pay-edit-form{display:flex;flex-direction:column;gap:5px;margin-top:4px;padding:6px;background:var(--sand-100);border-radius:6px;width:100%;box-sizing:border-box}
.pay-edit-form input{padding:5px 8px;font-size:11px;border:1px solid var(--sand-300);border-radius:4px;font-family:inherit;outline:none;background:#fff;box-sizing:border-box;width:100%}
.pay-edit-form input:focus{border-color:var(--gold-500)}
.pay-edit-form .pay-edit-row{display:flex;gap:5px;align-items:center}
.pay-edit-form button{padding:5px 10px;font-size:11px;border:none;border-radius:4px;cursor:pointer;font-family:inherit;font-weight:600}
.pay-edit-form .save{background:var(--gold-500);color:var(--navy-900)}
.pay-edit-form .cancel{background:transparent;color:var(--sand-700)}
.pay-edit-orig{font-size:9px;color:var(--sand-700);font-style:italic;padding:0 2px 2px}

/* Summe, Zwischenueberschrift, Eingabezeile, Leermeldung */
.pay-sum{font-size:10px;color:var(--gold-700);font-weight:700;padding:6px 12px;background:var(--gold-100);border-bottom:1px solid var(--sand-300);display:flex;justify-content:space-between;letter-spacing:.3px}
.pay-sublbl{font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-700);padding:8px 12px 5px;background:var(--sand-100);border-top:1px solid var(--sand-300);border-bottom:1px solid var(--sand-300)}
.pay-add{display:grid;grid-template-columns:1fr 90px 90px 28px;gap:5px;padding:8px 12px;border-top:1px solid var(--sand-300);background:var(--sand-100)}
.pay-add-desc{grid-column:1 / -1;margin-top:4px}
.pay-add input{font-size:11px;padding:6px 8px;border:1px solid var(--sand-300);border-radius:6px;font-family:inherit;background:#fff;outline:none;min-width:0;width:100%;box-sizing:border-box;display:block}
.pay-add input:focus{border-color:var(--gold-500)}
.pay-add input.pay-add-desc{font-size:10px;color:var(--gold-700);letter-spacing:.2px}
.pay-add input.pay-add-desc::placeholder{color:var(--sand-500)}
.pay-add button{padding:6px 0;background:var(--gold-500);border:none;border-radius:6px;color:var(--navy-900);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.pay-empty{padding:12px;font-size:11px;color:var(--sand-700);text-align:center}