/**
 * FairHospitality Energy – Publieke benchmark pagina stijlen
 * Hergebruikt CSS-variabelen van app.css
 */

/* ── Layout ─────────────────────────────────────────────────────────────────── */

#fh-publiek {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--fh-slate-dark, #2C3E50);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.fh-pub-sectie {
  margin-bottom: 3.5rem;
}

.fh-pub-sectie-titel {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fh-green, #2D6A4F);
  margin: 0 0 .3rem 0;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--fh-green, #2D6A4F);
}

.fh-pub-intro {
  font-size: .9rem;
  color: var(--fh-slate-mid, #7F8C8D);
  margin: .5rem 0 1rem;
}

/* ── Legenda ─────────────────────────────────────────────────────────────────── */

.fh-pub-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-bottom: .75rem;
}

.fh-pub-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--fh-slate-dark, #2C3E50);
  background: none;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: .2rem .65rem;
  cursor: pointer;
  transition: border-color .15s, opacity .15s, background .15s;
  user-select: none;
  font-family: inherit;
}
.fh-pub-legenda-item:hover {
  border-color: var(--fh-border, #e5e7eb);
  background: var(--fh-bg, #f9fafb);
}
.fh-pub-legenda-item:focus-visible {
  outline: 2px solid #2D6A4F;
  outline-offset: 2px;
}
.fh-pub-legenda-item[data-verborgen="1"] {
  opacity: .3;
  text-decoration: line-through;
}

/* Symbool in legenda */
.fh-pub-legenda-sym {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.fh-pub-legenda-kleur {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Percentiel-legenda — alleen in tabel-container, niet op sectie-niveau */
.fh-pub-p-legenda-tabel {
  font-size: .76rem;
  color: var(--fh-slate-mid, #7F8C8D);
  margin-bottom: .6rem;
  padding: .4rem .6rem;
  background: var(--fh-bg, #f9fafb);
  border-radius: 6px;
  line-height: 1.8;
}

.fh-pub-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 2px;
}
.fh-pub-dot-groen { background: #2D6A4F; }
.fh-pub-dot-amber { background: #E67E22; }
.fh-pub-dot-rood  { background: #C0392B; }

/* ── Grid met 4 kaarten ─────────────────────────────────────────────────────── */

.fh-pub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 640px) {
  /* Mobile: 1 grafiek per rij, gestapeld */
  .fh-pub-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fh-pub-sectie-titel { font-size: 1.1rem; }
  .fh-pub-legenda { gap: .3rem .6rem; }
  .fh-pub-legenda-item { font-size: .78rem; padding: .15rem .45rem; }
  .fh-pub-legenda-sym { font-size: 1rem; }
  .fh-pub-filter { flex-wrap: wrap; gap: .3rem; }
  .fh-pub-kaart { padding: .9rem .9rem .75rem; }
  .fh-pub-kaart-titel { font-size: .9rem; }
  .fh-pub-canvas-wrap canvas { max-height: 200px; }
  .fh-pub-tabel { font-size: .75rem; }
  .fh-pub-tabel th, .fh-pub-tabel td { padding: .25rem .35rem; }
  .fh-pub-p-legenda-tabel { font-size: .72rem; }
}

@media (min-width: 641px) and (max-width: 960px) {
  /* Tablet: behoud 2×2 maar kleiner */
  .fh-pub-grid { gap: 1rem; }
  .fh-pub-kaart { padding: 1rem 1rem .85rem; }
}

@media (max-width: 960px) {
  /* Sectie-intros kleiner op niet-desktop */
  .fh-pub-intro { font-size: .85rem; }
  .fh-pub-voetnoot { font-size: .75rem; }
}

/* ── Kaart ───────────────────────────────────────────────────────────────────── */

.fh-pub-kaart {
  background: #fff;
  border: 1px solid var(--fh-border, #dde6e2);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.fh-pub-kaart-titel {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .9rem 0;
  color: var(--fh-slate-dark, #2C3E50);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.fh-pub-kaart-icoon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.fh-pub-eenheid {
  font-size: .78rem;
  font-weight: 400;
  color: var(--fh-slate-mid, #7F8C8D);
}

.fh-pub-canvas-wrap {
  position: relative;
  height: 240px;
  margin-bottom: .75rem;
}

.fh-pub-canvas-wrap canvas {
  max-height: 240px;
}

/* ── Tabel ───────────────────────────────────────────────────────────────────── */

.fh-pub-tabel-wrap {
  margin-top: .5rem;
  overflow-x: auto;
}

.fh-pub-tabel-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1px solid var(--fh-border, #dde6e2);
  border-radius: 6px;
  padding: .3rem .8rem;
  font-size: .8rem;
  color: var(--fh-slate-dark, #2C3E50);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: .25rem;
  transition: background .15s, border-color .15s;
}
.fh-pub-tabel-toggle:hover {
  background: var(--fh-bg, #f5faf7);
  border-color: #2D6A4F;
}
.fh-pub-tabel-toggle.open {
  border-color: #2D6A4F;
  color: #2D6A4F;
}
.fh-pub-tabel-toggle::before {
  content: '\25BC';
  font-size: .65rem;
  transition: transform .2s;
}
.fh-pub-tabel-toggle.open::before {
  transform: rotate(180deg);
}

.fh-pub-tabel-container {
  margin-top: .4rem;
  overflow-x: auto;
}

.fh-pub-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.fh-pub-tabel th {
  background: var(--fh-bg, #f5faf7);
  color: var(--fh-slate-mid, #7F8C8D);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .45rem .7rem;
  border-bottom: 2px solid var(--fh-border, #dde6e2);
  text-align: left;
  white-space: nowrap;
}

.fh-pub-tabel td {
  padding: .4rem .7rem;
  border-bottom: 1px solid var(--fh-border, #dde6e2);
  vertical-align: middle;
}

.fh-pub-tabel tr:last-child td { border-bottom: none; }
.fh-pub-tabel tr:hover td { background: var(--fh-bg, #f5faf7); }

.fh-pub-tabel-groep-rij td {
  background: var(--fh-bg, #f5faf7);
  border-top: 2px solid var(--fh-border, #dde6e2);
}

.fh-pub-tabel-groep {
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
  padding: .55rem .7rem !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.fh-pub-tabel-sep td {
  padding: .2rem 0 !important;
  border: none;
  background: transparent;
}

.fh-pub-tabel-waarde {
  border-radius: 4px;
  padding: .3rem .6rem !important;
  text-align: right;
}

/* ── Voetnoot & statussen ────────────────────────────────────────────────────── */

.fh-pub-voetnoot {
  font-size: .78rem;
  color: var(--fh-slate-mid, #7F8C8D);
  border-top: 1px solid var(--fh-border, #dde6e2);
  padding-top: 1rem;
  margin-top: 1rem;
  line-height: 1.6;
}

.fh-pub-leeg {
  color: var(--fh-slate-mid, #7F8C8D);
  font-size: .88rem;
  font-style: italic;
  padding: 1rem 0;
}

.fh-pub-fout {
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: #C0392B;
  font-size: .9rem;
}