is sized to 100vw, which counts the vertical scrollbar's width as usable space — so on any page tall enough to scroll it overflows by that much, and overflow-x:hidden then CLIPS the right edge (cutting off the last table columns + the table's own horizontal scrollbar). Constrain main to 100% of app-root instead; wide tables then show fully on a normal screen, or scroll inside a fully-visible wrapper on a narrow one. */ @media (min-width: 641px) { body.tc-demo main { width: 100% !important; max-width: 100% !important; } } html, body { overflow-x: hidden; } /* The app's own header/breadcrumb bar and

are both positioned from --nav-padding, which the app sets to its own sidebar width. Two rules used to live here: one bumping --nav-padding by the hub rail's 60px so the fixed header cleared the rail, and one pinning main.side's padding back to the bare sidebar width so the rail was not counted twice (body's padding-left had already shifted that in-flow element). With the rail gone from product demos both cancel out — the app's native --nav-padding lines the header and the content up against its own sidebar, which is what it was built to do. */ /* Employee-list / table subtitle lines (smart-para): the wrapper carries overflow-hidden + text-ellipsis classes, but the overflowing element is the inner

(overflow:visible), so long activity labels hard-clip mid-letter with no "…". Give the

its own ellipsis. */ body.tc-demo smart-para > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ...but NOT inside smart-card grids (Reports/Recommendations icon-card tiles, e.g. "Top Suspicious", "Attrition Risk Index"): those descriptions are meant to wrap across several lines under the title. Forcing them to one nowrap line makes the

demand its full unwrapped width (the flex column around it has no min-width to stop that), which overflows the ~240px card and visually overlaps the neighboring cards in the row. */ body.tc-demo smart-card smart-para > p { overflow: visible; text-overflow: clip; white-space: normal; max-width: 100%; } /* The Productivity Trends "Applications" cards (Productive/Non-Productive/Neutral, h-[370px]) are ALSO smart-card grids, so the wrap-exception above matches their rows too — but tried via :not([class*="h-[370px]"]) on the closest smart-card, that turned out not to be enough: the page has an OUTER smart-card further up (without h-[370px]) wrapping this whole section, and a descendant combinator doesn't care which ancestor satisfies "smart-card:not(...)" — it matched through the outer one regardless of the closer, h-[370px] one in between. A plain :not() exclusion can't distinguish "closest ancestor" from "some ancestor", so re-assert ellipsis with a MORE SPECIFIC selector anchored to the known h-[370px] > .h-full > .py-2 path instead — it outranks the broader wrap rule above regardless of ancestor nesting. These rows are meant to stay single-line ellipsis (a compact list); wrapping is what made them overflow the card border in the first place. */ body.tc-demo smart-card[class*="h-[370px]"] > div.h-full > div.py-2 smart-para > p { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100%; } /* Productivity Trends "Applications" cards (Productive/Non-Productive/Neutral): the OUTER is pinned to a fixed h-[370px], but the actual bordered/rounded box is an INNER

one level down, and its item list (.py-2) has no height cap of its own — with overflow:visible the rows just render straight past that inner div's bottom border instead of being contained by it. Turn the inner bordered box into a header/list/footer flex column and let the list segment absorb any extra height with its own internal scrollbar, so the border always wraps the visible content. (The outer smart-card also needs display:flex so its one child — this inner box — actually stretches to the smart-card's fixed 370px in the first place. min-width:0 at every level below is load-bearing, not decoration: turning these into a flex chain makes each level a flex item, and flex items default to min-width:auto (size to content) instead of shrinking — with a nowrap

below (needed for the ellipsis fix above) that demand bubbles all the way up and forces this whole card past its 1/3 share in the OUTER "gap-3 flex flex-wrap" row, pushing its siblings onto the next line. Each min-width:0 below cuts that propagation off at that level.) */ body.tc-demo smart-card[class*="h-[370px]"] { display: flex !important; min-width: 0 !important; } body.tc-demo smart-card[class*="h-[370px]"] > div.h-full { display: flex !important; flex-direction: column !important; min-height: 0 !important; min-width: 0 !important; width: 100% !important; } body.tc-demo smart-card[class*="h-[370px]"] > div.h-full > div.py-2 { flex: 1 1 auto !important; min-height: 0 !important; min-width: 0 !important; overflow-y: auto !important; } body.tc-demo smart-card[class*="h-[370px]"] > div.h-full > div.py-2 > div.flex.justify-between { min-width: 0 !important; } /* Each row in that list (label + score/% pair) is a flex.justify-between with the value cell pinned to a flat w-2/5 (40% of the row) — way more than two short numbers need. The label on the other side only gets the leftover ~60%, so its ellipsis kicks in far earlier than the row's real available width allows, leaving a dead gap before the numbers. Let the value cell size to its own content and hand the label the rest. */ body.tc-demo smart-card[class*="h-[370px]"] div.py-2 .w-2\/5 { width: auto !important; flex: 0 0 auto !important; } /* The label side (`.flex-1.min-w-0`) carries Tailwind's min-w-0 class, but that utility's definition is missing from this compiled build (same story as the text-ellipsis/overflow- hidden/whitespace-nowrap classes elsewhere on this site that also don't do anything) — its real computed min-width stays the browser default "auto". A flex item's min-width:auto floors it at its content's min-content size, and for nowrap text (needed for the ellipsis fix above) that's the FULL unwrapped label width — so the label demanded ~630px, forced the row (and the value cell after it) past the card's edge, and the numbers scrolled out of view entirely. Setting min-width:0 explicitly is what actually lets it shrink and hand the row's real remaining space to the value cell, same as the class was always meant to. */ body.tc-demo smart-card[class*="h-[370px]"] div.py-2 .flex-1.min-w-0 { min-width: 0 !important; } /* At wider card widths (e.g. once the 2-columns-then-1 layout below gives Productive/ Non-Productive ~50% instead of ~33% each), the label wrapper switches to a DIFFERENT class entirely: `w-[calc(100vh-700px)]` — sizing a horizontal label's WIDTH off the viewport's HEIGHT minus 700px, which is nonsensical and evaluates near/at 0 on any normal viewport, collapsing the label to nothing (numbers show, name doesn't). This is a pre-existing bug in the compiled bundle, not something introduced by the layout change — it was just never hit before because the narrower 3-column layout always used the other (also-buggy-until-fixed-above) `.flex-1.min-w-0` class instead. */ body.tc-demo smart-card[class*="h-[370px]"] div.py-2 [class*="w-[calc(100vh"] { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; } /* Layout: Productive + Non-Productive side by side, Neutral on its own row below — not 3 equal columns. The parent (.gap-3.flex.flex-wrap) holds exactly these 3 h-[370px] smart-cards with flex-grow:1 and no basis, so they happily share one row 3-up whenever there's room; relying on flex-wrap's natural wrapping to split them 2-then-1 is fragile (it only wraps if content forces a min-width past what 3-across allows, which changed under us once the ballooning bug above got fixed). Force it explicitly instead: make the 3rd card (Neutral) claim a full row so it always drops below the first two. */ body.tc-demo .gap-3.flex.flex-wrap > smart-card[class*="h-[370px]"]:nth-child(3) { flex: 1 1 100% !important; } /* Productivity Trends "Productive Break Down" table: each day cell packs an hours block ("2633:20 / Exp-3200 hrs") and a %-change badge ("34.2%↓") into one flex.justify-between row, but that row only carries min-w-28 (a MINIMUM), so with no width/flex-grow it just sizes to its own content instead of the td's full (wider) cell — squeezing the two pieces into less room than the cell actually has, so the %-badge wraps its arrow onto a second line. Let the row use the cell's real width, and keep the badge on one line once it does. */ body.tc-demo .flex.justify-between.min-w-28.items-center.h-10 { width: 100% !important; } body.tc-demo .flex.justify-between.min-w-28.items-center.h-10 > :last-child { white-space: nowrap !important; } /* Comment/feedback drawer (feedback.js): its slide transition keeps RESTARTING under the Angular apps' constant style recalcs (chart animations + the feedback MutationObserver), so it never finishes opening and stays off-screen. Snap it open instantly on these pages and force the open transform + a top z-index so the comments panel actually shows when a pin/FAB is clicked. (Hand-built demos keep the smooth slide — this is scoped to tc-demo.) */ body.tc-demo .fb-drawer { transition: none !important; z-index: 2147483600 !important; } body.tc-demo .fb-drawer.open { transform: translateX(0) !important; } body.tc-demo .fb-scrim { z-index: 2147483590 !important; } /* Re-brand: replace the legacy teal-clock logo with the new Time Champ logo. The app header uses ./timechamp-logo.png (wide lockup) -> tc-lockup.png (diamond + wordmark); the small favicon/collapsed icon uses Logo-favicon.png -> tc-mark.png (diamond). */ img[src*="timechamp-logo"] { content: url("/assets/brand/tc-lockup.png"); } img[src*="Logo-favicon"] { content: url("/assets/brand/tc-mark.png"); } /* Communicator launcher: SHOW it (was hidden when broken) and keep a stable size. The real communicator-logo.webp is now copied into every section dir so the original relative loads it naturally — no content:url() (that grew on re-render). */ a:has(> img[src*="communicator-logo"]), img[src*="communicator-logo"] { display: revert !important; } img[src*="communicator-logo"] { width: 25px !important; height: 25px !important; max-width: 25px !important; max-height: 25px !important; object-fit: contain !important; } /* Demo banner ("This is a demo account…"): recolor the bright cyan-blue gradient (#005BEA -> #00C6FB) to the brand navy theme so it matches the Time Champ logo. */ [class*="005BEA"] { background-image: linear-gradient(90deg, #0B1635 0%, #001A80 55%, #0021A0 100%) !important; } /* Productivity Trends "Productive Break Down" table: its status dots use generic semantic classes (bg-red, bg-gray-400) that don't match the ApexCharts "Productive Activity" donut's palette for the same categories (Non-Productive is chart-orange #ff6f1e vs table bg-red; Away is chart-purple #7239ea vs table bg-gray-400) — the two widgets show different colors for the same data. Recolor just these dots (matched by their exact rounded-full/h-2.5/w-2.5 status-dot shape, not the bare bg-* class, since bg-red/bg-gray-400 are generic names reused elsewhere on the site) to match the chart. Scoped under `table` specifically: the FIRST version of this rule had no such scope and also matched the Time Line page's "Neutral Hours" legend dot (same exact shape classes, different widget, not inside a table) — turned that dot purple by accident. */ table .rounded-full.h-2\.5.w-2\.5.bg-red { background-color: #ff6f1e !important; } table .rounded-full.h-2\.5.w-2\.5.bg-gray-400 { background-color: #7239ea !important; }