/* === Säsongsteman (extern CSS) v2 === */
:root{
  --season-fg: #e5e7eb;
  --season-accent: #60a5fa;
}

/* Overlay for particles */
.season-overlay{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.season-layer{ position:absolute; inset:0; }
.season-particle{
  position:absolute; will-change:transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
  user-select:none;
}

/* Festive lights (Jul) */
.season-lights {
  position: fixed; top: 0; left: 0; right: 0; height: 40px;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 10px; z-index: 6; pointer-events:none;
}
.season-light-bulb{
  width: 12px; height: 18px; border-radius: 8px 8px 12px 12px;
  background: var(--bulb, #fca5a5);
  box-shadow: 0 0 10px var(--bulb, #fca5a5);
  animation: twinkle 1.8s ease-in-out infinite;
}
.season-light-bulb:nth-child(3n){ --bulb:#86efac; animation-delay:.2s; }
.season-light-bulb:nth-child(3n+1){ --bulb:#93c5fd; animation-delay:.5s; }
.season-light-bulb:nth-child(3n+2){ --bulb:#fde68a; animation-delay:.9s; }
@keyframes twinkle{
  0%,100%{ opacity:.9; transform: translateY(0) scale(1); }
  50%{ opacity:.4; transform: translateY(2px) scale(.95); }
}

/* Background palettes per theme */
.theme-host{ --ring:#f59e0b; --ring-2:#ef4444; --season-accent:#f59e0b; }
.theme-host body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(245,158,11,.25) 0%, transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(239,68,68,.22) 0%, transparent 55%),
    linear-gradient(180deg, #0b1022, #111827);
}

.theme-vinter{ --ring:#93c5fd; --ring-2:#a78bfa; --season-accent:#93c5fd; }
.theme-vinter body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(147,197,253,.28) 0%, transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(167,139,250,.24) 0%, transparent 55%),
    linear-gradient(180deg, #0a0f1f, #0f172a);
}

.theme-var{ --ring:#34d399; --ring-2:#60a5fa; --season-accent:#34d399; }
.theme-var body{
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(52,211,153,.22) 0%, transparent 55%),
    radial-gradient(800px 400px at 120% 20%, rgba(96,165,250,.20) 0%, transparent 55%),
    linear-gradient(180deg, #0a1410, #0d1b17);
}

.theme-sommar{ --ring:#fbbf24; --ring-2:#34d399; --season-accent:#fbbf24; }
.theme-sommar body{
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(251,191,36,.26) 0%, transparent 55%),
    radial-gradient(800px 400px at 120% 10%, rgba(52,211,153,.22) 0%, transparent 55%),
    linear-gradient(180deg, #0a0f12, #0f172a);
}

.theme-jul{ --ring:#22c55e; --ring-2:#ef4444; --season-accent:#22c55e; }
.theme-jul body{
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(34,197,94,.30) 0%, transparent 55%),
    radial-gradient(800px 400px at 120% 10%, rgba(239,68,68,.28) 0%, transparent 55%),
    linear-gradient(180deg, #0a0f12, #0f172a);
}

.theme-nyar{ --ring:#a78bfa; --ring-2:#fbbf24; --season-accent:#a78bfa; }
.theme-nyar body{
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(167,139,250,.30) 0%, transparent 55%),
    radial-gradient(800px 400px at 120% 10%, rgba(251,191,36,.26) 0%, transparent 55%),
    linear-gradient(180deg, #0a0f12, #0f172a);
}

.theme-pask{ --ring:#f472b6; --ring-2:#34d399; --season-accent:#f472b6; }
.theme-pask body{
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(244,114,182,.28) 0%, transparent 55%),
    radial-gradient(800px 400px at 120% 10%, rgba(52,211,153,.24) 0%, transparent 55%),
    linear-gradient(180deg, #0a0f12, #0f172a);
}

/* Accent props */
*[data-accent], button, a, input:focus, select:focus, textarea:focus{
  --tw-ring-color: var(--season-accent);
  outline-color: var(--season-accent);
}

/* Celebration banner */
.season-banner{
  position: fixed; top: 56px; right: 16px; z-index: 7;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  padding: 10px 14px; border-radius: 12px;
  font-weight: 600; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  pointer-events: none;
}
.season-banner small{ display:block; font-weight:400; opacity:.9; }


/* === 3D-löv (SVG) === */
.leaf3d-layer{
  position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 20%;
}
.leaf3d{
  position: absolute; will-change: transform, opacity;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  transform-style: preserve-3d;
  user-select: none;
}
@media (max-width: 800px){
  .leaf3d{ width: 28px !important; height: auto !important; }
}


/* Hardening to avoid accidental scrollbars/jank from overlays */
html, body { overflow-x: hidden; }
.leaf3d-layer, .season-overlay {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 6;
  contain: layout paint size style; backface-visibility: hidden;
}
.leaf3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }



/* === Responsive enhancements === */
:root {
  --container-max: 1100px;
  --container-pad: clamp(8px, 2vw, 20px);
  --text-scale: clamp(14px, 1.6vw, 18px);
}
html, body { font-size: var(--text-scale); }
.container, .wrap, main, .main, .content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { width: 100%; border-collapse: collapse; }
.season-banner { font-size: clamp(16px, 2.8vw, 24px); }
.season-banner small { font-size: clamp(12px, 2.2vw, 16px); }
.season-light-bulb { width: clamp(6px, 1.2vw, 10px); height: clamp(10px, 2vw, 14px); }
.season-particle { font-size: clamp(10px, 3.4vw, 18px); }
@media (max-width: 768px) { .leaf3d { width: 36px !important; } }
@media (max-width: 480px) { .leaf3d { width: 28px !important; } }