/* * Cougardesk — component stylesheet. * * NOT the brand source of truth. That is tokens.css (loaded AFTER this file, * so its migration map wins the cascade), documented in * docs/design/BRAND_GUIDELINES.md. Reference --cd-* tokens here; don't add * raw hex — `npm run lint:css` ratchets against it. * * The header comment that used to sit here claimed the brand red was * "#A8353A (Pantone 1807)". It is #9D2E34 — verified against APU's own * production token file and the Carnegie Web Style Guide. The wrong value was * never used by any rule, but it was being read and copied, so it is gone. */ /* ─── Brand Variables ─── */ :root { /* Font stacks live in tokens.css (--cd-font-sans / --cd-font-mono). The legacy --font-sans/--font-serif that used to sit here are gone: --font-serif had zero refs, and --font-sans listed "Helvetica Neue" BEFORE "Proxima Nova", so anything using it took Helvetica on macOS instead of the brand face. `body` and `h1-h6` were masked (tokens.css loads second and re-declares both), but `.navbar-apu .navbar-brand` and `#sidebar .sidebar-header` outrank those selectors and really did render Helvetica. All four now reference --cd-font-sans directly, so the brand face no longer depends on stylesheet order. */ /* Layout */ --sidebar-width: 240px; --navbar-height: 48px; /* Where the app chrome actually ENDS, which is not --navbar-height whenever a banner renders above the navbar and pushes it down (env, announcement, impersonation). `main.js`'s cdSyncChromeOffset measures the navbar and overwrites this on at init and on resize; the constant below is only the value before that runs, and for a page with no navbar at all. A fixed or sticky overlay must use THIS, never --navbar-height — a static `top` cannot measure a banner that wraps to two or three lines (CD-1985). */ --chrome-offset: var(--navbar-height); --transition-speed: 0.2s; /* Ticket tab spacing (0–100, user preference `tab_spacing`; 80 = default). Set on pre-paint from a cookie/localStorage — see layouts/main.hbs. */ --tab-spacing: 80; /* Gap between tabs, and the matching gap above them. Piecewise: 0→2px over spacing 0–80, then 2→8px over 80–100. max() of the two linear pieces IS the piecewise curve — each dominates on its own side of 80, so there's no kink to hand-code. 0→0px · 50→1.25px · 80→2px · 90→5px · 100→8px */ --tab-gap: max( calc(var(--tab-spacing) * 0.025px), calc((var(--tab-spacing) - 80) * 0.3px + 2px) ); } /* ─── Dark-Mode Contrast Adaptor: anti-FOUC pre-hide ─── */ /* darkModeContrast.js (head-loaded, no defer) adds `.cd-ca-init` to synchronously before paints, so ticket message-body islands are hidden pre-paint and never flash unprocessed near-black-on-dark text. The script removes the class the instant its initial contrast pass finishes, with a 1.5s safety-timeout + window 'error' reveal so content can never get stuck hidden. The hide depends on the JS-added class AND dark mode, so with JS disabled (no class) or in light mode nothing is ever hidden — content is always visible. `visibility` (not `display`) keeps layout stable, so the reveal causes no reflow/jump. */ html.cd-ca-init[data-theme="dark"] .ticket-description, html.cd-ca-init[data-theme="dark"] .comment-display, html.cd-ca-init[data-theme="dark"] .plain-text-body, html.cd-ca-init[data-theme="dark"] .article-content { visibility: hidden; } /* Per-element hide for lazily injected/expanded islands (tab-mode innerHTML, realtime comment merges): the MutationObserver adds `.cd-ca-hide` the moment it first sees a new island and removes it once that island's pass completes, normally in the next animation frame — or off LAZY_REVEAL_SAFETY_MS if the frame loop is starved or suspended, since nothing else would un-hide it. */ html[data-theme="dark"] .cd-ca-hide { visibility: hidden; } /* The three amber twins that stood here (.bg-light-yellow, .comment-card-internal and its .card-header) are gone: --cd-warning-bg and --cd-warning already flip, so the base rules cover both themes. Their literals — #3A3520, #332E1A, #B8860B — were hand-guessed dark equivalents. Removing them was right; what it exposed was a JS assumption, not a missing CSS declaration — see CD-2032 in cougardesk-web/invariants/ui-and-design.md. Nothing here needs a literal back. The zero-state gradient KEEPS a twin. It is warm NEUTRAL, not amber, and a gradient needs both stops moving the same direction: --cd-surface-hover to --cd-surface-sunken darkens in dark and lightens in light, so a single rule would invert it. */ [data-theme="dark"] .zero-state-illustration { background: linear-gradient(145deg, var(--cd-surface-hover) 0%, var(--cd-surface-sunken) 100%); } /* Nav tabs: +2px padding over the Bootstrap default (0.5rem 1rem) */ .nav-tabs .nav-link { padding: 0.625rem 1.125rem; } /* Dark mode: comment cards */ [data-theme="dark"] .comment-card-public .card-header { background-color: rgba(13, 110, 253, 0.1); } /* ─── Global Reset & Base ─── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--cd-font-sans); font-size: 0.9375rem; line-height: 1.6; color: var(--cd-text); /* tokens.css re-declares body{background-color} from the same token and is linked AFTER this file, so the literal here was masked rather than broken — but it would have become a dark-mode bug the moment the load order moved. */ background-color: var(--cd-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* Background artwork layer — opacity driven by the user's contrast preference. The SVG's internal alphas are authored at 2x so --bg-contrast: 100 (default) reproduces the original look and 200 renders the art at full strength. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('/img/bg-hills.svg') no-repeat bottom center / cover; opacity: calc(var(--bg-contrast, 100) / 200); } /* Ambient cougar overlay — the silhouette, lifted out of bg-hills.svg so it can wander. .cougar-viewport mirrors body::before exactly (fixed, behind the UI, contrast-driven opacity), so at rest the cougar is pixel-identical to the baked-in art. cougarWander.js adds .wander after 5 min of inactivity; the cougar strolls off the left edge, wraps around, and walks back home. The svg uses xMidYMax slice — the same framing as the background's cover / bottom center — so translateX(0) lands it on its mid-hill spot. */ .cougar-viewport { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; /* clip the off-screen travel so it never adds a scrollbar */ opacity: calc(var(--bg-contrast, 100) / 200); } .cougar-layer { width: 100%; height: 100%; } .cougar-bob { display: block; width: 100%; height: 100%; } /* Day-spot easter egg (part of Party Cougar, ui_preferences.party_cougar): the spot is now placed by cougarWander.js as part of the .cougar-walk travel transform (which lifts the feet onto the ridge and leans to the slope at the spot, geometry read from the guide path), so .cougar-spot no longer carries a transform of its own — it's kept only as the cougar-body wrapper. */ /* Party-cougar hat (opt-in, ui_preferences.party_cougar): the hat markup is always in the overlay; the server adds .party inside the user's birthday window. The birthday comes from PeopleSoft — no birthday value, no hat. */ .cougar-hat { display: none; } .cougar-layer.party .cougar-hat { display: block; } /* The horizontal travel (home → off the left edge → off-screen wrap → back → rest) is driven frame-by-frame by cougarWander.js, which sets the SVG `transform` attribute on .cougar-walk directly so it can also lift the feet onto the ridge contour and lean to the slope. The old pure-X @keyframes cougar-travel (and the transform transition that used to ease it home) are gone — the driver owns and tweens the transform itself. */ .cougar-layer.wander .cougar-bob { animation: cougar-bob 1.1s ease-in-out infinite; } /* Subtle vertical gait so a legless silhouette reads as walking, not sliding. */ @keyframes cougar-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* cougarWander.js already bails under reduced motion; this also stops the gait bob if the class is ever applied without it (old browsers lacking matchMedia). */ @media (prefers-reduced-motion: reduce) { .cougar-layer.wander .cougar-bob { animation: none; } } .app-body-row { flex: 1 1 0; min-height: 0; overflow: hidden; } .app-main-col { flex: 1 1 0; min-height: 0; overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--cd-font-sans); font-weight: 600; color: var(--cd-text); letter-spacing: -0.01em; } h1 { font-weight: 700; } a { color: var(--cd-brand); text-decoration: none; transition: color var(--transition-speed) ease; } a:hover { color: var(--cd-brand-hover); text-decoration: underline; } /* ─── Navbar ─── */ .navbar-apu { background-color: var(--cd-brand-fill); min-height: var(--navbar-height); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); border: none; } .navbar-apu .navbar-brand { font-family: var(--cd-font-sans); font-weight: 700; font-size: 1.25rem; color: var(--cd-text-on-brand) !important; letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; } .brand-logo { height: 32px; width: 32px; } .brand-logo-dark { display: none; } [data-theme="dark"] .brand-logo-light { display: none; } [data-theme="dark"] .brand-logo-dark { display: block; } .navbar-apu .navbar-brand .brand-divider { width: 1px; height: 28px; background-color: rgba(255, 255, 255, 0.35); } .navbar-apu .navbar-brand .brand-app-name { font-size: 1.1rem; font-weight: 500; opacity: 0.95; } .navbar-apu .nav-link { color: rgba(255, 255, 255, 0.85) !important; font-weight: 500; font-size: 0.875rem; padding: 0.5rem 0.9rem !important; border-radius: var(--cd-radius-sm); transition: all var(--transition-speed) ease; } .navbar-apu .nav-link:hover, .navbar-apu .nav-link:focus { color: var(--cd-text-on-brand) !important; background-color: rgba(255, 255, 255, 0.12); } .navbar-apu .nav-link.active { color: var(--cd-text-on-brand) !important; background-color: rgba(255, 255, 255, 0.18); } /* CD-1898 — the collapse hamburger. Nothing styled `.navbar-toggler`, so it fell back to Bootstrap's default dark glyph and dark border on the brick-red bar, where every other glyph is `--cd-text-on-brand`. Scoped to `.navbar-apu`, so this covers BOTH navbars in one rule: the signed-in app shell (partials/navbar.hbs) and layouts/public.hbs, which share the class. It was only ever wrong in LIGHT mode — the glyph inherits the theme, so dark mode already rendered it light against the same fill. `--cd-text-on-brand` is pinned rather than theme-flipping (the fill it sits on does not flip either), which is what makes one rule correct in both. */ .navbar-apu .navbar-toggler { color: var(--cd-text-on-brand); border-color: rgba(255, 255, 255, 0.35); } .navbar-apu .navbar-toggler:focus, .navbar-apu .navbar-toggler:focus-visible { /* Bootstrap's default focus ring is derived from its own dark border colour and all but disappears here. */ box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3); } /* The bars are a background-image SVG with the stroke colour baked into a data URI, so `color` cannot reach them. Re-draw the same three bars as a MASK and paint them with the token: the only colour this rule states is a token, and the glyph tracks the bar like every other icon on it. The `%23000` in the mask is OPACITY, not colour — an opaque stroke means "keep this pixel" (same rule as the `#000` mask stops elsewhere in this file). Bootstrap's own SVG strokes at 0.75 alpha, which as a mask would render the bars 25% transparent, so this re-states the path rather than reusing it. */ .navbar-apu .navbar-toggler-icon { background-image: none; background-color: var(--cd-text-on-brand); -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .navbar-apu .dropdown-menu { border: 1px solid var(--cd-line); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); border-radius: var(--cd-radius-md); padding: 0.5rem 0; } .navbar-apu .dropdown-item { font-size: 0.875rem; padding: 0.45rem 1rem; } .navbar-apu .dropdown-item:hover { background-color: var(--cd-brand-soft); color: var(--cd-brand); } .navbar-apu .dropdown-item.active, .navbar-apu .dropdown-item:active { background-color: var(--cd-brand-fill); color: var(--cd-text-on-brand); } /* Avatar initials — the base chip sits on an ordinary surface (e.g. the customer card in customers/show.hbs), so it takes the soft brand tint. The white-alpha fill + on-brand text belong to the navbar variant below and nowhere else: a white alpha over a light card renders the initial invisible. */ .avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--cd-brand-soft); color: var(--cd-brand); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; } .navbar-apu .avatar-initials { background-color: rgba(255, 255, 255, 0.2); color: var(--cd-text-on-brand); } /* PeopleSoft ID photo (ADR-0032). Added by personDirectory.js only once the image has actually loaded, so a person without one costs no layout change — which is why there is no placeholder rule here and no min-height on the slot. The size comes from the img's width/height attributes (data-photo-size), so a photo occupies exactly the box its initials chip did. */ .person-photo { border-radius: 50%; object-fit: cover; flex-shrink: 0; } .customer-photo-slot { display: inline-block; } .customer-photo-slot .person-photo { margin-right: 0.35rem; vertical-align: text-bottom; } /* New Ticket button in navbar */ .btn-new-ticket { background-color: rgba(255, 255, 255, 0.15); color: var(--cd-text-on-brand); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--cd-radius-pill); padding: 0.2rem 0.6rem; font-size: 0.875rem; font-weight: 500; transition: background-color var(--transition-speed) ease; white-space: nowrap; } .btn-new-ticket:hover, .btn-new-ticket:focus { background-color: rgba(255, 255, 255, 0.25); color: var(--cd-text-on-brand); border-color: rgba(255, 255, 255, 0.5); } /* Subtle APU badge */ .bg-apu-subtle { background-color: var(--cd-brand-soft); color: var(--cd-brand); } /* Keep old class for backward compat */ .bg-apu-maroon { background-color: var(--cd-brand-fill) !important; } /* ─── Sidebar ─── */ :root { --sidebar-collapsed-width: 58px; --sidebar-mobile-width: 280px; } #sidebar { min-height: 0; background-color: var(--cd-surface-raised); border-right: 1px solid var(--cd-line); transition: margin-right 0.25s ease, width 0.25s ease, min-width 0.25s ease, transform 0.25s ease; overflow-x: hidden; display: flex; flex-direction: column; position: relative; /* Always above main content so transitions out of hover state can't be overpainted by sticky headers */ z-index: 1045; scrollbar-width: none; } #sidebar::-webkit-scrollbar, #sidebar *::-webkit-scrollbar { display: none; } #sidebar, #sidebar * { scrollbar-width: none; } /* Suppress all transitions for the first paint to avoid flashes */ #sidebar.sidebar-init, #sidebar.sidebar-init * { transition: none !important; } /* Suppress label/header transitions during hover-to-collapsed animation so they do not bleed over the shrinking overlay */ #sidebar.sidebar-collapsing .nav-label, #sidebar.sidebar-collapsing .badge, #sidebar.sidebar-collapsing .sidebar-header, #sidebar.sidebar-collapsing hr { transition: none; } #sidebar .sidebar-header { font-family: var(--cd-font-sans); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cd-text-muted); padding: 0.5rem 1rem; overflow: hidden; max-height: 3rem; transition: max-height 0.25s ease, opacity 0.2s ease; } /* Clamp list items to the sidebar width so a long view name can't push its count badge past the (overflow-x:hidden) edge — the nav-link's flex label only shrinks if its
  • is bounded to the container. */ #sidebar .nav-item { max-width: 100%; min-width: 0; } #sidebar .nav-link { color: var(--cd-text-muted); padding: 0.3rem 0.65rem 0.3rem 12px; border-radius: var(--cd-radius-sm); font-size: 0.875rem; font-weight: 450; margin: 1px 0.25rem 1px 0; transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, gap 0.25s ease; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; width: 100%; } #sidebar .nav-link i { font-size: 1.5rem; width: 30px; text-align: center; flex-shrink: 0; opacity: 0.7; } #sidebar .nav-link:hover { background-color: var(--cd-surface-sunken); color: var(--cd-text); text-decoration: none; } #sidebar .nav-link:hover i { opacity: 1; } #sidebar .nav-link.active { background-color: var(--cd-brand-soft); color: var(--cd-brand); font-weight: 600; } #sidebar .nav-link.active i { opacity: 1; color: var(--cd-brand); } #sidebar hr { margin: 0.75rem 1rem; border-color: var(--cd-line); opacity: 1; overflow: hidden; max-height: 2rem; transition: max-height 0.2s ease, opacity 0.15s ease; } #sidebar .nav-label { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: max-width 0.25s ease, opacity 0.2s ease; } #sidebar .badge { max-width: 60px; overflow: hidden; transition: max-width 0.25s ease, opacity 0.2s ease; flex-shrink: 0; } /* ── States ── */ #sidebar[data-state="expanded"] { width: var(--sidebar-width); min-width: var(--sidebar-width); } #sidebar[data-state="collapsed"] { width: var(--sidebar-collapsed-width); min-width: var(--sidebar-collapsed-width); } #sidebar[data-state="collapsed"] .nav-label, #sidebar[data-state="collapsed"] .badge { max-width: 0; opacity: 0; pointer-events: none; } #sidebar[data-state="collapsed"] .badge { margin-left: 0 !important; } #sidebar[data-state="collapsed"] .sidebar-header, #sidebar[data-state="collapsed"] hr { max-height: 0; opacity: 0; } #sidebar[data-state="collapsed"] .nav-link { gap: 0; } /* ── Sidebar view drag/drop reorder ── */ .view-nav-item { position: relative; } .sidebar-view-grip { position: absolute; left: -1px; top: 50%; transform: translateY(-50%); /* Kept in layout (not display:none) and merely transparent until row hover, mirroring .cd-drag-handle. A display:none grip is removed from the box the instant the pointer leaves the row mid-drag, which aborts the native HTML5 drag before it starts (dead sidebar reorder + failing e2e, CD-933). */ display: inline-flex; opacity: 0; align-items: center; justify-content: center; width: 14px; height: 22px; cursor: grab; color: var(--cd-text-muted); font-size: 0.85rem; line-height: 1; z-index: 2; user-select: none; } .sidebar-view-grip i { pointer-events: none; } .view-nav-item:hover .sidebar-view-grip { opacity: 1; } .sidebar-view-grip:hover { color: var(--cd-text); } .sidebar-view-grip:active { cursor: grabbing; } #sidebar[data-state="collapsed"] .sidebar-view-grip { display: none !important; } /* Drop indicators (dragging/line) come from the shared CdDragReorder CSS (.cd-reorder-row.cd-drop-*, CD-933) — no bespoke per-surface drag CSS. */ /* ── Profile: per-section history controls (undo/redo/restore) ── */ .pref-section { position: relative; } .pref-section > .pref-section-actions { position: absolute; top: -0.25rem; right: 0; } .pref-section-actions .btn-link { color: var(--cd-text-muted); padding: 0.1rem 0.35rem; text-decoration: none; } .pref-section-actions .btn-link:hover { color: var(--cd-text); } .pref-section-actions .btn-link:disabled { opacity: 0.35; } /* ── Profile: Appearance & UI sub-menu toggle ── */ .pref-appearance-toggle { color: var(--cd-text); } .pref-appearance-chevron { font-size: 0.75rem; transition: transform 0.15s ease; } .pref-appearance-toggle[aria-expanded="true"] .pref-appearance-chevron { transform: rotate(180deg); } /* ── Profile: settings section reveal flash ── Bootstrap already animates the collapse height; once it finishes opening we briefly outline the section so the eye catches where the newly revealed edges are. profilePrefs.js adds .cd-section-flash on shown.bs.collapse (and when it manually reveals the omnibar group), then drops it on animationend. */ @keyframes cd-section-flash { 0% { box-shadow: 0 0 0 0 rgba(157, 46, 52, 0); } 20% { box-shadow: 0 0 0 3px rgba(157, 46, 52, 0.4); } 100% { box-shadow: 0 0 0 3px rgba(157, 46, 52, 0); } } .cd-section-flash { border-radius: var(--cd-radius-md); animation: cd-section-flash 0.9s ease-out; } @media (prefers-reduced-motion: reduce) { .cd-section-flash { animation: none; } } /* ── Profile: live setting previews ── Small inline demos beside a setting; profilePrefs.js (wirePrefPreviews) repaints them from the live control state. */ .pref-preview { font-size: 0.8125rem; padding: 0.5rem 0.625rem; border: 1px dashed var(--bs-border-color); border-radius: var(--cd-radius-md); background: var(--bs-tertiary-bg); max-width: 360px; } .pref-preview-link { color: var(--bs-link-color); text-decoration: underline; cursor: pointer; } /* Interface Animations / Animation Speed: a crossfading status label plus a dot tracking underneath. Both durations scale with the global --cd-anim-scale (0 when animations are off → frozen). The 6.4s base is deliberately slow so dropping the speed down reads as "slower", not a flicker. */ .pref-anim-demo { position: relative; height: 1.75rem; } .pref-anim-text { position: relative; display: inline-block; height: 1.25rem; font-weight: 600; } .pref-anim-a, .pref-anim-b { position: absolute; left: 0; top: 0; white-space: nowrap; animation: pref-anim-fade-a calc(6.4s * var(--cd-anim-scale, 1)) ease-in-out infinite; } .pref-anim-b { animation-name: pref-anim-fade-b; } .pref-anim-dot { position: absolute; left: 0; bottom: 0; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cd-brand-fill); animation: pref-anim-slide calc(6.4s * var(--cd-anim-scale, 1)) ease-in-out infinite alternate; } @keyframes pref-anim-slide { from { left: 0; } to { left: calc(100% - 0.6rem); } } @keyframes pref-anim-fade-a { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } } @keyframes pref-anim-fade-b { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pref-anim-dot, .pref-anim-a, .pref-anim-b { animation: none; } .pref-anim-b { opacity: 0; } } /* Omnibar preset editor: fixed left column so scope names line up. */ .omnibar-preset-name { flex: 0 0 9rem; max-width: 9rem; } /* ── Profile: ticket sidebar layout drag list ── */ .ui-order-item[draggable="true"] { cursor: grab; } .ui-order-item.ui-order-dragging { opacity: 0.4; } .ui-order-item.ui-order-locked { color: var(--cd-text-muted); background-color: var(--cd-surface-sunken); } /* Hover overlays main content while reserving only the collapsed footprint. Negative right margin pulls following content back so the layout footprint stays at --sidebar-collapsed-width even though visible width is full. */ #sidebar[data-state="hover"] { width: var(--sidebar-width); min-width: var(--sidebar-width); margin-right: calc(var(--sidebar-collapsed-width) - var(--sidebar-width)); box-shadow: 4px 0 12px rgba(0, 0, 0, 0.10); } /* ── Nav icon flair (opt-in personality) ── sidebarIconFlair.js sets the icon color inline; this transition (present only when the feature is enabled) smooths the fade in and back out. */ #sidebar.nav-flair-on .nav-link i.bi, #sidebar.nav-flair-on .nav-link i.cd-icon-slot { transition: color 0.8s ease; } /* ── Sidebar toggle button ── */ .sidebar-toggle-wrapper { display: flex; justify-content: flex-start; padding: 0.4rem 0.5rem 0 9px; flex-shrink: 0; } .sidebar-toggle-btn { background: none; border: none; padding: 0.2rem 0.4rem; color: var(--cd-text-muted); cursor: pointer; font-size: 1.5rem; line-height: 1; border-radius: var(--cd-radius-sm); display: inline-flex; align-items: center; justify-content: center; } .sidebar-toggle-btn:hover, .sidebar-toggle-btn:focus-visible { color: var(--cd-text); background-color: var(--cd-surface-sunken); outline: none; } /* Navbar variant: white on red navbar */ .navbar-apu .sidebar-toggle-btn { color: var(--cd-text-on-brand); } .navbar-apu .sidebar-toggle-btn:hover, .navbar-apu .sidebar-toggle-btn:focus-visible { color: var(--cd-text-on-brand); background-color: rgba(255, 255, 255, 0.15); } /* Sidebar panels (main + management) */ .sidebar-panel { opacity: 1; transition: opacity 0.5s ease; } .sidebar-panel.fading-out { opacity: 0; pointer-events: none; } .sidebar-scrollable { flex: 1 1 0; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: none; } .sidebar-scrollable::-webkit-scrollbar { display: none; } .sidebar-nav-content { padding: 0.5rem 0.4rem 0.5rem 0; } /* Gear footer pinned to bottom */ .sidebar-footer { flex-shrink: 0; padding: 0.4rem 0.4rem 0.4rem 0; } /* Version label pinned at very bottom-left of sidebar */ .sidebar-version { flex-shrink: 0; position: absolute; bottom: 10px; right: 0px; padding: 0 0.85rem; line-height: 1; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.02em; color: var(--cd-text-subtle); text-align: left; user-select: none; } #sidebar[data-state="collapsed"] .sidebar-version { display: none; } /* ── Mobile drawer ── */ .sidebar-backdrop { display: none; } @media (max-width: 991.98px) { .app-body-row { position: relative; } #sidebar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--sidebar-mobile-width); min-width: var(--sidebar-mobile-width); z-index: 1045; transform: translateX(-100%); box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15); } #sidebar[data-state="drawer-open"] { transform: translateX(0); } #sidebar[data-state="drawer-closed"] { transform: translateX(-100%); } /* Mobile drawer is always "expanded" visually - show labels */ #sidebar .nav-label { opacity: 1; pointer-events: auto; } #sidebar .badge { max-width: 60px; opacity: 1; pointer-events: auto; } #sidebar .sidebar-header, #sidebar hr { max-height: 3rem; opacity: 1; } #sidebar .nav-link { gap: 10px; } .sidebar-backdrop { display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sidebar-backdrop.show { opacity: 1; pointer-events: auto; } } .sidebar-mgmt-trigger { width: 100%; background: none; border: none; text-align: left; cursor: pointer; } /* Management back button */ .sidebar-mgmt-back { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--cd-text); } .sidebar-mgmt-back:hover { background-color: var(--cd-surface-sunken); color: var(--cd-text); } .sidebar-mgmt-back i { font-size: 1.5rem; width: 30px; text-align: center; flex-shrink: 0; } /* Tag category dot in sidebar */ .tag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Centre the 10px dot within a 30px cell to align with queue icons */ #sidebar .nav-link .tag-dot { margin-left: 10px; margin-right: 10px; } /* Tag search dropdown */ .tag-search-wrapper { position: relative; } .tag-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: var(--cd-surface-raised); border: 1px solid var(--cd-line); border-top: none; border-radius: 0 0 var(--cd-radius-md) var(--cd-radius-md); max-height: 380px; overflow-y: auto; display: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .tag-search-results.show { display: block; } .tag-search-item { padding: 0.4rem 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--cd-text); } .tag-search-item:hover { background-color: var(--cd-surface-sunken); } .tag-search-item.active { background-color: var(--cd-brand-fill-hover); color: var(--cd-text-on-brand); } .tag-search-item .tag-dot { width: 8px; height: 8px; } .tag-search-no-results { padding: 0.4rem 0.75rem; color: var(--cd-text-muted); font-size: 0.8125rem; font-style: italic; } /* CD-1715/CD-1759 — every reply-bar dropdown is portaled to and fixed-positioned by dropdownPortal.js so it escapes the overflow:hidden clip on .ticket-show-left / .ticket-reply-bar (the macro preview was cut off at short viewport heights; the CC list, @-mention popup and Tags picker were cut off in the maximized composer). JS sets top/left — or bottom, when it flips up — width, and max-height; the box still scrolls internally past that height. `right`/`bottom` are reset because .tag-search-results stretches itself with `left: 0; right: 0` for the in-flow case, which would fight the fixed coordinates. The class carries the width too, since a portaled node no longer matches the descendant selectors that sized it (.ticket-reply-cc .tag-search-results) — that is why each call site passes an explicit width. */ .cd-dropdown-floating { position: fixed; right: auto; bottom: auto; z-index: 1080; /* A floating box can open either way, so it can't inherit a one-sided radius: .tag-search-results is squared at the top because it sits flush under its input, and .ticket-reply-cc squared it at the bottom for its upward variant. Detached from both, it is rounded on all four corners and bordered all round, which reads correctly whichever side JS puts it on. */ border-radius: var(--cd-radius-md); border: 1px solid var(--cd-line); } /* Macro preview box (CD-909) — shown inside the picker dropdown when a macro is clicked; "Use this macro" runs the real apply. */ .macro-preview { padding: 0.5rem 0.75rem; } .macro-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 0.4rem; } .macro-preview-title { font-weight: 600; font-size: 0.9rem; color: var(--cd-text); } .macro-preview-changes { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; font-size: 0.8125rem; margin-bottom: 0.5rem; } .macro-preview-change-key { color: var(--cd-text-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em; align-self: baseline; } .macro-preview-body { border: 1px solid var(--cd-line); border-radius: var(--cd-radius-md); padding: 0.5rem 0.6rem; font-size: 0.8125rem; max-height: 180px; overflow-y: auto; margin-bottom: 0.5rem; } .macro-preview-body p { margin-bottom: 0.35rem; } .macro-preview-body img { max-width: 100%; } .macro-preview-dropped { margin-bottom: 0.5rem; } .macro-preview-actions { display: flex; gap: 0.5rem; /* CD-1715 — on a short viewport the card is taller than the dropdown's clamped max-height, so an unpinned footer scrolls out of reach and "Use this macro" reads as cut off all over again. Stick it to the bottom of the scroll box (opaque, so body text can't show through underneath). */ position: sticky; bottom: 0; background: var(--cd-surface-raised); padding-top: 0.4rem; } /* The reply picker renders this card inside the Quill editor toolbar, whose `.ql-snow .ql-toolbar button` rule (specificity 0,2,1) restyles buttons: width:28px, height:24px, float:left, AND background:none / border:none — the latter two make the white-on-primary "Use this macro" button invisible. Quill sets no !important, so restore normal Bootstrap button rendering from its own per-variant CSS variables. */ .macro-preview-actions .btn { width: auto !important; height: auto !important; float: none !important; flex: 0 0 auto; white-space: nowrap; padding: 0.25rem 0.5rem !important; background-color: var(--bs-btn-bg) !important; border: var(--bs-border-width, 1px) solid var(--bs-btn-border-color) !important; } /* CD-1715 — the rule above pins the background to the BASE token, so Bootstrap's hover state (which swaps in --bs-btn-hover-bg and flips the label to white) lost its fill: "Back" (btn-outline-secondary) rendered white-on-white and vanished under the cursor. Carry the hover/active tokens through the same !important so the filled hover state survives. */ .macro-preview-actions .btn:hover, .macro-preview-actions .btn:focus-visible, .macro-preview-actions .btn:active { background-color: var(--bs-btn-hover-bg) !important; border-color: var(--bs-btn-hover-border-color) !important; } /* CD-1715 — Bootstrap's stock outline-secondary label (#6c757d) only reaches 3.46:1 on the dark surface, under the 4.5:1 AA bar for body text. Drive the resting label from the theme-aware muted token instead (6.1:1 dark, 5.8:1 light). Rest state only — the hover/active rules above own the filled states, which already pass. */ .macro-preview-actions .btn-outline-secondary { --bs-btn-color: var(--cd-text-muted); } .tag-search-loading { display: flex; justify-content: center; padding: 0.75rem; } /* CD-569 — @-mention chip (in the editor and in rendered note bodies) CD-2119 — the tint is --cd-brand-soft, NOT --cd-brand-fill-hover. The -fill tokens are the solid brick that WHITE text sits on (navbar, primary button) and stay deep in dark mode for that reason, so brand-coloured ink on one is brick on brick: 1.29:1 light, 1.74:1 dark. -soft is the tint half of the pair --cd-brand ink is meant for, the same as .bg-apu-subtle, #sidebar .nav-link.active and .provenance-chip-agent. Measured by test/unit/public/css/mentionChipContrast.test.js. */ .mention { background-color: var(--cd-brand-soft); color: var(--cd-brand); border-radius: var(--cd-radius-sm); padding: 0 3px; font-weight: 500; white-space: nowrap; } .mention-search-item-email { color: var(--cd-text-muted); font-size: 0.75rem; margin-left: auto; } .tag-search-create { color: var(--cd-brand); font-weight: 500; border-bottom: 1px solid var(--cd-line); } .tag-search-create::before { content: "+"; font-weight: 700; margin-right: 2px; } /* ─── Main Content ─── */ #main-content { padding: 1.5rem 2rem; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%; position: relative; } #public-main { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* When the floating AI help button (fixed, bottom-right ~70px tall) is shown, reserve scroll space below the ticket sidebar's last card (Team Sharing) so it can clear the button. Scoped to the sidebar — the FAB only overlaps the bottom-right column — so the left conversation/reply pane and other pages get no stray bottom whitespace. CD-541 / CD-589. */ body.ai-help-btn-visible .ticket-show-sidebar { padding-bottom: 5.5rem; } .flash-alert-overlay { position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); width: auto; min-width: 200px; max-width: min(480px, calc(100% - 3rem)); z-index: 20; margin: 0; /* Wraps rather than nowrap: `max-width` caps the box but nowrap refuses to break, so anything longer than ~60 characters ran straight out of the coloured panel and across the page — the admin editor's PeopleSoft sync warning already did, and CD-1846 added a second long message. `width: auto` still shrink-wraps a short message onto one line, so the neat pill shape that nowrap was protecting is unaffected. The mobile rule below already set `normal` for exactly this reason. */ white-space: normal; } .tickets-page-header { position: sticky; top: 0; background: var(--cd-surface-raised); z-index: 10; padding: 1.5rem 2rem 0.75rem; margin: 0 -2rem 1rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } #tickets-results.tickets-results--loading { opacity: 0.6; transition: opacity 0.15s ease-in; } .ajax-spinner { display: none; } .tickets-results--loading .ajax-spinner, .tickets-results--skeleton .ajax-spinner { display: inline-block; } .tickets-page-header #page-view-title { position: relative; top: -0.1rem; padding-bottom: 3px; } .tickets-page-header button#editViewBtn { margin-left: 0.5rem; font-size: 1rem; } /* The view header's icon is set in `h3`; without this it inherits the header's line-height and pushes the row taller than the title beside it. Was an inline `style="line-height:1"` until the `iconTag` helper took over the markup. */ .tickets-page-header #editViewIcon { line-height: 1; } .tickets-page-header #editViewBtn { opacity: 0; transition: opacity 0.15s ease-in-out; } .tickets-page-header:hover #editViewBtn, .tickets-page-header #editViewBtn:focus-visible { opacity: 1; } /* ── Sprite icons (`cdi-*`) ── Emitted by the `iconTag` Handlebars helper / `viewIconEl()` for the handful of glyphs Bootstrap Icons doesn't carry. These rules exist so a sprite icon is INDISTINGUISHABLE from a `bi-*` font glyph at a call site: same 1em box, same baseline nudge, same `color:` tint. If they ever diverge, every template that sizes an icon would have to care which family it got — which is exactly the coupling the helper is there to remove. `fill: currentColor` is belt-and-braces: the symbols in sprite.svg already carry it, but a future icon from a set that doesn't would otherwise render a hardcoded black and ignore the view's color. */ /* The wrapper is an so that bare element selectors — `#sidebar .nav-link i { font-size: 1.5rem; width: 30px }` and friends — reach a sprite icon exactly as they reach a font glyph. inline-block is what makes their `width` apply (Bootstrap Icons' own .bi sets the same). */ .cd-icon-slot { display: inline-block; line-height: 1; } /* 1em square, so it takes its size from whatever font-size the wrapper inherited — the same way a font glyph does. */ .cd-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; flex-shrink: 0; } .icon-color-picker-popup { position: absolute; z-index: 1060; background: var(--cd-surface-raised); color: var(--cd-text); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-md); padding: 6px; width: 226px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .icon-color-picker-popup .edit-view-color-row { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--cd-line); } .icon-color-picker-popup .edit-view-color-label { font-size: 0.85rem; margin: 0; color: inherit; } .icon-color-picker-popup .edit-view-color-row input[type="color"] { width: 38px; height: 30px; padding: 2px; border: 1px solid var(--cd-line); background: var(--cd-surface-raised); } .icon-color-picker-popup .edit-view-icon-grid { display: flex; flex-wrap: wrap; gap: 4px; } body:has(.tickets-page-header) #main-content { padding-top: 0 !important; } /* ─── Buttons ─── */ /* The resting fill and the hover fill were SWAPPED here: resting took --cd-brand-fill-hover and :hover below took --cd-brand-fill, so a hover made the button lighter instead of deeper. It rendered correctly only because tokens.css declares the same rule the right way round and is linked second. Same for the borders (--cd-focus / --cd-brand instead of the fill pair). Pure gap #2: real bugs, invisible because of stylesheet order. */ .btn-apu { background-color: var(--cd-brand-fill); border-color: var(--cd-brand-fill); color: var(--cd-text-on-brand); font-weight: 500; border-radius: var(--cd-radius-pill); padding: 0.45rem 1.1rem; transition: all var(--transition-speed) ease; } .btn-sm.btn-apu { padding: 0.25rem 0.7rem; } /* --cd-text-on-brand, not --cd-text-inverse: the latter flips to DARK ink in dark mode, which would put near-black text on the red fill. The shadow stays an rgba literal (there is no brand-shadow token, and two different alphas could not share one), but it was rgba(168, 53, 58) — the INCORRECT brick in decimal. Corrected to 157, 46, 52 = #9D2E34. */ .btn-apu:hover, .btn-apu:focus { background-color: var(--cd-brand-fill-hover); border-color: var(--cd-brand-fill-hover); color: var(--cd-text-on-brand); box-shadow: 0 2px 8px rgba(157, 46, 52, 0.25); } .btn-apu:active { background-color: var(--cd-brand-active) !important; border-color: var(--cd-brand-active) !important; } .btn-apu:disabled { background-color: var(--cd-brand-fill); border-color: var(--cd-brand); color: rgba(255, 255, 255, 0.5); opacity: 0.65; } .btn-outline-apu { border-color: var(--cd-brand); color: var(--cd-brand); font-weight: 500; border-radius: var(--cd-radius-pill); padding: 0.45rem 1.1rem; transition: all var(--transition-speed) ease; } /* Same two corrections as .btn-apu:hover above. */ .btn-outline-apu:hover, .btn-outline-apu:focus { background-color: var(--cd-brand-fill); border-color: var(--cd-brand); color: var(--cd-text-on-brand); box-shadow: 0 2px 8px rgba(157, 46, 52, 0.2); } /* --cd-text-on-inverse, not --cd-text-inverse. --cd-surface-inverse is dark in BOTH themes (#252425 / #242019) while --cd-text-inverse flips to #252425, so in dark mode this button's label was near-black on near-black — a live invisible-text bug, not a latent one. */ .btn-apu-dark { background-color: var(--cd-surface-inverse); border-color: var(--cd-text); color: var(--cd-text-on-inverse); font-weight: 500; border-radius: var(--cd-radius-pill); } /* Primitive, not --cd-surface-inverse: this button is dark in both themes. */ .btn-apu-dark:hover { background-color: var(--cd-slate); border-color: var(--cd-slate); color: var(--cd-text-on-inverse); } /* ─── Cards ─── */ .card { border: 1px solid var(--cd-line); border-radius: var(--cd-radius-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: box-shadow var(--transition-speed) ease; background-color: var(--cd-surface-raised); } .card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .card-header { background-color: var(--cd-surface-sunken); border-bottom: 1px solid var(--cd-line); font-weight: 600; font-size: 0.95rem; padding: 0.75rem 1.25rem; } /* ─── CougarDesk Observatory ─────────────────────────────────────────────── The analytics landing is a decision map over the existing chart surfaces. All color roles stay on tokens so the same hierarchy survives dark mode. */ .observatory-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); gap: var(--cd-space-6); align-items: end; padding: clamp(1.5rem, 4vw, 3.25rem); color: var(--cd-text-on-brand); background: linear-gradient(135deg, var(--cd-brand-active), var(--cd-brand-fill) 58%, var(--cd-surface-inverse)); border: 1px solid var(--cd-brand-active); border-radius: var(--cd-radius-lg); box-shadow: var(--cd-shadow-lg); } .observatory-hero::after { position: absolute; z-index: -1; top: -55%; right: -10%; width: 28rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cd-surface-on-brand) 20%, transparent), transparent 68%); content: ""; } .observatory-hero__content { max-width: 52rem; } .observatory-eyebrow, .observatory-section-kicker { display: inline-flex; gap: var(--cd-space-2); align-items: center; margin-bottom: var(--cd-space-2); font: var(--cd-type-eyebrow); letter-spacing: var(--cd-tracking-caps); text-transform: uppercase; } .observatory-section-kicker { color: var(--cd-brand); } .observatory-title { max-width: 46rem; margin-bottom: var(--cd-space-3); color: inherit; font: var(--cd-type-h1); letter-spacing: var(--cd-tracking-tight); } .observatory-lede { max-width: 48rem; margin-bottom: var(--cd-space-5); color: color-mix(in srgb, var(--cd-text-on-brand) 86%, transparent); font-size: var(--cd-text-md); } .observatory-hero__summary { display: grid; align-self: stretch; padding: var(--cd-space-3) var(--cd-space-4); background: color-mix(in srgb, var(--cd-surface-on-brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cd-surface-on-brand) 26%, transparent); border-radius: var(--cd-radius-md); backdrop-filter: blur(8px); } .observatory-hero__summary span { display: flex; align-items: center; justify-content: space-between; gap: var(--cd-space-4); padding: var(--cd-space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--cd-surface-on-brand) 18%, transparent); font-size: var(--cd-text-sm); } .observatory-hero__summary span:last-child { border-bottom: 0; } .observatory-hero__summary strong { font-size: var(--cd-text-xl); } .observatory-dashboard-card { --observatory-accent: var(--cd-success); overflow: hidden; border-top: 3px solid var(--observatory-accent); transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease; } .observatory-dashboard-card--baseline { --observatory-accent: var(--cd-warning); } .observatory-dashboard-card:hover { box-shadow: var(--cd-shadow-md); transform: translateY(-2px); } .observatory-dashboard-icon { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--cd-brand); background: var(--cd-brand-soft); border-radius: var(--cd-radius-md); font-size: var(--cd-text-xl); } .observatory-status { display: inline-flex; gap: var(--cd-space-2); align-items: center; padding: var(--cd-space-1) var(--cd-space-2); color: var(--cd-success-fg); background: var(--cd-success-bg); border-radius: var(--cd-radius-pill); font-size: var(--cd-text-xs); font-weight: var(--cd-weight-semibold); } .observatory-status--baseline { color: var(--cd-warning-fg); background: var(--cd-warning-bg); } .observatory-status__dot { width: 0.45rem; height: 0.45rem; background: currentColor; border-radius: 50%; } .observatory-decision { padding: var(--cd-space-3); color: var(--cd-text); background: var(--cd-surface-sunken); border-left: 3px solid var(--observatory-accent); border-radius: var(--cd-radius-sm); } .observatory-decision span { display: block; margin-bottom: var(--cd-space-1); color: var(--cd-text-muted); font-size: var(--cd-text-2xs); font-weight: var(--cd-weight-bold); letter-spacing: var(--cd-tracking-caps); text-transform: uppercase; } .observatory-signal { color: var(--cd-text-muted); background: var(--cd-surface-sunken); border: 1px solid var(--cd-line); font-weight: var(--cd-weight-medium); } .observatory-baseline { display: flex; gap: var(--cd-space-2); align-items: flex-start; padding: var(--cd-space-3); color: var(--cd-warning-fg); background: var(--cd-warning-bg); border-radius: var(--cd-radius-sm); font-size: var(--cd-text-xs); } .observatory-baseline--ready { color: var(--cd-success-fg); background: var(--cd-success-bg); } /* Opportunity Inbox uses native details disclosures as evidence drawers. The summary remains a normal keyboard control; these rules only add hierarchy. */ .opportunity-finding { overflow: hidden; border-left: 4px solid var(--cd-info); box-shadow: var(--cd-shadow-sm); } .opportunity-finding__category { display: inline-block; margin-bottom: var(--cd-space-2); color: var(--cd-info-fg); font: var(--cd-type-eyebrow); letter-spacing: var(--cd-tracking-caps); text-transform: uppercase; } .opportunity-finding__icon { display: inline-grid; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--cd-info-fg); background: var(--cd-info-bg); border-radius: var(--cd-radius-md); font-size: var(--cd-text-xl); } .opportunity-evidence { border-top: 1px solid var(--cd-line); } .opportunity-evidence > summary { padding: var(--cd-space-3) 0 0; color: var(--cd-brand); cursor: pointer; font-size: var(--cd-text-sm); font-weight: var(--cd-weight-semibold); } .opportunity-evidence[open] > summary { margin-bottom: var(--cd-space-3); } .opportunity-evidence__body { padding: var(--cd-space-4); background: var(--cd-surface-sunken); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-md); } .opportunity-evidence__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-2); } .opportunity-evidence__inputs > div { padding: var(--cd-space-3); background: var(--cd-surface-raised); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); } .opportunity-evidence__inputs dt { margin-bottom: var(--cd-space-1); color: var(--cd-text-muted); font-size: var(--cd-text-xs); font-weight: var(--cd-weight-medium); } .opportunity-evidence__inputs dd { margin: 0; color: var(--cd-text); font-weight: var(--cd-weight-semibold); } .opportunity-evidence__guardrails { padding: var(--cd-space-3); color: var(--cd-warning-fg); background: var(--cd-warning-bg); border-left: 3px solid var(--cd-warning); border-radius: var(--cd-radius-sm); } .opportunity-inbox__empty { background: var(--cd-surface-sunken); border-style: dashed; } .observatory-executive, #observatoryDashboards, #opportunity-inbox, #data-trust, #screens-attention, #navigation-paths, #workflow-xray, #interaction-friction, #feature-adoption, #reliability { scroll-margin-top: calc(var(--chrome-offset) + var(--cd-space-4)); } .product-surface-state { display: inline-flex; align-items: center; padding: var(--cd-space-1) var(--cd-space-2); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-pill); font-size: var(--cd-text-xs); font-weight: var(--cd-weight-semibold); line-height: 1; } .product-surface-state--ready { color: var(--cd-success-fg); background: var(--cd-success-bg); border-color: var(--cd-success); } .product-surface-state--stale, .product-surface-state--backfilling { color: var(--cd-warning-fg); background: var(--cd-warning-bg); border-color: var(--cd-warning); } .product-surface-state--refreshing { color: var(--cd-info-fg); background: var(--cd-info-bg); border-color: var(--cd-info); } .product-surface-state--error { color: var(--cd-danger-fg); background: var(--cd-danger-bg); border-color: var(--cd-danger); } .product-surface-state--unknown, .product-surface-state--never_populated { color: var(--cd-text-muted); background: var(--cd-surface-sunken); } .product-surface-trust-table th { white-space: nowrap; } .observatory-briefing { overflow: hidden; border-color: var(--cd-line-strong); } .observatory-briefing__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-2) var(--cd-space-4); padding: var(--cd-space-3); background: var(--cd-surface-sunken); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); font-size: var(--cd-text-sm); } .observatory-briefing__metric, .observatory-briefing__finding, .observatory-briefing__highlight { padding: var(--cd-space-3); background: var(--cd-surface-sunken); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); } .observatory-briefing__finding dl > div { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: var(--cd-space-2); padding: var(--cd-space-1) 0; border-bottom: 1px solid var(--cd-line); } .observatory-briefing__finding dt { color: var(--cd-text-muted); font-weight: var(--cd-weight-medium); text-transform: capitalize; } .observatory-briefing__finding dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 767.98px) { .observatory-hero { grid-template-columns: 1fr; } .observatory-dashboard-card .border-top { align-items: stretch !important; flex-direction: column; } .observatory-dashboard-card form, .observatory-dashboard-card form .btn { width: 100%; } .opportunity-evidence__inputs { grid-template-columns: 1fr; } .observatory-briefing__meta, .observatory-briefing__finding dl > div { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .observatory-dashboard-card { transition: none; } .observatory-dashboard-card:hover { transform: none; } } /* Stat cards */ .stat-card { border-left: 4px solid transparent; transition: all var(--transition-speed) ease; padding: 1.25rem; background-color: var(--cd-surface-raised); border-radius: var(--cd-radius-md); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); margin-bottom: 0.5rem; } .stat-card.stat-new, .stat-card.stat-card-purple { border-left-color: var(--cd-status-new-fg); } .stat-card.stat-open, .stat-card.stat-card-red { border-left-color: var(--cd-brand); } .stat-card.stat-card-blue { border-left-color: var(--cd-status-pending-fg); } .stat-card.stat-on-hold, .stat-card.stat-card-amber { border-left-color: var(--cd-warning); } .stat-card.stat-card-green { border-left-color: var(--cd-success); } .stat-card .stat-number { font-size: 2rem; font-weight: 700; line-height: 1; margin-bottom: 0.25rem; } .stat-card .stat-label { font-size: 0.8125rem; color: var(--cd-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } /* ─── Stat card links ─── */ a.stat-card-link { display: block; color: inherit; text-decoration: none; } a.stat-card-link:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); transform: translateY(-1px); } .stat-card .stat-card-cta { font-size: 0.72rem; font-weight: 500; opacity: 0; transition: opacity 0.15s; margin-top: 0.5rem; color: var(--cd-text-muted); } a.stat-card-link:hover .stat-card-cta { opacity: 1; } /* ─── Dashboard For You section ─── */ .for-you-most-active-label { font-size: 0.72rem; font-weight: 600; color: var(--cd-warning-fg); text-transform: uppercase; letter-spacing: 0.09em; } .for-you-featured { background: var(--cd-surface-raised); border-left: 4px solid var(--cd-warning); border-top: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); border-radius: var(--cd-radius-md); padding: 0.875rem 1.125rem; transition: box-shadow 0.15s; } .for-you-featured:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); } .for-you-section-label { font-size: 0.72rem; font-weight: 600; color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: 0.09em; } .for-you-agent-avatar { width: 28px; height: 28px; background: var(--cd-brand-fill); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; color: white; } .for-you-table thead th { font-size: 0.72rem; font-weight: 600; color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: 0.07em; background: var(--cd-surface-sunken); border-bottom: 1px solid var(--bs-border-color); padding-top: 0.5rem; padding-bottom: 0.5rem; } .for-you-footer { padding: 0.8rem 1rem; font-size: 0.8rem; color: var(--cd-text-muted); border-top: 1px solid var(--bs-border-color); text-align: center; } /* ─── Dashboard zero state ─── */ .dashboard-zero-state .card-body { padding: 3.5rem 2.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .zero-state-illustration { width: 180px; height: 120px; background: linear-gradient(145deg, var(--cd-warm-50) 0%, var(--cd-warm-100) 100%); border-radius: var(--cd-radius-md); display: flex; align-items: center; justify-content: center; opacity: 0.9; } .zero-state-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; justify-content: center; margin: 2rem 0 1.5rem; } .zero-action-card { flex: 1; min-width: 160px; max-width: 200px; background: var(--cd-surface-raised); border: 1.5px solid var(--bs-border-color); border-radius: var(--cd-radius-md); padding: 1.125rem 1rem; text-align: left; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; gap: 0.3rem; } .zero-action-card:hover { border-color: var(--cd-brand); box-shadow: 0 2px 10px rgba(139, 28, 28, 0.08); color: inherit; } .zero-action-card i { font-size: 1.25rem; color: var(--cd-brand); margin-bottom: 0.375rem; } .zero-action-card strong { font-size: 0.8125rem; color: var(--cd-text); } .zero-action-card span { font-size: 0.75rem; color: var(--cd-text-muted); line-height: 1.5; } /* ─── Dashboard Widgets ─── */ .dash-widget { transition: transform 0.15s ease, opacity 0.15s ease; } .dash-widget.dragging { opacity: 0.4; transform: scale(0.97); } .dash-widget.drag-over .dash-widget-card { outline: 2px dashed var(--cd-brand); outline-offset: 2px; } .dash-widget-card { transition: box-shadow 0.2s ease; } .dash-widget-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .drag-handle { cursor: grab; font-size: 1rem; opacity: 0.3; transition: opacity 0.15s ease; } .dash-widget:hover .drag-handle { opacity: 0.7; } .drag-handle:active { cursor: grabbing; opacity: 1; } .widget-ticket-list .list-group-item { border-left: 3px solid transparent; transition: border-color 0.15s ease; } .widget-ticket-list .list-group-item:hover { border-left-color: var(--cd-brand); background-color: var(--cd-surface-sunken); } /* A widget holds a full page of its view (CD-1742), so the ticket region scrolls inside the card rather than stretching it down the page. Capped in `rem` (not a row count) so the cap holds however tall the rows render; `dvh` keeps a short viewport from needing two scrolls to get past one widget. */ .widget-body-scroll { max-height: min(24rem, 55dvh); overflow-y: auto; } /* Pager sits below the scroll region and stays put while it scrolls. */ .widget-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } /* ── Task list P1 fields ── */ .task-drag-handle { cursor: grab; color: var(--cd-text-muted); opacity: 0.4; transition: opacity 0.15s ease; flex-shrink: 0; } .task-row:hover .task-drag-handle { opacity: 0.8; } .task-drag-handle:active { cursor: grabbing; opacity: 1; } .task-row--dragging { opacity: 0.4; } .task-row--drag-over > div:first-child { /* Was var(--bs-primary, #0d6efd) — a blue drop indicator in a brick app. */ box-shadow: inset 0 2px 0 0 var(--cd-brand); } .task-due-date { width: 130px; flex-shrink: 0; } .task-due-overdue { color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; } .task-assignee-btn { white-space: nowrap; font-size: 0.8125rem; flex-shrink: 0; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .task-notes-btn { flex-shrink: 0; } .task-notes-wrap textarea { resize: vertical; min-height: 56px; } /* ─── Tables ─── */ .table { font-size: 0.875rem; } .table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cd-text-subtle); font-weight: 600; border-bottom: 2px solid var(--cd-line); padding: 0.75rem; white-space: nowrap; } .table tbody td { padding: 0.7rem 0.75rem; vertical-align: middle; border-bottom: 1px solid var(--cd-line); } .table-hover tbody tr:hover { background-color: var(--cd-surface-hover); } /* Row-reference number gutter (CD-724). Add class `row-numbered` to a table and an empty `` as the first cell of each row; the header gets `#`. A pure CSS counter numbers the rows — display:none rows (hidden by the client text filter) don't increment, so visible rows always read 1..N top-to-bottom. Presentational only; not tied to row data. */ .row-numbered tbody { counter-reset: rownum; } .row-numbered tbody > tr { counter-increment: rownum; } .row-numbered th.row-num, .row-numbered td.row-num { width: 1%; text-align: right; color: var(--cd-text-muted); white-space: nowrap; } .row-numbered td.row-num::before { content: counter(rownum); } .cursor-pointer { cursor: pointer; } .cursor-pointer:hover { background-color: var(--cd-surface-hover); } /* ─── Badges ─── */ .badge { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.35em 0.65em; border-radius: var(--cd-radius-sm); } /* Badge ink is mode-STABLE, because the fill is: --cd-text-inverse would flip to dark ink and go dark-on-color in dark mode. That is why these were literal #fff — but the roles have tokens now (--cd-*-on, --cd-text-on-brand), which are pinned in both themes and say WHY they don't flip. .badge-{success,warning,danger,info,primary} are ALSO defined in tokens.css, which is linked after this file and therefore wins. Both copies are kept in agreement on purpose rather than deleting these: whichever file loads first, the badge renders the same, so the pair does not depend on link order. */ .badge-new { background-color: var(--cd-status-new-solid); color: var(--cd-status-new-on); } .badge-primary { background-color: var(--cd-brand-fill); color: var(--cd-text-on-brand); } .badge-info { background-color: var(--cd-info); color: var(--cd-info-on); } /* White on #C08A2D is ~3.1:1 — under AA at badge size. See --cd-warning-on. */ .badge-warning { background-color: var(--cd-warning); color: var(--cd-warning-on); } .badge-success { background-color: var(--cd-success); color: var(--cd-success-on); } .badge-secondary { background-color: var(--cd-text-muted); color: var(--cd-text-on-brand); } .badge-danger { background-color: var(--cd-danger); color: var(--cd-danger-on); } /* Per-user opt-out of priority color coding (My Profile → Preferences). Neutralizes only priority badges to a single grey; labels stay readable. */ html.no-priority-colors .badge-priority { background-color: var(--cd-text-muted); color: var(--cd-text-on-brand); } /* ─── Message provenance chips (APU-38921, variant A: pill chips) ─── */ .provenance-chip { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.2em 0.65em; border-radius: var(--cd-radius-pill); /* pill, overriding the square .badge default */ vertical-align: middle; } /* Staff author — brand-tinted pill */ .provenance-chip-agent { background-color: var(--cd-brand-soft); color: var(--cd-brand-hover); border: 1px solid var(--cd-brand-soft); } /* Email origin — neutral pill carrying the sending address */ .provenance-chip-email { background-color: var(--cd-surface-sunken); color: var(--cd-text-muted); border: 1px solid var(--cd-line); font-weight: 500; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } /* ─── Filter Builder ─── */ .fb-checkbox-group { max-height: 180px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: var(--cd-radius-sm); padding: 0.5rem; } /* Separates pinned (checked) items from the rest of the group (CD-907) */ .fb-checkbox-group .fb-pinned-divider { border-top: 1px dashed var(--bs-border-color); margin: 0.375rem 0; } .fb-selected-count { font-size: 0.65rem; vertical-align: text-bottom; } .inline-edit-saving { opacity: 0.6; pointer-events: none; } .inline-edit-success { border-color: var(--cd-success) !important; background-color: rgba(25, 135, 84, 0.08) !important; } .inline-edit-error { border-color: var(--cd-danger) !important; background-color: rgba(220, 53, 69, 0.08) !important; } /* Table view: prevent cell wrapping so .table-responsive scrolls horizontally */ [data-view-table] .table td, [data-view-table] .table th { white-space: nowrap; } /* Subscribe star column */ .ticket-star-col { width: 32px; padding: 0 0.25rem !important; text-align: center; } /* Sortable table headers (cardSort.js): the inner .th-sort-btn provides the cell padding, so zero the th. tableSorter.js reuses .sortable-th without a button, so scope this to headers that actually contain one — otherwise the first header cell loses its left padding and no longer lines up with its column. */ .sortable-th:has(.th-sort-btn) { padding: 0 !important; } .th-sort-btn { display: inline-flex; align-items: center; gap: 0.25rem; width: 100%; background: transparent; border: none; padding: 0.5rem 0.5rem; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-align: left; white-space: nowrap; } /* The control is a