/* ============================================================
   Halloween — soft white "Happy Halloween" scene backdrop
   (teal & white pumpkins, witch-hat tooth, friendly ghost),
   frosted glass cards, flying teal bats and gold sparkles.
   Every rule is scoped to [data-latoza-style="halloween"].
   ============================================================ */

html[data-latoza-style="halloween"] {
  --bg: #f6f8f7;
  --border: rgba(255, 255, 255, .8);
  --shadow: 0 12px 32px rgba(45, 95, 99, .13);
  --shadow-md: 0 20px 48px rgba(45, 95, 99, .18);
  /* Small gold sparkle in the corner of cards, drawn as a background so no
     card needs position:relative. */
  --hw-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a24a' opacity='.55' d='M12 1.5c.6 5.4 2.9 8 9 10.5-6.1 2.5-8.4 5.1-9 10.5-.6-5.4-2.9-8-9-10.5 6.1-2.5 8.4-5.1 9-10.5z'/%3E%3C/svg%3E");
}

/* The shared watermark is replaced by the scene's own logo. */
html[data-latoza-style="halloween"] body::before {
  display: none;
}

/* ── Backdrop ─────────────────────────────────────────────── */
/* Login screens can load this file without data-latoza-style; keep it hidden there. */
.latoza-hw {
  display: none;
}
html[data-latoza-style="halloween"] .latoza-hw {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* 16:9 image fills the page edge to edge — nothing cropped at any screen size.
   Starts below the 64px navbar so the top of the picture is not hidden behind it. */
html[data-latoza-style="halloween"] .latoza-hw-bg {
  position: absolute;
  inset: 0;
  background: #f4f6f4 url("../img/halloween-bg4.png?v=2") 0 0 / 100% 100% no-repeat;
}
html[data-latoza-style="halloween"] body:has(.navbar) .latoza-hw-bg {
  top: 64px;
}
/* Soft wash in the middle so page text stays readable over the greeting. */
html[data-latoza-style="halloween"] .latoza-hw-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%);
}

/* ── Flying bats ──────────────────────────────────────────── */
html[data-latoza-style="halloween"] .latoza-hw-bats span {
  position: absolute;
  left: -80px;
  width: 54px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%232d5f63' d='M32 9c1.6 0 2.6 1.2 3 3l1.6-3.2.6 4.1C41 8.6 48 6 56 7c-3.4 2.4-4.6 5.4-4 9-3-1.6-6.2-1.4-8.6.6-1.7-1.6-3.8-1.8-5.6-.4C36.4 19 34.4 22 32 25c-2.4-3-4.4-6-5.8-8.8-1.8-1.4-3.9-1.2-5.6.4-2.4-2-5.6-2.2-8.6-.6.6-3.6-.6-6.6-4-9 8-1 15 1.6 18.8 5.9l.6-4.1L29 12c.4-1.8 1.4-3 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .78;
  animation: latozaHwFly linear infinite, latozaHwFlap .32s ease-in-out infinite alternate;
}
@keyframes latozaHwFly {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(28vw, -5vh, 0); }
  50%  { transform: translate3d(56vw, 3vh, 0); }
  75%  { transform: translate3d(84vw, -4vh, 0); }
  100% { transform: translate3d(calc(100vw + 160px), 2vh, 0); }
}
@keyframes latozaHwFlap {
  from { background-size: 100% 100%; }
  to   { background-size: 100% 55%; }
}
html[data-latoza-style="halloween"] .latoza-hw-bats span:nth-child(1) { top: 14%; animation-duration: 26s, .30s; animation-delay: 0s, 0s; }
html[data-latoza-style="halloween"] .latoza-hw-bats span:nth-child(2) { top: 22%; width: 38px; height: 20px; animation-duration: 32s, .26s; animation-delay: 6s, .1s; opacity: .6; }
html[data-latoza-style="halloween"] .latoza-hw-bats span:nth-child(3) { top: 9%;  width: 44px; height: 23px; animation-duration: 29s, .34s; animation-delay: 13s, .05s; }
html[data-latoza-style="halloween"] .latoza-hw-bats span:nth-child(4) { top: 31%; width: 34px; height: 18px; animation-duration: 36s, .28s; animation-delay: 19s, .15s; opacity: .55; }
html[data-latoza-style="halloween"] .latoza-hw-bats span:nth-child(5) { top: 18%; width: 60px; height: 31px; animation-duration: 24s, .36s; animation-delay: 27s, 0s; }

/* ── Twinkling gold sparkles (like the stars in the design) ─ */
html[data-latoza-style="halloween"] .latoza-hw-sparkles span {
  position: absolute;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a24a' d='M12 1.5c.6 5.4 2.9 8 9 10.5-6.1 2.5-8.4 5.1-9 10.5-.6-5.4-2.9-8-9-10.5 6.1-2.5 8.4-5.1 9-10.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(233, 196, 106, .7));
  animation: latozaHwTwinkle ease-in-out infinite;
}
@keyframes latozaHwTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50%      { opacity: .9; transform: scale(1) rotate(45deg); }
}
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(1)  { left: 7%;  top: 12%; animation-duration: 4.2s; animation-delay: 0s; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(2)  { left: 19%; top: 36%; animation-duration: 5.1s; animation-delay: 1.3s; width: 12px; height: 12px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(3)  { left: 31%; top: 18%; animation-duration: 3.8s; animation-delay: 2.1s; width: 20px; height: 20px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(4)  { left: 43%; top: 64%; animation-duration: 4.6s; animation-delay: .6s; width: 11px; height: 11px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(5)  { left: 57%; top: 28%; animation-duration: 5.4s; animation-delay: 2.8s; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(6)  { left: 68%; top: 52%; animation-duration: 4.0s; animation-delay: 1.7s; width: 13px; height: 13px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(7)  { left: 79%; top: 16%; animation-duration: 4.8s; animation-delay: .3s; width: 19px; height: 19px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(8)  { left: 91%; top: 40%; animation-duration: 3.6s; animation-delay: 2.4s; width: 12px; height: 12px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(9)  { left: 12%; top: 72%; animation-duration: 5.0s; animation-delay: 3.2s; width: 14px; height: 14px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(10) { left: 50%; top: 8%;  animation-duration: 4.4s; animation-delay: 1.1s; width: 13px; height: 13px; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(11) { left: 86%; top: 76%; animation-duration: 5.6s; animation-delay: .9s; }
html[data-latoza-style="halloween"] .latoza-hw-sparkles span:nth-child(12) { left: 26%; top: 84%; animation-duration: 4.1s; animation-delay: 2.6s; width: 11px; height: 11px; }

/* ── Frosted glass surfaces ───────────────────────────────── */
html[data-latoza-style="halloween"] .card,
html[data-latoza-style="halloween"] .nav-card,
html[data-latoza-style="halloween"] .stat-card {
  background: var(--hw-spark) right 11px top 10px / 16px 16px no-repeat,
              rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 12px 32px rgba(45, 95, 99, .13);
}
html[data-latoza-style="halloween"] .table-wrapper {
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .85);
}
html[data-latoza-style="halloween"] .card .card,
html[data-latoza-style="halloween"] .card .stat-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, .74);
}
/* Script heading like the "Halloween" lettering in the design. */
html[data-latoza-style="halloween"] .page-title {
  color: #2d5f63;
}
html[data-latoza-style="halloween"] .dashboard-halloween-badge {
  font-family: 'Great Vibes', cursive;
  font-size: 18px;
  color: #2d5f63;
}

/* ── Dark mode: dim the scene instead of fighting it ──────── */
html[data-latoza-style="halloween"][data-theme="dark"] .latoza-hw::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 20, .72), rgba(11, 15, 20, .8));
}
html[data-latoza-style="halloween"][data-theme="dark"] .latoza-hw-bg::after {
  background: none;
}
html[data-latoza-style="halloween"][data-theme="dark"] .latoza-hw-bats span {
  filter: invert(78%) sepia(14%) saturate(560%) hue-rotate(135deg);
  opacity: .6;
}
html[data-latoza-style="halloween"][data-theme="dark"] .card,
html[data-latoza-style="halloween"][data-theme="dark"] .nav-card,
html[data-latoza-style="halloween"][data-theme="dark"] .stat-card {
  background: var(--hw-spark) right 11px top 10px / 16px 16px no-repeat,
              rgba(22, 27, 34, .84);
  border-color: rgba(127, 184, 188, .22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
html[data-latoza-style="halloween"][data-theme="dark"] .table-wrapper {
  background: rgba(22, 27, 34, .8);
  border-color: rgba(127, 184, 188, .2);
}
html[data-latoza-style="halloween"][data-theme="dark"] .page-title {
  color: #a2d2d6;
}

@media (prefers-reduced-motion: reduce) {
  html[data-latoza-style="halloween"] .latoza-hw-bats,
  html[data-latoza-style="halloween"] .latoza-hw-sparkles {
    display: none;
  }
}

@media print {
  html[data-latoza-style="halloween"] .latoza-hw {
    display: none;
  }
  html[data-latoza-style="halloween"] .card,
  html[data-latoza-style="halloween"] .nav-card,
  html[data-latoza-style="halloween"] .stat-card,
  html[data-latoza-style="halloween"] .table-wrapper {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}