itself so Bootstrap's own .container auto-centering still centers correctly within the remaining width, and any other in-flow sibling of the nav (e.g. the outdated-storefront-domain banner) gets the same offset for free without needing its own rule. Removed on the mobile breakpoint where the sidebar itself stops being fixed (see .app-topbar's own mobile override above). */ body.bg-light{padding-left:250px} @media (max-width:900px){body.bg-light{padding-left:0}} h1,h2,h3,h4,h5,h6{letter-spacing:-.025em;font-weight:800} a{color:var(--brand-dark)} /* ---- left sidebar navigation (desktop) — Fillow's actual default look: a white/light fixed column with a soft lavender header strip behind the logo, NOT a dark sidebar (an earlier revision here used a dark gradient — replaced to match Fillow's real [data-sidebar-style="full"] .dlabnav colors: --sidebar-bg:#FFFFFF, --nav-headbg:#e9e2f8, nav-link color var(--text-gray), active item gets a soft var(--rgba-primary-1) pill with primary-colored text, per Fillow's own .dlabnav .metismenu > li.mm-active > a rule). Main content is offset by its width via the sibling rules under "page shell" below, rather than touching every view file's markup. Falls back to the original horizontal top bar under the mobile breakpoint at the bottom of this section, so a narrow screen never has to fit a fixed 250px rail plus content side by side. ---- */ /* height:100vh alongside top:0/bottom:0 — belt-and-suspenders against the sidebar falling short of the actual viewport bottom (seen on some browser/zoom combinations where top+bottom alone left a gap of page background visible beneath it); this forces the box's own height explicitly rather than relying solely on the two-offset shorthand to compute it. */ .app-topbar{position:fixed;left:0;top:0;bottom:0;height:100vh;width:250px;background:var(--surface);border-right:1px solid var(--border);box-shadow:0 15px 30px rgba(0,0,0,.02);z-index:1030;overflow-y:hidden;transition:width .18s ease} /* No scroll at all, by design — the spacing below is tight enough that the whole sidebar fits a normal viewport height outright. overflow-y:auto here previously caused a 1-2px "wobble" scroll whenever content landed exactly at (or a hair past) the container's height, which read as the sidebar's own content shifting on its own; hidden removes that possibility entirely rather than trying to shave the last pixel off. */ .app-topbar>div{display:flex;flex-direction:column;height:100%;padding:0 .8rem;gap:0} /* The lavender header strip Fillow's --nav-headbg paints behind the logo row specifically — full bleed (negative margin cancels the column's own side padding) so the tint reaches the sidebar's actual edges instead of floating as an inset rectangle. */ .app-topbar .brand{background:var(--brand-strip-bg,#e9e2f8);color:var(--text);font-weight:800;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:.5rem;letter-spacing:-.02em;padding:1.1rem .8rem;margin:0 -.8rem .4rem;min-width:0} .app-topbar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(136,108,192,.25);flex:none} .app-topbar .brand .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app-topbar .brand img{max-width:100%} /* Shown only when collapsed (see body.sidebar-collapsed below) — the platform's own small favicon mark, or a lettered fallback square if none has been uploaded; either way this is what replaces the full wordmark logo, which doesn't fit a 76px icon-only rail. */ .app-topbar .brand-favicon{display:none;width:28px;height:28px;border-radius:8px;flex:none;align-items:center;justify-content:center;background:linear-gradient(135deg,#886cc0,#6c4bae);color:#fff;font-weight:800;font-size:.85rem;object-fit:contain} /* ---- collapse toggle — sits just under the logo; collapses the sidebar to an icon-only rail. State lives on (sidebar-collapsed) so one class also drives the body padding-left offset below, and is persisted to localStorage by the nav's own inline script. ---- */ .app-sidebar-toggle{display:flex;align-items:center;justify-content:center;width:100%;padding:.5rem;margin-top:.5rem;border-radius:10px;background:var(--bg);border:none;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease} .app-sidebar-toggle:hover{background:var(--brand-light);color:var(--brand-dark)} .app-sidebar-toggle svg{transition:transform .18s ease} /* flex:1 + min-height:0 is what actually makes this region absorb the leftover height inside the fixed-height sidebar and scroll on its own — without min-height:0 a flex child never shrinks below its content size, so an expanded dropdown group (e.g. Affiliates/Qualiphy) would instead grow the whole sidebar and push the toggle button + profile card out of view below it. */ .app-nav-scroll{display:flex;flex-direction:column;gap:.1rem;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-top:.5rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent} .app-nav-scroll::-webkit-scrollbar{width:6px} .app-nav-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px} /* Fillow's signature active-item shape: a soft primary-tinted pill whose right edge is rounded differently top vs bottom (border-top-right-radius:.5rem / border-bottom-right-radius:2.5rem on .mm-active > a) — a distinctive detail, not a plain rounded-rect highlight. */ .app-nav-link{display:flex;align-items:center;gap:.7rem;color:var(--muted);text-decoration:none;font-size:.87rem;font-weight:600;padding:.6rem .9rem;border-radius:10px;transition:background .15s ease,color .15s ease;white-space:nowrap} .app-nav-link:hover{color:var(--brand)} .app-nav-link.active{color:var(--brand-dark);background:var(--brand-light);font-weight:700;border-top-right-radius:.5rem;border-bottom-right-radius:2.5rem} .app-nav-link svg{flex:none} /* Subscription-required state — cosmetic only (see App\Filters\SubscriptionFilter for the real, server-side enforcement). Greys the item out and shows a small lock icon instead of navigating. */ .app-nav-link.locked,.app-nav-group-toggle.locked,.app-icon-btn.locked{opacity:.45;cursor:not-allowed;pointer-events:none} .app-nav-link.locked .lock-icon,.app-nav-group-toggle.locked .lock-icon{margin-left:auto;flex:none} /* ---- nav "Qualiphy" group — an inline expand/collapse (Bootstrap's collapse component, not dropdown) since a floating popper menu has nowhere sensible to open from inside a 250px-wide fixed column when the sidebar itself is expanded; the sub-links just indent in place instead. (When the sidebar is COLLAPSED instead, this same group becomes a genuine Fillow-style hover flyout — see the .app-nav-flyout rules further down.) ---- */ .app-nav-group-toggle{cursor:pointer} .app-nav-group-toggle .chev{margin-left:auto;transition:transform .15s ease;flex:none} .app-nav-group-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)} /* Scoped to collapses inside the nav (not a blanket .collapse rule — that class is also used for unrelated things like accordions) — without this gap, an active sub-item's highlight pill sits flush against the group toggle row above it with no breathing room, reading as one merged shape. */ .app-nav-scroll .collapse{padding-top:.3rem} .app-nav-subitem{display:block;color:var(--muted);text-decoration:none;font-size:.83rem;font-weight:500;padding:.45rem .7rem .45rem 2.5rem;border-radius:10px} .app-nav-subitem:hover{color:var(--brand)} .app-nav-subitem.active{color:var(--brand-dark);background:var(--brand-light);font-weight:700} /* ---- header bar — a slim strip above the page content (offset by the sidebar's width the same way

is, via body's own padding-left, so it needs no per-view-file changes) holding the icon buttons (Client Hub / notifications / announcements / support) and, on the client side, the rotating notification ticker. A real surface (white + brand-gradient top edge + shadow) rather than blending flat into the plain grey page background. Sticky so both stay reachable on a long, scrolled page, same as the old horizontal nav used to be. ---- */ .app-header-bar{position:sticky;top:0;z-index:1020;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 2rem;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow)} .app-header-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent))} .app-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;color:var(--muted);background:var(--bg);border:1px solid var(--border);text-decoration:none;font-size:1.1rem;flex:none;transition:background .15s ease,color .15s ease} .app-icon-btn:hover{background:var(--brand-light);color:var(--brand-dark)} .app-icon-btn.active{background:var(--brand-light);color:var(--brand-dark)} /* Color variants — each header-bar icon gets its own soft tint (same brand/accent/info language as .stat-icon elsewhere) instead of one flat grey, so they're easier to tell apart at a glance. */ .app-icon-btn.icon-brand{color:var(--brand-dark);background:var(--brand-light);border-color:transparent} .app-icon-btn.icon-accent{color:var(--accent);background:var(--accent-light);border-color:transparent} .app-icon-btn.icon-info{color:var(--info);background:var(--info-light);border-color:transparent} .app-icon-btn.icon-warn{color:var(--warn);background:var(--warn-light);border-color:transparent} .app-icon-btn.icon-brand:hover,.app-icon-btn.icon-brand.active{background:var(--brand);color:#fff} .app-icon-btn.icon-accent:hover,.app-icon-btn.icon-accent.active{background:var(--accent);color:#fff} .app-icon-btn.icon-info:hover,.app-icon-btn.icon-info.active{background:var(--info);color:#fff} .app-icon-btn.icon-warn:hover,.app-icon-btn.icon-warn.active{background:var(--warn);color:#fff} /* ---- header profile avatar dropdown trigger — Fillow's .header-profile is just the bare avatar with no button chrome around it (no border/background of its own), a ring appearing only on hover/open. ---- */ .app-header-profile{display:inline-flex;border:none;background:none;padding:2px;border-radius:50%;transition:box-shadow .15s ease} .app-header-profile:hover,.app-header-profile[aria-expanded="true"]{box-shadow:0 0 0 3px var(--brand-light)} /* Fillow's actual dropdown treatment: no border, a wide soft shadow instead — applies to every Bootstrap dropdown app-wide (notification/hub/profile panels, filter dropdowns, table row actions, etc.), not just these header ones, so any dropdown anywhere in the app already reads this. */ .dropdown-menu{border:0;box-shadow:0 0 2.3125rem rgba(8,21,66,.08)} .dropdown-item{border-radius:8px} .dropdown-item:active,.dropdown-item.active{background:var(--brand);color:#fff} [data-theme="dark"] .dropdown-menu{box-shadow:0 0 0 1px rgba(255,255,255,.1)} .app-icon-btn .notif-dot{position:absolute;top:-5px;right:-5px;background:var(--danger,#e5484d);color:#fff;border-radius:999px;font-size:.64rem;font-weight:700;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;border:2px solid var(--surface)} /* Logout — the rightmost item in the header bar on every dashboard, deliberately distinct from the brand/accent/info icon tints (a danger tint) since ending your session isn't just another nav shortcut. */ .app-logout-btn{display:inline-flex;align-items:center;gap:.4rem;height:38px;padding:0 .9rem;border-radius:11px;background:var(--danger-light);color:var(--danger);border:1px solid transparent;font-size:.82rem;font-weight:700;white-space:nowrap;transition:background .15s ease,color .15s ease} .app-logout-btn:hover{background:var(--danger);color:#fff} /* ---- notification ticker — one line, rotating through whatever's actually new (order/message/ announcement/support), each entry stacked in the same box and swapped via a vertical slide. ---- */ .app-notif-ticker{position:relative;height:24px;overflow:hidden;flex:1 1 auto;min-width:0} .app-notif-ticker-item{position:absolute;inset:0;display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);transition:transform .5s ease,opacity .4s ease;pointer-events:none} .app-notif-ticker-item.current{opacity:1;transform:translateY(0);pointer-events:auto} .app-notif-ticker-item.leaving{opacity:0;transform:translateY(-100%)} .app-notif-ticker-item .label{color:var(--brand-dark);font-weight:800} .app-notif-ticker-item:hover{color:var(--brand-dark)} /* ---- user card + logout, pinned to the bottom of the sidebar via margin-top:auto ---- */ /* Now the way to reach Profile/Settings — pulled out of the main nav list, reachable by clicking your own name/avatar instead, the same "account menu lives with the account" pattern most dashboards use. */ .app-user-card{margin-top:auto;margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;padding:.6rem;border-radius:12px;background:var(--bg);text-decoration:none;transition:background .15s ease} .app-user-card:hover{background:var(--brand-light)} .app-user-card.active{background:var(--brand-light)} .app-user-avatar{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#fff;background:linear-gradient(135deg,#886cc0,#6c4bae)} .app-user-name{font-size:.82rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app-user-role{font-size:.72rem;color:var(--muted)} /* ---- collapsed state — icon-only rail; toggled by JS adding/removing this class on , persisted in localStorage so it survives navigation between pages. ---- */ body.sidebar-collapsed{padding-left:76px} body.sidebar-collapsed .app-topbar{width:76px} body.sidebar-collapsed .app-sidebar-toggle svg{transform:rotate(180deg)} body.sidebar-collapsed .brand .label, body.sidebar-collapsed .brand .dot, body.sidebar-collapsed .brand img.brand-logo, body.sidebar-collapsed .app-nav-link .label, body.sidebar-collapsed .app-nav-subitem, body.sidebar-collapsed .chev, body.sidebar-collapsed .app-user-name, body.sidebar-collapsed .app-user-role{display:none} /* The full wordmark logo doesn't fit a 76px rail — swap it for the platform's own small favicon mark instead of letting the wordmark image just overflow/clip against the narrow column. */ body.sidebar-collapsed .brand-favicon{display:flex} body.sidebar-collapsed .brand{justify-content:center} /* ---- Fillow-style collapsed-sidebar flyout — a group's submenu (e.g. Qualiphy) floats beside the icon rail on hover instead of disappearing. Mechanics adapted from Fillow's [data-sidebar-style="mini"] .metismenu li:hover>ul rule: display:none by default, revealed via :hover on the wrapping .app-nav-group (not the toggle itself, so the pointer can travel from icon to flyout without it closing), positioned absolute flush against the collapsed rail's own width, background/shadow/radius pulled from Fillow's actual values rather than approximated. The click-to- expand behavior (Bootstrap's own .collapse/.show) is untouched for the non-collapsed sidebar — these rules only apply once body.sidebar-collapsed is active. */ /* Both .app-topbar (overflow-y:hidden) and .app-nav-scroll (overflow-x:hidden) clip anything that tries to visually escape the collapsed 76px rail — including this flyout, which needs to extend past it. Setting overflow:visible only in the collapsed state lets the flyout render outside the rail; the expanded sidebar's own scrollbar is untouched since these rules are scoped to body.sidebar-collapsed. */ body.sidebar-collapsed .app-topbar{overflow:visible} body.sidebar-collapsed .app-nav-scroll{overflow:visible} body.sidebar-collapsed .app-nav-group{position:relative} body.sidebar-collapsed .app-nav-flyout{display:none!important;position:absolute;left:76px;top:0;min-width:13rem;margin:0;padding:.5rem;background:var(--surface);border-radius:var(--radius-sm);box-shadow:0 0 2.5rem rgba(82,63,105,.16);z-index:1040} /* Driven by JS (.js-open), not :hover — a fast/diagonal mouse path from the icon to a lower flyout item can land on a frame where the pointer isn't over EITHER box for an instant, and plain :hover has no memory of "was just here a moment ago", so it snaps shut mid-move. JS tracks mouseenter/mouseleave on the group with a short close delay instead, so the flyout survives that momentary gap. */ body.sidebar-collapsed .app-nav-group.js-open .app-nav-flyout{display:block!important} body.sidebar-collapsed .app-nav-flyout .app-nav-subitem{display:block;padding:.5rem .7rem;color:var(--text)} body.sidebar-collapsed .app-nav-flyout .app-nav-subitem:hover{color:var(--brand-dark);background:var(--brand-light)} body.sidebar-collapsed .app-nav-flyout .app-nav-subitem.active{color:var(--brand-dark);background:var(--brand-light);font-weight:700} [data-theme="dark"] body.sidebar-collapsed .app-nav-flyout{box-shadow:0 0 0 1px rgba(255,255,255,.1)} body.sidebar-collapsed .app-nav-link, body.sidebar-collapsed .app-nav-group-toggle{justify-content:center;padding-left:0;padding-right:0} body.sidebar-collapsed .app-user-card{justify-content:center;padding:.5rem} @media (max-width:900px){body.sidebar-collapsed{padding-left:0}body.sidebar-collapsed .app-topbar{width:100%}} /* Hard CSS backstop for the nav icon tooltips (see _nav.php's customClass:'app-nav-tooltip') — the JS enable()/disable() toggle can lose a hover-vs-toggle timing race the same way the notification bell's tooltip once could, so this guarantees one can never render while the sidebar isn't collapsed, independent of whatever state the JS side thinks it's in. */ body:not(.sidebar-collapsed) .app-nav-tooltip{display:none !important} /* ---- mobile fallback: below this width there's no room for a fixed 250px rail alongside content, so the sidebar becomes a normal, non-fixed block that flows above the page content instead of beside it — still a vertical list (nothing needs to fit side-by-side, so nothing can overflow), just taller, with the page scrolling past it like any other in-flow section. ---- */ @media (max-width:900px){ .app-topbar{position:static;width:100%;height:auto;box-shadow:0 2px 16px rgba(82,63,105,.18)} .app-topbar>div{padding:1rem;height:auto} .app-user-card{display:none} .app-sidebar-toggle{margin-top:.75rem} .app-header-bar{flex-wrap:wrap;padding:.9rem 1rem} } /* ---- footer ---- */ .app-footer{background:transparent;margin-top:2.5rem;border-top:1px solid var(--border)} .app-footer-inner{display:flex;align-items:center;gap:1rem;padding:1.35rem 0;flex-wrap:wrap} .app-footer-brand{display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--text);flex:1 1 0;min-width:160px;letter-spacing:-.02em;font-size:.9rem} .app-footer-brand img{max-height:20px} .app-footer-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-light)} /* Swaps to the light-background-suited logo variant in dark mode — only when both variants were actually uploaded (.has-theme-logos), so a client/admin who's only ever set one logo still sees it in both themes instead of the footer going blank in dark mode. */ .app-footer-brand .footer-logo-dark-mode{display:none} [data-theme="dark"] .app-footer-brand.has-theme-logos .footer-logo-light-mode{display:none} [data-theme="dark"] .app-footer-brand.has-theme-logos .footer-logo-dark-mode{display:inline-block} .app-footer-copy{flex:1 1 0;text-align:center;font-size:.82rem;color:var(--muted);white-space:nowrap} .app-footer-email{flex:1 1 0;text-align:right;font-size:.82rem;min-width:160px} .app-footer-email a{color:var(--text);text-decoration:none;font-weight:600} .app-footer-email a:hover{color:var(--brand-dark)} @media (max-width:700px){.app-footer-inner{flex-direction:column;text-align:center}.app-footer-brand,.app-footer-copy,.app-footer-email{text-align:center;justify-content:center}} /* ---- surfaces — Fillow's cards are borderless, relying on box-shadow alone for separation from the page background (border:0rem in its compiled .card rule) rather than a border+shadow combo. ---- */ .card{border:0;border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .2s ease,transform .2s ease} .card.hover-lift:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)} /* Bootstrap's stock .card-header has a subtle background tint and tight padding — Fillow's is transparent with roomier padding and a plain border, matching its actual .card-header/.card-title. */ .card-header{background:transparent;border-color:var(--border);padding:1.5rem 1.875rem 1.25rem} .card-title{font-size:1.25rem;font-weight:600;color:var(--text);text-transform:capitalize} .card-footer{background:transparent;border-color:var(--border);padding:1.25rem 1.875rem} /* Scoped to just cards wrapping a stat-card (via :has(), not a blanket rule on .card) so the stat-card's own decorative corner blur — which deliberately bleeds past its own inner box — gets clipped to the outer card's rounded corner instead of squaring it off, without risking clipping something like a dropdown menu nested inside an unrelated .card elsewhere. */ .card:has(>.card-body.stat-card),.card:has(>.stat-card){overflow:hidden} /* Lets a stat card itself be the (clickable tile through to its detail page) instead of just a div. */ a.card{display:block;color:inherit;text-decoration:none} a.card:hover{color:inherit} .card-body{padding:1.6rem} /* ---- stat cards ---- */ /* No background here on purpose — this sits inside a separate .card wrapper (

), and painting an opaque background on THIS inner div (a plain rectangle, no border-radius of its own) covered up the outer .card's rounded corners entirely, making every tile look square despite .card's own border-radius being correct. The outer .card already gets a white background from Bootstrap's own .card rule, which IS properly rounded. */ /* Layout matches Fillow's actual .widget-stat tile (widget-basic.html): a large round tinted icon to the left, label+value stacked to its right — not a vertical icon-then-text stack, and no decorative corner-blur (that was this app's own invention, not part of Fillow's design). Grid only kicks in when a .stat-card-top/.stat-icon is actually present (:has()) — several pages use .stat-card with just a label+value and no icon at all, which keeps the plain vertical stack. */ .stat-card{position:relative;display:flex;flex-direction:column;gap:.4rem;overflow:hidden} .stat-card:has(.stat-card-top){display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center} .stat-card:has(.stat-card-top) .stat-card-top{grid-column:1;grid-row:1/3} .stat-card:has(.stat-card-top) .stat-label{grid-column:2;grid-row:1} .stat-card:has(.stat-card-top) .stat-value{grid-column:2;grid-row:2} .stat-card-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem} /* 64px round icon — Fillow's own is 5.3125rem/85px inside a roomier 1.875rem card padding; scaled down slightly to fit this app's tighter card padding while keeping the same "big circle" language. */ .stat-icon{width:64px;height:64px;border-radius:50%;font-size:1.4rem;display:flex;align-items:center;justify-content:center;flex:none} .stat-icon svg{width:28px;height:28px} .stat-icon.brand{background:var(--brand-light);color:var(--brand-dark);--stat-accent:var(--brand)} .stat-icon.accent{background:var(--accent-light);color:var(--accent);--stat-accent:var(--accent)} .stat-icon.warn{background:var(--warn-light);color:var(--warn);--stat-accent:var(--warn)} .stat-icon.info{background:var(--info-light);color:var(--info);--stat-accent:var(--info)} .stat-icon.danger{background:var(--danger-light);color:var(--danger);--stat-accent:var(--danger)} .stat-label{color:var(--muted);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em} .stat-value{font-size:2.1rem;font-weight:800;line-height:1.1;letter-spacing:-.03em} .stat-sub{color:var(--muted);font-size:.8rem;margin-top:.1rem;display:flex;align-items:center;gap:.35rem} .stat-trend{font-weight:700;padding:.1rem .45rem;border-radius:999px;font-size:.74rem} .stat-trend.up{background:var(--brand-light);color:var(--brand-dark)} .stat-trend.down{background:var(--danger-light);color:var(--danger)} /* ---- Client Hub category filter cards ---- */ .hub-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;padding:1.1rem} .hub-cat-card{position:relative;display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.85rem 1rem;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .hub-cat-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);color:inherit} .hub-cat-card.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)} .hub-cat-card.active::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:34px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)} .hub-cat-icon{position:relative;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none} .hub-cat-icon .notif-dot{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;border-radius:999px;font-size:.62rem;font-weight:700;min-width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;padding:0 .25rem;border:2px solid var(--surface)} .hub-cat-icon.brand{background:var(--brand-light);color:var(--brand-dark)} .hub-cat-icon.accent{background:var(--accent-light);color:var(--accent)} .hub-cat-icon.success{background:var(--success-light);color:var(--success)} .hub-cat-icon.warn{background:var(--warn-light);color:var(--warn)} .hub-cat-icon.info{background:var(--info-light);color:var(--info)} .hub-cat-icon.danger{background:var(--danger-light);color:var(--danger)} .hub-cat-icon.slate{background:var(--slate-light);color:var(--slate)} .hub-cat-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .hub-cat-label{font-weight:700;font-size:.86rem;line-height:1.2} .hub-cat-count{flex:none;min-width:26px;height:26px;padding:0 .4rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem} .hub-cat-count.brand{background:var(--brand-light);color:var(--brand-dark)} .hub-cat-count.accent{background:var(--accent-light);color:var(--accent)} .hub-cat-count.success{background:var(--success-light);color:var(--success)} .hub-cat-count.warn{background:var(--warn-light);color:var(--warn)} .hub-cat-count.info{background:var(--info-light);color:var(--info)} .hub-cat-count.danger{background:var(--danger-light);color:var(--danger)} .hub-cat-count.slate{background:var(--slate-light);color:var(--slate)} /* ---- image attachment lightbox controls ---- */ .app-lightbox-close{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--brand-dark);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:1} .app-lightbox-close:hover{background:var(--brand-light)} .app-lightbox-download{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand);color:#fff;font-weight:700;font-size:.85rem;padding:.55rem 1.15rem;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.3)} .app-lightbox-download:hover{background:var(--brand-dark);color:#fff} /* ---- chart panels ---- */ .chart-card .card-body{padding:1.75rem} /* Weight/size matches Fillow's actual .card-title (1.25rem/600) + .subtitle (.875rem) pairing. */ .chart-title{font-weight:600;font-size:1.25rem;margin-bottom:.2rem;letter-spacing:-.01em;text-transform:capitalize} .chart-sub{color:var(--muted);font-size:.875rem;margin-bottom:1.35rem} .chart-canvas-wrap{position:relative;height:280px} .chart-canvas-wrap.sm{height:220px} .chart-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.85rem} /* ApexCharts renders its tooltips as plain unstyled DOM (no explicit text color), so they were inheriting body{color:var(--text)} — invisible pale-on-pale in dark mode, since the tooltip's own background stays ApexCharts' default light gray regardless of theme. Force the same always-dark tooltip look already used for this app's Chart.js tooltips (see Chart.defaults.plugins.tooltip in each dashboard's