/* 2026-08-11: Persistent top utility bar. Reusable home for permanent cross-page items that must stay visible on every page - starts with the Ads/SEO dashboard shortcuts that used to live in the sidebar + mobile topbar. Add a future item by editing the $items array in resources/views/filament/partials/utility-bar.blade.php - no new CSS needed for another link of the same shape. Mechanics: rendered at PanelsRenderHook::BODY_START (see AdminPanelProvider.php), i.e. as the very first element inside , before Filament's .fi-layout. It uses position:sticky/top:0 - the same mechanism .fi-sidebar and .fi-topbar already use to stay visible while the page scrolls - so all three stack correctly. Because this bar now occupies the true top row, .fi-sidebar and .fi-topbar's own sticky offsets are pushed down by --cx-utility-bar-h in cyticx-theme.css so nothing overlaps or gets covered. */ :root { --cx-utility-bar-h: 50px; } @media (min-width: 768px) { :root { --cx-utility-bar-h: 38px; } } .cx-utility-bar { align-items: center; background: var(--cx-card); border-bottom: 1px solid var(--cx-border); display: flex; flex: 0 0 auto; height: var(--cx-utility-bar-h); justify-content: flex-end; padding-inline: 12px; position: sticky; top: 0; width: 100%; z-index: 40; } .cx-utility-bar-items { align-items: center; display: flex; gap: 4px; } .cx-utility-bar-item { align-items: center; border-radius: 9999px; color: var(--cx-text); display: inline-flex; gap: 6px; min-height: 32px; padding-inline: 10px; transition: background-color 160ms ease, color 160ms ease; } .cx-utility-bar-item i { font-size: 1rem; line-height: 1; } .cx-utility-bar-item:hover { background: var(--cx-card-2); } .cx-utility-bar-item.is-active { background: rgba(59, 130, 246, 0.14); color: var(--color-blue-500, #3b82f6); } .cx-utility-bar-item:focus-visible { outline: 2px solid var(--color-blue-500, #3b82f6); outline-offset: 2px; } @media (max-width: 767px) { .cx-utility-bar-item { justify-content: center; /* 44px mobile thumb-target floor, same calibration as the old topbar-shortcuts icon-only collapse this bar replaces. */ min-height: 44px; min-width: 44px; padding-inline: 0; width: 44px; } .cx-utility-bar-item-label { display: none; } } /* --- Live "today so far" counters (2026-08-14) ----------------------------- The Lead Tracking dashboard used to carry a "0 Leads Today / 0 Calls Today / 0 Sales" strip. Owner asked for it off that page and these two numbers put up here instead, so they are visible from anywhere in the panel. Sales was dropped as not important. The LED pulses because the numbers are live; it sits BESIDE the word "Today", never carrying meaning on its own. Honours reduced-motion. */ .cx-utility-live { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; /* pins the counters left, shortcuts stay right */ padding-left: .25rem; } .cx-utility-live-led { width: 7px; height: 7px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 0 rgba(47, 179, 68, .55); animation: cxUtilPulse 2.4s ease-out infinite; flex: 0 0 auto; } @keyframes cxUtilPulse { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 68, .5); } 70% { box-shadow: 0 0 0 6px rgba(47, 179, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 179, 68, 0); } } @media (prefers-reduced-motion: reduce) { .cx-utility-live-led { animation: none; } } .cx-utility-live-word { color: var(--muted-foreground); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .cx-utility-live-stat { display: inline-flex; align-items: baseline; gap: .28rem; text-decoration: none; white-space: nowrap; } .cx-utility-live-stat strong { color: var(--foreground); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1; } .cx-utility-live-stat span { color: var(--muted-foreground); font-size: 12px; } .cx-utility-live-stat:hover strong { text-decoration: underline; } .cx-utility-live-stat i { color: var(--muted-foreground); font-size: 13px; line-height: 1; } /* Phones: drop the "TODAY" word and the units, but keep each stat's ICON - without it the bar reads as a bare "6 19", which means nothing. The icon is what makes the number legible once the word is gone. */ @media (max-width: 640px) { .cx-utility-live { gap: .45rem; } .cx-utility-live-word { display: none; } .cx-utility-live-stat span { display: none; } .cx-utility-live-stat { gap: .22rem; } }