/* Babo CRM festive skin "Kerst" (Nick, 8 Nov 2026). Sits on top of skin-babo.css: <html data-skin="babo" data-festive="xmas">
   recolours the orange skin to Christmas red/green and adds snow, string lights, a flying sleigh and a banner. Day/Night still flips
   data-mode. From 26 Dec the banner turns to New Year with fireworks (data-festive="newyear"); from 2 Jan the server renders Dark
   Orange again by itself (web/deps.py ui_theme). Loaded only while the Kerst theme is chosen. */
html[data-festive]:root{--accent:#e4322b;--accent-ink:#ff6b5e;--accent-soft:rgba(228,50,43,.16);--accent-hover:#ff4a40;--blue:#7fd38a;--blue-soft:rgba(127,211,138,.16);
  --good:#3ddc6a;--warn:#ffcc33;--bad:#ff4d36;--bg:#07101c;--panel:rgba(12,22,38,.84);--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.06);
  --side:rgba(8,18,32,.78);--side-active:rgba(228,50,43,.16);--glow:0 0 0 1px rgba(228,50,43,.2),0 0 18px -6px rgba(228,50,43,.35)}
html[data-festive] body{background-color:#07101c;background-image:radial-gradient(70vw 120vh at 110% 40%,rgba(30,120,80,.22),transparent 60%),radial-gradient(60vw 80vh at -10% 100%,rgba(228,50,43,.14),transparent 60%)}
html[data-festive] .sidefx{background:linear-gradient(90deg,rgba(60,170,90,.16),rgba(60,170,90,.05) 45%,transparent 80%)}
html[data-festive] .mainfx{background:linear-gradient(270deg,rgba(228,50,43,.10),rgba(228,50,43,.03) 45%,transparent 80%)}
html[data-festive] .sidefx .particles circle,html[data-festive] .mainfx .particles circle{fill:#fff}
html[data-festive] .side .cat{border-bottom:1px solid rgba(61,220,106,.5)}
html[data-festive] .side .cat .cic{color:#3ddc6a}
html[data-festive] .side a.active{background:linear-gradient(90deg,rgba(228,50,43,.26),rgba(228,50,43,.06));box-shadow:inset 3px 0 0 #e4322b,inset 0 0 0 1px rgba(228,50,43,.25)}
html[data-festive] .btn.primary,html[data-festive] button.primary{background:linear-gradient(180deg,#ff4a40,#d6251f);box-shadow:0 0 14px -4px rgba(228,50,43,.55)}
html[data-festive] .btn.primary:hover,html[data-festive] button.primary:hover{background:linear-gradient(180deg,#ff5e55,#e0302a)}
html[data-festive] .side .count.hot{background:#e4322b;box-shadow:0 0 8px -2px rgba(228,50,43,.6)}
html[data-festive] .daynight span.on{background:#2e9e4f;box-shadow:0 0 10px -3px rgba(61,220,106,.6)}
html[data-festive] .cmdbar form{border-color:rgba(61,220,106,.35);position:relative}
/* candy-cane stripe along the top of every panel */
html[data-festive] main .panel{border-top:3px solid transparent;border-image:repeating-linear-gradient(135deg,#fff 0 8px,#e4322b 8px 16px) 1;border-left:0;border-right:0;border-bottom:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
/* snow cap on the brand and the search bar */
html[data-festive] .side .brand img{box-shadow:0 -4px 0 0 #fff,var(--glow)}
html[data-festive] .cmdbar form::before{content:"";position:absolute;left:12%;right:8%;top:-5px;height:7px;border-radius:0 0 8px 8px;background:#fff;clip-path:polygon(0 0,100% 0,96% 100%,88% 40%,80% 100%,70% 55%,60% 100%,50% 45%,40% 100%,30% 60%,20% 100%,10% 50%,4% 100%)}
/* ---------- decorations (templates/_xmasfx.html) ---------- */
.xmasfx{display:none}
html[data-festive] .xmasfx{display:contents}
.xmas-snow{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.xmas-snow i{position:absolute;top:-10px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);animation:xfall linear infinite}
@keyframes xfall{0%{transform:translate(0,-10px)}100%{transform:translate(var(--drift,20px),105vh)}}
.xmas-lights{position:fixed;top:0;left:var(--side-w);right:0;height:14px;pointer-events:none;z-index:60;border-top:2px solid rgba(30,70,40,.9)}
.xmas-lights b{position:absolute;top:2px;width:9px;height:13px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:currentColor;box-shadow:0 0 10px 2px currentColor;animation:xblink 1.6s ease-in-out infinite}
.xmas-lights .c0{color:#ff4d36}.xmas-lights .c1{color:#3ddc6a;animation-delay:.4s}.xmas-lights .c2{color:#ffcc33;animation-delay:.8s}.xmas-lights .c3{color:#4fa8ff;animation-delay:1.2s}
@keyframes xblink{0%,100%{opacity:1}50%{opacity:.35;box-shadow:0 0 3px 0 currentColor}}
.xmas-sleigh{position:fixed;top:44px;right:0;font-size:30px;letter-spacing:-6px;pointer-events:none;z-index:4;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));transform:translateX(40vw) rotate(-6deg);animation:xfly 150s linear infinite}
@keyframes xfly{0%{transform:translateX(40vw) rotate(-6deg)}30%{transform:translateX(-120vw) rotate(-6deg)}100%{transform:translateX(-120vw) rotate(-6deg)}}
.xmas-corner{position:fixed;left:18px;bottom:72px;font-size:56px;pointer-events:none;z-index:4;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.xmas-tree{position:fixed;left:150px;bottom:62px;font-size:72px;pointer-events:none;z-index:4;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.xmas-banner{position:fixed;left:calc(50% + var(--side-w) / 2);bottom:14px;transform:translateX(-50%);z-index:6;font:600 13px var(--sans);color:#fff;background:rgba(12,22,38,.85);border:1px solid rgba(61,220,106,.4);padding:6px 16px;border-radius:999px;box-shadow:0 0 24px -6px rgba(61,220,106,.5);pointer-events:none}
/* New Year (26 Dec - 1 Jan): fireworks instead of snow, snowman and tree stay, the sleigh is gone */
html[data-festive=newyear] .xmas-snow,html[data-festive=newyear] .xmas-sleigh{display:none}
.xmas-fw{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.xmas-fw i{position:absolute;width:7px;height:7px;border-radius:50%;opacity:0;box-shadow:0 -60px 0 -2px currentColor,42px -42px 0 -2px currentColor,60px 0 0 -2px currentColor,42px 42px 0 -2px currentColor,0 60px 0 -2px currentColor,-42px 42px 0 -2px currentColor,-60px 0 0 -2px currentColor,-42px -42px 0 -2px currentColor,0 -30px 0 -3px currentColor,21px -21px 0 -3px currentColor,30px 0 0 -3px currentColor,21px 21px 0 -3px currentColor,0 30px 0 -3px currentColor,-21px 21px 0 -3px currentColor,-30px 0 0 -3px currentColor,-21px -21px 0 -3px currentColor;animation:xburst 3.2s ease-out infinite}
@keyframes xburst{0%{transform:scale(.15);opacity:.9}55%{opacity:.9}100%{transform:scale(1.7);opacity:0}}
html[data-festive=xmas] .xmas-fw{display:none}
/* ---------- Sneeuwdag: the light colour set ---------- */
html[data-festive][data-mode=light]:root{--bg:#eef3f8;--panel:rgba(255,255,255,.86);--ink:#17171a;--ink-2:#4e5560;--ink-3:#7f8792;--line:rgba(0,0,0,.09);--line-2:rgba(0,0,0,.055);
  --accent:#c8231d;--accent-ink:#b51d17;--accent-soft:rgba(200,35,29,.12);--accent-hover:#de2f28;--blue:#1f8a3f;--blue-soft:rgba(31,138,63,.14);--good:#1f8a3f;--warn:#b58500;--bad:#c8231d;
  --side:rgba(255,255,255,.74);--side-ink:#2a2a2f;--side-dim:#6f6f77;--side-active:rgba(200,35,29,.12);--side-line:rgba(0,0,0,.07);--glow:0 0 0 1px rgba(200,35,29,.18),0 0 18px -6px rgba(200,35,29,.25);color-scheme:light}
html[data-festive][data-mode=light] body{background-color:#eef3f8;background-image:radial-gradient(70vw 120vh at 110% 40%,rgba(31,138,63,.14),transparent 60%),radial-gradient(60vw 80vh at -10% 100%,rgba(200,35,29,.10),transparent 60%)}
html[data-festive][data-mode=light] .sidefx .particles circle,html[data-festive][data-mode=light] .mainfx .particles circle{fill:#9fc3e6}
html[data-festive][data-mode=light] .xmas-snow i{box-shadow:0 0 4px rgba(120,160,200,.9),inset 0 0 0 1px rgba(150,190,230,.8)}
html[data-festive][data-mode=light] .xmas-banner{background:rgba(255,255,255,.9);color:#17171a;border-color:rgba(31,138,63,.4)}
html[data-festive][data-mode=light] .side .cat{border-bottom-color:rgba(31,138,63,.5)}html[data-festive][data-mode=light] .side .cat .cic{color:#1f8a3f}
html[data-festive][data-mode=light] .daynight span.on{background:#1f8a3f}
html[data-festive][data-mode=light] .side a.active{background:linear-gradient(90deg,rgba(200,35,29,.18),rgba(200,35,29,.05));box-shadow:inset 3px 0 0 #c8231d,inset 0 0 0 1px rgba(200,35,29,.2)}
html[data-festive][data-mode=light] .side .brand img{box-shadow:0 -4px 0 0 #fff,0 0 0 1px rgba(0,0,0,.1)}
html[data-festive][data-mode=light] .xmas-lights{border-top-color:rgba(31,138,63,.6)}
@media (prefers-reduced-motion: reduce){.xmas-snow i,.xmas-lights b,.xmas-sleigh,.xmas-fw i{animation:none}}