/* ── Agenda-dropdown voor de landingspagina's (itslee.nl + navaro.itslee.nl) ────
   Schuift BOVEN de datum/tijd-balk uit: die balk staat onderaan een gecentreerde
   pagina. Op pro.itslee.nl zit de balk bovenin en schuift het paneel juist omlaag;
   daarom is dit een eigen, los component in plaats van een kopie van het dashboard.
   Kleuren komen uit de variabelen van de landingspagina, dus licht/donker gaat
   vanzelf mee (html.light).

   De accentkleur komt uit `--agenda-accent` met `--pink` als terugval; navaro zet die
   op zijn groen (`--green`), zodat weeknummers en weekenddagen daar niet roze zijn. */

.dt-bar { cursor: pointer; }
.dt-bar:focus-visible { outline: 2px solid var(--agenda-accent, var(--pink)); outline-offset: 3px; }

#agenda,
#agenda-weer {
  position: fixed; z-index: 70; box-sizing: border-box;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  padding: 12px 18px 14px;
  font-family: var(--font-code), monospace;
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px);
  transition: max-height 0.3s ease, opacity 0.22s ease, transform 0.3s ease;
}
#agenda.open,
#agenda-weer.open { max-height: 520px; opacity: 1; transform: translateY(0); }

.ag-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ag-titel { flex: 1; font-weight: 600; white-space: nowrap; text-transform: lowercase; }
.ag-btn { background: transparent; border: 1px solid var(--border); color: var(--fg);
  border-radius: 2px; cursor: pointer; padding: 2px 8px; font-family: inherit; font-size: 0.8rem; }
.ag-btn:hover { background: var(--card-hover); }
.ag-vandaag { font-size: 0.72rem; }
/* de verwachting is een eigen slide-up over de volle balkbreedte:
   vandaag (met de actuele waarden) naast de komende 4 uur, daaronder de komende 5 dagen */
.ag-wxkop { display: flex; align-items: flex-start; gap: 16px; }
.ag-wxnu { flex: 0 0 auto; min-width: 124px; display: flex; flex-direction: column;
  align-items: center; gap: 1px; border-right: 1px solid var(--border); padding-right: 15px; }
.ag-wxnu-ico { width: 34px; height: 34px; color: var(--fg); display: block; }
.ag-wxnu-ico svg { width: 100%; height: 100%; }
.ag-wxnu-temp { font-size: 1.25rem; font-weight: 700; color: var(--fg); }
.ag-wxnu-desc { font-size: 0.62rem; color: var(--fg-muted); text-align: center; }
.ag-wxnu-extra { font-size: 0.6rem; color: var(--agenda-accent, var(--pink)); }
.ag-wxuur { flex: 1 1 auto; }
.ag-wxsub { font-size: 0.62rem; color: var(--fg-muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px; }
.ag-wxuurrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ag-wxu { display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--border); border-radius: 3px; padding: 3px 2px; }
.ag-wxu .t { font-size: 0.6rem; color: var(--fg-muted); }
.ag-wxu .ico { width: 18px; height: 18px; color: var(--fg); display: block; }
.ag-wxu .ico svg { width: 100%; height: 100%; }
.ag-wxu .d { font-size: 0.68rem; font-weight: 600; color: var(--fg); }
.ag-wxu .p { font-size: 0.58rem; min-height: 0.72rem; color: var(--agenda-accent, var(--pink)); }
.ag-wxdag { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
.ag-wxrij { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ag-wxd { display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid transparent; border-radius: 3px; padding: 3px 2px; }
.ag-wxd .lbl { font-size: 0.6rem; color: var(--fg-muted); }
.ag-wxd .ico { width: 20px; height: 20px; color: var(--fg); display: block; }
.ag-wxd .ico svg { width: 100%; height: 100%; }
.ag-wxd .tmp { font-size: 0.68rem; font-weight: 600; color: var(--fg); white-space: nowrap; }
.ag-wxd .tmp .min { font-weight: 400; color: var(--fg-muted); }
.ag-wxd .prc { font-size: 0.58rem; min-height: 0.75rem; color: var(--agenda-accent, var(--pink)); }
.ag-wxleeg { font-size: 0.65rem; color: var(--fg-muted); }

.ag-raster { display: grid; grid-template-columns: 2.4em repeat(7, 2.4em); gap: 2px; justify-content: center; }
.ag-dow { font-size: 0.7rem; color: var(--fg-muted); text-transform: uppercase; text-align: center; padding-bottom: 2px; }
.ag-wk { font-size: 0.7rem; font-weight: 600; color: var(--agenda-accent, var(--pink));
  display: flex; align-items: center; justify-content: center; }
.ag-dag { position: relative; width: 2.4em; height: 2.4em; display: flex; align-items: center;
  justify-content: center; border-radius: 2px; font-size: 0.85rem; }
.ag-dag.we { color: var(--agenda-accent, var(--pink)); font-weight: 600; }
.ag-dag.andere { color: var(--fg-muted); opacity: 0.45; }
.ag-dag.vandaag { background: var(--fg); color: var(--card); font-weight: 700; }
.ag-dag:hover { background: var(--card-hover); }
.ag-dag.heeft-ev { font-weight: 700; }
.ag-dag.actief { background: var(--card-hover); }
.ag-stip { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; gap: 2px;
  justify-content: center; pointer-events: none; }
.ag-stip i { width: 4px; height: 4px; border-radius: 50%; display: block; }
.ag-stip.verleden i { opacity: 0.38; }

/* De details schuiven boven het paneel uit (op het dashboard zit dat eronder). */
#agenda-tip {
  position: fixed; z-index: 69; box-sizing: border-box;
  /* ruim genoeg om alle wedstrijden van een dag te laten zien; scrollen kan als het toch te veel is */
  padding: 10px 18px; max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  font-family: var(--font-ui), system-ui, sans-serif;
  font-size: 0.78rem; line-height: 1.5;
  opacity: 0; transform: translateY(10px); pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.24s ease;
}
#agenda-tip.open { opacity: 1; transform: translateY(0); }
#agenda-tip[hidden] { display: none; }
.ag-tip-datum { color: var(--fg-muted); margin-bottom: 8px; }
.ag-sporten { display: flex; flex-direction: column; gap: 10px; }
.ag-sport { width: 100%; min-width: 0; }
.ag-sport + .ag-sport { border-top: 1px solid var(--border); padding-top: 8px; }
.ag-sportkop { display: flex; align-items: center; gap: 6px; font-weight: 700;
  letter-spacing: 0.02em; margin-bottom: 3px; }
.ag-sportkop i { width: 7px; height: 7px; border-radius: 50%; flex: none; display: block; }
.ag-ev { color: var(--fg); }
.ag-ev.verouderd { color: var(--fg-muted); }

html.light #agenda, html.light #agenda-tip { box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.12); }

/* smalle schermen: vandaag boven de 4 uur, en de dagen in rijen van drie */
@media (max-width: 600px) {
  .ag-wxkop { flex-direction: column; gap: 10px; }
  .ag-wxnu { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 8px; width: 100%; }
  .ag-wxrij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  #agenda { padding: 10px 12px 12px; }
  .ag-raster { grid-template-columns: 2.1em repeat(7, 2.1em); }
  .ag-dag { width: 2.1em; height: 2.1em; font-size: 0.8rem; }
  #agenda-tip { padding: 10px 12px; }
}