.nav-item[data-view="pending"]{display:none!important}
.nav-item[data-view="applications"]>span:not(.pending-application-count){font-size:0}
.nav-item[data-view="applications"]>span:not(.pending-application-count):after{content:"Pending";font-size:14px}
.nav-item[data-view="applications"] .pending-application-count{margin-left:auto;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#dc2626;font-size:16px;font-weight:900;line-height:1;box-shadow:none}
@media(max-width:900px){.nav-item[data-view="applications"]>span:not(.pending-application-count):after{font-size:11px}}
@media(max-width:600px){.nav-item[data-view="applications"]{position:relative}.nav-item[data-view="applications"]>span:not(.pending-application-count):after{font-size:10px}.nav-item[data-view="applications"] .pending-application-count{position:absolute;top:4px;right:5px;padding:0;font-size:14px;box-shadow:none}}

/* Settings moves only while its menu is selected. */
.settings-motion-icon .settings-orbit,.settings-motion-icon .settings-gear{transform-origin:12px 12px}
.nav-item[data-view="settings"] .settings-orbit{animation:settings-turn 3s linear infinite}
.nav-item[data-view="settings"] .settings-gear{animation:settings-turn 9s linear infinite reverse}
@keyframes settings-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.nav-item[data-view="settings"] .settings-orbit,.nav-item[data-view="settings"] .settings-gear{animation:none}}

.sidebar .nav-item[data-view="settings"] .settings-motion-icon{width:25px;height:25px}

.sidebar .nav-item[data-view="planner"] .planner-motion-icon{width:25px;height:25px}
.nav-item[data-view="planner"] .planner-pin{animation:planner-pin-bounce 1.8s ease-in-out infinite}
.nav-item[data-view="planner"] .planner-route{stroke-dasharray:3 2;animation:planner-route-flow 1.5s linear infinite}
@keyframes planner-pin-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes planner-route-flow{to{stroke-dashoffset:-10}}
@media(prefers-reduced-motion:reduce){.nav-item[data-view="planner"] .planner-pin,.nav-item[data-view="planner"] .planner-route{animation:none}}

/* Keep sidebar SVGs anchored; animate their internal details only. */
.sidebar .nav-item>.icon{animation:none;transform:none}

.sidebar .nav-item[data-view="records"] .client-records-motion-icon{width:25px;height:25px;animation:none}
.nav-item[data-view="records"] .client-card-person{animation:client-card-person 2.4s ease-in-out infinite}
.nav-item[data-view="records"] .client-card-line{stroke-dasharray:14;stroke-dashoffset:0;animation:client-card-write 2.4s ease-in-out infinite}
@keyframes client-card-person{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes client-card-write{0%,100%{stroke-dashoffset:0}45%{stroke-dashoffset:14}75%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.nav-item[data-view="records"] .client-card-person,.nav-item[data-view="records"] .client-card-line{animation:none}}

.sidebar .nav-item[data-view="applications"] .pending-motion-icon{width:25px;height:25px;animation:none;overflow:visible}
.pending-clock-hand{transform-origin:19px 10px}
.nav-item[data-view="applications"] .pending-clock-hand{animation:pending-clock-tick 3s linear infinite}
.nav-item[data-view="applications"] .pending-clock{animation:pending-clock-pulse 2s ease-in-out infinite;transform-origin:19px 10px}
@keyframes pending-clock-tick{to{transform:rotate(360deg)}}
@keyframes pending-clock-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.nav-item[data-view="applications"] .pending-clock-hand,.nav-item[data-view="applications"] .pending-clock{animation:none}}

.sidebar #sidebar-payment-entry .payment-entry-motion-icon{width:25px;height:25px;animation:none}
.sidebar #sidebar-payment-entry .payment-entry-motion-icon{animation:none}
.sidebar #sidebar-payment-entry .payment-entry-note{animation:payment-note-float 2s ease-in-out infinite}
@keyframes payment-note-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.sidebar #sidebar-payment-entry .payment-entry-note{animation:none}}

/* Custom icons animate their parts instead of moving the whole SVG. */
.sidebar .nav-item>.client-records-motion-icon,.sidebar .nav-item>.pending-motion-icon,.sidebar #sidebar-payment-entry>.payment-entry-motion-icon{animation:none}

/* Monochrome sidebar icons, including custom SVG details. */
body .sidebar .icon{color:#000;stroke:#000}
body .sidebar .icon [stroke]{stroke:#000}
body .sidebar .icon [fill]:not([fill="none"]):not([fill="white"]):not([fill="#fff"]){fill:white}

.sidebar .nav-item[data-view="network"]>.network-motion-icon{width:25px;height:25px;animation:none}
.network-motion-icon .network-icon-links{stroke-dasharray:4 2;animation:network-link-flow 2s linear infinite}
.network-motion-icon .network-icon-node{transform-box:fill-box;transform-origin:center;animation:network-node-pulse 2.4s ease-in-out infinite}
.network-motion-icon .network-icon-node:nth-of-type(2){animation-delay:.3s}
.network-motion-icon .network-icon-node:nth-of-type(3){animation-delay:.6s}
@keyframes network-link-flow{to{stroke-dashoffset:-12}}
@keyframes network-node-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.network-motion-icon .network-icon-links,.network-motion-icon .network-icon-node{animation:none}}

/* Whole-icon turn and shrink, matching the supplied recording. */
.sidebar .nav-item[data-view="network"] .network-share-motion{transform-box:view-box;transform-origin:12px 12px;animation:network-share-turn 4s ease-in-out infinite}
@keyframes network-share-turn{0%,38%{transform:rotate(0deg) scale(1)}47%{transform:rotate(40deg) scale(.85)}53%{transform:rotate(90deg) scale(.7)}57%{transform:rotate(150deg) scale(.65)}65%,100%{transform:rotate(360deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.sidebar .nav-item[data-view="network"] .network-share-motion{animation:none}}

/* Money bag and flipping coin from the supplied payment reference. */
.sidebar #sidebar-payment-entry>.icon.payment-entry-motion-icon{width:25px;height:25px;animation:none}
.sidebar #sidebar-payment-entry .payment-money-symbol{stroke-dasharray:26;animation:payment-money-draw 3s ease-in-out infinite}
.sidebar #sidebar-payment-entry .payment-top-coin{transform-box:view-box;transform-origin:19px 12.25px;animation:payment-coin-flip 3s ease-in-out infinite}
@keyframes payment-money-draw{0%,12%{stroke-dashoffset:26}38%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:26}}
@keyframes payment-coin-flip{0%,5%,35%,100%{transform:translateY(0) rotate(0deg)}15%{transform:translateY(-3px) rotate(-65deg)}23%{transform:translateY(-4px) rotate(-100deg)}}
@media(prefers-reduced-motion:reduce){.sidebar #sidebar-payment-entry .payment-money-symbol,.sidebar #sidebar-payment-entry .payment-top-coin{animation:none}}

.sidebar .nav-item[data-view="payments"]>.icon.payment-history-motion-icon{width:25px;height:25px;animation:none}
.history-chart-static{display:none}
@media(prefers-reduced-motion:reduce){.history-chart-animated{display:none}.history-chart-static{display:inline}}

.sidebar .nav-item[data-view="unavailable"]>.icon.not-serviceable-motion-icon{width:25px;height:25px;animation:none}
.unavailable-waves{transform-box:view-box;transform-origin:12px 14px;animation:unavailable-signal 2s ease-in-out infinite}
.unavailable-cross{transform-box:view-box;transform-origin:12px 19px;animation:unavailable-mark 2s ease-in-out infinite}
@keyframes unavailable-signal{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.88)}}
@keyframes unavailable-mark{0%,100%{transform:scale(1);opacity:1}35%,65%{transform:scale(.8);opacity:.55}}
@media(prefers-reduced-motion:reduce){.unavailable-waves,.unavailable-cross{animation:none}}

.sidebar .nav-item[data-view="odf"]>.icon.odf-motion-icon{width:25px;height:25px;animation:none}
.odf-cloud-connections{transform-box:view-box;transform-origin:12px 14px;animation:odf-connections-extend 2.8s ease-in-out infinite}
@keyframes odf-connections-extend{0%,20%,85%,100%{transform:scaleY(.75);opacity:1}40%,60%{transform:scaleY(1.15);opacity:.65}}
@media(prefers-reduced-motion:reduce){.odf-cloud-connections{animation:none}}

.sidebar #sidebar-router-pullout>.icon.pullout-motion-icon{width:25px;height:25px;animation:none}
.pullout-box-lid{transform-box:view-box;transform-origin:20px 7px;animation:pullout-lid-open 3s ease-in-out infinite}
.pullout-box-rays{animation:pullout-rays 3s ease-in-out infinite}
@keyframes pullout-lid-open{0%,25%,80%,100%{transform:translateY(0) rotate(0deg)}40%,60%{transform:translateY(-1px) rotate(10deg)}}
@keyframes pullout-rays{0%,30%,75%,100%{opacity:0}40%,60%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pullout-box-lid,.pullout-box-rays{animation:none}.pullout-box-rays{opacity:0}}

.sidebar .nav-item>.payroll-motion-icon{width:25px;height:25px;animation:none}
.payroll-icon-lines{stroke-dasharray:8;animation:payroll-lines-write 2.8s ease-in-out infinite}
@keyframes payroll-lines-write{0%,100%{stroke-dashoffset:0}40%{stroke-dashoffset:8}70%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.payroll-icon-lines{animation:none}}

.employee-helmet{transform-box:view-box;transform-origin:12px 12px;animation:employee-helmet-tilt 3s ease-in-out infinite}
.employee-day-pay{stroke-dasharray:12;animation:employee-pay-write 3s ease-in-out infinite}
@keyframes employee-helmet-tilt{0%,25%,70%,100%{transform:rotate(0deg)}38%{transform:rotate(5deg)}52%{transform:rotate(-5deg)}}
@keyframes employee-pay-write{0%,25%,75%,100%{stroke-dashoffset:0}45%{stroke-dashoffset:12}65%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.employee-helmet,.employee-day-pay{animation:none}}