/* =====================================================================
   Holiday look (Bryan, 2026-10-03) — Christmas / winter.
   Everything here only applies while <html> has the class "theme-holiday",
   which js/theme.js adds when a manager turns the 🎄 Holiday Look switch
   ON (Team tab). Switch OFF = the class is gone and the app looks exactly
   as before. Nothing in style.css was changed for this.

   The main color goes pine green, not red, on purpose: red stays the
   color for Deny / Remove / unread dots, so those never get mixed up
   with ordinary buttons.
   ===================================================================== */

html.theme-holiday {
  --color-bg: #f5f8f5;
  --color-primary: #146b3a;
  --color-primary-dark: #0f5530;
  --color-primary-tint: #e3f3e8;
  --color-chat-bg: #e6ede8;
  --holiday-stripe: repeating-linear-gradient(135deg, #c0262d 0 10px, #ffffff 10px 20px, #146b3a 20px 30px, #ffffff 30px 40px);
}

/* Candy-cane line under the top bar (phones/tablets), on top of the
   sidebar (desktop) and on top of the login box. */
html.theme-holiday .topbar {
  background: var(--holiday-stripe) bottom / 100% 4px no-repeat, var(--color-surface);
}
html.theme-holiday .sidebar,
html.theme-holiday .auth-card {
  background: var(--holiday-stripe) top / 100% 4px no-repeat, var(--color-surface);
}

/* A small tree next to the app name */
html.theme-holiday .topbar .brand::after,
html.theme-holiday .sb-brand b::after,
html.theme-holiday .auth-card h1::after {
  content: " 🎄";
}

html.theme-holiday .sched-day-tabs button.on { box-shadow: 0 3px 8px rgba(20, 107, 58, 0.35); }

/* ---------- Falling snow ----------
   Only on the login pages and on the first tab (team member Dashboard,
   manager Team). Schedule, Chat and the rest stay clear. Taps go straight
   through it, and phones set to "reduce motion" don't get it at all. */
.holiday-snow {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 30; /* under the phone bottom bar (40), chat (45) and popups (50) */
}
html.theme-holiday body:has(.auth-wrap) .holiday-snow,
html.theme-holiday body:has(#tab-dashboard.active) .holiday-snow,
html.theme-holiday body:has(#tab-team.active) .holiday-snow {
  display: block;
}
.holiday-snow i {
  position: absolute;
  top: 0;
  font-style: normal;
  color: #a9c8dd;
  user-select: none;
  will-change: transform;
  animation: holiday-snow-fall linear infinite;
}
@keyframes holiday-snow-fall {
  from { transform: translate3d(0, -8vh, 0); }
  to { transform: translate3d(24px, 108vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .holiday-snow { display: none !important; }
}