/* Invoices (app/invoices/invoices.js): uses the quotes module's styles (qb-*), plus these. */
.iv-sum{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.iv-sum .panel{display:flex;flex-direction:column;gap:2px;padding:12px 16px;min-width:180px}
.iv-sum .panel b{font-size:22px;font-variant-numeric:tabular-nums}
.iv-sum .panel.bad b{color:var(--bad)}
.iv-meta{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:12px 18px;align-items:start}
.iv-meta > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.iv-meta input{width:100%;padding:6px 8px}
.iv-meta .hint{font-size:12px}
.iv-lines tr.dep td{color:var(--accent)}
.iv-lines tr.sec td{background:var(--panel2)}
.iv-add{display:grid;grid-template-columns:110px minmax(0,1fr) 70px 120px auto;gap:8px;margin-top:10px;align-items:center}
.iv-sib{display:flex;width:100%;justify-content:flex-start;gap:6px;flex-wrap:wrap;margin-top:4px;text-align:left}
.qb-sum .row.owing b{color:var(--bad)}
@media(max-width:760px){
  .iv-meta{grid-template-columns:1fr 1fr}
  .iv-meta > div:first-child{grid-column:1/-1}
  .iv-add{grid-template-columns:1fr 1fr}
  .iv-add input[name=description]{grid-column:1/-1}
}

/* the bell (app/index.html) */
.bell-wrap{position:relative}
.bellbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink2);cursor:pointer}
.bellbtn:hover{color:var(--ink)}
.bellbtn .ic{width:18px;height:18px}
.bellbtn .n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.bellmenu{position:absolute;right:0;top:46px;width:min(380px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:20}
.bellmenu header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line2);font-weight:600}
.bellmenu button.note{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line2);background:var(--panel);padding:10px 14px;cursor:pointer;color:var(--ink)}
.bellmenu button.note:hover{background:var(--panel2)}
.bellmenu button.note.unread{background:color-mix(in srgb, var(--accent) 7%, var(--panel))}
.bellmenu button.note b{font-size:13.5px}
.bellmenu button.note span{font-size:12.5px;color:var(--ink2)}
.bellmenu button.note small{font-size:11.5px;color:var(--ink3)}
.bellmenu .empty{padding:18px 14px;color:var(--ink3);font-size:13px}
.pill.bad{background:color-mix(in srgb, var(--bad) 14%, transparent);color:var(--bad)}
.qb-sum .row.big{font-size:15px;font-weight:600}
.iv .qb-section-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.iv .qb-section-h h2{margin:0;font-size:15px}
.iv section.panel{padding:16px;margin-bottom:14px}
.iv .qb-side .panel{margin-bottom:12px}
.iv details summary{cursor:pointer}
.iv-qty{width:76px;text-align:right;padding:4px 6px}
.iv-jobsum{margin:12px 0 0 auto;max-width:360px;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.iv-jobsum div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.iv-jobsum .b{font-weight:600}
.iv-jobsum .disc{color:var(--accent)}
.iv-changes{margin:6px 0 0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:3px}
/* the production list (app/production/production.js) */
.pr-table select,.pr-table input{padding:4px 6px;font-size:13px}
.pr-table tr.pr-focus td{background:color-mix(in srgb, var(--accent) 8%, var(--panel))}
/* credit notes (app/credits/credits.js) */
.iv-cns{display:flex;flex-direction:column;gap:4px}
.iv-cns .btn{justify-content:flex-start;flex-wrap:wrap;gap:4px}
.cn-opts{display:flex;flex-direction:column;gap:6px;font-size:14px}
.cn-opts label{display:flex;gap:8px;align-items:center;cursor:pointer}
.cn-via{display:flex;gap:12px;flex-wrap:wrap}
.cn-via label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink2);min-width:180px}
tr.cn-zero td{color:var(--ink3)}
/* Invoice settings: what's set in Azure */
.iv-sets{display:flex;flex-direction:column;gap:8px}
.iv-sets > div{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.iv-sets b{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--ink2)}
.iv-set{color:var(--ink2)}
.iv-set.ok{color:var(--ok, #2f7d4f)}
.iv-set.ok .ic{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.iv-set.bad{color:var(--bad)}
#ivSetRoot{margin-bottom:22px}
/* New invoice: the product search (Ben, 4 Nov 2026) */
.iv-find{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.iv-find label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2)}
.iv-find input{width:100%;padding:8px 10px}
.iv-price{width:110px}
.iv-add > input,.iv-add > select{min-width:0;width:100%}