/* Halloween seasonal theme (docs/SPEC-SEASONAL-THEMES.md). Everything Halloween lives in
   this file, js/season-halloween.js, img/season/halloween-* + ghost/spider, and the
   {{if eq .Season "halloween"}} conditionals in layout.html / workloads.html.
   Removing the holiday = delete those. Screen only: print hides it all. Decorations are
   aria-hidden / pointer-events:none and never cover a control. Every animation runs once. */

/* ---------- sign-in scene ----------
   The corner pumpkin turns it off per browser too (data-season-bg="off", Casey 09/29). */
html[data-season="halloween"]:not([data-season-bg="off"]) .auth-wrap {
  position: relative; overflow: hidden; isolation: isolate;
  background: #2a1552 url("/static/img/season/halloween-sky.svg?v=2") center top / 100% 100% no-repeat;
}
html[data-season="halloween"]:not([data-season-bg="off"]) .auth-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/static/img/season/halloween-ground.svg?v=3") center bottom / 100% 100% no-repeat;
}
html[data-season="halloween"] .auth-card { position: relative; z-index: 1; }

/* ---------- top bar at dusk ---------- */
html[data-season="halloween"] .appbar {
  background: linear-gradient(97deg, #2b1250 0%, #3a2a78 20%, #0c5079 52%, #0a6f77 76%, #13938a 100%);
}
/* a band under the nav for the silhouette strip, so it never sits behind nav labels
   (padding on the items, not the bar, so the white logo block still runs full height) */
html[data-season="halloween"] .mainnav, html[data-season="halloween"] .appbar-right { padding-bottom: 16px; }
html[data-season="halloween"] .appbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 0;
  pointer-events: none;
  background:
    url("/static/img/season/halloween-strip.svg?v=3") left bottom / auto 30px repeat-x,
    linear-gradient(to top, rgba(255,150,80,.34), rgba(255,150,80,0)) left bottom / 100% 30px no-repeat;
}
html[data-season="halloween"] .appbar > * { position: relative; z-index: 1; }
html[data-season="halloween"] .appbar > .brand { z-index: 2; }

/* ---------- bats in the empty stretch of the top bar ---------- */
html[data-season="halloween"] .appbar::before {
  content: ""; position: absolute; top: 4px; right: 364px; width: 190px; height: 50px; z-index: 0;
  pointer-events: none; opacity: .85;
  background: url("/static/img/season/halloween-bats.svg") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-season="halloween"] .appbar::before { animation: season-bats 3.2s var(--ease-out-lg) 1 both; }
}
@keyframes season-bats {
  0%   { opacity: 0;   transform: translate(46px, 10px); }
  35%  { opacity: .85; }
  100% { opacity: .85; transform: translate(0, 0); }
}
@media (max-width: 1200px) { html[data-season="halloween"] .appbar::before { display: none; } }

/* ---------- web over the logo box's top-right corner, spider hanging from it ---------- */
html[data-season="halloween"] .brand { position: relative; overflow: hidden; }
html[data-season="halloween"] .brand::before {
  content: ""; position: absolute; top: 0; right: 0; width: 76px; height: 76px; z-index: 1;
  pointer-events: none;
  background: url("/static/img/season/halloween-web.svg") right top / 100% 100% no-repeat;
}
html[data-season="halloween"] .season-hang {
  display: block; position: absolute; top: 0; right: 7px; width: 16px; height: 36px; z-index: 2;
  pointer-events: none; transform-origin: 50% 0;
  background:
    url("/static/img/season/spider.svg") center bottom / 15px 15px no-repeat,
    linear-gradient(rgba(92,95,122,.85), rgba(92,95,122,.85)) center top / 1px 22px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-season="halloween"] .season-hang { animation: season-sway 1s var(--ease-out-sm) 1 both; }
}
@keyframes season-sway {
  0%   { transform: rotate(0); }
  30%  { transform: rotate(14deg); }
  62%  { transform: rotate(-7deg); }
  85%  { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
@media (max-width: 560px) {
  html[data-season="halloween"] .season-hang, html[data-season="halloween"] .brand::before { display: none; }
}

/* ---------- active nav line in pumpkin orange ---------- */
html[data-season="halloween"] .mainnav a.active { border-bottom-color: #f58a1f; }

/* ---------- buttons: the top bar's dusk gradient ----------
   Primary (.btn without .secondary/.danger, incl. the AC-blue page action — app.css gives the teal
   gradient) only. White text stays >= 5.8:1 on the darkest-to-lightest stops (the bar's
   own gradient ends lighter teal, which is under 4.5:1 for 13px text, so the end stop is
   held at #0a6f77). Secondary and danger buttons are left as they are. */
html[data-season="halloween"] .btn:not(.secondary):not(.danger) {
  background: linear-gradient(97deg, #2b1250 0%, #3a2a78 30%, #0c5079 66%, #0a6f77 100%);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(43,18,80,.35);
}
@media (hover: hover) {
  html[data-season="halloween"] .btn:not(.secondary):not(.danger):not([disabled]):hover {
    filter: brightness(1.18);
    box-shadow: 0 6px 18px rgba(43,18,80,.42), 0 0 0 1px rgba(245,138,31,.55);
  }
}
html[data-season="halloween"] .btn:focus-visible { outline-color: #f58a1f; }

/* ---------- Workloads "Days to show" button: same dusk gradient ---------- */
html[data-season="halloween"] .showdd-btn {
  background: linear-gradient(97deg, #2b1250 0%, #3a2a78 30%, #0c5079 66%, #0a6f77 100%);
  box-shadow: 0 2px 10px rgba(43,18,80,.35);
  transition: filter .15s, box-shadow .15s, opacity .15s;
}
@media (hover: hover) {
  html[data-season="halloween"] .showdd-btn:hover {
    filter: brightness(1.18);
    box-shadow: 0 6px 18px rgba(43,18,80,.42), 0 0 0 1px rgba(245,138,31,.55);
  }
}
html[data-season="halloween"] .showdd-menu button[aria-selected="true"] { color: #3a2a78; background: #efe9f7; }

/* ---------- "Active" pills (Patients list, patient header) ---------- */
html[data-season="halloween"] .pill.on {
  background: linear-gradient(97deg, #2b1250 0%, #3a2a78 30%, #0c5079 66%, #0a6f77 100%);
  box-shadow: 0 2px 8px rgba(43,18,80,.3);
}
html[data-season="halloween"] table.ledger .pill.on { box-shadow: none; }

/* ---------- patient name (Activity / patient header): dusk-gradient text ---------- */
html[data-season="halloween"] .patient-strip .name,
html[data-season="halloween"] .patient-strip .name a {
  background: linear-gradient(97deg, #2b1250 0%, #4a2a8a 35%, #0c5079 70%, #0a6f77 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- reward ghost (Workloads, queue cleared) ---------- */
html[data-season="halloween"] tr[data-season-reward] td { position: relative; }
html[data-season="halloween"] .season-ghost {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 40px; margin: -20px 0 0 -17px;
  pointer-events: none; z-index: 3;
  background: url("/static/img/season/ghost.svg") center / contain no-repeat;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-season="halloween"] .season-ghost { animation: season-ghost-rise 1.4s var(--ease-out-md) 1 both; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-season="halloween"] .season-ghost { opacity: .95; } /* still; JS removes it after ~1.5s */
}
@keyframes season-ghost-rise {
  0%   { opacity: 0;   transform: translateY(14px) scale(.9); }
  25%  { opacity: .95; }
  100% { opacity: 0;   transform: translateY(-64px) scale(1.05); }
}

/* ---------- print: nothing seasonal ---------- */
@media print {
  html[data-season="halloween"] .season-hang, html[data-season="halloween"] .season-ghost,
  html[data-season="halloween"] .appbar::after, html[data-season="halloween"] .appbar::before,
  html[data-season="halloween"] .brand::before, html[data-season="halloween"] .auth-wrap::before { display: none; }
  html[data-season="halloween"] .btn:not(.secondary):not(.danger) { background: var(--grad-teal); box-shadow: none; }
  html[data-season="halloween"] .mainnav a.active { border-bottom-color: #fff; }
  html[data-season="halloween"] .auth-wrap { background: #fff; }
  html[data-season="halloween"] .appbar { background: var(--grad); }
  html[data-season="halloween"] .pill.on { background: var(--grad-teal); }
}

/* ---------- phones (<= 600px): the app bar's menu panel (mobile pass, 10/01/26) ----------
   The theme pins every direct child of .appbar to position:relative and pads .mainnav /
   .appbar-right for the silhouette strip. On a phone .mainnav is an absolutely positioned
   panel under the bar and .appbar-right must not become the containing block of the search
   and user-menu sheets, so the theme's pins are undone here, and the strip shrinks to a
   sliver behind the 56px bar. Nothing above 600px changes. */
@media (max-width: 600px) {
  html[data-season="halloween"] .appbar > .mainnav {
    position: absolute; z-index: 40; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  html[data-season="halloween"] .appbar > .appbar-right { position: static; padding-bottom: 6px; }
  html[data-season="halloween"] .appbar::after {
    height: 16px;
    background-size: auto 16px, 100% 16px;
  }
}