/* Habein Yakir Li billing app: one style for every screen.
   Built on Bootstrap 5.3; these tokens and components match the approved preview. */

@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../vendor/fonts/public-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../vendor/fonts/public-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../vendor/fonts/public-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/fonts/public-sans-latin-700-normal.woff2") format("woff2")}

:root{
  --bg:#f7f6f2; --surface:#ffffff; --surface-2:#f2f0ea; --fg:#1b1d1c; --muted:#5d5f5a; --line:#e2dfd5;
  --side:#1b1d1c; --side-fg:#cfccc2; --side-hover:#2a2d2b; --side-on:#3a3220; --side-on-fg:#f7c548;
  --gold:#f5b82e; --gold-hover:#f7c548; --focus:#7a5200; --on-gold:#1b1d1c; --gold-soft:#fdf1d3; --gold-ink:#7a5200;
  --ok:#1e7a46; --ok-soft:#e2f3e8; --bad:#b42318; --bad-soft:#fde8e6; --warn:#8a5a00; --warn-soft:#fbf0d6;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --radius:8px;
  --bs-body-font-family:var(--font); --bs-body-color:var(--fg); --bs-body-bg:var(--bg); --bs-border-color:var(--line);
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121413; --surface:#1b1e1d; --surface-2:#242826; --fg:#eceae3; --muted:#a8a89e; --line:#323633;
  --side:#0b0c0c; --side-fg:#bfbcb2; --side-hover:#1d201f; --side-on:#3a3018; --side-on-fg:#f7c548;
  --gold-soft:#3a3018; --gold-ink:#f5c451; --focus:#f5b82e;
  --ok:#86d6a6; --ok-soft:#173426; --bad:#f4978e; --bad-soft:#3e1c19; --warn:#f0c463; --warn-soft:#3a2e12; --shadow:0 8px 24px rgba(0,0,0,.5);
  color-scheme:dark}}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.5;margin:0}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.25;color:var(--fg)}
h1{font-size:1.5rem;font-weight:700} h2{font-size:1.125rem;font-weight:600} h3{font-size:1rem;font-weight:600}
p{margin:0}
a{color:var(--gold-ink)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* A button that is working (after it was pressed) */
.btn[aria-busy="true"]{opacity:.75;cursor:progress}

/* Buttons */
.btn{font:inherit;font-weight:500;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:9px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--muted);background:var(--surface);color:var(--fg)}
.btn-primary,.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:600}
.btn-primary:hover,.btn.primary:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--on-gold)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{min-height:34px;padding:5px 10px;font-size:.875rem}
.btn.link{border:0;background:none;color:var(--gold-ink);padding:0;min-height:0;text-decoration:underline;text-underline-offset:3px}
.btn.wide{width:100%}

/* Forms */
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px var(--gold-soft)}
input[aria-invalid="true"]{border-color:var(--bad)}
label{font-weight:500;display:block;margin-bottom:6px}
.help{color:var(--muted);font-size:.875rem;margin-top:6px}
.err{color:var(--bad);font-size:.875rem;margin-top:6px;font-weight:500}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:0}
.check input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--gold)}
.stack{display:flex;flex-direction:column;gap:18px}
.code-input{font-size:1.5rem;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}

/* Surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--fg)}
.notice{border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.notice>div{flex:1 1 240px}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.bad{background:var(--bad-soft);color:var(--bad)}
.notice.ok{background:var(--ok-soft);color:var(--ok)}
.notice.info{background:var(--gold-soft);color:var(--gold-ink)}
.pill{display:inline-block;font-size:.8125rem;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap}
.p-paid{background:var(--ok-soft);color:var(--ok)} .p-unpaid{background:var(--bad-soft);color:var(--bad)}
.p-plan{background:var(--warn-soft);color:var(--warn)} .p-void{background:var(--surface-2);color:var(--muted)}
.list{display:flex;flex-direction:column}
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.item:first-child{border-top:0}
.kv{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px 16px;font-size:.9375rem;margin:0}
.kv dt{color:var(--muted);font-weight:400} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Login pages */
.auth{min-height:100vh;display:grid;place-items:center;padding-block:32px;padding-inline:16px}
.auth-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px;padding:28px}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.brand img{width:96px;height:auto}
.brand span{font-weight:600}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-family:ui-monospace,Consolas,monospace;font-size:1.0625rem;background:var(--surface-2);border-radius:var(--radius);padding:14px 18px}
.qr{background:#fff;border-radius:var(--radius);padding:8px;width:200px;height:200px;margin-inline:auto}
.secret{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em;text-align:center;background:var(--surface-2);border-radius:var(--radius);padding:8px;word-break:break-all}

/* App layout: fixed left menu, top bar with search, page area */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--on-gold);padding:8px 12px;border-radius:var(--radius)}
.skip-link:focus{left:8px}
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.shell.collapsed{grid-template-columns:76px minmax(0,1fr)}
.side{background:var(--side);color:var(--side-fg);padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;align-self:start;overflow-y:auto}
.side-brand{padding:4px 8px 18px;text-decoration:none}
.side-brand span{color:#f3f1ea;font-size:.95rem}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);color:var(--side-fg);text-decoration:none;min-height:44px}
.nav-link:hover{background:var(--side-hover);color:#fff}
.nav-link.on{background:var(--side-on);color:var(--side-on-fg);font-weight:600}
.badge-dot{margin-left:auto;background:var(--gold);color:var(--on-gold);border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-size:.75rem;font-weight:700}
.side-spacer{flex:1}
.who{font-size:.875rem;padding:10px 12px;border-top:1px solid #333735;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.who-name{color:#f3f1ea;text-decoration:underline;text-underline-offset:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .btn.link{color:var(--side-on-fg)}
.collapsed .nav-link{justify-content:center;padding:10px 0}
.collapsed .nav-link span,.collapsed .side-brand span,.collapsed .who-name{display:none}
.collapsed .side-brand img{width:48px}
.collapsed .who{justify-content:center}
.collapsed .badge-dot{position:absolute;margin:0 0 22px 26px;min-width:16px;height:16px;font-size:.6875rem}
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;gap:12px;align-items:center;padding:14px 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}
.iconbtn{padding:9px 10px}
.search{flex:1;max-width:620px;position:relative;margin:0}
.search input{padding-left:40px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.content{padding:28px;max-width:1160px;width:100%;display:flex;flex-direction:column;gap:24px}
.content:focus{outline:none}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.head p{color:var(--muted);margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* Summary boxes: label, number and note line up across each row of boxes (subgrid), and the
   number shrinks to fit its box instead of spilling out (container units). */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-align:left;color:inherit;text-decoration:none;
  display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;min-width:0}
a.stat:hover{border-color:var(--gold);color:inherit}
.stat .l{color:var(--muted);font-size:.875rem;align-self:start}
.stat .v{font-size:1.75rem;font-weight:700;margin-top:4px;white-space:nowrap;align-self:end;line-height:1.25;container-type:inline-size;min-width:0}
.stat .v>span{font-size:min(1.75rem,16cqi)}
.stat .s{font-size:.8125rem;color:var(--gold-ink);margin-top:6px;font-weight:500;align-self:start}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.empty{text-align:center;padding:40px 20px;color:var(--muted);display:flex;flex-direction:column;gap:10px;align-items:center}
.empty h2{color:var(--fg)}

/* Tables */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.tablewrap table{border-collapse:collapse;width:100%;min-width:700px;margin:0}
.tablewrap th,.tablewrap td{text-align:left;padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.35;font-size:.875rem}
.tablewrap th{font-size:.6875rem;color:var(--muted);font-weight:600;background:var(--surface-2);text-transform:uppercase;letter-spacing:.05em;padding-top:8px;padding-bottom:8px;white-space:nowrap}
.tablewrap td .help,.tablewrap td .sub{font-size:.75rem;color:var(--muted);margin:0}
.tablewrap td .pill{font-size:.6875rem;padding:1px 8px;font-weight:600;letter-spacing:.01em}
.tablewrap td .lnk{text-decoration-color:transparent}
.tablewrap tr[data-href]:hover .lnk{text-decoration-color:var(--line)}
.tablewrap td.id{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
.tablewrap td.addr{color:var(--muted);max-width:360px}
.tablewrap td.num,.tablewrap td.r{font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap tr:last-child td{border-bottom:0}
.tablewrap td.r,.tablewrap th.r{text-align:right}
.lnk{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.lnk:hover{color:var(--gold-ink);text-decoration-color:currentColor}

/* "Saved" messages with undo */
.toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60;width:max-content;max-width:calc(100% - 32px)}
.toast-msg{background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:10px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
.toast-msg.error{background:var(--bad);color:#fff}
.toast-msg form{margin:0}
.toast-msg button{all:unset;cursor:pointer;text-decoration:underline;font-weight:600}

/* Lists, toolbars, menus, pop-ups */
.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.875rem}
.count{color:var(--muted);font-size:.9375rem}
.count b{color:var(--fg);font-weight:600}
.menuwrap{position:relative}
.menuwrap>summary{list-style:none}
.menuwrap>summary::-webkit-details-marker{display:none}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px;z-index:18;min-width:220px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.menu a,.menu button{display:block;padding:9px 12px;border-radius:6px;color:var(--fg);text-decoration:none;text-align:left;background:none;border:0;font:inherit;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--surface-2)}
.menu a[aria-current="true"]{font-weight:600;color:var(--gold-ink)}
.pager{display:flex;gap:12px;align-items:center;justify-content:center}
.back{align-self:flex-start;font-size:.9375rem}
.grid3{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.kv.tight{grid-template-columns:max-content minmax(0,1fr)}
.grid3.even{grid-template-columns:repeat(3,minmax(0,1fr))}
.amt-due{color:var(--bad);font-weight:600} .amt-zero,.amt-credit{color:var(--ok);font-weight:600} .amt-plan{color:var(--warn);font-weight:600}
.tablewrap tr[data-href]{cursor:pointer}
.tablewrap tr[data-href]:hover{background:var(--surface-2)}
.danger-zone{border-color:var(--bad-soft)}
dialog.dlg{border:0;border-radius:12px;padding:24px;max-width:480px;width:calc(100% - 32px);background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
dialog.dlg::backdrop{background:rgba(0,0,0,.45)}

/* Settings lists */
.listedit{display:flex;flex-direction:column;gap:8px}
.listedit .li-row{display:flex;gap:8px;align-items:center;margin:0;flex-wrap:nowrap}
.listedit .li-row input{flex:1;min-width:0}
.listedit .li-row .btn{flex:none}

/* Searchable dropdowns (Tom Select) in the app's style */
.ts-wrapper{padding:0;border:0;background:none;min-height:0}
.ts-wrapper .ts-control{border:1px solid var(--line);border-radius:var(--radius);min-height:44px;padding:9px 34px 9px 12px;background:var(--surface);color:var(--fg);font:inherit;box-shadow:none}
.ts-wrapper.single .ts-control::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
.ts-wrapper .ts-control>input{border:0 !important;min-height:0 !important;height:auto !important;padding:0 !important;margin:0 !important;width:0;flex:1 1 0;min-width:0;line-height:1.5 !important;box-shadow:none !important;background:transparent;font:inherit;color:var(--fg)}
/* One-choice dropdowns: exactly the same height as the typing boxes (44px), on one line */
.ts-wrapper.single .ts-control{height:46px;min-height:46px;flex-wrap:nowrap;align-items:center;padding-top:0;padding-bottom:0;line-height:1.5}
.ts-wrapper.single .ts-control>.item{line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ts-wrapper .ts-control>input:focus{box-shadow:none}
.ts-dropdown .option{padding:8px 12px}
.ts-dropdown .no-results{padding:8px 12px;color:var(--muted)}
.ts-wrapper.focus .ts-control{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.ts-dropdown{border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);background:var(--surface);color:var(--fg)}
.ts-dropdown .active{background:var(--surface-2);color:var(--fg)}
.ts-dropdown .create{color:var(--gold-ink);font-weight:600}
.ts-dropdown .option small{display:block;color:var(--muted)}

@media (max-width:1180px){.grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid3>:first-child{grid-column:1/-1}.grid3.even>:first-child{grid-column:auto}}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3,.grid3.even{grid-template-columns:minmax(0,1fr)}.grid3>:first-child{grid-column:auto}}
@media (max-width:760px){
  .shell,.shell.collapsed{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset:0 22% 0 0;z-index:40;height:auto;transform:translateX(-102%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
  .collapsed .nav-link span,.collapsed .side-brand span,.collapsed .who-name{display:inline}
  .collapsed .nav-link{justify-content:flex-start;padding:10px 12px}
  .top{padding:10px 16px}
  .content{padding:20px 16px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:120px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
@media print{.no-print,.side,.top,.toasts{display:none !important} body{background:#fff} .shell{display:block}}
/* Invoices and campaigns */
.nowrap{white-space:nowrap}
.pickwide .ts-wrapper{min-width:240px}
@media (max-width:760px){.pickwide,.pickwide .ts-wrapper{width:100%;min-width:0}}
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filterbar>div{flex:0 1 220px;min-width:0}
.filterbar .ts-wrapper,.filterbar .pickwide .ts-wrapper{min-width:0;width:100%}
.filterbar label{font-size:.8125rem;color:var(--muted)}
@media (max-width:760px){.filterbar>div{flex:1 1 140px}}
.methodrow{display:flex;gap:8px;align-items:center}
.methodfields{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center;margin:0}
@media (max-width:760px){.methodrow{align-items:flex-start}.methodfields{grid-template-columns:minmax(0,1fr)}}
.tablewrap.fit table{min-width:0}
/* Filter builder */
.chips .menu{left:0;right:auto}
dialog.dlg.wide{max-width:900px}
.fgroup{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.fgroup .fgroup{background:var(--surface-2)}
.fhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fhead select{width:auto;min-width:0}
.frow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.6fr) auto auto;gap:8px;align-items:start}
.frow .fvals{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.frow .fvals>*{flex:1 1 80px;min-width:0}
.frow .fvals .check{flex:1 1 100%;font-size:.875rem}
.frow .fnot{white-space:nowrap;padding-top:10px;font-size:.875rem}
.fadd{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.frow .fvals{grid-column:1 / -1}}

/* The list that drops down under the search box while typing */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:40;max-height:min(70vh,520px);overflow-y:auto;padding:6px}
.suggest .sg-head{font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:8px 10px 4px}
.suggest a{display:block;padding:7px 10px;border-radius:6px;color:var(--fg);text-decoration:none;line-height:1.3}
.suggest a .sg-sub{display:block;font-size:.8125rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest a.on,.suggest a:hover{background:var(--surface-2)}
.suggest a.sg-all{border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:4px;color:var(--gold-ink);font-weight:500}
.suggest .sg-empty{padding:12px 10px;color:var(--muted)}
/* Column headings that sort */
.tablewrap th a.sorth{color:inherit;text-decoration:none;display:inline-flex;gap:2px;align-items:center}
.tablewrap th a.sorth:hover{color:var(--fg)}
.tablewrap th[aria-sort="ascending"],.tablewrap th[aria-sort="descending"]{color:var(--fg)}
/* Long lists scroll inside their own box (computer and tablet), so what's above stays in view */
@media (min-width:761px){
  .tablewrap.scrollbox{max-height:calc(100vh - 330px);min-height:260px;overflow:auto}
  .tablewrap.scrollbox thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
}
/* Sections that fold open and closed (Settings) */
details.fold{padding:0}
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 20px;border-radius:12px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"▸";color:var(--muted);transition:transform .15s;display:inline-block;width:1em}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold>summary:hover{background:var(--surface-2)}
details.fold>summary h2{margin:0}
details.fold .fold-sub{color:var(--muted);font-size:.875rem}
details.fold>:not(summary){margin:0 20px 16px}
details.fold>:not(summary)+:not(summary){margin-top:12px}
details.fold[open]>summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;margin-bottom:16px}
.inactive-list>summary{cursor:pointer;color:var(--muted);font-size:.875rem;padding:4px 0}
.inactive-list .li-row{margin-top:6px}
.inactive-name{flex:1;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
/* Record pages: a coloured title band, so it's obvious what kind of page this is */
:root{--k-member:#7a5200;--k-member-bg:#fdf1d3;--k-invoice:#1d4f91;--k-invoice-bg:#e6effa;--k-receipt:#1e7a46;--k-receipt-bg:#e2f3e8;--k-campaign:#a3470c;--k-campaign-bg:#fdebdc}
@media (prefers-color-scheme: dark){:root{--k-member:#f5c451;--k-member-bg:#3a3018;--k-invoice:#9cc3f5;--k-invoice-bg:#17263b;--k-receipt:#86d6a6;--k-receipt-bg:#173426;--k-campaign:#f6ad7b;--k-campaign-bg:#3b2414}}
.head.band{background:var(--kb);border:1px solid var(--line);border-left:6px solid var(--kc);border-radius:12px;padding:16px 20px;align-items:center}
.head.band .rk{display:flex;align-items:center;gap:8px;color:var(--kc);font-weight:700;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.head.band .rk svg{width:20px;height:20px}
.head.band h1{font-size:1.625rem}
.head.band p{color:var(--fg);opacity:.85}
.k-member{--kc:var(--k-member);--kb:var(--k-member-bg)}
.k-invoice{--kc:var(--k-invoice);--kb:var(--k-invoice-bg)}
.k-receipt{--kc:var(--k-receipt);--kb:var(--k-receipt-bg)}
.k-campaign{--kc:var(--k-campaign);--kb:var(--k-campaign-bg)}
/* Simple filter lines (no Not column, no outer box) */
.fgroup.simple{border:0;padding:0;background:none}
.frow.simple{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.6fr) auto}
.fadd .fmore{margin-left:auto;align-self:center}
@media (max-width:760px){.frow.simple{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* One arrow on every dropdown (the searchable ones drew two), and the same arrow on plain dropdowns */
.ts-wrapper .ts-control,.ts-wrapper:not(.form-control,.form-select).single .ts-control{background-image:none !important}
select:not([multiple]):not(.tomselected){appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* Longer dropdown lists: more choices visible at once */
.ts-dropdown .ts-dropdown-content{max-height:min(60vh,440px)}
/* Lists: every row on one line; wide lists scroll sideways inside their box */
.tablewrap.scrollbox td,.tablewrap.scrollbox th{white-space:nowrap}
.tablewrap.scrollbox td.addr{max-width:none}
.tablewrap.scrollbox table{min-width:100%;width:max-content}
.tablewrap.scrollbox td .sub{display:inline}
.loadmore{padding:10px 14px;color:var(--muted);font-size:.875rem;text-align:center}