/* v1.15 banner-only seasonal theme layer
   Doel: sfeer alleen in de header/banner, zonder functionele knoppen/tabs/statussen te verkleuren. */
body.portal-theme-on{
  --theme-accent:#2563eb;
  --theme-accent-2:#60a5fa;
  --theme-soft:#eff6ff;
  --theme-border:#bfdbfe;
  --theme-glow:rgba(37,99,235,.16);
  --theme-emoji:"✨";
}
body.portal-theme-on.theme-wk{--theme-accent:#16a34a;--theme-accent-2:#86efac;--theme-soft:#ecfdf3;--theme-border:#86efac;--theme-glow:rgba(22,163,74,.18);--theme-emoji:"⚽";}
body.portal-theme-on.theme-summer{--theme-accent:#f59e0b;--theme-accent-2:#fde68a;--theme-soft:#fffbeb;--theme-border:#fde68a;--theme-glow:rgba(245,158,11,.16);--theme-emoji:"☀️";}
body.portal-theme-on.theme-autumn{--theme-accent:#ea580c;--theme-accent-2:#fed7aa;--theme-soft:#fff7ed;--theme-border:#fed7aa;--theme-glow:rgba(234,88,12,.16);--theme-emoji:"🍂";}
body.portal-theme-on.theme-halloween{--theme-accent:#7e22ce;--theme-accent-2:#d8b4fe;--theme-soft:#faf5ff;--theme-border:#d8b4fe;--theme-glow:rgba(126,34,206,.16);--theme-emoji:"🎃";}
body.portal-theme-on.theme-winter{--theme-accent:#0ea5e9;--theme-accent-2:#bae6fd;--theme-soft:#f0f9ff;--theme-border:#bae6fd;--theme-glow:rgba(14,165,233,.16);--theme-emoji:"❄️";}
body.portal-theme-on.theme-christmas{--theme-accent:#dc2626;--theme-accent-2:#22c55e;--theme-soft:#fff7f7;--theme-border:#fecaca;--theme-glow:rgba(220,38,38,.12);--theme-emoji:"🎄";}
body.portal-theme-on.theme-carnaval{--theme-accent:#e11d48;--theme-accent-2:#7c3aed;--theme-soft:#fff1f2;--theme-border:#fecdd3;--theme-glow:rgba(225,29,72,.14);--theme-emoji:"🎭";}
body.portal-theme-on.theme-easter{--theme-accent:#84cc16;--theme-accent-2:#f9a8d4;--theme-soft:#f7fee7;--theme-border:#d9f99d;--theme-glow:rgba(132,204,22,.14);--theme-emoji:"🐣";}

/* Alleen de banner/header krijgt sfeer. De rest van de UI blijft zakelijk/functioneel. */
body.portal-theme-on .topbar,
body.portal-theme-on main.card,
body.portal-theme-on .login-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-color:color-mix(in srgb, var(--theme-border) 75%, #dce7f2)!important;
  box-shadow:0 18px 48px rgba(15,23,42,.07),0 0 24px var(--theme-glow)!important;
}
body.portal-theme-on .topbar > :not(.portal-theme-banner-layer):not(.portal-theme-garland),
body.portal-theme-on main.card > :not(.portal-theme-banner-layer):not(.portal-theme-garland),
body.portal-theme-on .login-card > :not(.portal-theme-banner-layer):not(.portal-theme-garland){
  position:relative;
  z-index:3;
}
.portal-theme-banner-layer{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.portal-theme-banner-layer[hidden]{display:none!important;}
.portal-theme-banner-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--theme-soft) 78%,transparent),transparent 52%,color-mix(in srgb,var(--theme-soft) 58%,transparent)),
    radial-gradient(circle at 94% 18%,color-mix(in srgb,var(--theme-accent) 16%,transparent),transparent 22%),
    radial-gradient(circle at 7% 78%,color-mix(in srgb,var(--theme-accent-2) 16%,transparent),transparent 26%);
  opacity:.95;
}
.portal-theme-banner-layer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:linear-gradient(90deg,transparent,var(--theme-accent),var(--theme-accent-2),transparent);
  opacity:.42;
}
.portal-theme-banner-layer span{
  position:absolute;
  left:var(--x);
  top:var(--y);
  font-size:var(--size);
  line-height:1;
  opacity:var(--o);
  transform:translate(-50%,-50%) rotate(var(--r));
  filter:drop-shadow(0 6px 10px rgba(15,23,42,.18));
  animation:bannerFloat var(--speed) ease-in-out infinite alternate;
  animation-delay:var(--delay);
  user-select:none;
  will-change:transform;
}
body.theme-intensity-subtle .portal-theme-banner-layer span{opacity:calc(var(--o) * .70);}
body.theme-intensity-subtle .portal-theme-banner-layer span:nth-of-type(n+8){display:none;}
body.theme-intensity-normal .portal-theme-banner-layer span:nth-of-type(n+13){display:none;}
body.theme-intensity-feestelijk .portal-theme-banner-layer span{opacity:min(.9, calc(var(--o) * 1.25));animation-name:bannerFloatParty;}

/* Kerst: zichtbare lampjes + sneeuw, maar alleen in de banner. */
.portal-theme-garland{display:none;}
body.theme-christmas .portal-theme-garland{
  display:block;
  position:absolute;
  left:18px;
  right:18px;
  top:10px;
  height:24px;
  z-index:2;
  pointer-events:none;
  border-top:2px solid rgba(34,197,94,.38);
  border-radius:999px;
}
body.theme-christmas .portal-theme-garland i{
  position:absolute;
  top:-1px;
  left:var(--x);
  width:10px;
  height:15px;
  transform:translateX(-50%);
  border-radius:50% 50% 45% 45%;
  background:var(--c);
  box-shadow:0 0 10px var(--c),0 4px 10px rgba(15,23,42,.10);
  opacity:.82;
  animation:themeLightPulse 1.8s ease-in-out infinite alternate;
  animation-delay:var(--d);
}
body.theme-christmas .portal-theme-banner-layer::before{
  background:
    linear-gradient(90deg,rgba(255,247,247,.90),rgba(240,253,244,.55),rgba(255,247,247,.75)),
    radial-gradient(circle at 92% 17%,rgba(220,38,38,.14),transparent 22%);
}
body.theme-christmas .portal-theme-banner-layer span,
body.theme-winter .portal-theme-banner-layer span{
  animation-name:bannerSnow;
  color:#0f70a8;
  text-shadow:0 0 7px rgba(255,255,255,.9),0 2px 7px rgba(14,165,233,.23);
}
body.theme-christmas .portal-theme-banner-layer span{color:#0f70a8;}

/* WK: een heel lichte gras/veldverwijzing in de banner. */
body.theme-wk .portal-theme-banner-layer::before{
  background:
    repeating-linear-gradient(90deg,rgba(22,163,74,.12) 0 38px,rgba(255,255,255,.05) 38px 76px),
    radial-gradient(ellipse at 82% 55%,transparent 0 64px,rgba(22,163,74,.22) 66px,transparent 68px),
    linear-gradient(90deg,rgba(236,253,243,.88),rgba(255,255,255,.62));
}
body.theme-wk .portal-theme-banner-layer span{opacity:calc(var(--o) * 1.3);}

/* Herfst/Halloween/Zomer/Pasen/Carnaval: rustig in de banner. */
body.theme-autumn .portal-theme-banner-layer span{animation-name:bannerLeaf;}
body.theme-halloween .portal-theme-banner-layer::before{background:linear-gradient(90deg,rgba(250,245,255,.86),rgba(255,247,237,.58)),radial-gradient(circle at 92% 20%,rgba(126,34,206,.16),transparent 24%);}
body.theme-summer .portal-theme-banner-layer::before{background:linear-gradient(90deg,rgba(255,251,235,.90),rgba(255,247,237,.56)),radial-gradient(circle at 91% 18%,rgba(245,158,11,.18),transparent 22%);}
body.theme-carnaval .portal-theme-banner-layer::before{background:linear-gradient(110deg,rgba(255,241,242,.78),rgba(254,243,199,.60),rgba(237,233,254,.60));}
body.theme-easter .portal-theme-banner-layer::before{background:linear-gradient(90deg,rgba(247,254,231,.86),rgba(253,242,248,.55)),radial-gradient(circle at 91% 18%,rgba(132,204,22,.15),transparent 24%);}

/* Preview in beheer */
.theme-preview-box{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--soft,#f8fbff)}
.theme-preview-icon{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;background:var(--theme-soft,#eff6ff);border:1px solid var(--theme-border,#bfdbfe);font-size:25px}
.switch-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--soft,#f8fbff);font-weight:850}.switch-row input{width:auto;transform:scale(1.15)}

/* Oude volledige pagina-decoraties expliciet uit */
.portal-theme-scatter,.portal-theme-chip,.portal-theme-logo-sticker,.portal-theme-decor{display:none!important;}

@keyframes bannerFloat{0%{transform:translate(-50%,-50%) rotate(var(--r));}100%{transform:translate(calc(-50% + 8px),calc(-50% - 5px)) rotate(calc(var(--r) + 8deg));}}
@keyframes bannerFloatParty{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1);}50%{transform:translate(calc(-50% - 8px),calc(-50% + 5px)) rotate(calc(var(--r) - 10deg)) scale(1.06);}100%{transform:translate(calc(-50% + 12px),calc(-50% - 8px)) rotate(calc(var(--r) + 14deg)) scale(1);}}
@keyframes bannerSnow{0%{transform:translate(-50%,-78%) rotate(var(--r));}100%{transform:translate(calc(-50% + 18px),62px) rotate(calc(var(--r) + 28deg));}}
@keyframes bannerLeaf{0%{transform:translate(-50%,-50%) rotate(var(--r));}100%{transform:translate(calc(-50% + 20px),calc(-50% + 12px)) rotate(calc(var(--r) + 70deg));}}
@keyframes themeLightPulse{0%{opacity:.48;filter:saturate(.85);transform:translateX(-50%) scale(.88);}100%{opacity:1;filter:saturate(1.25);transform:translateX(-50%) scale(1.05);}}

@media(max-width:760px){.portal-theme-banner-layer span{font-size:calc(var(--size) * .82)}body.theme-intensity-normal .portal-theme-banner-layer span:nth-of-type(n+10){display:none}body.theme-intensity-feestelijk .portal-theme-banner-layer span:nth-of-type(n+14){display:none}body.theme-christmas .portal-theme-garland{left:12px;right:12px;top:8px}.portal-theme-garland i:nth-of-type(n+9){display:none}}