/* Playful sidebar (core/sidebar-playful.js). Everything is scoped to body.psb-on, which is set only
   while the user has the Playful style, so the Plain sidebar is untouched.
   Motion: transform / opacity only, 250 to 500 ms, nothing loops at rest except the dog's gentle
   breath every 12 s. prefers-reduced-motion turns all motion off (badges stay). */

/* ---- warmth: faint paw pattern ---- */
body.psb-on .sidebar{background-color:var(--black);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23FFF7EE' fill-opacity='.045'%3E%3Cg transform='translate(28 34) rotate(-18)'%3E%3Cellipse cx='0' cy='8' rx='8' ry='6.5'/%3E%3Cellipse cx='-9' cy='-3' rx='3' ry='4'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='4' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='10' cy='-3' rx='3' ry='4'/%3E%3C/g%3E%3Cg transform='translate(100 98) rotate(16)'%3E%3Cellipse cx='0' cy='8' rx='8' ry='6.5'/%3E%3Cellipse cx='-9' cy='-3' rx='3' ry='4'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='4' cy='-8' rx='3' ry='4'/%3E%3Cellipse cx='10' cy='-3' rx='3' ry='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:140px 140px;background-repeat:repeat}

/* ---- header: breathing dog + greeting ---- */
body.psb-on .sidebar-brand.peppy-side-brand img,body.psb-on .sidebar-by .peppy-mini{animation:psb-breathe 12s ease-in-out 3s infinite;transform-origin:50% 90%}
@keyframes psb-breathe{0%,9%,100%{transform:none}2.5%{transform:translateY(-3px) scale(1.05,1.04)}5%{transform:translateY(0) scale(1.03,.97)}7%{transform:scale(1)}}
body.psb-on .sidebar-brand small.psb-greet,body.psb-on .psb-greet{display:block;margin-top:4px;font-family:var(--body,inherit);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#E3A867;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.psb-on .sidebar-brand-store .psb-greet{max-width:none;text-align:left}

/* ---- groups ---- */
body.psb-on .sidebar .sidebar-group{position:relative;padding-top:8px}
body.psb-on .psb-sec{display:flex;flex-direction:column;gap:2px;position:relative}
body.psb-on .psb-sec + .psb-sec{margin-top:7px}
body.psb-on .psb-sec[data-g="settings"]{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,248,238,.08)}
body.psb-on .psb-h{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(227,168,103,.85);line-height:16px;padding:0 12px;margin:0 0 1px}

/* ---- items + sliding pill ---- */
body.psb-on .sidebar .nav-item{height:34px;border-radius:999px;z-index:1;transition:background-color .2s,color .2s}
body.psb-on .sidebar .nav-item:hover{background:rgba(255,247,238,.07)}
body.psb-on .sidebar .nav-item.active{background:transparent;color:#fff}
body.psb-on .sidebar .nav-item.active::before{display:none}
body.psb-on .sidebar .nav-item.active svg{color:var(--orange)}
body.psb-on .sidebar .nav-item:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
body.psb-on .psb-pill{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:999px;background:rgba(251,139,35,.2);box-shadow:inset 0 0 0 1px rgba(251,139,35,.42);opacity:0;transition:transform .42s cubic-bezier(.34,1.32,.5,1),opacity .2s;will-change:transform}

/* ---- badges ---- */
body.psb-on .nav-badge{color:var(--black)}
body.psb-on a[data-path="/stock"] .nav-badge{background:#D92D2D;color:#fff}
body.psb-on .nav-badge.psb-pop{animation:psb-badge .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes psb-badge{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ---- Today total by Lock screen ---- */
body.psb-on .psb-today{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:8px 14px;border-radius:999px;background:rgba(227,168,103,.13);color:#FFF7EE;font-family:var(--display);font-size:13.5px;font-weight:600}
body.psb-on .psb-today.hidden{display:none}
body.psb-on .psb-today svg{width:17px;height:17px;flex:none;color:var(--orange)}
body.psb-on .psb-today-lbl{color:rgba(255,247,238,.75)}
body.psb-on .psb-today-val{margin-left:auto;color:var(--orange);font-weight:700}
body.psb-on .psb-today.psb-up svg{animation:psb-coin .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes psb-coin{0%{transform:none}45%{transform:translateY(-4px) rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* ---- icon micro-animations: hover, keyboard focus, and the moment an item becomes active ---- */
body.psb-on :is(.sidebar,.bottom-nav,.more-grid) :is(a,button):is(:hover,:focus-visible,:active,.psb-kick) > svg:first-of-type{animation:var(--psb-a,none) var(--psb-d,.42s) cubic-bezier(.3,1.35,.5,1)}
body.psb-on [data-path="/sell"]{--psb-a:psb-bounce}
body.psb-on [data-path="/backdate"]{--psb-a:psb-flip}
body.psb-on [data-path="/products"]{--psb-a:psb-lid}
body.psb-on [data-path="/stock"]{--psb-a:psb-wiggle}
body.psb-on [data-path="/suppliers"]{--psb-a:psb-roll;--psb-d:.5s}
body.psb-on [data-path="/sales"]{--psb-a:psb-slide}
body.psb-on [data-path="/drawer"]{--psb-a:psb-drawer;--psb-d:.46s}
body.psb-on [data-path="/reports"]{--psb-a:psb-grow}
body.psb-on [data-path="/insights"]{--psb-a:psb-twinkle;--psb-d:.5s}
body.psb-on [data-path="/staff"]{--psb-a:psb-nod;--psb-d:.48s}
body.psb-on [data-path="/announcements"]{--psb-a:psb-pulse}
body.psb-on [data-path="/support"]{--psb-a:psb-bubble;--psb-d:.38s}
body.psb-on [data-path="/guide"]{--psb-a:psb-open;--psb-d:.48s}
body.psb-on [data-path="/activity"]{--psb-a:psb-tick-host;--psb-d:.3s}
body.psb-on [data-path="/settings"]{--psb-a:psb-gear;--psb-d:.5s}
body.psb-on [data-action="tour"]{--psb-a:psb-tick-host;--psb-d:.3s}
/* part animations: the clock hand ticks, the compass needle swings, the megaphone waves pulse */
body.psb-on :is(.sidebar,.bottom-nav,.more-grid) [data-path="/activity"]:is(:hover,:focus-visible,:active,.psb-kick) svg path:nth-child(3){transform-box:view-box;transform-origin:12px 12px;animation:psb-hand .5s steps(1,end)}
body.psb-on :is(.sidebar,.more-grid) [data-action="tour"]:is(:hover,:focus-visible,:active,.psb-kick) svg path{transform-box:view-box;transform-origin:12px 12px;animation:psb-needle .5s cubic-bezier(.3,1.4,.5,1)}
body.psb-on :is(.sidebar,.bottom-nav,.more-grid) [data-path="/announcements"]:is(:hover,:focus-visible,:active,.psb-kick) svg path:nth-child(n+2){animation:psb-wave .45s ease-out}
body.psb-on :is(.sidebar,.bottom-nav,.more-grid) [data-path="/announcements"]:is(:hover,:focus-visible,:active,.psb-kick) svg path:nth-child(3){animation-delay:.08s}
body.psb-on :is(.sidebar,.bottom-nav,.more-grid) [data-path="/sales"]:is(:hover,:focus-visible,:active,.psb-kick) svg path:nth-child(2){animation:psb-lines .42s ease-out}

@keyframes psb-bounce{0%{transform:none}35%{transform:translateY(-4px)}60%{transform:translateY(0) scale(1.06,.94)}80%{transform:translateY(-1.5px)}100%{transform:none}}
@keyframes psb-flip{0%{transform:perspective(60px) rotateX(0)}45%{transform:perspective(60px) rotateX(70deg)}100%{transform:perspective(60px) rotateX(0)}}
@keyframes psb-lid{0%{transform:none}40%{transform:translateY(-3px) scale(.94,1.08)}70%{transform:translateY(0) scale(1.06,.95)}100%{transform:none}}
@keyframes psb-wiggle{0%,100%{transform:none}20%{transform:rotate(-11deg)}45%{transform:rotate(9deg)}70%{transform:rotate(-5deg)}85%{transform:rotate(2deg)}}
@keyframes psb-roll{0%{transform:none}50%{transform:translateX(4px) rotate(-3deg)}75%{transform:translateX(-1px)}100%{transform:none}}
@keyframes psb-slide{0%{transform:none}45%{transform:translateY(-3px)}100%{transform:none}}
@keyframes psb-lines{0%{transform:none}45%{transform:translateX(2px)}100%{transform:none}}
@keyframes psb-drawer{0%{transform:none}45%{transform:translateX(3.5px)}70%{transform:translateX(-.5px)}100%{transform:none}}
@keyframes psb-grow{0%{transform:scaleY(1)}20%{transform:scaleY(.45)}70%{transform:scaleY(1.1)}100%{transform:scaleY(1)}}
body.psb-on [data-path="/reports"] svg{transform-origin:50% 92%}
@keyframes psb-twinkle{0%{transform:none}45%{transform:rotate(36deg) scale(1.22)}75%{transform:rotate(66deg) scale(.95)}100%{transform:rotate(72deg)}}
@keyframes psb-nod{0%,100%{transform:none}30%{transform:rotate(-8deg) translateY(1px)}65%{transform:rotate(5deg)}}
body.psb-on [data-path="/staff"] svg{transform-origin:50% 100%}
@keyframes psb-pulse{0%{transform:none}40%{transform:scale(1.15) rotate(-6deg)}100%{transform:none}}
@keyframes psb-wave{0%{opacity:.2}60%{opacity:1}100%{opacity:1}}
@keyframes psb-bubble{0%{transform:scale(1)}40%{transform:scale(1.22)}70%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes psb-open{0%{transform:perspective(50px) rotateY(0)}45%{transform:perspective(50px) rotateY(-32deg)}100%{transform:perspective(50px) rotateY(0)}}
@keyframes psb-tick-host{0%,100%{transform:none}}
@keyframes psb-hand{0%{transform:none}33%{transform:rotate(30deg)}66%{transform:rotate(60deg)}100%{transform:none}}
@keyframes psb-needle{0%{transform:none}35%{transform:rotate(40deg)}60%{transform:rotate(-22deg)}82%{transform:rotate(8deg)}100%{transform:none}}
@keyframes psb-gear{0%{transform:none}100%{transform:rotate(90deg)}}

/* ---- phones: bottom bar + grouped More sheet ---- */
body.psb-on .bottom-nav a.active svg{color:var(--orange)}
body.psb-on .bottom-nav a:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;border-radius:12px}
body.psb-on .more-grid.psb-more{row-gap:8px}
body.psb-on .psb-more-h{grid-column:1/-1;margin:8px 2px -2px;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A5A23}
body.psb-on .psb-more-h:first-child{margin-top:0}
body.psb-on .more-grid.psb-more .more-item{border-radius:14px}
body.psb-on .more-grid.psb-more .more-item.active{border-color:var(--orange);background:#FFF7EE}
body.psb-on .more-grid.psb-more .more-item.active svg{color:var(--orange-d,#E07510)}
body.psb-on .more-grid.psb-more .more-item:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
body.psb-on .more-grid.psb-more .more-logout{grid-column:1/-1;margin-top:6px}

/* ---- tablet icon rail: no headings, greeting or Today line ---- */
@media (max-width:1100px){
  body.psb-on .psb-h,body.psb-on .psb-greet,body.psb-on .psb-today{display:none}
  body.psb-on .psb-sec + .psb-sec{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,248,238,.07)}
}

@media (prefers-reduced-motion:reduce){
  body.psb-on .sidebar *,body.psb-on .bottom-nav *,body.psb-on .more-grid *,body.psb-on .sidebar-brand img{animation:none!important;transition:none!important}
}

/* Shorter laptop screens (e.g. 1440x900): tighten so Today and Lock screen fit without scrolling. */
@media (min-width:861px) and (max-height:980px){
  body.psb-on .sidebar .nav-item{height:30px}
  body.psb-on .psb-sec{gap:1px}
  body.psb-on .psb-sec + .psb-sec{margin-top:4px}
  body.psb-on .psb-h{line-height:14px}
  body.psb-on .psb-sec[data-g="settings"]{margin-top:5px;padding-top:5px}
  body.psb-on .psb-today{margin-top:6px;padding:6px 14px}
}