/* money.css — the "money" screen group: Money, Invoice (photo → review, detail), the customer card, the debt form
   and the supplier sheet. Prefix: .money-…  Colours and sizes from tokens.css only. Logical properties only (RTL). */

/* ---------- screen frame ---------- */
.money-screen{display:flex;flex-direction:column;gap:var(--sp-5)}
.money-screen > .section{margin-top:0}
.money-h1{overflow-wrap:anywhere}
.money-tab{display:flex;flex-direction:column;gap:var(--sp-6)}
.money-tab > .section{margin-top:0}
.money-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.money-gap{margin-top:var(--sp-3)}
.money-none{color:var(--text-3);font-size:var(--fs-sm)}
.money-num{color:var(--text-3);font-weight:500;font-size:var(--fs-sm);unicode-bidi:isolate;white-space:nowrap}
.money-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);align-items:end}
.money-grid3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2);align-items:end}
.money-grid3 .field__label{font-size:var(--fs-xs)}
.money-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.money-buttons > .btn--primary,.money-buttons > .btn--wa{grid-column:1 / -1}
/* a lone ghost button (call only, or add-debt only) takes the whole row instead of half */
.money-buttons > .btn--ghost:last-child:not(.btn--ghost + .btn--ghost){grid-column:1 / -1}
.money-screen .tabs__tab{padding-inline:10px}
.money-chips{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2)}
.money-chips > .meta{flex-basis:100%}

/* ---------- invoice-photo button (a <label> around a hidden file input) ---------- */
.money-cta{display:flex;flex-direction:column;gap:6px}
.money-file{position:relative;cursor:pointer}
.money-file__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
.money-file:focus-within{outline:2px solid var(--y);outline-offset:3px}

/* ---------- a money row (MoneyCard): the tappable part opens it; its buttons sit in one row inside the card,
   like Home and Reminders. A button is never inside the tappable part (no nested buttons). ---------- */
.money-card{flex-direction:column;align-items:stretch;gap:0;padding:0}
.money-card__top{display:flex;align-items:stretch;min-width:0}
.money-card__main{flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--sp-3);padding:14px 16px;color:inherit;text-align:start;
  border-radius:inherit}
button.money-card__main{cursor:pointer;transition:background-color var(--t) var(--ease)}
button.money-card__main:hover{background:var(--s2)}
button.money-card__main:active{background:var(--s3)}
button.money-card__main:focus-visible{outline:2px solid var(--y);outline-offset:-2px}
.money-card__side{flex:none;display:flex;align-items:center;padding-block:8px;padding-inline-end:12px}
.money-card__actions{display:flex;flex-wrap:nowrap;align-items:stretch;gap:var(--sp-2);padding:0 12px 12px}
.money-card__actions > *{flex:1 1 0;min-width:0}
.money-card__actions .btn{padding-inline:10px}
/* a row action is quiet (one yellow button per screen); its check mark keeps the yellow */
.money-act .icon{color:var(--y)}
/* "waiting to send" in place of a pay button; a link to the outbox */
.money-wait{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--s2);color:var(--text-2);font-size:var(--fs-sm);font-weight:600;text-align:center;box-shadow:inset 0 0 0 1px var(--line-strong)}
.money-wait:hover{color:var(--text)}
.money-wait{text-decoration:none}
.money-buttons > .money-wait{grid-column:1 / -1}
.money-wait .icon{flex:none}
.money-waitnote{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:var(--r-sm);background:var(--s2);
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text);font-size:var(--fs-sm);line-height:1.45}
.money-waitnote .icon{flex:none;margin-top:2px;color:var(--text-2)}
.money-waitnote a{color:var(--y);font-weight:600}

/* ---------- the month card ---------- */
.money-month{display:flex;flex-direction:column;gap:var(--sp-3);padding:12px 14px 14px;background:var(--s1);border:1.5px solid var(--line);border-radius:var(--r)}
.money-month__head{display:flex;align-items:center;gap:4px;margin:-6px -8px 0}
.money-month__title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;font-size:var(--fs-lg);line-height:1.2;text-align:center}
.money-month__sub{color:var(--text-3);font-size:var(--fs-xs);font-weight:500}
.money-month__head .icon-btn:disabled{opacity:.3;cursor:default}
.money-month__main{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.money-month__label{color:var(--text-2);font-size:var(--fs-sm)}
.money-month__value{font-size:var(--fs-2xl);font-weight:800;line-height:1.15}
.money-month__list{display:flex;flex-direction:column;margin:0;border-top:1px solid var(--line)}
.money-month__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:8px 0;border-bottom:1px solid var(--line)}
.money-month__row dt{color:var(--text-2);font-size:var(--fs-sm)}
.money-month__row dd{margin:0;text-align:end;font-variant-numeric:tabular-nums}

/* ---------- photo thumbnails and the viewer ---------- */
.money-thumb{display:grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);border-radius:var(--r-xs);overflow:hidden;
  background:var(--s2);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.money-thumb:hover{color:var(--text)}
.money-thumb--big{width:96px;height:96px;border-radius:var(--r-sm)}
.money-thumb__img{width:100%;height:100%;object-fit:cover}
.money-photo-row{display:flex}
.money-photo{display:block;min-height:100%;overflow:auto;border-radius:var(--r-sm);background:var(--bg)}
.money-photo--wait{display:grid;place-items:center;min-height:40dvh;color:var(--text-3)}
.money-photo__btn{display:block;width:100%;cursor:zoom-in}
.money-photo__img{width:100%;height:auto;max-width:none}
.money-photo--zoom .money-photo__btn{width:220%;cursor:zoom-out}

/* ---------- invoice screens ---------- */
.money-top{display:flex;align-items:center;gap:var(--sp-2);margin-inline-start:-12px;margin-bottom:calc(var(--sp-3) * -1)}
.money-inv__head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.money-note{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:var(--r-sm);background:var(--volt-soft);
  color:var(--text);font-size:var(--fs-sm);line-height:1.45}
.money-note .icon{margin-top:2px;color:#8fb0ff}
.money-note--demo{background:var(--y-soft)}
.money-alert{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;border-radius:var(--r-sm);background:var(--bad-soft);
  box-shadow:inset 0 0 0 1px var(--bad);color:var(--text);font-size:var(--fs-sm);line-height:1.45}
.money-alert .icon{margin-top:2px;color:var(--bad)}
.money-reading{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4);text-align:center;
  color:var(--text-2);background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}
.money-reading__img{max-height:220px;width:auto;border-radius:var(--r-sm);opacity:.75}
.money-reading__text{color:var(--text);font-size:var(--fs-lg);font-weight:600}
.money-match{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:calc(var(--sp-2) * -1)}

.money-checks{padding:12px 14px;border-radius:var(--r-sm);background:var(--ember-soft);box-shadow:inset 0 0 0 1px var(--ember-line)}
.money-checks__title{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:700;color:var(--ember)}
.money-checks__list{display:flex;flex-direction:column;gap:6px}
.money-checks__item{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm);line-height:1.4}
.money-checks__level{flex:none;padding:1px 8px;border-radius:var(--r-pill);background:var(--ember-soft);color:var(--ember);font-size:var(--fs-xs);font-weight:600}
.money-checks__item--error .money-checks__level{background:var(--bad-soft);color:var(--bad)}

.money-lines{display:flex;flex-direction:column;gap:8px}
.money-line{display:flex;flex-direction:column;gap:var(--sp-3);padding:12px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}
.money-line__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-block:-6px;margin-inline-end:-6px}
.money-line__tools{display:flex;align-items:center}
.money-line__n{font-weight:700;color:var(--text-2);font-size:var(--fs-sm)}
/* a folded line: one row, the whole row opens it */
.money-line--row{flex-direction:row;align-items:center;gap:10px;width:100%;min-height:var(--tap);padding:8px 12px;color:var(--text);text-align:start;cursor:pointer}
.money-line--row:hover{background:var(--s2)}
.money-line--row .money-line__n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--s2);font-size:var(--fs-xs)}
.money-line__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.money-line__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.money-line--row > .icon{flex:none;color:var(--text-3)}
/* VAT id + allocation number fold away until needed */
.money-more{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;min-height:var(--tap);padding:8px 14px;
  border-radius:var(--r-sm);background:var(--s2);color:var(--text-2);text-align:start;font-size:var(--fs-sm)}
.money-more:hover{color:var(--text)}
.money-more__text{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Save stays on screen above the tab bar while the long form scrolls */
.money-foot{position:sticky;z-index:30;bottom:calc(var(--nav-h) + var(--safe-bottom));display:flex;flex-direction:column;gap:8px;
  margin-inline:calc(var(--gutter) * -1);padding:12px var(--gutter);background:var(--bg);border-top:1px solid var(--line)}
.money-foot__row{display:flex;gap:var(--sp-3)}
.money-foot__row > .btn{flex:1;min-width:0}
.money-foot__row > .btn--ghost{flex:0 1 auto;min-width:96px}
.money-foot__row .btn__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the voice button would cover the form's footer; there is nothing to say by voice on this screen */
html:has(.money-inv--form) .mic-fab{visibility:hidden}
.money-line .money-input__input{padding-left:28px;padding-right:8px}
.money-line .money-input__cur{left:10px}

.money-sum{display:flex;flex-direction:column;gap:2px;padding:16px;background:var(--s1);border:1.5px solid var(--line);border-radius:var(--r)}
.money-sum--late{border-color:var(--ember);box-shadow:inset 0 0 0 1px var(--ember-line)}
.money-sum__label{color:var(--text-2);font-size:var(--fs-sm)}
.money-sum__value{font-size:var(--fs-2xl);font-weight:800;line-height:1.15}
.money-sum__due{color:var(--text-2);font-size:var(--fs-sm)}

.money-kv{display:flex;flex-direction:column;margin:0;background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}
.money-kv__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:10px 16px;border-top:1px solid var(--line)}
.money-kv__row:first-child{border-top:0}
.money-kv dt{color:var(--text-2);font-size:var(--fs-sm)}
.money-kv dd{margin:0;text-align:end;font-variant-numeric:tabular-nums}

.money-rows{display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--line);border-radius:var(--r)}
.money-rows__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:10px 16px;border-top:1px solid var(--line)}
.money-rows__row:first-child{border-top:0}
.money-rows__main{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}

/* ---------- customer / supplier sheets ---------- */
.money-sheet{display:flex;flex-direction:column;gap:var(--sp-5)}
.money-sheet > .section{margin-top:0}
.money-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.money-head__who{display:flex;flex-direction:column;gap:4px;color:var(--text-2)}
.money-head .phone{color:var(--text-2)}
.money-balance{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-inline-start:auto;text-align:end}
.money-balance__label{color:var(--text-2);font-size:var(--fs-sm)}
.money-balance__value{font-size:var(--fs-xl);font-weight:800}
.money-balance__sub{font-size:var(--fs-xs);color:var(--text-3)}
.money-balance--debt .money-balance__label{color:var(--ember)}
.form > .money-balance{flex-direction:row;align-items:baseline;justify-content:space-between;margin-inline-start:0;padding:12px 14px;
  background:var(--ember-soft);border-radius:var(--r-sm)}

/* customer picker / merge list */
.money-picker{display:flex;flex-direction:column;gap:var(--sp-2)}
.money-pick{display:flex;flex-direction:column;gap:6px}
.money-pick__opt{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:var(--tap);padding:8px 14px;border-radius:var(--r-sm);
  background:var(--s2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);text-align:start}
.money-pick__opt:hover{background:var(--s3)}
.money-pick__opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--y)}
.money-pick__opt .phone{margin-inline-start:auto;color:var(--text-3);font-size:var(--fs-sm)}
.money-pick__opt--new{color:var(--y);box-shadow:inset 0 0 0 1px var(--y-ring)}
.money-pick__name{min-width:0;overflow-wrap:anywhere;font-weight:600}
.money-chosen{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:var(--tap);padding-block:6px;padding-inline:14px 6px;
  border-radius:var(--r-sm);background:var(--s2);box-shadow:inset 0 0 0 1.5px var(--y)}
.money-chosen__name{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.money-chosen__name .phone{color:var(--text-3);font-weight:400;font-size:var(--fs-sm)}

/* supplier payment: which invoices it covers */
.money-alloc{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r-sm);background:var(--s2);border:1px solid var(--line)}
.money-alloc__title{color:var(--text-2);font-size:var(--fs-sm);font-weight:600}
.money-alloc__list{display:flex;flex-direction:column;gap:4px}
.money-alloc__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:var(--fs-sm)}
.money-alloc__amt{color:var(--text-2)}
.money-alloc__left{color:var(--ok);font-size:var(--fs-sm)}