/* ============================================================
   DriveHub seasonal themes v4
   Image-led backgrounds with only three optional motion systems:
   Christmas snow, autumn leaves, and birthday balloons/flags.
   ============================================================ */

.el-topbar-mid {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.el-seasonal-preview-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid rgba(37,99,235,.22);
  border-radius:999px;
  background:rgba(239,246,255,.92);
  color:#1d4ed8;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

[data-el-theme="dark"] .el-seasonal-preview-badge {
  border-color:rgba(96,165,250,.28);
  background:rgba(30,58,95,.72);
  color:#bfdbfe;
}

.el-seasonal-pref-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.el-seasonal-pref-row > div { min-width:0; }
.el-seasonal-pref-row .el-pill { appearance:none; border:0; padding:0; cursor:pointer; }
.el-seasonal-pref-row .el-pill:focus-visible { outline:2px solid var(--el-new); outline-offset:3px; }
.el-seasonal-pref-row .el-pill:disabled { cursor:wait; opacity:.7; }
.el-seasonal-profile-section .el-pw-msg { margin-top:10px; }

/* The dashboard shell owns the stacking context. The entire working UI remains
   above the image and particle layer, so decorations cannot cover or intercept it. */
.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) {
  isolation:isolate;
  --el-seasonal-bg-light-start:#eef4f8;
  --el-seasonal-bg-light-end:#ffffff;
  --el-seasonal-bg-dark-start:#101418;
  --el-seasonal-bg-dark-end:#17191c;
  --el-seasonal-accent-1:#ffffff;
  --el-seasonal-accent-2:#a8c8df;
  --el-seasonal-accent-3:#3452ff;
  --el-seasonal-background-image:none;
}

.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) .el-topbar,
.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) .el-sidebar,
.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) .el-main,
.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) .el-view-custom-page {
  position:relative;
  z-index:2;
}

.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) .el-main,
.el-db[data-el-seasonal-theme]:not([data-el-seasonal-theme=""]) .el-view-custom-page {
  background:transparent;
}

.el-seasonal-layer {
  position:absolute;
  top:var(--el-th);
  right:0;
  bottom:0;
  left:var(--el-sw);
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:layout style paint;
  isolation:isolate;
}

.el-seasonal-layer,
.el-seasonal-layer *,
.el-seasonal-layer *::before,
.el-seasonal-layer *::after {
  box-sizing:border-box;
  pointer-events:none;
}

.el-seasonal-backdrop {
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  background:linear-gradient(145deg,var(--el-seasonal-bg-light-start),var(--el-seasonal-bg-light-end));
}

.el-seasonal-backdrop::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--el-seasonal-background-image);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

.el-seasonal-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background:linear-gradient(145deg,var(--el-seasonal-bg-light-start),transparent 48%,var(--el-seasonal-bg-light-end));
}

[data-el-theme="dark"] .el-seasonal-backdrop {
  background:linear-gradient(145deg,var(--el-seasonal-bg-dark-start),var(--el-seasonal-bg-dark-end));
}

[data-el-theme="dark"] .el-seasonal-backdrop::after {
  opacity:.24;
  background:linear-gradient(145deg,var(--el-seasonal-bg-dark-start),transparent 48%,var(--el-seasonal-bg-dark-end));
}

.el-seasonal-particle {
  position:absolute;
  z-index:1;
  display:block;
  will-change:transform,opacity;
}

.el-seasonal-particle svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

/* Optional low-contrast column tint remains unchanged. */
.el-db[data-el-seasonal-tint-columns="on"] .el-kcol {
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0,var(--el-surface) 96px);
}

[data-el-theme="dark"][data-el-seasonal-tint-columns="on"] .el-kcol {
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0,var(--el-surface) 96px);
}

.el-db[data-el-seasonal-theme="christmas"][data-el-seasonal-tint-columns="on"] .el-kcol {
  background:linear-gradient(180deg,rgba(224,241,252,.56) 0,var(--el-surface) 98px);
}

.el-db[data-el-seasonal-theme="autumn"][data-el-seasonal-tint-columns="on"] .el-kcol {
  background:linear-gradient(180deg,rgba(251,229,199,.5) 0,var(--el-surface) 98px);
}

[data-el-theme="dark"][data-el-seasonal-theme="christmas"][data-el-seasonal-tint-columns="on"] .el-kcol {
  background:linear-gradient(180deg,rgba(76,112,135,.18) 0,var(--el-surface) 98px);
}

[data-el-theme="dark"][data-el-seasonal-theme="autumn"][data-el-seasonal-tint-columns="on"] .el-kcol {
  background:linear-gradient(180deg,rgba(138,77,35,.15) 0,var(--el-surface) 98px);
}

/* Christmas: simple, natural snowfall. */
.el-seasonal-snowflake {
  top:-10vh;
  left:var(--el-p-x);
  width:var(--el-p-size);
  height:var(--el-p-size);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  opacity:var(--el-p-opacity);
  box-shadow:0 0 4px rgba(198,226,244,.24);
  animation:elSeasonalSnowfall var(--el-p-duration) linear var(--el-p-delay) infinite;
}

.el-seasonal-snowflake.is-near {
  box-shadow:0 0 7px rgba(255,255,255,.5);
}

.el-seasonal-snowflake.is-far {
  filter:blur(.7px);
  opacity:.34;
}

@keyframes elSeasonalSnowfall {
  0% { transform:translate3d(0,-12vh,0); opacity:0; }
  8% { opacity:var(--el-p-opacity); }
  38% { transform:translate3d(var(--el-p-drift),35vh,0); }
  72% { transform:translate3d(0,76vh,0); }
  100% { transform:translate3d(var(--el-p-drift),114vh,0); opacity:.08; }
}

/* Autumn: brown and orange leaves moving in gusts. */
.el-seasonal-leaf {
  top:-14vh;
  left:var(--el-p-x);
  width:var(--el-p-size);
  height:var(--el-p-size);
  color:#b85a2b;
  opacity:var(--el-p-opacity);
  transform-origin:50% 48%;
  animation:elSeasonalLeafWind var(--el-p-duration) cubic-bezier(.35,.05,.55,.95) var(--el-p-delay) infinite;
}

.el-seasonal-leaf.is-leaf-2 { color:#d47a28; }
.el-seasonal-leaf.is-leaf-3 { color:#7f3f24; }
.el-seasonal-leaf svg > path:first-child { fill:currentColor; }
.el-seasonal-leaf-vein { fill:none; stroke:rgba(78,38,20,.34); stroke-width:1; stroke-linecap:round; }

@keyframes elSeasonalLeafWind {
  0% { transform:translate3d(0,-16vh,0) rotate(var(--el-p-rotate)); opacity:0; }
  7% { opacity:var(--el-p-opacity); }
  28% { transform:translate3d(var(--el-p-drift),20vh,0) rotate(calc(var(--el-p-rotate) + 190deg)); }
  54% { transform:translate3d(0,48vh,0) rotate(calc(var(--el-p-rotate) + 410deg)); }
  78% { transform:translate3d(var(--el-p-drift),76vh,0) rotate(calc(var(--el-p-rotate) + 650deg)); }
  100% { transform:translate3d(0,116vh,0) rotate(calc(var(--el-p-rotate) + 900deg)); opacity:.04; }
}

/* Birthday balloons. */
.el-seasonal-balloon {
  left:var(--el-p-x);
  bottom:-120px;
  width:var(--el-p-size);
  height:calc(var(--el-p-size) + 22px);
  opacity:0;
  animation:elSeasonalBalloonRise var(--el-p-duration) ease-in-out var(--el-p-delay) infinite;
}

.el-seasonal-balloon-body {
  position:absolute;
  top:0;
  left:8%;
  width:84%;
  aspect-ratio:.78;
  border-radius:50% 50% 48% 48%;
  background:var(--el-seasonal-accent-1);
  box-shadow:inset -6px -8px 12px rgba(31,41,78,.12),inset 4px 3px 8px rgba(255,255,255,.24);
}

.el-seasonal-balloon-body::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:8px;
  height:8px;
  background:inherit;
  transform:translateX(-50%) rotate(45deg);
}

.el-seasonal-balloon-string {
  position:absolute;
  top:58%;
  left:50%;
  width:1px;
  height:42%;
  background:rgba(59,65,85,.28);
  transform:translateX(-50%) rotate(2deg);
  transform-origin:top;
}

.el-seasonal-balloon.is-balloon-2 .el-seasonal-balloon-body { background:var(--el-seasonal-accent-2); }
.el-seasonal-balloon.is-balloon-3 .el-seasonal-balloon-body { background:var(--el-seasonal-accent-3); }

@keyframes elSeasonalBalloonRise {
  0%,22% { transform:translate3d(0,0,0) rotate(-2deg); opacity:0; }
  27% { opacity:var(--el-p-opacity); }
  52% { transform:translate3d(var(--el-p-drift),-46vh,0) rotate(3deg); }
  76% { transform:translate3d(0,-90vh,0) rotate(-3deg); opacity:var(--el-p-opacity); }
  84%,100% { transform:translate3d(var(--el-p-drift),-118vh,0) rotate(2deg); opacity:0; }
}

/* Birthday Dannebrog. */
.el-seasonal-danish-flag {
  top:-12vh;
  left:var(--el-p-x);
  width:calc(var(--el-p-size) + 14px);
  height:var(--el-p-size);
  opacity:0;
  animation:elSeasonalFlagDrift var(--el-p-duration) ease-in-out var(--el-p-delay) infinite;
}

.el-seasonal-danish-flag-cloth {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:2px;
  background:#c8102e;
  box-shadow:0 3px 8px rgba(62,18,27,.15);
  transform-origin:left center;
  animation:elSeasonalFlagFlutter 1.8s ease-in-out infinite alternate;
}

.el-seasonal-danish-flag-cloth::before,
.el-seasonal-danish-flag-cloth::after {
  content:"";
  position:absolute;
  z-index:1;
  background:#fff;
}

.el-seasonal-danish-flag-cloth::before {
  top:0;
  bottom:0;
  left:30%;
  width:12%;
}

.el-seasonal-danish-flag-cloth::after {
  top:42%;
  right:0;
  left:0;
  height:16%;
}

@keyframes elSeasonalFlagDrift {
  0%,18% { transform:translate3d(0,-14vh,0) rotate(var(--el-p-rotate)); opacity:0; }
  23% { opacity:var(--el-p-opacity); }
  48% { transform:translate3d(var(--el-p-drift),38vh,0) rotate(calc(var(--el-p-rotate) + 45deg)); }
  72% { transform:translate3d(0,76vh,0) rotate(calc(var(--el-p-rotate) - 25deg)); opacity:var(--el-p-opacity); }
  82%,100% { transform:translate3d(var(--el-p-drift),114vh,0) rotate(calc(var(--el-p-rotate) + 70deg)); opacity:0; }
}

@keyframes elSeasonalFlagFlutter {
  from { transform:skewY(-2deg) scaleX(.96); }
  to { transform:skewY(2deg) scaleX(1); }
}

/* Pause while dialogs are open or the browser tab is hidden. */
.el-db.el-seasonal-paused .el-seasonal-layer *,
.el-db.el-seasonal-paused .el-seasonal-layer *::before,
.el-db.el-seasonal-paused .el-seasonal-layer *::after {
  animation-play-state:paused !important;
}

/* Employee motion preference. The uploaded background image remains visible. */
.el-db[data-el-seasonal-motion="off"] .el-seasonal-particle {
  display:none;
}

/* Birthday greeting modal retained from the prior version, without generated art. */
.el-birthday-modal {
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}

.el-birthday-modal.is-open { opacity:1; visibility:visible; }
.el-birthday-modal-backdrop { position:absolute; inset:0; background:rgba(7,10,20,.58); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

.el-birthday-modal-card {
  position:relative;
  width:min(560px,100%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.68);
  border-radius:24px;
  padding:50px 42px 40px;
  text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,245,255,.97));
  box-shadow:0 32px 90px rgba(13,19,44,.28);
  transform:translateY(18px) scale(.97);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}

.el-birthday-modal.is-open .el-birthday-modal-card { transform:translateY(0) scale(1); }
.el-db[data-el-theme="dark"] .el-birthday-modal-card { color:#fff; background:linear-gradient(145deg,rgba(26,20,44,.98),rgba(15,20,42,.97)); border-color:rgba(255,255,255,.15); }
.el-birthday-modal-close { position:absolute; top:16px; right:18px; width:38px; height:38px; border:0; border-radius:50%; font-size:25px; line-height:1; background:rgba(15,23,42,.07); cursor:pointer; }
.el-birthday-modal-close:hover { background:rgba(15,23,42,.12); }
.el-birthday-modal-kicker { margin-bottom:10px; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#6f63d9; }
.el-birthday-modal h2 { margin:0 0 14px; font-size:clamp(28px,4vw,42px); line-height:1.08; letter-spacing:-.035em; }
.el-birthday-modal-message { max-width:440px; margin:0 auto 28px; color:#5d6474; font-size:16px; line-height:1.65; }
.el-birthday-modal-message p { margin:0 0 12px; color:inherit; font:inherit; line-height:inherit; }
.el-birthday-modal-message p:last-child { margin-bottom:0; }
.el-db[data-el-theme="dark"] .el-birthday-modal-message { color:#c8ccda; }
.el-birthday-modal .el-btn { position:relative; min-height:46px; padding:0 22px; border-radius:12px; }

@media (max-width:900px) {
  .el-seasonal-layer { left:0; bottom:64px; }
  .el-topbar-mid { justify-content:flex-end; }
  .el-seasonal-preview-badge { font-size:.61rem; padding:4px 7px; }
  .el-seasonal-particle.is-mobile-reduced { display:none; }
  .el-db[data-el-seasonal-mobile-motion="off"] .el-seasonal-particle { display:none; }
  .el-birthday-modal-card { padding:46px 25px 34px; border-radius:22px; }
}

@media (max-width:640px) {
  .el-seasonal-preview-badge { display:none; }
  .el-seasonal-pref-row { gap:12px; }
  .el-birthday-modal { padding:14px; }
  .el-birthday-modal-card { padding:44px 20px 30px; }
  .el-birthday-modal h2 { font-size:30px; }
}

@media (prefers-reduced-motion:reduce) {
  .el-seasonal-particle { display:none !important; }
  .el-birthday-modal,
  .el-birthday-modal-card { transition:none !important; }
}