/*
 * INR Health — Energie Check-in.
 *
 * Eén vraag met drie keuzes, en een kalender waarin elke ingevulde dag een
 * kleurmarkering krijgt. De kleuren lopen van gedempt (laag) naar helder (goed),
 * zonder waardeoordeel: het is een waarneming, geen score.
 */

.inr-energie {
  width: 100% !important;
  max-width: 680px !important;
  display: flex !important; flex-direction: column !important; gap: 24px !important;
  animation: inr-health-omhoog .5s ease !important;
}
.inr-energie-laden {
  font-size: 15px !important; color: rgba(220,230,244,.6) !important;
  text-align: center !important; padding: 40px !important;
}
.inr-energie-kop .inr-health-titel { text-align: left !important; margin: 0 0 8px !important; font-size: 28px !important; }
.inr-energie-kop .inr-health-lead { text-align: left !important; margin: 0 !important; }

/* ── De drie keuzes ─────────────────────────────────────────────────────── */

.inr-energie-keuzes { display: flex !important; gap: 12px !important; }
.inr-energie-keuze {
  flex: 1 1 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important;
  padding: 22px 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(10px) !important;
  color: #E8EEF6 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .2s ease, border-color .2s ease !important;
}
.inr-energie-keuze:hover { transform: translateY(-3px) !important; background: rgba(255,255,255,.08) !important; }
.inr-energie-keuze:focus-visible { outline: 2px solid rgba(45,212,191,.8) !important; outline-offset: 2px !important; }
.inr-energie-label { font-size: 15px !important; font-weight: 500 !important; }
/* De keuzeknoppen dragen de merkkleur, dus de tekst erop is wit. */
.inr-energie-keuze.kleur-laag,
.inr-energie-keuze.kleur-redelijk,
.inr-energie-keuze.kleur-goed { color: #FFFFFF !important; }

.inr-energie-stip {
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}
.inr-energie-keuze .inr-energie-stip { width: 26px !important; height: 26px !important; }

/* De INR-merkkleuren: Pulse voor laag, Sync voor redelijk, Echo voor goed. */
.kleur-laag     { background: #FD4C5C !important; }
.kleur-redelijk { background: #FD7634 !important; }
.kleur-goed     { background: #5AC380 !important; }

.inr-energie-keuze.kleur-laag:hover     { border-color: rgba(253,76,92,.7) !important; }
.inr-energie-keuze.kleur-redelijk:hover { border-color: rgba(253,118,52,.7) !important; }
.inr-energie-keuze.kleur-goed:hover     { border-color: rgba(90,195,128,.7) !important; }

.inr-energie-keuze.actief { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.4) !important; }
.inr-energie-keuze.kleur-laag.actief     { border-color: #FD4C5C !important; }
.inr-energie-keuze.kleur-redelijk.actief { border-color: #FD7634 !important; }
.inr-energie-keuze.kleur-goed.actief     { border-color: #5AC380 !important; }

.inr-energie-bevestiging {
  margin: 0 !important;
  font-size: 13.5px !important; color: rgba(220,230,244,.6) !important;
}

/* ── De kalender ────────────────────────────────────────────────────────── */

.inr-energie-agenda {
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
}
.inr-energie-agenda-kop {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  margin-bottom: 16px !important;
}
.inr-energie-maand-naam { font-size: 15px !important; font-weight: 600 !important; color: #F3F7FC !important; }
.inr-energie-maand-knop {
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(232,238,246,.8) !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
}
.inr-energie-maand-knop:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.28) !important; }
.inr-energie-maand-knop:focus-visible { outline: 2px solid rgba(45,212,191,.8) !important; outline-offset: 2px !important; }
.inr-energie-maand-knop svg { width: 16px !important; height: 16px !important; }

.inr-energie-raster {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
}
.inr-energie-dagnaam {
  text-align: center !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em !important;
  color: rgba(220,230,244,.45) !important;
  text-transform: uppercase !important;
  padding-bottom: 4px !important;
}
/* Compacte kalender in de stijl van een systeemagenda: alleen het dagnummer,
   met de waarde als klein bolletje eronder. Geen zware vakken. */
.inr-energie-cel {
  aspect-ratio: 1 / 1 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 3px !important;
  border-radius: 50% !important;
  font-size: 13.5px !important;
  color: rgba(232,238,246,.78) !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.inr-energie-celdag { line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
/* Het bolletje onder het dagnummer toont de ingevulde waarde. */
.inr-energie-celleeg {
  display: block !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
.inr-energie-cel.leeg { background: transparent !important; }
/* Een ingevulde dag krijgt een gekleurd bolletje onder het cijfer, niet een
   heel gekleurd vlak. Rustiger, en het cijfer blijft goed leesbaar. */
.inr-energie-cel.kleur-laag,
.inr-energie-cel.kleur-redelijk,
.inr-energie-cel.kleur-goed { color: #F3F7FC !important; font-weight: 600 !important; }
.inr-energie-cel.kleur-laag .inr-energie-punt     { background: #FD4C5C !important; }
.inr-energie-cel.kleur-redelijk .inr-energie-punt { background: #FD7634 !important; }
.inr-energie-cel.kleur-goed .inr-energie-punt     { background: #5AC380 !important; }
.inr-energie-punt {
  display: block !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}
/* Vandaag krijgt een gevulde cirkel, zoals in een systeemagenda. */
.inr-energie-cel.vandaag { background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; font-weight: 600 !important; }

.inr-energie-legenda {
  display: flex !important; flex-wrap: wrap !important; gap: 16px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.inr-energie-legenda-item {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-size: 12.5px !important; color: rgba(220,230,244,.65) !important;
}
.inr-energie-legenda-item .inr-energie-stip { width: 12px !important; height: 12px !important; }

@media (max-width: 600px) {
  .inr-energie-keuzes { flex-direction: column !important; }
  .inr-energie-keuze { flex-direction: row !important; justify-content: flex-start !important; gap: 14px !important; padding: 16px 18px !important; }
  .inr-energie-agenda { padding: 16px 12px !important; }
  .inr-energie-raster { gap: 4px !important; }
  .inr-energie-cel { font-size: 12px !important; border-radius: 7px !important; }
}

/* ── Quick check op het startscherm ─────────────────────────────────────── */

.inr-health-snel:empty { display: none !important; }
.inr-health-snel { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.inr-snelcheck {
  display: flex !important; flex-direction: column !important; gap: 12px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.035) !important;
  backdrop-filter: blur(10px) !important;
}
.inr-snelcheck-vraag {
  font-size: 14px !important; font-weight: 500 !important;
  color: rgba(232,238,246,.88) !important;
  text-align: center !important;
}
.inr-snelcheck-knoppen { display: flex !important; gap: 10px !important; }
.inr-snelcheck-knop {
  flex: 1 1 0 !important;
  padding: 12px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer !important;
  opacity: .82 !important;
  transition: opacity .18s ease, transform .18s ease, box-shadow .2s ease !important;
}
.inr-snelcheck-knop:hover { opacity: 1 !important; transform: translateY(-2px) !important; }
.inr-snelcheck-knop:focus-visible { outline: 2px solid rgba(255,255,255,.9) !important; outline-offset: 2px !important; }
.inr-snelcheck-knop.kleur-laag     { background: #FD4C5C !important; }
.inr-snelcheck-knop.kleur-redelijk { background: #FD7634 !important; }
.inr-snelcheck-knop.kleur-goed     { background: #5AC380 !important; }
/* De gekozen waarde blijft staan, de andere twee zakken weg. */
.inr-snelcheck-knop.actief { opacity: 1 !important; border-color: rgba(255,255,255,.85) !important; }
.inr-snelcheck-knoppen.heeft-keuze .inr-snelcheck-knop:not(.actief) { opacity: .45 !important; }

.inr-snelcheck-door {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(232,238,246,.9) !important;
  font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
}
.inr-snelcheck-door:hover { background: rgba(255,255,255,.11) !important; border-color: rgba(255,255,255,.3) !important; }
.inr-snelcheck-door:focus-visible { outline: 2px solid rgba(45,212,191,.8) !important; outline-offset: 2px !important; }
.inr-snelcheck-door svg { width: 15px !important; height: 15px !important; }

@media (max-width: 600px) {
  .inr-snelcheck-knoppen { gap: 8px !important; }
  .inr-snelcheck-knop { padding: 12px 6px !important; font-size: 13px !important; }
}

/* ── Historie: samenvatting, strip en lijst ─────────────────────────────── */

.inr-energie-historie {
  padding: 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
  display: flex !important; flex-direction: column !important; gap: 18px !important;
}
.inr-energie-historie.leeg { padding: 26px 20px !important; }
.inr-energie-historie-leegtekst {
  margin: 0 !important; text-align: center !important;
  font-size: 13.5px !important; color: rgba(220,230,244,.55) !important;
}

.inr-energie-historie-kop {
  display: flex !important; align-items: baseline !important; justify-content: space-between !important;
  gap: 12px !important; flex-wrap: wrap !important;
}
.inr-energie-historie-titel {
  margin: 0 !important;
  font-size: 15px !important; font-weight: 600 !important; color: #F3F7FC !important;
}
.inr-energie-historie-aantal { font-size: 12.5px !important; color: rgba(220,230,244,.55) !important; }

/* Verdeling over de drie waarden. */
.inr-energie-verdeling { display: flex !important; gap: 20px !important; flex-wrap: wrap !important; }
.inr-energie-verdeling-item { display: inline-flex !important; align-items: baseline !important; gap: 7px !important; }
.inr-energie-verdeling-item .inr-energie-stip {
  width: 10px !important; height: 10px !important;
  align-self: center !important;
}
.inr-energie-verdeling-aantal {
  font-size: 17px !important; font-weight: 600 !important; color: #F3F7FC !important;
  font-variant-numeric: tabular-nums !important;
}
.inr-energie-verdeling-label { font-size: 12.5px !important; color: rgba(220,230,244,.6) !important; }

/* De strip: een blokje per ingevulde dag, op volgorde van tijd. */
.inr-energie-strip-vak { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.inr-energie-strip {
  display: flex !important; flex-wrap: wrap !important; gap: 3px !important;
}
.inr-energie-blokje {
  width: 13px !important; height: 13px !important;
  border-radius: 3px !important;
  flex: 0 0 auto !important;
}
.inr-energie-blokje.kleur-laag     { background: #FD4C5C !important; }
.inr-energie-blokje.kleur-redelijk { background: #FD7634 !important; }
.inr-energie-blokje.kleur-goed     { background: #5AC380 !important; }
.inr-energie-strip-as {
  display: flex !important; justify-content: space-between !important;
  font-size: 11.5px !important; color: rgba(220,230,244,.45) !important;
}

/* De lijst met ingevulde dagen, nieuwste bovenaan. */
.inr-energie-lijst {
  display: flex !important; flex-direction: column !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.inr-energie-regel {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 2px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.inr-energie-regel:last-child { border-bottom: 0 !important; }
.inr-energie-regel-datum { font-size: 13.5px !important; color: rgba(232,238,246,.82) !important; }
.inr-energie-regel-waarde {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  font-size: 13px !important; color: rgba(220,230,244,.7) !important;
  flex: 0 0 auto !important;
}
.inr-energie-regel-waarde .inr-energie-stip { width: 10px !important; height: 10px !important; }

@media (max-width: 600px) {
  .inr-energie-historie { padding: 16px 14px !important; gap: 15px !important; }
  .inr-energie-verdeling { gap: 14px !important; }
  .inr-energie-regel-datum { font-size: 12.5px !important; }
  .inr-energie-blokje { width: 11px !important; height: 11px !important; }
}

/* ── Compactere kalender (systeemagenda-stijl) ──────────────────────────── */

/* De agenda mag smaller dan de rest van de kolom: een kalender die de volle
   breedte vult krijgt onnodig grote cellen. */
.inr-energie-agenda {
  max-width: 420px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 16px 18px 18px !important;
}
.inr-energie-raster { gap: 2px !important; }
.inr-energie-cel { max-width: 44px !important; margin: 0 auto !important; width: 100% !important; }
.inr-energie-dagnaam {
  font-size: 10.5px !important;
  color: rgba(220,230,244,.38) !important;
  padding-bottom: 6px !important;
}
.inr-energie-agenda-kop { margin-bottom: 12px !important; }
.inr-energie-maand-naam { font-size: 14.5px !important; }
.inr-energie-maand-knop { width: 28px !important; height: 28px !important; }
.inr-energie-maand-knop svg { width: 14px !important; height: 14px !important; }
.inr-energie-legenda { margin-top: 14px !important; padding-top: 12px !important; gap: 14px !important; }

@media (max-width: 600px) {
  .inr-energie-agenda { padding: 14px 10px 16px !important; }
  .inr-energie-cel { max-width: 40px !important; font-size: 13px !important; }
}