/* ---------- components/filters/filters.css ---------- */
/* ===== filters =====
   The pill row above the list (search box, All with the overall sum, Drafts, starred accounts) and the account pick list that opens under the search box.
   One soft pill per filter, each with its balance or count in a small bubble; the row scrolls sideways when it is longer than the screen. */
.filters{--fw:260px;--ph:calc(13px*1.2 + 14px);position:relative;display:flex;align-items:center;gap:8px;margin:14px 0 0}
.filters .frail{flex:1;min-width:0}
/* the search box: a pill at the left of the row, right before All; the list below opens under it */
.fsrch{flex:none;position:relative;width:var(--ph);transition:width .22s}   /* closed: a round button the same height as the pills */
.fsrch:focus-within,.fsrch.has{width:var(--fw)}   /* open (tapped, or has text in it): it grows to the width of its drop list (--fw) */
.fsrch .fsi{position:absolute;left:calc((var(--ph) - 15px)/2);top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--mute);pointer-events:none;transition:left .22s,color .2s}
.fsrch:focus-within .fsi,.fsrch.has .fsi{left:12px;color:var(--accent)}
.fsrch input{display:block;width:100%;min-width:0;border:0;border-radius:99px;background:var(--card);color:var(--text);box-sizing:border-box;height:var(--ph);padding:0;font:inherit;font-size:13px;font-weight:500;line-height:1.2;box-shadow:none;cursor:pointer;transition:box-shadow .15s,background .15s,padding .22s}
.fsrch input::placeholder{color:var(--mute);opacity:.8}
.fsrch input:focus,.fsrch.has input{outline:0;cursor:text;background:color-mix(in srgb,var(--accent) 14%,var(--card));box-shadow:inset 0 0 0 1.5px var(--accent)}   /* open: blue like the active pills */
.fsrch:not(:focus-within):not(.has) input::placeholder{color:transparent}
.fsrch:focus-within input,.fsrch.has input{padding:0 28px 0 33px}   /* room for the magnifier and the clear button only when it is open (padding made the closed button too wide) */
.fsrch .fsx{display:none;position:absolute;right:5px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mute);cursor:pointer;align-items:center;justify-content:center}
.fsrch.has .fsx{display:flex}
.fsrch .fsx:hover{background:var(--line);color:var(--text)}
#fPop{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:0;width:var(--fw);max-width:none;max-height:min(60vh,380px);overflow:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 32px -10px rgba(0,0,0,.4);padding:6px;z-index:30}
#fPop.on{display:block}
.fh{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);padding:6px 8px 4px;position:sticky;top:-6px;background:var(--card);z-index:1}
.fh.fmore{position:static;text-align:center;padding:8px 8px 4px}
.frail{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.frail::-webkit-scrollbar{display:none}
.frail::before,.frail::after{content:"";margin:auto}   /* centres the pills; when the row is longer than the screen the margins collapse and it scrolls from the start */
.frail .chip,.frail .sc{flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap;background:var(--card);color:var(--mute);border:0;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:500;line-height:1.2;cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}
.frail .chip:hover,.frail .sc:hover{color:var(--text)}
.frail .chip.on,.frail .sc.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card));box-shadow:inset 0 0 0 1.5px var(--accent);font-weight:700}
.frail .chip small,.frail .sc .sb{font-size:11px;font-weight:600;line-height:1.4;padding:1px 7px;border-radius:99px;background:var(--bg);font-variant-numeric:tabular-nums}
.frail .chip.on small,.frail .sc.on .sb{background:var(--card)}
.frail .chip small{color:var(--draft)}
.stars{display:contents}
.tagf{flex:none;display:flex;align-items:center;padding:0 6px}
.tagf .sf{width:28px;height:28px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);transition:background .12s,color .12s}
.tagf .sf:hover{color:var(--text)}
.tagf .sf.on{background:#FFC83D;color:#4A3200;box-shadow:none}
.frail .sn{font-size:14px;font-weight:700}
.frail .sc .sb.neg{color:var(--err)}.frail .sc .sb.pos{color:var(--accent)}
.frail #fBtn{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis}   /* an account that is not starred: it shows here while it is filtered; tap to clear */
/* phone: the search box and the pick list are the same width, the list stays on screen and above the keyboard; the search box is a little narrower */
@media (max-width:560px){.filters{--fw:min(46vw,190px)}
#fPop .ab,#fPop .av{display:none}   /* the search list shows only the name and the star on the phone: no amount, no letter circle */
#fPop{left:0;width:var(--fw);min-width:0;max-width:none;max-height:min(60vh,380px,var(--pop-h,380px));overflow-x:hidden;overflow-y:auto}}

/* ---- the overall sum: sits under the pager, above the footer ---- */
.tsum{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;margin:12px 2px 0;font-size:13px;color:var(--mute)}
.tsum:empty{display:none}
.tsum .pill{font-size:16px;font-weight:700}

/* ---- All / Drafts as ONE round button: it shows the number of the side you are on (blue = All, amber = Drafts); tap it to flip. The two old buttons stay in the page (hidden) because the page keeps updating them. */
.filters.flipon .frail .chip[data-tg]{display:none}
.fflip{flex:none;display:flex;align-items:center;justify-content:center;height:var(--ph);min-width:var(--ph);max-width:130px;box-sizing:border-box;padding:0 9px;border:0;border-radius:99px;font:inherit;font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card));box-shadow:inset 0 0 0 1.5px var(--accent);transition:background .2s,color .2s,box-shadow .2s}
.fflip.d{color:var(--draft);background:color-mix(in srgb,var(--draft) 16%,var(--card));box-shadow:inset 0 0 0 1.5px var(--draft)}

/* ---- the star button: a round button the same size as the search and All / Drafts buttons, right after them */
.filters .tagf{padding:0}
.filters .tagf .sf{width:var(--ph);height:var(--ph)}
/* the Total above the footer shows on the main ledger only (not in zakat, bad debts, stockbook, prices) */
body.zk-open .tsum,body.bd-open .tsum,body[data-book="alt"] .tsum{display:none!important}
/* subtotal pill beside the search box: only while searching */
.fsub{flex:none;display:flex;align-items:center;height:var(--ph);box-sizing:border-box;padding:0 11px;border-radius:99px;background:var(--card);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--mute)}
.fsub[hidden]{display:none}
.fsub.pos{color:var(--pos,#16a34a)}
.fsub.neg{color:var(--neg,var(--err,#dc2626))}

.fcode{color:var(--accent);font-size:14px;letter-spacing:.06em}   /* answer of a c:123 / c:dbk lookup */