/* billing.css — aanvulling op de gedeelde assets/css/style.css.
 * Die gedeelde stylesheet blijft ongewijzigd; alles wat deze site extra nodig
 * heeft (dienst-blokken, scrollende tabellen, afdrukweergave) staat hier.
 * Geen externe resources, geen @import, geen web fonts. */

/* --- kleine aanvullingen op bestaande klassen ------------------------- */
.chk{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--ink)}
.chk input[type=checkbox]{flex:0 0 auto}
.msg-ok{color:var(--ok);font-size:14px;min-height:20px;margin:6px 0 0}
.mini{font-size:13px;color:var(--muted);margin:6px 0 0}
.uren-badge{font-variant-numeric:tabular-nums}

/* --- dienst-regels ---------------------------------------------------- */
.dienst{border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0;background:#fbfcfe}
.dienst h3{margin:0 0 4px;font-size:13px;color:var(--muted);font-weight:600;
text-transform:uppercase;letter-spacing:.03em}
.dienst-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.dienst-foot .err{min-height:0;margin:0;flex:1 1 220px}
.dienst-foot .pill{margin:0}
.dienst-foot button{margin-left:auto}

/* --- tabellen die breder zijn dan het scherm -------------------------- */
.tablewrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:560px}
.tablewrap.wide table{min-width:780px}

/* --- waarschuwingen --------------------------------------------------- */
.warn ul{margin:6px 0 0;padding-left:20px}
.warn li{margin:2px 0}

/* --- afdrukken: alleen het factuuroverzicht --------------------------- */
.print-head{display:none}
@media print{
  .noprint{display:none!important}
  .print-head{display:block}
  .print-head h2{margin:0 0 2px}
  .tablewrap{overflow:visible}
  .tablewrap table,.tablewrap.wide table{min-width:0}
  /* de gedeelde stylesheet zet op kleine schermen .card table op display:block;
     op papier willen we weer een echte tabel */
  .card table{display:table;overflow:visible;white-space:normal}
  .card table thead,.card table tbody,.card table tfoot{display:table-row-group;min-width:0}
  .card table thead{display:table-header-group}
  table{font-size:11px}
  th,td{padding:4px 5px}
  .card{margin:8px 0}
  .total{border-top:2px solid #000}
  a[href]:after{content:""}
}
@media (max-width:640px){
  .dienst-foot button{margin-left:0;width:100%}
  .dienst-foot>*{flex:1 1 100%}
}