/* 85-bestellingen.css — de bestellingenlijst op /orders/ (inc/tb-bestellingen.php).
 *
 * Bord: bestellingen.html (2026-09-11) en §5 van postvak-verloop-avatars.md: het baksel
 * als vierkant beeld (rond is voor mensen), altijd een terugval, vier toestanden die er
 * verschillend uitzien. Alleen tokens uit 00-tokens.css.
 */

.tb-bl{min-width:0;}
.tb-bl-kop{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin:6px 0 14px;}
.tb-bl-kop h2{margin:0;font:600 26px/1.2 var(--tb-serif);letter-spacing:-.015em;color:var(--tb-ink);}
.tb-bl-kop p{margin:0;font:400 15px/1.4 var(--tb-sans);color:var(--tb-muted);}

/* ---- tabbladen --------------------------------------------------------------- */
.tb-bl-tabs{display:flex;gap:8px;margin:0 0 14px;}
.tb-bl-tabs[hidden]{display:none;}
.tb-bl-tabs button{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:999px;border:1px solid var(--tb-line);background:var(--tb-surface);
  font:500 15px/1 var(--tb-sans);color:var(--tb-body);cursor:pointer;
}
.tb-bl-tabs button span{font-weight:500;color:inherit;opacity:.72;}
.tb-bl-tabs button[aria-selected="true"]{background:var(--tb-ink);border-color:var(--tb-ink);color:#FFF;font-weight:700;}
.tb-bl-tabs button:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}

/* ---- filters: een raster met vaste kolommen, geen wrap (mobiele-menus-instructie §5) --- */
.tb-bl-filters{display:grid;grid-template-columns:minmax(0,1fr) 200px 180px;gap:10px;margin:0 0 16px;}
.tb-bl-veld{position:relative;display:block;min-width:0;}
.tb-bl-veld input,.tb-bl-veld select{
  width:100%;height:var(--tb-h-ctrl);box-sizing:border-box;padding:0 14px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);background:var(--tb-surface);
  font:400 15px/1 var(--tb-sans);color:var(--tb-ink);
}
.tb-bl-veld input:focus,.tb-bl-veld select:focus{outline:2px solid var(--tb-action);outline-offset:1px;border-color:var(--tb-action);}
.tb-bl-zoek input{padding-left:42px;}
.tb-bl-zoek svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--tb-muted);pointer-events:none;}

/* ---- de kaarten ------------------------------------------------------------------ */
.tb-bl-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.tb-bl-order{background:var(--tb-surface);border-radius:var(--tb-r-card);box-shadow:var(--tb-lift);border:1px solid transparent;}
.tb-bl-order[hidden]{display:none;}
.tb-bl-order:hover{border-color:var(--tb-line);}
.tb-bl-order > a{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px 20px;color:inherit;text-decoration:none;border-radius:inherit;
}
.tb-bl-order > a:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}

/* Vierkant, radius 10: een ding (§5.3). Zonder foto het taart- of verzoekpictogram. */
.tb-bl-beeld{
  width:52px;height:52px;border-radius:10px;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#EFEAE4;box-shadow:inset 0 0 0 1px rgba(20,26,51,.06);
}
/* #8E8796 is een pictogramlijn, geen tekst: via stroke, zodat de contrastvloer voor tekst niet geldt. */
.tb-bl-beeld svg{stroke:#8E8796;}
.tb-bl-beeld img{width:100%;height:100%;object-fit:cover;display:block;}

.tb-bl-midden{min-width:0;}
/* nowrap: met wrap stond "#23" op 390 px alleen op een regel en de titel eronder. Nu breekt de titel naast het nummer af. */
.tb-bl-titel{display:flex;align-items:flex-start;gap:9px;flex-wrap:nowrap;margin-bottom:4px;}
.tb-bl-wat{min-width:0;}
.tb-bl-nr{flex:0 0 auto;margin-top:-1px;padding:5px 8px;border-radius:6px;background:var(--tb-ground-alt);font:500 13px/1 var(--tb-sans);color:var(--tb-muted);font-variant-numeric:tabular-nums;}
.tb-bl-wat{font:700 16px/1.3 var(--tb-sans);color:var(--tb-ink);}
.tb-bl-wie{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;font:400 14px/1.45 var(--tb-sans);color:var(--tb-muted);}
.tb-bl-wie b{font-weight:600;color:var(--tb-ink);}
.tb-bl-punt{color:var(--tb-border-strong);}
/* Rond: een mens. Zelfde terugval als in het postvak (§2.1). */
.tb-bl-avatar{width:20px;height:20px;border-radius:999px;background:#EFEAE4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.tb-bl-avatar svg{width:58%;height:58%;fill:#8E8796;transform:translateY(2%);}

.tb-bl-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;}
.tb-bl-bedrag{font:700 17px/1.2 var(--tb-sans);color:var(--tb-ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tb-bl-bedrag small{display:block;margin-top:2px;font:400 13px/1.4 var(--tb-sans);color:var(--tb-muted);}

.tb-bl-pil{display:inline-flex;align-items:center;height:28px;padding:0 10px;box-sizing:border-box;border-radius:7px;font:700 13px/1 var(--tb-sans);white-space:nowrap;}
.tb-bl-pil--klaar{background:var(--tb-action);color:#FFF;}
.tb-bl-pil--bezig{background:var(--tb-warn-bg);color:var(--tb-warn-ink);box-shadow:inset 0 0 0 1px var(--tb-accent-line);}
.tb-bl-pil--af{background:var(--tb-tint);color:var(--tb-muted);box-shadow:inset 0 0 0 1px var(--tb-line);}
.tb-bl-pil--terug{background:var(--tb-bad-bg);color:var(--tb-bad-ink);box-shadow:inset 0 0 0 1px rgba(186,53,53,.3);}

.tb-bl-order.is-af .tb-bl-wat{font-weight:600;color:var(--tb-body);}
.tb-bl-order.is-terug{background:var(--tb-ground-alt);}
.tb-bl-order.is-terug .tb-bl-wat,.tb-bl-order.is-terug .tb-bl-bedrag{font-weight:600;color:var(--tb-muted);}

.tb-bl-paneel[hidden]{display:none;}
.tb-bl-paneel + .tb-bl-paneel{margin-top:28px;}
.tb-bl-leeg,.tb-bl-geen{margin:0;padding:24px;border-radius:var(--tb-r-card);background:var(--tb-surface);text-align:center;font:400 15px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-bl-geen[hidden]{display:none;}
/* .tb-bl ervoor: Voxels commons.css `p:last-child{margin:0}` (0,1,1) won van `.tb-bl-voet` (0,1,0). */
.tb-bl .tb-bl-voet{margin:22px 0 0;text-align:center;font:400 15px/1.5 var(--tb-sans);color:var(--tb-muted);}
.tb-bl-voet a{color:var(--tb-action);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

@media (max-width:700px){
  .tb-bl-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .tb-bl-zoek{grid-column:1 / -1;}
  .tb-bl-order > a{grid-template-columns:44px minmax(0,1fr);row-gap:10px;padding:14px 16px;}
  .tb-bl-beeld{width:44px;height:44px;}
  .tb-bl-rechts{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:10px;}
  .tb-bl-bedrag{white-space:normal;text-align:right;}
  .tb-bl-bedrag small{display:inline;margin:0 0 0 6px;}
}