/* ---------- components/account-card/account-card.css ---------- */
/* ===== account-card =====
   The card under the filters when one account is selected. Top row: a round star button, the name (click = copy the public link) with the
   WhatsApp number and "entries / Credit / Debit" under it, and the balance with its status badge on the right.
   Second row: the search box for this account and the round WhatsApp / edit / delete buttons. A Credit-vs-Debit bar runs along the bottom edge. Also the Undo toast. */
#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;display:none;align-items:center;gap:16px;font-size:14px;z-index:60;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);max-width:92vw}

#toast.on{display:flex}

#toast button{background:none;color:inherit;padding:0;font-weight:700;text-decoration:underline;white-space:nowrap}
.ac{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* top row */
.ac-top{display:flex;align-items:center;gap:12px;padding:12px}
.ac-id{flex:1;min-width:0}
.ac-nr{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.ac-n{font-size:17px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;cursor:pointer;border-radius:6px;outline:0}
.ac-n:hover,.ac-n:focus-visible{color:var(--accent)}
.ac-cp{font-size:11px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .2s;white-space:nowrap}
.ac-cp.on{opacity:1}
.ac-sub{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:12px;line-height:1.55;color:var(--mute);font-variant-numeric:tabular-nums}
.ac-sub>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ac-sub .p{color:var(--accent)}.ac-sub .m{color:var(--err)}
.ac-add{display:inline-flex;align-items:center;gap:4px;padding:0;background:none;color:var(--mute);font-size:12px;border-bottom:1px dashed var(--line);border-radius:0;cursor:pointer}.ac-add:hover{color:var(--text)}
.ac-bal{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ac-badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:var(--bg);color:var(--mute)}
.ac-badge.pend{background:color-mix(in srgb,var(--err) 13%,transparent);color:var(--err)}
.ac-badge.cred{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.ac-amt{font-size:22px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.ac-amt.neg{color:var(--err)}.ac-amt.pos{color:var(--accent)}
/* the star: a round button at the left, gold when starred */
.ac-ib.ac-star{width:44px;height:44px;flex:none;border-radius:50%;border:0;background:var(--bg);color:var(--mute)}
.ac-ib.ac-star svg{width:22px;height:22px}
.ac-ib.ac-star:hover{background:color-mix(in srgb,var(--draft) 14%,var(--bg));color:var(--draft)}
.ac-ib.ac-star.on,.ac-ib.ac-star.on:hover{background:color-mix(in srgb,var(--draft) 18%,transparent);color:var(--draft)}
/* second row: the search box and the round buttons */
.ac-tools{display:flex;align-items:center;gap:8px;padding:0 12px 12px}
.ac-sw{position:relative;flex:1;min-width:0;display:flex;align-items:center;margin:0}
.ac-qi{position:absolute;left:12px;color:var(--mute);pointer-events:none}
.ac-q{display:block;width:100%;height:36px;font:inherit;font-size:16px;padding:0 34px 0 34px;border:1px solid var(--line);border-radius:99px;background:var(--bg);color:var(--text);outline:0;transition:border-color .15s}
.ac-q::placeholder{color:var(--mute);opacity:1}
.ac-q:focus{border-color:var(--accent)}
.ac-qx{position:absolute;right:4px;width:28px;height:28px;padding:0;border-radius:50%;background:none;color:var(--mute);display:flex;align-items:center;justify-content:center}
.ac-qx:hover{color:var(--text);background:color-mix(in srgb,var(--text) 9%,transparent)}
.ac-act{display:flex;flex:none;gap:8px}
.ac-ib{width:32px;height:32px;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--mute);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px;font-weight:600;transition:background .15s,color .15s}
.ac-ib svg{width:16px;height:16px}
.ac-ib:hover{background:color-mix(in srgb,var(--text) 9%,var(--card));color:var(--text)}
.ac-ib.ok{background:var(--accent);border-color:var(--accent);color:#fff}.ac-ib.ok:hover{background:var(--accent);color:#fff;filter:brightness(1.08)}
.ac-ib.ac-share.off,.ac-ib.ac-share.off:hover{opacity:.5}
/* a usable WhatsApp number is saved: the WhatsApp icon is green (no number = the plain dimmed button above) */
.ac-ib.ac-share:not(.off){color:#25D366;background:color-mix(in srgb,#25D366 12%,var(--card));border-color:color-mix(in srgb,#25D366 35%,var(--line))}
.ac-ib.ac-share:not(.off):hover{color:#25D366;background:color-mix(in srgb,#25D366 22%,var(--card))}
.ac-ib[data-acx=del]:hover{background:color-mix(in srgb,var(--err) 13%,var(--card));color:var(--err);border-color:transparent}
.ac-ib.arm,.ac-ib.arm:hover{width:auto;padding:0 12px;border-radius:99px;background:var(--err);border-color:var(--err);color:#fff;white-space:nowrap}
@media (max-width:480px){.ac-tools:has(.arm) .ac-sw{display:none}.ac-tools:has(.arm) .ac-act{flex:1;justify-content:flex-end}}
/* the bar along the bottom edge */
.ac-line{display:flex;height:5px;background:var(--line)}
.ac-line i{display:block;height:100%}.ac-line .p{background:var(--accent)}.ac-line .m{background:var(--err)}
/* edit in place: the name and number boxes (the save / cancel buttons take the place of WhatsApp / edit / delete) */
.ac-ni{display:block;width:100%;font:inherit;font-size:16px;font-weight:600;padding:5px 9px;border:1.5px solid var(--accent);border-radius:9px;background:var(--bg);color:var(--text);outline:0}
.ac-ni.ac-pi{font-size:14px;font-weight:500;margin-top:6px;border-color:var(--line)}.ac-ni.ac-pi:focus{border-color:var(--accent)}
@media (max-width:480px){.ac-amt{font-size:20px}}