/* ═══════════════════════════════════════════════════════════════════════════
   FairHospitality — gedeelde logiescontext (overzichtskaarten + contextbalk).
   Zelfstandig: geen afhankelijkheid van app.css of labels.css, want deze module
   draait op drie verschillende pagina's. Alles scoped op .fh-lc.
   ═══════════════════════════════════════════════════════════════════════════ */
.fh-lc {
  --lc-grn:#1c7a3d; --lc-grn-d:#155e2f; --lc-grn-l:#eaf5ee;
  --lc-ink:#243b2e; --lc-sub:#5b6f63; --lc-lijn:#dde6e2;
  --lc-amber:#b98a1e; --lc-amber-l:#fdf7e3;
  --lc-rood:#b3261e; --lc-rood-l:#fdecea;
  --lc-blauw:#1f5f8b; --lc-blauw-l:#e9f1f7;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--lc-ink);
  box-sizing:border-box;
}
.fh-lc *, .fh-lc *::before, .fh-lc *::after { box-sizing:border-box; }

/* ── filterbalk ─────────────────────────────────────────────────────────── */
.fh-lc-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.fh-lc-filters input, .fh-lc-filters select {
  padding:8px 12px; border:1px solid var(--lc-lijn); border-radius:9px;
  font-size:13px; background:#fff; color:var(--lc-ink); font-family:inherit;
}
.fh-lc-filters input { flex:1; min-width:200px; }

/* ── kaartengrid ────────────────────────────────────────────────────────── */
.fh-lc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.fh-lc-kaart {
  border:1px solid var(--lc-lijn); border-radius:12px; padding:13px 14px; background:#fff;
  transition:box-shadow .15s;
}
.fh-lc-kaart:hover { box-shadow:0 4px 18px rgba(28,122,61,.13); }
.fh-lc-kaart.gedeeld { border-left:3px solid var(--lc-amber); }
.fh-lc-nieuw {
  border-style:dashed; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--lc-sub); min-height:170px; text-align:center;
}
.fh-lc-nieuw:hover { border-color:#b9d8c2; background:var(--lc-grn-l); }
.fh-lc-nieuw-titel { font-size:13px; font-weight:600; }
.fh-lc-nieuw-acties { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.fh-lc-kop { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
/* min-width:0 is nodig omdat een flex-item standaard niet kleiner wordt dan zijn inhoud;
   zonder dit duwt een lange naam of adresregel de rechterkolom uit de kaart (1.62.8). */
.fh-lc-kopl { flex:1 1 auto; min-width:0; }
.fh-lc-naam { font-weight:700; font-size:15.5px; cursor:pointer; overflow-wrap:anywhere; }
.fh-lc-naam:hover { color:var(--lc-grn-d); text-decoration:underline; }
.fh-lc-adres { color:var(--lc-sub); font-size:12px; margin-top:2px; line-height:1.45; }
.fh-lc-type {
  font-size:11px; background:var(--lc-grn-l); color:var(--lc-grn-d);
  border-radius:999px; padding:2px 9px; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
/* Rechtsboven staat sinds 1.62.8 enkel het type. flex:0 1 auto i.p.v. 0 0 auto: de kolom
   MAG krimpen, anders eist een lange typenaam ruimte op die de kaart niet heeft. */
.fh-lc-kopr { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:0 1 auto; min-width:0; max-width:45%; }
.fh-lc-kopr .fh-lc-eigrij { margin:0; justify-content:flex-end; }
/* Eigenaar/gedeeld staat op de kaart op een eigen regel over de volle breedte. */
.fh-lc-kaart > .fh-lc-eigrij { margin:8px 0 0; }
.fh-lc-kaart .fh-lc-badge { max-width:100%; overflow-wrap:anywhere; }

/* ── eigenaar / gedeeld ─────────────────────────────────────────────────── */
.fh-lc-eigrij { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:7px 0 0; }
.fh-lc-badge {
  border-radius:999px; padding:2px 8px; font-size:11px;
  border:1px solid var(--lc-lijn); background:#fafcfa; color:var(--lc-sub);
}
.fh-lc-badge.amber { background:var(--lc-amber-l); border-color:#eddba8; color:#6b5410; font-weight:600; }
.fh-lc-badge.blauw { background:var(--lc-blauw-l); border-color:#c3d9e8; color:var(--lc-blauw); font-weight:600; }
/* Tooltip werkt op hover, focus (toetsenbord) en tik (aria-expanded via JS). */
.fh-lc-tt { position:relative; cursor:help; }
.fh-lc-tt .fh-lc-tt-in {
  visibility:hidden; opacity:0; position:absolute; left:0; top:125%; z-index:30;
  background:#243b2e; color:#fff; border-radius:8px; padding:8px 10px;
  font-size:11.5px; line-height:1.5; width:230px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:opacity .12s; font-weight:400; text-align:left;
  /* KRITISCH: white-space erft. Het ⚠ staat in .fh-lc-mini met nowrap, waardoor de
     uitleg één lange regel werd in een doos van 230 px — en dus afgekapt oogde. */
  white-space:normal; word-break:break-word; text-transform:none; letter-spacing:normal;
}
.fh-lc-tt:hover .fh-lc-tt-in,
.fh-lc-tt:focus .fh-lc-tt-in,
.fh-lc-tt[aria-expanded="true"] .fh-lc-tt-in { visibility:visible; opacity:1; }
/* Onderaan de balk is er geen plaats onder het element: dan klapt de tooltip omhoog. */
/* Omhoog openen onderaan de balk. De horizontale positie wordt door JS gecorrigeerd
   (plaats() in tooltipBadge), dus hier alleen de basisuitlijning links. */
.fh-lc-tt.omhoog .fh-lc-tt-in { top:auto; bottom:135%; left:0; right:auto; width:265px; max-width:min(265px, calc(100vw - 24px)); }

/* ── kerncijfers ────────────────────────────────────────────────────────── */
.fh-lc-cijfers {
  display:flex; margin:9px 0 5px; border:1px solid var(--lc-lijn);
  border-radius:10px; overflow:hidden;
}
.fh-lc-cijfer { flex:1; text-align:center; padding:6px 3px; background:#fafcfa; }
.fh-lc-cijfer + .fh-lc-cijfer { border-left:1px solid var(--lc-lijn); }
.fh-lc-cijfer b { display:block; font-size:15px; line-height:1.25; }
.fh-lc-cijfer span { font-size:10px; color:var(--lc-sub); white-space:nowrap; }
.fh-lc-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:4px; vertical-align:middle; }
.fh-lc-dot.groen { background:#1c7a3d; } .fh-lc-dot.oranje { background:#d99a20; } .fh-lc-dot.rood { background:#b3261e; }
.fh-lc-jaar { font-size:11px; color:var(--lc-sub); margin:0 0 6px; line-height:1.35; }
.fh-lc-jaar .waarsch { color:var(--lc-amber); font-weight:600; }

/* ── labelchips (bewust zonder logo's) ──────────────────────────────────── */
.fh-lc-labels { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; align-items:center; }
.fh-lc-chip {
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; border-radius:999px;
  padding:3px 10px; border:1px solid var(--lc-lijn); color:var(--lc-sub); background:#fff;
}
.fh-lc-chip.actief  { background:var(--lc-grn-l); border-color:#b9d8c2; color:var(--lc-grn-d); font-weight:600; }
.fh-lc-chip.behaald { background:var(--lc-grn); border-color:var(--lc-grn); color:#fff; font-weight:600; }
.fh-lc-chip.blok    { background:var(--lc-rood-l); border-color:#e8b4b0; color:var(--lc-rood); font-weight:600; }
.fh-lc-chip.uit     { opacity:.8; }

/* ── knoppen ────────────────────────────────────────────────────────────── */
.fh-lc-acties { display:flex; gap:7px; flex-wrap:wrap; }
/* Op de kaart: alles op één lijn. De knoppen mogen krimpen, de tekst breekt niet. */
.fh-lc-kaart .fh-lc-acties { flex-wrap:nowrap; gap:4px; }
.fh-lc-kaart .fh-lc-btn { padding:6px 8px; font-size:11.5px; white-space:nowrap; min-width:0; }
.fh-lc-btn {
  border:none; border-radius:9px; padding:7px 13px; font-size:12.5px;
  cursor:pointer; font-weight:600; font-family:inherit; line-height:1.3;
}
.fh-lc-btn.p { background:var(--lc-grn); color:#fff; }
.fh-lc-btn.s { background:#fff; color:var(--lc-grn-d); border:1px solid #b9d8c2; }
.fh-lc-btn.t { background:#fff; color:var(--lc-sub); border:1px solid var(--lc-lijn); }
.fh-lc-btn.mini { padding:3px 9px; font-size:11.5px; }
.fh-lc-btn:disabled { background:#f2f5f3; color:#a9b5ae; border:1px solid var(--lc-lijn); cursor:not-allowed; }

/* ── contextbalk ────────────────────────────────────────────────────────── */
/* overflow:visible — anders knipt de balk de tooltip van het ⚠ af. */
/* Het geselecteerde logies mag opvallen: dikkere, groene rand + zachte schaduw (1.62.1). */
.fh-lc-balk {
  border:2px solid var(--lc-grn); border-radius:12px; background:#fff; margin-bottom:16px;
  box-shadow:0 2px 10px rgba(28,122,61,.10);
}
.fh-lc-balk-onder { border-radius:0 0 11px 11px; }
.fh-lc-balk.gedeeld { border-left:5px solid var(--lc-amber); }
.fh-lc-balk-boven { display:flex; align-items:center; gap:12px; padding:11px 14px; flex-wrap:wrap; }
.fh-lc-terug {
  background:none; border:none; color:var(--lc-sub); font-size:12.5px; cursor:pointer;
  padding:4px 8px 4px 0; font-family:inherit; white-space:nowrap;
}
.fh-lc-terug:hover { color:var(--lc-grn-d); }
.fh-lc-balk-naam { font-weight:700; font-size:15px; }
.fh-lc-balk-meta { font-size:11.5px; color:var(--lc-sub); }
.fh-lc-balk-rechts { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-left:auto; justify-content:flex-end; }
/* Eigenaar/gedeeld = informatie, rechterbovenhoek; de actieknoppen volgen erna. */
.fh-lc-balk-eig { margin:0 0 0 auto; align-self:flex-start; }
@media (max-width:780px) { .fh-lc-balk-eig { margin-left:0; } }
.fh-lc-balk-onder .fh-lc-labels { margin:0; }
.fh-lc-balk-onder {
  display:flex; align-items:center; gap:14px; padding:9px 14px;
  border-top:1px solid var(--lc-lijn); background:#fafcfa; flex-wrap:wrap;
}
.fh-lc-mini { font-size:12px; color:var(--lc-sub); white-space:nowrap; }
.fh-lc-mini b { color:var(--lc-ink); font-size:13px; }
.fh-lc-scheiding { width:1px; height:18px; background:var(--lc-lijn); }
.fh-lc-wissel { display:flex; border:1px solid var(--lc-lijn); border-radius:9px; overflow:hidden; background:#fff; }
.fh-lc-wtab {
  padding:7px 13px; font-size:12.5px; background:#fff; border:none; cursor:pointer;
  color:var(--lc-sub); font-family:inherit; font-weight:600; white-space:nowrap;
}
.fh-lc-wtab + .fh-lc-wtab { border-left:1px solid var(--lc-lijn); }
.fh-lc-wtab.actief { background:var(--lc-grn); color:#fff; }
.fh-lc-wtab .lbl { display:inline; }

/* ── meldingen / lege staat ─────────────────────────────────────────────── */
.fh-lc-melding {
  border:1px solid var(--lc-lijn); border-radius:10px; padding:12px 14px;
  font-size:12.5px; color:var(--lc-sub); background:#fafcfa; margin-bottom:14px; line-height:1.55;
}
.fh-lc-melding.amber { background:var(--lc-amber-l); border-color:#eddba8; color:#6b5410; }
.fh-lc-leeg { text-align:center; padding:34px 16px; color:var(--lc-sub); font-size:13.5px; }
.fh-lc-spinner {
  width:26px; height:26px; border:3px solid var(--lc-lijn); border-top-color:var(--lc-grn);
  border-radius:50%; animation:fh-lc-draai .8s linear infinite; margin:24px auto;
}
@keyframes fh-lc-draai { to { transform:rotate(360deg); } }

/* ── mobiel: contextbalk variant A ──────────────────────────────────────── */
@media (max-width:780px) {
  .fh-lc-grid { grid-template-columns:1fr; }
  .fh-lc-balk-boven { padding:9px 11px; gap:8px; }
  .fh-lc-balk-rechts { margin-left:0; width:100%; }
  /* Geen horizontale scroll meer: die klipte de tooltip. De rij loopt gewoon terug. */
  .fh-lc-balk-onder { gap:10px 12px; flex-wrap:wrap; padding:8px 11px; }
  .fh-lc-wissel { width:100%; }
  .fh-lc-wtab { flex:1; padding:6px 2px 5px; font-size:15px; text-align:center; }
  .fh-lc-wtab .lbl { display:block; font-size:9px; font-weight:600; margin-top:2px; }
  .fh-lc-acties .fh-lc-btn { flex:1; text-align:center; }
  .fh-lc-kaart .fh-lc-acties { flex-wrap:wrap; gap:6px; }
  .fh-lc-kaart .fh-lc-btn { padding:8px 10px; font-size:12.5px; }
}