/* Global seasonal themes. The active value is stored in dashboard_settings. */

body[data-seasonal-theme="off"] .seasonal-theme-layer{display:none}

.seasonal-theme-layer{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.seasonal-theme-particle{
  position:absolute;
  top:-12vh;
  left:var(--seasonal-left,50%);
  font-size:var(--seasonal-size,18px);
  line-height:1;
  opacity:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}


/* Halloween */
body[data-seasonal-theme="halloween"]{
  --red:#c85a00;
  --red2:#7d298f;
  --danger:#c83232;
  --border:#4a2a21;
  background:
    radial-gradient(circle at 12% 8%,rgba(112,31,130,.14),transparent 34%),
    radial-gradient(circle at 88% 5%,rgba(211,91,0,.13),transparent 32%),
    #050405 !important;
}
body[data-seasonal-theme="halloween"] .seasonal-theme-layer{display:block}
body[data-seasonal-theme="halloween"] .sidebar{
  background:linear-gradient(180deg,#170a1b 0%,#0a0708 48%,#050505 100%) !important;
  border-right-color:#5a2c20 !important;
  box-shadow:10px 0 35px rgba(56,8,66,.13);
}
body[data-seasonal-theme="halloween"] .logo img{filter:drop-shadow(0 0 14px rgba(207,91,0,.36)) drop-shadow(0 0 22px rgba(104,24,127,.18)) !important}
body[data-seasonal-theme="halloween"] .topbar{border-bottom-color:#4a251c !important}
body[data-seasonal-theme="halloween"] .panel,
body[data-seasonal-theme="halloween"] .card,
body[data-seasonal-theme="halloween"] .materialordercard,
body[data-seasonal-theme="halloween"] .payslipcard{
  border-color:#48281f !important;
  background:linear-gradient(180deg,rgba(30,15,31,.94),rgba(14,10,11,.98)) !important;
}
body[data-seasonal-theme="halloween"] .header h2:after,
body[data-seasonal-theme="halloween"] h1:after{background:linear-gradient(90deg,#d86500,#8f36a4) !important}
body[data-seasonal-theme="halloween"] .nav button:hover,
body[data-seasonal-theme="halloween"] .nav button.active,
body[data-seasonal-theme="halloween"] .nav .nav-parent.open{
  background:linear-gradient(90deg,rgba(205,91,0,.30),rgba(104,31,126,.18)) !important;
  box-shadow:inset 3px 0 0 #d86500 !important;
}
body[data-seasonal-theme="halloween"] .btn.primary,
body[data-seasonal-theme="halloween"] button.primary{
  background:linear-gradient(180deg,#d36500,#9a4000) !important;
  border-color:#e17a24 !important;
}
body[data-seasonal-theme="halloween"] input:focus,
body[data-seasonal-theme="halloween"] select:focus,
body[data-seasonal-theme="halloween"] textarea:focus{border-color:#b55110 !important;box-shadow:0 0 0 3px rgba(202,90,0,.13)}
body[data-seasonal-theme="halloween"] .seasonal-theme-particle::before{content:"🦇"}
body[data-seasonal-theme="halloween"] .seasonal-theme-particle{
  animation:halloweenBatFlight var(--seasonal-duration,17s) linear infinite;
  animation-delay:var(--seasonal-delay,0s);
}

/* Christmas */
body[data-seasonal-theme="christmas"]{
  --red:#b10b2e;
  --red2:#177a43;
  --danger:#c52b3d;
  --border:#284638;
  background:
    radial-gradient(circle at 10% 4%,rgba(178,13,48,.12),transparent 34%),
    radial-gradient(circle at 90% 6%,rgba(15,117,60,.13),transparent 32%),
    #040705 !important;
}
body[data-seasonal-theme="christmas"] .seasonal-theme-layer{display:block}
body[data-seasonal-theme="christmas"] .sidebar{
  background:linear-gradient(180deg,#091b11 0%,#080c09 52%,#050505 100%) !important;
  border-right-color:#27563b !important;
  box-shadow:10px 0 35px rgba(10,74,38,.12);
}
body[data-seasonal-theme="christmas"] .logo img{filter:drop-shadow(0 0 13px rgba(183,13,47,.30)) drop-shadow(0 0 22px rgba(20,122,66,.18)) !important}
body[data-seasonal-theme="christmas"] .topbar{border-bottom-color:#254736 !important}
body[data-seasonal-theme="christmas"] .panel,
body[data-seasonal-theme="christmas"] .card,
body[data-seasonal-theme="christmas"] .materialordercard,
body[data-seasonal-theme="christmas"] .payslipcard{
  border-color:#284638 !important;
  background:linear-gradient(180deg,rgba(13,28,20,.95),rgba(8,13,10,.98)) !important;
}
body[data-seasonal-theme="christmas"] .header h2:after,
body[data-seasonal-theme="christmas"] h1:after{background:linear-gradient(90deg,#bf1237,#18834a) !important}
body[data-seasonal-theme="christmas"] .nav button:hover,
body[data-seasonal-theme="christmas"] .nav button.active,
body[data-seasonal-theme="christmas"] .nav .nav-parent.open{
  background:linear-gradient(90deg,rgba(177,11,46,.28),rgba(18,122,66,.18)) !important;
  box-shadow:inset 3px 0 0 #c2183e !important;
}
body[data-seasonal-theme="christmas"] .btn.primary,
body[data-seasonal-theme="christmas"] button.primary{
  background:linear-gradient(180deg,#b80f35,#850823) !important;
  border-color:#d02b4d !important;
}
body[data-seasonal-theme="christmas"] input:focus,
body[data-seasonal-theme="christmas"] select:focus,
body[data-seasonal-theme="christmas"] textarea:focus{border-color:#2b8e58 !important;box-shadow:0 0 0 3px rgba(24,131,74,.13)}
body[data-seasonal-theme="christmas"] .seasonal-theme-particle::before{content:"❄"}
body[data-seasonal-theme="christmas"] .seasonal-theme-particle{
  color:rgba(255,255,255,.92);
  text-shadow:0 0 7px rgba(215,245,255,.55);
  animation:christmasSnowfall var(--seasonal-duration,12s) linear infinite;
  animation-delay:var(--seasonal-delay,0s);
}

/* Varied particle positions and speeds */
.seasonal-theme-particle-1{--seasonal-left:3%;--seasonal-size:14px;--seasonal-duration:14s;--seasonal-delay:-4s}
.seasonal-theme-particle-2{--seasonal-left:9%;--seasonal-size:20px;--seasonal-duration:18s;--seasonal-delay:-12s}
.seasonal-theme-particle-3{--seasonal-left:15%;--seasonal-size:12px;--seasonal-duration:13s;--seasonal-delay:-7s}
.seasonal-theme-particle-4{--seasonal-left:22%;--seasonal-size:24px;--seasonal-duration:20s;--seasonal-delay:-15s}
.seasonal-theme-particle-5{--seasonal-left:29%;--seasonal-size:16px;--seasonal-duration:15s;--seasonal-delay:-2s}
.seasonal-theme-particle-6{--seasonal-left:35%;--seasonal-size:13px;--seasonal-duration:17s;--seasonal-delay:-11s}
.seasonal-theme-particle-7{--seasonal-left:41%;--seasonal-size:22px;--seasonal-duration:21s;--seasonal-delay:-6s}
.seasonal-theme-particle-8{--seasonal-left:47%;--seasonal-size:15px;--seasonal-duration:14s;--seasonal-delay:-9s}
.seasonal-theme-particle-9{--seasonal-left:53%;--seasonal-size:18px;--seasonal-duration:19s;--seasonal-delay:-14s}
.seasonal-theme-particle-10{--seasonal-left:59%;--seasonal-size:12px;--seasonal-duration:16s;--seasonal-delay:-3s}
.seasonal-theme-particle-11{--seasonal-left:65%;--seasonal-size:24px;--seasonal-duration:22s;--seasonal-delay:-18s}
.seasonal-theme-particle-12{--seasonal-left:71%;--seasonal-size:15px;--seasonal-duration:15s;--seasonal-delay:-8s}
.seasonal-theme-particle-13{--seasonal-left:77%;--seasonal-size:19px;--seasonal-duration:18s;--seasonal-delay:-1s}
.seasonal-theme-particle-14{--seasonal-left:83%;--seasonal-size:13px;--seasonal-duration:14s;--seasonal-delay:-10s}
.seasonal-theme-particle-15{--seasonal-left:89%;--seasonal-size:22px;--seasonal-duration:20s;--seasonal-delay:-16s}
.seasonal-theme-particle-16{--seasonal-left:95%;--seasonal-size:16px;--seasonal-duration:17s;--seasonal-delay:-5s}
.seasonal-theme-particle-17{--seasonal-left:18%;--seasonal-size:11px;--seasonal-duration:23s;--seasonal-delay:-19s}
.seasonal-theme-particle-18{--seasonal-left:68%;--seasonal-size:17px;--seasonal-duration:19s;--seasonal-delay:-13s}

@keyframes christmasSnowfall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}
  8%{opacity:.35}
  88%{opacity:.25}
  100%{transform:translate3d(42px,112vh,0) rotate(300deg);opacity:0}
}
@keyframes halloweenBatFlight{
  0%{transform:translate3d(-12vw,12vh,0) rotate(-8deg) scale(.72);opacity:0}
  10%{opacity:.22}
  45%{transform:translate3d(42vw,27vh,0) rotate(8deg) scale(1);opacity:.18}
  85%{opacity:.16}
  100%{transform:translate3d(112vw,9vh,0) rotate(-5deg) scale(.78);opacity:0}
}

@media(max-width:760px){
  .seasonal-theme-particle:nth-child(even){display:none}
}

@media(prefers-reduced-motion:reduce){
  .seasonal-theme-particle{animation:none!important;display:none!important}
}