/* StreamPilot — Overlay CSS
   Ondersteunt: default (donkere card), minimal (transparant)
   Voortgangsstijlen: bar, ring, pill, line
   Thema via CSS custom properties (injecteerbaar via editor / postMessage)
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sp-font:            system-ui, sans-serif;
  --sp-accent-1:        #7c3aed;
  --sp-accent-2:        #a78bfa;
  --sp-text:            #f0f0f5;
  --sp-muted:           rgba(240,240,245,.55);
  --sp-card-bg:         rgba(255,255,255,.07);
  --sp-radius:          12px;
  --sp-progress-h:      8px;
  --sp-progress-fill:   linear-gradient(90deg, var(--sp-accent-1), var(--sp-accent-2));
  --sp-ring-size:       120px;
  --sp-ring-thickness:  8px;
}

body {
  font-family: var(--sp-font);
  font-size:   15px;
  line-height: 1.4;
  color:       var(--sp-text);
  background:  transparent;
  overflow:    hidden;
}

/* =====================
   Outer wrapper
   ===================== */
.sp-ov {
  display:     inline-flex;
  align-items: center;
  gap:         12px;
  padding:     12px 16px;
  font-family: var(--sp-font);
}

/* Goal cards zijn column intern, maar de outer kan row zijn met deco */
.sp-ov--goal {
  align-items: flex-start;
}

/* Content area (altijd column) */
.sp-ov__content {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1;
  min-width:      0;
}

/* =====================
   Deco-afbeelding positionering
   ===================== */
.sp-ov__deco {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  justify-content: center;
}
.sp-ov__deco img {
  display:    block;
  object-fit: contain;
}

/* Standaard: geen deco */
.sp-ov[data-sp-deco-pos="none"] .sp-ov__deco   { display: none !important; }
.sp-ov:not([data-sp-deco-pos]) .sp-ov__deco     { display: none !important; }

/* Links: rij, deco vóór content */
.sp-ov[data-sp-deco-pos="left"]   { flex-direction: row; }
.sp-ov[data-sp-deco-pos="left"]   .sp-ov__deco { order: -1; }

/* Rechts: rij, deco ná content */
.sp-ov[data-sp-deco-pos="right"]  { flex-direction: row; }
.sp-ov[data-sp-deco-pos="right"]  .sp-ov__deco { order: 1; }

/* Boven: kolom, deco vóór content */
.sp-ov[data-sp-deco-pos="top"]    { flex-direction: column; align-items: center; }
.sp-ov[data-sp-deco-pos="top"]    .sp-ov__deco { order: -1; }

/* Onder: kolom, deco ná content */
.sp-ov[data-sp-deco-pos="bottom"] { flex-direction: column; align-items: center; }
.sp-ov[data-sp-deco-pos="bottom"] .sp-ov__deco { order: 1; }

/* =====================
   Progress variant show/hide
   (ring vs bar/pill/line/icon via data-sp-progress)
   ===================== */
[data-sp-progress="ring"] [data-progress-variant="bar"],
[data-sp-progress="ring"] [data-progress-variant="icon"]  { display: none; }

[data-sp-progress="bar"]  [data-progress-variant="ring"],
[data-sp-progress="pill"] [data-progress-variant="ring"],
[data-sp-progress="line"] [data-progress-variant="ring"]  { display: none; }

[data-sp-progress="bar"]  [data-progress-variant="icon"],
[data-sp-progress="pill"] [data-progress-variant="icon"],
[data-sp-progress="line"] [data-progress-variant="icon"]  { display: none; }

[data-sp-progress="icon"] [data-progress-variant="ring"],
[data-sp-progress="icon"] [data-progress-variant="bar"]   { display: none; }

/* =====================
   Stijl: default
   ===================== */
.sp-ov--default {
  background:              var(--sp-card-bg);
  border:                  1px solid var(--sp-card-border-c, rgba(255,255,255,.10));
  border-radius:           var(--sp-radius);
  backdrop-filter:         var(--sp-card-blur, blur(12px));
  -webkit-backdrop-filter: var(--sp-card-blur, blur(12px));
  min-width:               180px;
}

.sp-ov--default .sp-ov__label {
  font-family:    var(--sp-label-font, var(--sp-font));
  font-size:      var(--sp-label-size, 11px);
  font-weight:    var(--sp-label-weight, 400);
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--sp-muted);
  margin-bottom:  2px;
}
.sp-ov--default .sp-ov__name {
  font-family: var(--sp-numbers-font, var(--sp-font));
  font-size:   var(--sp-numbers-size, 18px);
  font-weight: var(--sp-numbers-weight, 700);
  color:       var(--sp-text);
}
.sp-ov--default .sp-ov__detail {
  font-size:  13px;
  color:      var(--sp-muted);
}
.sp-ov--default .sp-ov__accent { color: var(--sp-accent-2); }

/* =====================
   Stijl: minimal
   ===================== */
.sp-ov--minimal {
  background: transparent;
  padding:    8px 0;
}
.sp-ov--minimal .sp-ov__label  { display: none; }
.sp-ov--minimal .sp-ov__name {
  font-size:   20px;
  font-weight: 800;
  color:       #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.sp-ov--minimal .sp-ov__detail {
  font-size:   14px;
  color:       rgba(255,255,255,.75);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.sp-ov--minimal .sp-ov__accent { color: #c4b5fd; }

/* =====================
   Icoon blokje (legacy, kan naast naam staan)
   ===================== */
.sp-ov__icon {
  flex-shrink: 0;
  width:  36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sp-accent-1), var(--sp-accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* =====================
   Recente volgers lijst
   ===================== */
.sp-ov--follows {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.sp-ov__follow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  gap: 8px;
}
.sp-ov__follow-row--empty {
  justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: 13px;
}
.sp-ov__time-ago {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  flex-shrink: 0;
}

/* =====================
   Goal layout
   ===================== */
.sp-ov__goal-wrap { width: 100%; }

/* =====================
   Progress: BAR (standaard)
   ===================== */
.sp-ov__progress { margin-top: 8px; width: 100%; }

.sp-ov__progress-track {
  height:        var(--sp-progress-h);
  border-radius: 999px;
  background:    rgba(255,255,255,.12);
  overflow:      hidden;
}
.sp-ov__progress-fill {
  height:        100%;
  border-radius: 999px;
  background:    var(--sp-progress-fill);
  transition:    width .6s ease;
}
.sp-ov__progress-meta {
  display:    flex;
  justify-content: flex-end;
  font-family: var(--sp-percent-font, var(--sp-font));
  font-size:   var(--sp-percent-size, 12px);
  font-weight: var(--sp-percent-weight, 400);
  color:       var(--sp-muted);
  margin-top: 4px;
}

/* =====================
   Progress: PILL (dikkere balk met glow)
   ===================== */
.sp-ov__progress--pill .sp-ov__progress-track { height: 16px; }
.sp-ov__progress--pill .sp-ov__progress-fill  { box-shadow: 0 0 14px var(--sp-accent-1); }

/* =====================
   Progress: LINE (dunne lijn)
   ===================== */
.sp-ov__progress--line .sp-ov__progress-track { height: 2px; background: rgba(255,255,255,.08); }
.sp-ov__progress--line .sp-ov__progress-fill  { border-radius: 0; }

/* =====================
   Progress: RING (SVG cirkel)
   ===================== */
.sp-ov__ring-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  width:          100%;
}
.sp-ov__ring            { display: block; overflow: visible; }
.sp-ov__ring circle     { transition: stroke-dashoffset .6s ease; }
.sp-ov__ring-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--sp-muted);
  text-align:     center;
}
.sp-ov--minimal .sp-ov__ring-label { display: none; }

/* =====================
   Ring tekst positionering (data-ring-text-pos)
   ===================== */
.sp-ov__ring-text {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.sp-ov__ring-text__label  { font-family: var(--sp-label-font,var(--sp-font)); font-size: var(--sp-label-size,11px); font-weight: var(--sp-label-weight,400); text-transform: uppercase; letter-spacing: .06em; }
.sp-ov__ring-text__numbers { font-family: var(--sp-numbers-font,var(--sp-font)); font-size: var(--sp-numbers-size,18px); font-weight: var(--sp-numbers-weight,700); }
.sp-ov__ring-text__pct     { font-family: var(--sp-percent-font,var(--sp-font)); font-size: var(--sp-percent-size,13px); font-weight: var(--sp-percent-weight,400); }

/* Richting van de ring-wrap flexbox */
[data-ring-text-pos="right"]  { flex-direction: row;          align-items: center; gap: 16px; }
[data-ring-text-pos="left"]   { flex-direction: row-reverse;  align-items: center; gap: 16px; }
[data-ring-text-pos="above"]  { flex-direction: column-reverse; }
[data-ring-text-pos="below"]  { flex-direction: column; }
/* inside: already column (default) */

/* SVG tekst en ring-label verbergen voor niet-inside posities (override JS show* toggles) */
[data-ring-text-pos]:not([data-ring-text-pos="inside"]) text[data-sp-vis] { display: none !important; }
[data-ring-text-pos]:not([data-ring-text-pos="inside"]) .sp-ov__ring-label { display: none !important; }

/* =====================
   Icon tekst positionering (data-text-pos)
   ===================== */
.sp-ov__icon-progress[data-text-pos="left"]   { flex-direction: row-reverse; }
.sp-ov__icon-progress[data-text-pos="top"]    { flex-direction: column-reverse; align-items: center; }
.sp-ov__icon-progress[data-text-pos="bottom"] { flex-direction: column;         align-items: center; }

/* =====================
   Progress: ICON (Material Symbol met clip-path fill)
   ===================== */
.sp-ov__icon-progress {
  display:     flex;
  align-items: center;
  gap:         12px;
}
.sp-ov__icon-fill-wrap {
  position:   relative;
  flex-shrink: 0;
}
.sp-ov__icon-empty {
  display: block;
  color:   rgba(255,255,255,.15);
}
.sp-ov__icon-filled {
  display:  block;
  position: absolute;
  top: 0; left: 0;
  background:               var(--sp-icon-fill, var(--sp-accent-1));
  -webkit-background-clip:  text;
  -webkit-text-fill-color:  transparent;
  background-clip:          text;
  color: transparent;
}
.sp-ov__icon-text {
  display:        flex;
  flex-direction: column;
  gap: 4px;
}

/* =====================
   Ring icoon — foreignObject inner div
   ===================== */
.sp-ring-icon {
  font-family:            'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:  100%;
  height: 100%;
  line-height: 1;
  text-align:  center;
  color: var(--sp-accent-1);
}

/* =====================
   Alert entry-animaties
   ===================== */
:root { --fw-anim-dur: 400ms; }

@keyframes fw-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fw-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fw-slide-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fw-bounce-in {
  0%   { opacity: 0; transform: scale(.55); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fw-pop-in {
  0%   { opacity: 0; transform: scale(.75) rotate(-3deg); }
  65%  { opacity: 1; transform: scale(1.06) rotate(.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.fw-wrap.fw-alert-hidden    { visibility: hidden; }
.fw-wrap.fw-anim-fade       { animation: fw-fade-in    var(--fw-anim-dur) ease backwards; }
.fw-wrap.fw-anim-slide-up   { animation: fw-slide-up   var(--fw-anim-dur) ease backwards; }
.fw-wrap.fw-anim-slide-left { animation: fw-slide-left var(--fw-anim-dur) ease backwards; }
.fw-wrap.fw-anim-bounce     { animation: fw-bounce-in  var(--fw-anim-dur) ease backwards; }
.fw-wrap.fw-anim-pop        { animation: fw-pop-in     var(--fw-anim-dur) ease backwards; }

/* =====================
   Goal milestone animaties (50 % / 75 % / 100 %)
   ===================== */
@keyframes sp-milestone {
  0%   { filter: brightness(1)   drop-shadow(0 0 0px transparent); }
  25%  { filter: brightness(1.8) drop-shadow(0 0 8px var(--sp-accent-2, #a78bfa)); }
  60%  { filter: brightness(1.4) drop-shadow(0 0 5px var(--sp-accent-1, #7c3aed)); }
  100% { filter: brightness(1)   drop-shadow(0 0 0px transparent); }
}
@keyframes sp-milestone-100 {
  0%   { filter: brightness(1)   drop-shadow(0 0  0px transparent); }
  15%  { filter: brightness(2.2) drop-shadow(0 0 14px var(--sp-accent-2, #a78bfa)); }
  35%  { filter: brightness(1.6) drop-shadow(0 0  9px var(--sp-accent-1, #7c3aed)); }
  55%  { filter: brightness(2.0) drop-shadow(0 0 12px var(--sp-accent-2, #a78bfa)); }
  75%  { filter: brightness(1.4) drop-shadow(0 0  6px var(--sp-accent-1, #7c3aed)); }
  100% { filter: brightness(1)   drop-shadow(0 0  0px transparent); }
}
.sp-milestone     { animation: sp-milestone     .85s ease both; }
.sp-milestone-100 { animation: sp-milestone-100 1.4s ease both; }