/* 14-r204.css — v1.19.204: glass for every menu and window, search inside long lists, sort bars, funds. */

/* ── glass tint: the same in both looks, so a list never turns into a dark solid block ── */
html.silk{ --s-tint:rgba(18,19,23,.42); }
html.silk.light{ --s-tint:rgba(255,255,255,.5); }

/* menus and windows that sit on top of the page */
.csel-dd,.prod-pick-dd,.ax-fly,.ax-qc-menu,.toast-item,.float-ext-toast{
  background:color-mix(in srgb,var(--card,#10231d) 60%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14)!important;
}
html.light .csel-dd,html.light .prod-pick-dd,html.light .ax-fly,html.light .ax-qc-menu,html.light .toast-item{ border-color:rgba(16,17,20,.12)!important; }
html.silk .csel-dd,html.silk .prod-pick-dd,html.silk .ax-fly,html.silk .ax-qc-menu,html.silk .toast-item,html.silk .float-ext-toast{
  -webkit-backdrop-filter:blur(26px) saturate(1.6)!important;backdrop-filter:blur(26px) saturate(1.6)!important;   /* 12-silk.css switches blur off for these; they sit on top, so they get it back */
  background:var(--s-glass),var(--s-tint)!important;
  box-shadow:0 18px 44px var(--s-shade),inset 0 1px 0 var(--s-hi);
}
/* windows made from script (stock count, warehouses, price lists, funds): translucent panel over a blurred page */
.ax-ov{ background:rgba(0,0,0,.42)!important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ax-panel{ background:color-mix(in srgb,var(--card,#10231d) 72%,transparent)!important; }
html.silk .ax-ov{ background:rgba(0,0,0,.34)!important; }
html.silk.light .ax-ov{ background:rgba(40,44,54,.16)!important; }
html.silk .ax-panel{ background:var(--s-glass),var(--s-tint)!important; border:0!important; border-radius:24px!important; box-shadow:0 22px 60px var(--s-shade),inset 0 1px 0 var(--s-hi)!important; }

/* ── a long list gets a search box and an A-Z switch ── */
.csel-dd.on{ display:flex!important; flex-direction:column; overflow:hidden!important; }
.csel-bar{ display:flex; gap:6px; padding:7px; border-bottom:1px solid var(--border); flex-shrink:0; }
.csel-search{ flex:1; min-width:0; padding:7px 10px; border-radius:9px; border:1px solid var(--border); background:rgba(255,255,255,.07); color:var(--cream); font-family:inherit; font-size:13px; outline:0; }
.csel-search:focus{ border-color:var(--cream2); }
.csel-az{ padding:0 10px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--cream2); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.csel-az.on{ background:var(--gold2); color:#080f0d; border-color:transparent; }
html.silk .csel-az.on{ background:var(--s-ink); color:var(--s-on-ink); }
.csel-list{ overflow-y:auto; min-height:0; flex:1; }
.csel-empty{ padding:12px; text-align:center; color:var(--muted); font-size:12px; }

/* search + sort on one line above a list */
.lst-bar{ display:flex; gap:8px; margin-bottom:10px; align-items:stretch; }
.lst-bar .fc:first-child{ flex:1; min-width:0; }
.lst-bar .lst-sort{ width:auto; flex-shrink:0; min-width:150px; }
@media (max-width:560px){ .lst-bar{ flex-wrap:wrap; } .lst-bar .lst-sort{ flex:1; } }

/* ── funds ── */
.fd-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-bottom:14px; }
.fd-card{ position:relative; padding:13px 14px; border:1px solid var(--border); border-radius:16px; background:var(--bg2); min-width:0; }
.fd-card.main{ border-color:color-mix(in srgb,var(--gold2) 40%,var(--border)); }
.fd-card .nm{ font-weight:700; font-size:14px; color:var(--cream); display:flex; align-items:center; gap:6px; }
.fd-card .bal{ font-size:22px; font-weight:700; margin:8px 0 2px; font-variant-numeric:tabular-nums; color:var(--gold2); overflow-wrap:anywhere; }
.fd-card .bal.neg{ color:var(--red); }
html.silk .fd-card .bal.neg{ color:var(--s-bad); }
.fd-card .sub{ font-size:11px; color:var(--muted); min-height:15px; }
.fd-card .acts{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.fd-card .acts .btn{ padding:4px 9px; }
.fd-tag{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; background:var(--bg3); color:var(--cream2); }
.fd-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 8px; }
.fd-head .t{ font-weight:700; color:var(--cream); font-size:14px; }
.fd-rule{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--bg2); margin-bottom:8px; }
.fd-rule.off{ opacity:.62; }
.fd-rule .tx{ flex:1; min-width:220px; line-height:1.8; font-size:13px; color:var(--cream); }
.fd-rule .mt{ font-size:11.5px; color:var(--muted); }
.fd-rule .acts{ display:flex; gap:5px; flex-wrap:wrap; }
.fd-rule .acts .btn{ padding:4px 9px; }
.fd-mv td{ font-size:12.5px; }
.fd-arrow{ opacity:.55; padding:0 4px; }
.fd-warn{ padding:10px 12px; border-radius:12px; background:rgba(232,184,109,.14); border:1px solid rgba(232,184,109,.4); color:var(--cream); font-size:12.5px; line-height:1.7; margin-bottom:10px; }
.fd-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 12px; }
.fd-form .full{ grid-column:1/-1; }
/* the "pay from a fund" line in the purchase, expense and payment windows */
.fd-pick .fl{ display:flex; justify-content:space-between; gap:8px; }
.fd-pick .fl em{ font-style:normal; color:var(--muted); font-weight:500; }
/* routine expense: the option to set money aside into a fund (file 57f) */
.ra-box{ padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:var(--bg2); }
.ra-chk{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--cream); cursor:pointer; }
.ra-chk input{ width:17px; height:17px; accent-color:var(--gold2); }
.ra-note{ margin-top:8px; padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.7; background:color-mix(in srgb,var(--gold2) 10%,transparent); color:var(--cream); }
.ra-note b{ color:var(--gold2); }
.ra-note.bad{ background:rgba(232,184,109,.14); }