:root {
    --bg:        #0d131b;
    --panel:     #131a24;   
    --muted:     #9fb2c8;
    --accent:    #072a72; 
}

/* Pull-to-refresh container */
#pull-to-refresh {
  --ptr-translate: 0px;
  --ptr-opacity: 0;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: flex-start;
  justify-content: center;

  /* Iets boven je titels blijven */
  padding-top: calc(env(safe-area-inset-top, 0px) + 2px);

  transform: translateY(calc(var(--ptr-translate) - 120%));
  opacity: var(--ptr-opacity);
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  pointer-events: none;
  z-index: 1;
}

/* Cirkelhouder */
#pull-to-refresh .ptr-ring {
  width: 26px;
  height: 26px;
  position: relative;
}

/* Basis dot (donker / neutraal) */
#pull-to-refresh .ptr-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.25;
}

/* Puntjes op een perfecte cirkel (radius 10px) */
#pull-to-refresh .ptr-dot:nth-child(1)  { transform: rotate(0deg)   translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(2)  { transform: rotate(30deg)  translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(3)  { transform: rotate(60deg)  translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(4)  { transform: rotate(90deg)  translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(5)  { transform: rotate(120deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(6)  { transform: rotate(150deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(7)  { transform: rotate(180deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(8)  { transform: rotate(210deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(9)  { transform: rotate(240deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(10) { transform: rotate(270deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(11) { transform: rotate(300deg) translateY(-10px); }
#pull-to-refresh .ptr-dot:nth-child(12) { transform: rotate(330deg) translateY(-10px); }

/* Tijdens pull: gevulde (actieve) dots worden accentkleur */
#pull-to-refresh .ptr-dot.active {
  background: var(--accent);
  opacity: 1;
}

/* --------- REFRESH-STATE: WAVE + ROTERENDE CIRKEL --------- */

/* Tijdens refresh: ring draait als geheel */
#pull-to-refresh.refreshing .ptr-ring {
  animation: ptr-ring-rotate 1s linear infinite;
  transform-origin: 50% 50%;
}

/* Tijdens refresh: individuele dots krijgen wave-animatie */
#pull-to-refresh.refreshing .ptr-dot {
  background: rgba(0, 0, 0, 0.18);
  opacity: 0.15;
  animation: ptr-dot-chase 0.9s linear infinite;
}

/* Vertraging per dot → lopend licht rondom de cirkel */
#pull-to-refresh.refreshing .ptr-dot:nth-child(1)  { animation-delay: 0s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(2)  { animation-delay: 0.075s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(3)  { animation-delay: 0.15s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(4)  { animation-delay: 0.225s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(5)  { animation-delay: 0.3s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(6)  { animation-delay: 0.375s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(7)  { animation-delay: 0.45s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(8)  { animation-delay: 0.525s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(9)  { animation-delay: 0.6s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(10) { animation-delay: 0.675s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(11) { animation-delay: 0.75s; }
#pull-to-refresh.refreshing .ptr-dot:nth-child(12) { animation-delay: 0.825s; }

/* Wave: van donker → licht (accent) → weer terug */
@keyframes ptr-dot-chase {
  0%, 20% {
    opacity: 0.35;        
    background: var(--muted);
  }
  40%, 60% {
    opacity: 1;       
    background: var(--accent);
  }
  80%, 100% {
    opacity: 0.45;         
    background: var(--muted);
  }
}

/* Hele ring draait langzaam rond */
@keyframes ptr-ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Alleen tijdens refresh — body-topvlak wordt identiek aan de header */
body.ptr-panel-bg {
  background:var(--panel) !important;

  /* Hoogte van de “header extension” */
  background-size: 40px !important;
}

/* Zorg dat de PTR-indicator nooit taps blokkeert */
#pull-to-refresh {
  pointer-events: none;
}