/* =====================================================================
   belwachtrij.css — Planning 2.0 · werkvoorraad van de planner.
   Tweekolom: lijst links (waar je doorheen loopt), belkaart rechts
   (waar je tijdens het gesprek naar kijkt).
===================================================================== */
.bw { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.bw-kop h1 { margin: 4px 0 6px; }
.bw-kop p { margin: 0; font: 400 .84rem/1.6 var(--font-ui); color: var(--c-ink-2); max-width: 76ch; }

.bw-balk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 12px; }
.bw-flt { font: 700 .74rem var(--font-ui); padding: 7px 13px; border-radius: var(--radius-pill);
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; color: var(--c-ink-3); cursor: pointer;
  transition: background var(--overgang), border-color var(--overgang), color var(--overgang); }
.bw-flt:hover { background: var(--c-creme); }
.bw-flt.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-ink); }

.bw-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .bw-grid { grid-template-columns: 1fr; } }

/* ---- lijst ---- */
.bw-rij { display: grid; grid-template-columns: 2fr .9fr .9fr .9fr .9fr; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 11px 18px; background: transparent; border: 0;
  border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.bw-rij:hover { background: var(--c-creme); }
.bw-rij.is-open { background: var(--c-groen-t); }
.bw-rij--kop { border-top: 0; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-ink-3); cursor: default; padding-bottom: 6px; }
.bw-rij--kop:hover { background: transparent; }
.bw-rij__klant strong { display: block; font: 700 .82rem var(--font-ui); }
.bw-rij__klant em { font: 400 .68rem var(--font-ui); font-style: normal; color: var(--c-ink-3); }
.bw-rij > span { font-size: .76rem; color: var(--c-ink-2); }

/* ---- belkaart ---- */
.bw-paneel { position: sticky; top: 18px; }
.bw-leegkaart { padding: 22px; }
.bw-leegkaart p { margin: 8px 0 0; font: 400 .8rem/1.6 var(--font-ui); color: var(--c-ink-3); }
.bw-belkaart { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.bw-belkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bw-belkop h3 { margin: 3px 0 2px; font-size: 1.05rem; }
.bw-adres { font: 400 .74rem var(--font-ui); color: var(--c-ink-3); }
.bw-mini { background: transparent; border: 0; font-size: .9rem; color: var(--c-ink-3); cursor: pointer; padding: 2px 6px; }
.bw-mini:hover { color: var(--c-ink); }

.bw-contact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bw-belknop { font: 800 .92rem var(--font-mono); color: var(--c-groen-d); text-decoration: none;
  background: var(--c-groen-t); border-radius: var(--radius); padding: 9px 14px; }
.bw-belknop:hover { background: var(--c-groen); color: #fff; }
.bw-mailadres { font: 500 .74rem var(--font-ui); color: var(--c-ink-2); }
.bw-geen { font: 500 .72rem var(--font-ui); color: var(--c-ink-3); font-style: italic; }
.bw-pogingen { font-size: .68rem; color: var(--c-ink-3); margin-left: auto; }

.bw-loglijst { display: grid; gap: 4px; border-left: 2px solid var(--c-lijn-2); padding-left: 11px; }
.bw-logrij { display: flex; gap: 8px; align-items: baseline; font-size: .7rem; color: var(--c-ink-3); flex-wrap: wrap; }
.bw-logrij strong { color: var(--c-ink-2); font-weight: 700; }

.bw-linkstand { background: var(--c-sage-t); border-radius: var(--radius); padding: 10px 13px;
  font: 600 .76rem var(--font-ui); color: var(--c-ink-2); }

.bw-voorstellen { display: grid; gap: 7px; }
.bw-geldig { font-size: .62rem; color: var(--c-ink-3); }
.bw-voorstel { width: 100%; text-align: left; border-radius: var(--radius);
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; cursor: pointer;
  transition: border-color var(--overgang), background var(--overgang); }
.bw-voorstel:hover { border-color: var(--c-groen); background: var(--c-groen-t); }
.bw-voorstel__kies { font: 700 .72rem var(--font-ui); color: var(--c-groen-d); white-space: nowrap; }
.bw-voorstel__uitleg { font: 400 .66rem var(--font-ui); color: var(--c-ink-3); }

.bw-belacties { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 12px; }
.bw-uitleg { margin: 0; font: 400 .68rem/1.55 var(--font-ui); color: var(--c-ink-3); }
.bw-voetnoot { margin-top: 18px; font: 400 .72rem/1.6 var(--font-ui); color: var(--c-ink-3); }
.bs-rek { flex: 1; }

/* Datum en tijd prominent: dit leest de planner hardop voor aan de telefoon. */
.bw-voorstel { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 13px; padding: 13px 15px; align-items: center; }
.bw-voorstel__nr { grid-row: 1 / 3; align-self: start; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-paneel); color: var(--c-ink-3); font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.bw-voorstel:hover .bw-voorstel__nr { background: var(--c-groen); color: #fff; }
.bw-voorstel__wanneer { display: flex; flex-direction: column; gap: 1px; }
.bw-voorstel__dag { font: 800 .96rem var(--font-ui); letter-spacing: -.01em; }
.bw-voorstel__tijd { font: 700 .82rem var(--font-mono); color: var(--c-groen-d); }
.bw-voorstel__wie { grid-column: 3; grid-row: 1; align-self: center; font: 600 .76rem var(--font-ui); color: var(--c-ink-2); }
.bw-voorstel__uitleg { grid-column: 2 / -1; font-size: .66rem; }
.bw-voorstel__kies { grid-column: 3; grid-row: 2; justify-self: end; }
.bw-voorstel--anders { border-style: dashed; }
.bw-voorstel--anders .bw-voorstel__dag { color: var(--c-ink-2); }
.bw-voorstel--anders .bw-voorstel__tijd { color: var(--c-ink-3); font-family: var(--font-ui); font-weight: 500; }

/* zonder telefoonnummer (voorstel 4, 22-07): zelfplan-link voorop */
.bw-linkstand--geen-tel { border-color: var(--c-amber); background: var(--c-amber-t, var(--c-creme)); color: var(--c-ink-2); }