/* ============================================================ Medcurity UI Uplift — 2026-05-28 (Makena-ui-uplift-2026-05-28) ============================================================ This stylesheet sits ON TOP of public/css/app.css (the compiled Bootstrap/SCSS bundle). It restyles the authenticated app to match the Realistic Pass mockup (2026-05-21) without altering any application behavior: - Forms still submit to the same routes. - Dropdowns still use the same Bootstrap JS hooks. - AJAX endpoints (alert dismiss, evidence upload, etc.) are untouched. - Vue components mount in the same containers (#alertApp, Vue widgets) — only their visual chrome changes. Public/marketing pages, the BAA signing page, PDF templates, and email layouts are intentionally NOT touched by these rules. ============================================================ */ :root { --mc-navy: #0B3B5E; --mc-navy-deep: #082c47; --mc-blue: #0071BC; --mc-blue-soft: #e6f0f8; --mc-red: #C41230; --mc-red-soft: #fadbe1; --mc-amber: #BA7517; --mc-amber-soft: #fdf0d8; --mc-green: #1f8a4c; --mc-green-soft: #e6f4ec; --mc-teal: #197a7a; --mc-teal-soft: #d9eded; --mc-purple: #6c4eb2; --mc-purple-soft: #ede7f8; --mc-cream: #f4ede0; --mc-cream-soft: #fbfaf6; --mc-cream-border: #ece0c4; --mc-ink: #1a2230; --mc-mute: #5a6b80; --mc-mute-2: #8896a8; --mc-mute-3: #a8b0bd; --mc-line: #e2e8ef; --mc-line-2: #eef2f6; --mc-shadow-1: 0 1px 2px rgba(11, 59, 94, 0.04), 0 1px 3px rgba(11, 59, 94, 0.04); --mc-shadow-2: 0 4px 12px rgba(11, 59, 94, 0.08); --mc-shadow-3: 0 14px 32px rgba(11, 59, 94, 0.10); --mc-font: -apple-system, BlinkMacSystemFont, "Inter", "Open Sans", "Segoe UI", system-ui, sans-serif; --mc-sidebar-w: 220px; --mc-sidebar-w-collapsed: 64px; /* Color review 2026-06-24: graduated score ramp + singular focus. */ --mc-clay: #C2410C; /* low-score / room-to-grow (not crimson) */ --mc-gold: #B8860B; /* mid-score */ --mc-focus: var(--mc-navy); /* Semantic roles (round 2): red = alert/overdue ONLY. */ --action: var(--mc-navy); --alert: var(--mc-red); --warning: var(--mc-gold); --success: var(--mc-green); --text-secondary: var(--mc-mute); --score-low: var(--mc-clay); --score-mid: var(--mc-gold); --score-high: var(--mc-green); } /* ============================================================ 1. SCOPE — only on authenticated app pages ============================================================ Triggered by body.has-uplift (added in layouts/app.blade.php when auth()->check() && company context is present). Public/marketing pages keep the original look entirely. */ body.has-uplift { font-family: var(--mc-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #f4f6f9; color: var(--mc-ink); font-feature-settings: "tnum", "ss01"; font-size: 14px; min-height: 100vh; } /* The legacy theme sets `overflow-x: hidden` on , which makes the body a scroll container and silently breaks `position: sticky` for ALL descendants — the uplift topbar (.mc-topbar) and the setup-wizard banner (.mc-wiz-banner) both have `position: sticky` but were scrolling away. `overflow-x: clip` clips horizontal overflow identically yet does NOT establish a scroll container (overflow-y stays `visible`, not coerced to `auto`), so sticky resolves to the document scroll and works again. The `hidden` line is a fallback for browsers without `clip` support. */ body.has-uplift { overflow-x: hidden; overflow-x: clip; } /* The legacy chrome elements still render but are visually replaced; hiding them lets the new shell take over without ripping wiring out of app.blade.php. */ body.has-uplift > header.header, body.has-uplift > .nav-bg, body.has-uplift > nav.nav, body.has-uplift > footer { display: none !important; } /* The admin-header carries the page title (@section header_title). Don't hide it — restyle it so it reads as a clean page header inside the new content area. */ body.has-uplift .admin-header-area { background: transparent; padding: 0; margin: 0; } body.has-uplift .admin-header-area .container { max-width: 100%; padding: 0; } body.has-uplift .admin-header { padding: 20px 32px 4px; background: transparent; border: none; } body.has-uplift .admin-header h3 { font-size: 26px; font-weight: 600; color: var(--mc-navy); letter-spacing: -0.014em; margin: 0 0 4px; } body.has-uplift .admin-header h4 { font-size: 13.5px; color: var(--mc-mute); font-weight: 500; margin: 0; } body.has-uplift .admin-header h4 small { display: inline-block; margin-right: 6px; color: var(--mc-mute-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } /* The original admin-header has an inline user dropdown — the new topbar carries the user menu, so suppress the inline one. */ body.has-uplift .admin-header .user-dropdown { display: none !important; } /* The original admin-header has an inline multi-company switch — the new sidebar carries that switch, so suppress this one. */ body.has-uplift .admin-header .multiple-companies { display: none !important; } /* The Vue alert bar slot — keep at top of viewport, on the canvas. */ body.has-uplift #alertApp { position: relative; z-index: 1100; } /* Demo lock indicator floats top-right inside the new shell. */ body.has-uplift .is-demo { position: fixed; top: 14px; right: 18px; z-index: 1200; /* The legacy app.css `.is-demo` rule pins this badge with `bottom: 0; left: 0` (a full-width red bar). We only override top/right here, so without explicitly clearing the legacy bottom/left the element ends up with all four insets set and stretches to fill the viewport — combined with the 999px radius below that paints a giant amber ellipse over the whole page on demo accounts. Reset them so the badge shrinks to its content in the top-right corner. */ bottom: auto; left: auto; background: var(--mc-amber-soft); color: var(--mc-amber); padding: 6px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--mc-shadow-2); } body.has-uplift .is-demo .demo-toggle { margin-left: 8px; cursor: pointer; } /* ============================================================ 2. APPLICATION SHELL — sidebar + canvas ============================================================ */ body.has-uplift main.py-4 { padding: 0 !important; margin: 0; } .mc-shell { /* No grid — the sidebar is position:fixed and floats over the viewport's left edge. Reserve space for it via padding-left on .mc-main so the main content doesn't slide under the sidebar. */ position: relative; min-height: 100vh; background: radial-gradient(circle at 82% 4%, rgba(255, 220, 160, 0.20), transparent 50%), radial-gradient(circle at 6% 96%, rgba(0, 113, 188, 0.10), transparent 55%), linear-gradient(180deg, #f3f6fb 0%, #ebf1f7 100%); } .mc-shell .mc-main { padding-left: var(--mc-sidebar-w); min-width: 0; transition: padding-left 0.2s ease; } .mc-shell.is-collapsed .mc-main { padding-left: var(--mc-sidebar-w-collapsed); } /* ============================================================ 3. SIDEBAR ============================================================ */ .mc-side { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-right: 1px solid rgba(11, 59, 94, 0.06); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; /* Anchored to the viewport so the nav bar is always visible while the main content scrolls. The .mc-shell reserves a same-width column so layout still flows around it. */ position: fixed; top: 0; left: 0; width: var(--mc-sidebar-w); height: 100vh; overflow-y: auto; overflow-x: visible; /* High z-index so the collapsed-sidebar flyout submenus (z:1200 inside this stacking context) can rise above page chrome and hero cards. Without this the flyout was rendered but hidden behind dashboard content. */ z-index: 1100; transition: padding 0.2s ease, width 0.2s ease; } .mc-shell.is-collapsed .mc-side { width: var(--mc-sidebar-w-collapsed); } .mc-shell.is-collapsed .mc-side { padding: 14px 6px; } .mc-brand { /* Fixed height so collapsed/expanded states have identical vertical footprints — nothing below shifts when the rail toggles. Minimal padding/margin so the logo fills the row. */ height: 52px; flex: 0 0 52px; padding: 0 4px; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; } .mc-brand:hover { text-decoration: none; } .mc-brand-img { height: 48px; width: auto; max-width: 100%; display: block; object-fit: contain; transition: opacity 0.15s ease; } .mc-brand:hover .mc-brand-img { opacity: 0.85; } /* Brand row in the expanded state — show the wordmark, hide the mini. */ .mc-brand-mini { display: none; } /* When the rail is collapsed, swap the wordmark for the favicon-style mini mark. Same .mc-brand height keeps row position locked. */ .mc-shell.is-collapsed .mc-brand { padding: 0; } .mc-shell.is-collapsed .mc-brand-img { display: none; } .mc-shell.is-collapsed .mc-brand-mini { display: block; height: 28px; width: 28px; object-fit: contain; } /* Collapse / expand toggle — position:fixed so it sits at the same spot on screen at all times, anchored to the sidebar/main border. Light/airy style that matches the rest of the platform — white with a soft mute-toned border and navy chevron, no heavy navy fill. */ .mc-collapse-toggle { position: fixed; /* Vertically aligned with the .mc-brand row: .mc-side padding-top (14px) + half of .mc-brand height (26px) − half of the toggle's own height (14px) = 26px. */ top: 26px; left: calc(var(--mc-sidebar-w) - 14px); z-index: 10000; width: 28px; height: 28px; border-radius: 50%; background: white; color: var(--mc-navy); border: 1px solid var(--mc-line); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; box-shadow: 0 2px 8px rgba(11, 59, 94, 0.10); transition: transform 0.2s ease, background 0.15s ease, left 0.2s ease, border-color 0.15s ease; user-select: none; padding: 0; } .mc-collapse-toggle i { font-size: 12px; line-height: 1; display: block; /* The FA chevron sits ~1px right of center in its own bounding box. Nudge it left so it reads as horizontally centered when pointing left, and let the rotation below flip the nudge so it ALSO reads as centered when pointing right. */ transform: translateX(-1px); } .mc-collapse-toggle:hover { background: var(--mc-blue-soft); border-color: var(--mc-blue); color: var(--mc-navy); } .mc-shell.is-collapsed .mc-collapse-toggle { left: calc(var(--mc-sidebar-w-collapsed) - 14px); } .mc-shell.is-collapsed .mc-collapse-toggle i { /* Right-to-left order: translateX(-1px) is applied first (icon shifts 1px left in its original orientation), then rotate(180deg) flips the whole thing — turning that "1px left" into "1px right" in screen coordinates, which is exactly what we need to re-center the now-rightward-pointing chevron. */ transform: rotate(180deg) translateX(-1px); } /* While any Bootstrap modal is open (body carries .modal-open), the backdrop (z:1040) is supposed to gray out the ENTIRE page — but the fixed sidebar (z:1100) and its collapse/expand toggle (z:10000) normally sit above it, so they stayed full-brightness and clickable next to e.g. the "How Posture Score is calculated" modal. Drop both below the backdrop for the duration of the modal so the whole left rail is dimmed (and click-shielded) like the rest of the background. z-index returns to normal automatically when Bootstrap removes .modal-open on close. */ body.has-uplift.modal-open .mc-side { z-index: 1030; } body.has-uplift.modal-open .mc-collapse-toggle { z-index: 1030; } /* Org switcher — links into the existing company-list dropdown pulled from admin_header.blade.php. */ .mc-org { padding: 9px 10px; border-radius: 10px; background: rgba(11,59,94,0.05); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; text-decoration: none; color: inherit; position: relative; } .mc-org:hover { background: rgba(11,59,94,0.08); text-decoration: none; color: inherit; } .mc-org-av { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--mc-amber), #d99440); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } .mc-org-info { flex: 1; min-width: 0; line-height: 1.2; } .mc-org-info b { font-size: 12.5px; color: var(--mc-navy); font-weight: 700; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-org-info small { display: block; font-size: 10.5px; color: var(--mc-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Org-switcher chevron — matches the category chevrons so the whole sidebar reads consistently. */ .mc-org-chev { color: var(--mc-mute-2); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.18s ease; line-height: 1; } .mc-org-chev i { font-size: 10px; line-height: 1; display: block; } .mc-org.is-open .mc-org-chev { transform: rotate(180deg); } .mc-shell.is-collapsed .mc-org { padding: 6px; justify-content: center; } .mc-shell.is-collapsed .mc-org-info, .mc-shell.is-collapsed .mc-org-chev { display: none; } /* The org switcher's dropdown panel — fed from the existing company list. Uses absolute positioning so it floats over the sidebar like a popover. */ .mc-org-menu { /* Position:fixed so the dropdown escapes the .mc-side's overflow:auto clipping and can float over the rest of the page. left/top are set in JS from .mc-org's bounding rect when the menu opens. */ position: fixed; width: 320px; max-width: 90vw; background: white; border: 1px solid var(--mc-line); border-radius: 12px; box-shadow: 0 14px 36px rgba(11, 59, 94, 0.18); padding: 8px; z-index: 9000; max-height: 360px; overflow-y: auto; display: none; } /* The menu is re-parented to by JS so its show-rule no longer nests under .mc-org — toggle a class on the menu itself instead. */ .mc-org-menu.is-open { display: block; } .mc-org-menu input { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--mc-line); font-size: 12.5px; font-family: inherit; margin-bottom: 6px; } .mc-org-menu input:focus { outline: none; border-color: var(--mc-blue); } .mc-org-menu a.dropdown-item { padding: 8px 12px; border-radius: 7px; font-size: 13px; color: var(--mc-ink); text-decoration: none; /* Single-line items with ellipsis when names overflow — the truncation cue tells the user there's more text. */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-org-menu a.dropdown-item:hover { background: var(--mc-blue-soft); color: var(--mc-navy); /* On hover, show the full name via tooltip-like title attribute (set on each already by the markup); also widen by allowing the hover state to extend beyond the menu briefly. */ } .mc-org-menu a.dropdown-item:focus-visible { outline: 2px solid var(--mc-blue); outline-offset: -1px; } .mc-org-menu ul { list-style: none; margin: 0; padding: 0; } /* Nav category accordion. */ .mc-cat { margin-bottom: 4px; position: relative; } .mc-cat-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer; list-style: none; } .mc-cat-head::-webkit-details-marker { display: none; } .mc-cat-head:hover { background: rgba(11,59,94,0.04); } .mc-cat-icon { width: 22px; height: 22px; background: transparent; color: var(--mc-mute); border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; filter: none; } .mc-cat-icon i { font-size: 14px; color: inherit; } .mc-cat-head:hover .mc-cat-icon { color: var(--mc-navy); } .mc-cat-label { flex: 1; font-size: 10.5px; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .mc-cat-chev { color: var(--mc-mute-2); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.18s ease; line-height: 1; } .mc-cat-chev i { font-size: 10px; line-height: 1; display: block; } .mc-cat[open] .mc-cat-chev { transform: rotate(180deg); } .mc-cat-items { padding: 4px 0 8px; } /* CONDUCTOR3 #2 — guarantee an open group reveals its items even when a page- scoped stylesheet (e.g. the SRA questions view) overrides the accordion. */ .mc-shell:not(.is-collapsed) details.mc-cat[open] > .mc-cat-items { display: block !important; max-height: none !important; overflow: visible !important; } /* Indent module items under each category — connected by a left rule. */ .mc-nav { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 22px; border-radius: 0 8px 8px 0; font-size: 13px; color: var(--mc-ink); cursor: pointer; text-decoration: none; position: relative; margin-left: 14px; border-left: 2px solid var(--mc-line-2); } .mc-nav:hover { background: rgba(11,59,94,0.04); border-left-color: var(--mc-mute-2); color: var(--mc-navy); text-decoration: none; } .mc-nav.active { background: var(--mc-blue-soft); border-left-color: var(--mc-blue); color: var(--mc-navy); font-weight: 700; } .mc-nav-ct { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--mc-red-soft); color: var(--mc-red); } .mc-nav-ct.warn { background: var(--mc-amber-soft); color: var(--mc-amber); } .mc-nav-ct.ok { background: var(--mc-green-soft); color: var(--mc-green); } /* Collapsed state — category icons only with a popout panel. */ .mc-shell.is-collapsed .mc-cat-head { justify-content: center; padding: 6px 0; } .mc-shell.is-collapsed .mc-cat-label, .mc-shell.is-collapsed .mc-cat-chev { display: none; } .mc-shell.is-collapsed .mc-cat-items { display: none; } .mc-shell.is-collapsed .mc-cat { position: relative; } /* Use position: fixed so the flyout escapes the .mc-side scroll container's overflow context (overflow-x: visible gets coerced to auto when overflow-y is auto, so we can't fix it with overflow alone). The left/top coordinates are set by JS based on each cat-head's screen position. */ /* Flyout styling applies whether the .mc-cat-items is still inside its original .mc-cat (e.g., during the brief instant before JS lifts it) OR has been lifted out to document.body (which is required to escape .mc-side's backdrop-filter containing block). The lifted variant lives directly under and is identified by the `data-mc-flyout-owner` attr that JS sets on lift. */ .mc-shell.is-collapsed .mc-cat[open] .mc-cat-items, .mc-cat-items[data-mc-flyout-owner] { display: block; position: fixed; min-width: 230px; background: white; border: 1px solid var(--mc-line); border-radius: 12px; padding: 8px; box-shadow: 0 14px 36px rgba(11,59,94,0.18); z-index: 9999; } .mc-shell.is-collapsed .mc-cat[open] .mc-cat-items::before, .mc-cat-items[data-mc-flyout-owner]::before { content: attr(data-cat); display: block; padding: 6px 10px 8px; font-size: 10.5px; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; border-bottom: 1px solid var(--mc-line-2); margin: 0 0 6px; } .mc-shell.is-collapsed .mc-cat[open] .mc-cat-items .mc-nav, .mc-cat-items[data-mc-flyout-owner] .mc-nav { padding: 7px 12px; justify-content: flex-start; margin-left: 0; border-left: none; border-radius: 7px; display: flex; align-items: center; color: var(--mc-navy); text-decoration: none; font-size: 13.5px; font-weight: 500; } .mc-cat-items[data-mc-flyout-owner] .mc-nav:hover { background: rgba(11, 59, 94, 0.05); color: var(--mc-blue, #185FA5); text-decoration: none; } .mc-shell.is-collapsed .mc-cat[open] .mc-cat-items::before { content: attr(data-cat); display: block; padding: 6px 10px 8px; font-size: 10.5px; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; border-bottom: 1px solid var(--mc-line-2); margin: 0 0 6px; } .mc-shell.is-collapsed .mc-cat[open] .mc-cat-items .mc-nav { padding: 7px 12px; justify-content: flex-start; margin-left: 0; border-left: none; border-radius: 7px; } .mc-shell.is-collapsed .mc-cat-head:hover .mc-cat-icon { color: var(--mc-navy); } /* Side footer — current user, clickable button with upward menu. */ .mc-sidefoot-wrap { margin-top: auto; position: relative; padding-top: 8px; border-top: 1px solid rgba(11,59,94,0.06); } .mc-sidefoot { width: 100%; padding: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; text-align: left; background: transparent; border: 0; border-radius: 8px; color: inherit; cursor: pointer; font-family: inherit; transition: background 0.15s ease; } .mc-sidefoot:hover { background: rgba(11,59,94,0.05); } .mc-sidefoot-wrap.is-open .mc-sidefoot { background: rgba(11,59,94,0.06); } .mc-sidefoot-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--mc-amber), #d99440); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .mc-sidefoot-who { line-height: 1.2; flex: 1; min-width: 0; } .mc-sidefoot-who b { color: var(--mc-navy); font-weight: 700; font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-sidefoot-who small { display: block; color: var(--mc-mute); font-size: 11px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-sidefoot-chev { font-size: 10px; color: var(--mc-mute-2); transition: transform 0.18s ease; } .mc-sidefoot-wrap.is-open .mc-sidefoot-chev { transform: rotate(180deg); } /* Upward-expanding menu — sits above the button. */ .mc-sidefoot-menu { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); background: white; border: 1px solid var(--mc-line); border-radius: 10px; box-shadow: 0 14px 36px rgba(11, 59, 94, 0.18); padding: 6px; z-index: 200; display: none; } .mc-sidefoot-wrap.is-open .mc-sidefoot-menu { display: block; } .mc-sidefoot-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--mc-ink); text-decoration: none; } .mc-sidefoot-item:hover { background: var(--mc-blue-soft); color: var(--mc-navy); text-decoration: none; } .mc-sidefoot-item i { color: var(--mc-mute); width: 14px; } .mc-sidefoot-item:hover i { color: var(--mc-navy); } .mc-sidefoot-sep { height: 1px; background: var(--mc-line); margin: 4px 6px; } .mc-shell.is-collapsed .mc-sidefoot { justify-content: center; padding: 12px 6px; } .mc-shell.is-collapsed .mc-sidefoot-who, .mc-shell.is-collapsed .mc-sidefoot-chev { display: none; } .mc-shell.is-collapsed .mc-sidefoot-menu { left: calc(100% + 8px); right: auto; bottom: 0; min-width: 200px; } /* ============================================================ 4. TOPBAR ============================================================ */ .mc-main { min-width: 0; display: flex; flex-direction: column; } .mc-topbar { padding: 14px 32px; background: rgba(255,255,255,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(11,59,94,0.06); display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 40; } /* Search affordance — pill input with a leading FA magnifier so the icon matches the rest of the platform's iconography. The wrap is the visual pill; the bare inside sheds its own background. */ .mc-search-wrap { flex: 1; max-width: 360px; margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(11,59,94,0.05); border: 1px solid transparent; transition: border-color 120ms ease, background 120ms ease; } .mc-search-wrap:focus-within { border-color: rgba(0,113,188,0.3); background: white; } .mc-search-ic { font-size: 12px; color: var(--mc-mute); flex-shrink: 0; } .mc-search { flex: 1; min-width: 0; padding: 0; margin: 0; border: 0; background: transparent; font-family: inherit; font-size: 13px; color: var(--mc-ink); } .mc-search:focus { outline: none; } .mc-search::placeholder { color: var(--mc-mute); } .mc-search::-webkit-search-cancel-button { display: none; } /* Search host — relatively-positioned wrapper so the dropdown can be absolutely positioned beneath it. The wrap (.mc-search-wrap) remains the visible pill. */ .mc-search-host { position: relative; flex: 1; max-width: 360px; } .mc-search-host .mc-search-wrap { flex: 1; max-width: none; width: 100%; } /* Subtle inline loader. Shown via JS while a request is in flight. */ .mc-search-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(11,59,94,0.15); border-top-color: var(--mc-blue); animation: mc-search-spin 700ms linear infinite; display: none; flex-shrink: 0; } .mc-search-host.is-loading .mc-search-spinner { display: inline-block; } @keyframes mc-search-spin { to { transform: rotate(360deg); } } /* The results dropdown. Lives in the same `.mc-search-host` block — position absolute below the pill. Grouped sections with headers, each row a button-like link with icon + label + meta. */ .mc-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 360px; max-width: 460px; max-height: 60vh; overflow-y: auto; background: white; border: 1px solid rgba(11,59,94,0.10); border-radius: 14px; box-shadow: 0 12px 32px rgba(11,59,94,0.14), 0 2px 6px rgba(11,59,94,0.06); z-index: 9000; padding: 6px; } .mc-search-results[hidden] { display: none; } .mc-search-group { padding: 8px 0 6px; } .mc-search-group + .mc-search-group { border-top: 1px solid rgba(11,59,94,0.06); } .mc-search-group-head { font-size: 10.5px; font-weight: 700; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px 6px; } .mc-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--mc-ink); cursor: pointer; } .mc-search-row:hover, .mc-search-row.is-active { background: var(--mc-blue-soft); color: var(--mc-navy); text-decoration: none; } .mc-search-row .ic { width: 26px; height: 26px; border-radius: 7px; background: rgba(11,59,94,0.06); color: var(--mc-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .mc-search-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mc-search-row .lbl { font-size: 13.5px; font-weight: 600; color: var(--mc-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-search-row .sub { font-size: 11.5px; color: var(--mc-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-search-row mark { background: rgba(0,113,188,0.18); color: inherit; padding: 0 1px; border-radius: 2px; } .mc-search-empty, .mc-search-hint { padding: 12px 14px; font-size: 13px; color: var(--mc-mute); text-align: center; } .mc-search-empty b { color: var(--mc-navy); font-weight: 700; } .mc-topbar-live { font-size: 11.5px; color: var(--mc-mute); display: inline-flex; align-items: center; gap: 7px; } .mc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mc-green); display: inline-block; vertical-align: middle; box-shadow: 0 0 0 0 rgba(31, 138, 76, 0.55); animation: mc-pulse 2.4s ease-in-out infinite; } .mc-live-dot.warn { background: var(--mc-amber); } /* "Saved X ago" / "Synced X ago" status — replaces the green pulsing dot with a matching-green Font Awesome icon. The sync icon spins so the user feels the page is actively reflecting the latest data. */ .mc-topbar-live .mc-live-status-ic { font-size: 11px; color: #1f8a4c; line-height: 1; } .mc-topbar-live.is-status-synced .mc-live-status-ic { animation: mc-sync-spin 2.2s linear infinite; } .mc-topbar-live.is-status-saved { color: #166831; } .mc-topbar-live.is-status-synced { color: #166831; } @keyframes mc-sync-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes mc-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 76, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(31, 138, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 138, 76, 0); } } .mc-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .mc-bell { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--mc-mute); font-size: 14px; position: relative; background: transparent; border: none; } .mc-bell:hover { color: var(--mc-navy); background: rgba(11,59,94,0.05); } .mc-bell .mc-bell-count { position: absolute; top: 2px; right: 2px; background: var(--mc-red); color: white; font-size: 9px; font-weight: 700; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid white; } /* ============================================================ Notifications — bell dropdown (2026-06-08) Bell toggles a glassy dropdown anchored under it; the unread badge is driven client-side from the JSON feed. Mirrors the search dropdown's look and the topbar's surface tokens. ============================================================ */ .mc-notif-host { position: relative; display: inline-flex; } .mc-bell .mc-bell-badge { position: absolute; top: 1px; right: 1px; background: var(--mc-red); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #fff; line-height: 1; pointer-events: none; } .mc-bell.has-unread { color: var(--mc-navy); } .mc-notif-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; width: 360px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--mc-line); border-radius: 14px; box-shadow: var(--mc-shadow-3); overflow: hidden; } .mc-notif-panel[hidden] { display: none; } .mc-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--mc-line-2); } .mc-notif-title { font-size: 13.5px; font-weight: 700; color: var(--mc-ink); } .mc-notif-readall { background: transparent; border: none; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--mc-blue); padding: 2px 4px; border-radius: 6px; font-family: inherit; } .mc-notif-readall:hover { background: var(--mc-blue-soft); } .mc-notif-list { max-height: 60vh; overflow-y: auto; padding: 4px; } .mc-notif-loading, .mc-notif-empty { padding: 26px 16px; text-align: center; color: var(--mc-mute); font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .mc-notif-empty i { font-size: 22px; color: var(--mc-green); } .mc-notif-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: inherit; cursor: pointer; position: relative; } .mc-notif-row + .mc-notif-row { margin-top: 2px; } .mc-notif-row:hover { background: rgba(11,59,94,0.04); } .mc-notif-row.is-unread { background: rgba(0,113,188,0.05); } .mc-notif-row.is-unread:hover { background: rgba(0,113,188,0.09); } .mc-notif-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--mc-blue-soft); color: var(--mc-blue); } .mc-notif-row.tone-danger .mc-notif-ic { background: var(--mc-red-soft); color: var(--mc-red); } .mc-notif-row.tone-warning .mc-notif-ic { background: var(--mc-amber-soft); color: var(--mc-amber); } .mc-notif-row.tone-info .mc-notif-ic { background: var(--mc-blue-soft); color: var(--mc-blue); } .mc-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .mc-notif-row-title { font-size: 13px; font-weight: 600; color: var(--mc-ink); line-height: 1.3; } .mc-notif-row-text { font-size: 11.5px; color: var(--mc-mute); line-height: 1.35; } .mc-notif-row-meta { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mc-mute-2); margin-top: 2px; } .mc-notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: var(--mc-blue); margin-top: 6px; } /* Top-right shows a static image of the current tenant's logo — no button affordance, no link. Whitelabel tenants get their uploaded logo as an ; everyone else gets a 2-letter initials avatar acting as a stand-in logo. */ .mc-topbar-co { display: inline-flex; align-items: center; justify-content: center; cursor: default; background: transparent; border: 0; padding: 0; } .mc-topbar-co-img { height: 34px; width: auto; max-width: 140px; object-fit: contain; display: block; } .mc-topbar-co-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--mc-amber), #d99440); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; } /* ============================================================ 5. PAGE CONTENT WRAPPER ============================================================ */ .mc-content { padding: 0 0 60px; flex: 1; } .mc-content > .container, .mc-content > .container-fluid { max-width: 1480px; } /* Page header within content — title + meta. */ .mc-page-head { padding: 24px 32px 8px; } .mc-page-head h1, .mc-page-head .mc-page-title { font-size: 26px; font-weight: 600; margin: 0 0 4px; color: var(--mc-navy); letter-spacing: -0.014em; } .mc-page-head .mc-page-sub { font-size: 13px; color: var(--mc-mute); margin: 0; } /* ============================================================ 6. HERO (Dashboard cream card) ============================================================ */ .mc-hero { margin: 14px 32px 12px; padding: 22px 36px; border-radius: 22px; background: radial-gradient(circle at 88% 0%, rgba(255, 219, 168, 0.50), transparent 58%), linear-gradient(110deg, #ffffff 0%, #fdf8f1 42%, #fbead6 100%); box-shadow: 0 1px 2px rgba(186,117,23,0.04), 0 14px 32px rgba(186,117,23,0.08); position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; } @media (max-width: 900px) { .mc-hero { grid-template-columns: 1fr; padding: 18px 22px; } } .mc-hero h2 { margin: 0 0 6px; font-size: 26px; font-weight: 500; color: var(--mc-navy); letter-spacing: -0.018em; line-height: 1.15; } .mc-hero h2 em { color: var(--mc-navy); font-style: normal; font-weight: 600; } .mc-hero p { margin: 0 0 12px; font-size: 14px; color: #5a4a2a; line-height: 1.5; max-width: 460px; } .mc-hero p b { color: var(--mc-navy); } .mc-hero p b.good { color: var(--mc-green); } /* "Biggest lift" inline tip inside the hero. */ .mc-lift { display: inline-flex; align-items: center; gap: 12px; background: white; border: 1px solid rgba(186,117,23,0.20); border-radius: 14px; padding: 12px 16px; max-width: 540px; box-shadow: 0 4px 14px rgba(186,117,23,0.06); text-decoration: none; color: inherit; } .mc-lift:hover { text-decoration: none; color: inherit; box-shadow: 0 8px 20px rgba(186,117,23,0.10); } .mc-lift .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--mc-amber-soft); color: var(--mc-amber); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .mc-lift .txt { font-size: 13px; color: var(--mc-ink); line-height: 1.5; } .mc-lift .txt b { color: var(--mc-navy); font-weight: 700; } .mc-lift .txt a { color: var(--mc-blue); font-weight: 700; text-decoration: none; white-space: nowrap; } /* Posture ring. */ /* Hero column wrapper — stacks the ring + the "last lift" line beneath it. Both center horizontally. */ .mc-postring-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .mc-postring { display: flex; justify-content: center; align-items: center; position: relative; } .mc-postring svg { width: 188px; height: 188px; transform: rotate(-90deg); /* Allow the `.fg` arc's drop-shadow to bleed past the SVG box. Without this, the filter region is clipped to the SVG element's edges and the shadow shows hard rectangular corners. */ overflow: visible; } .mc-postring .bg { fill: none; stroke: rgba(11,59,94,0.12); stroke-width: 14; } .mc-postring .fg { fill: none; stroke: url(#mc-grad); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 628.32; filter: drop-shadow(0 6px 12px rgba(0,113,188,0.25)); transition: stroke-dashoffset 0.6s ease; } /* Score-tier color variants. Applied via a class on `.mc-postring` chosen from `$mc_posture_pct` in the dashboard hero — green at 85%+, blue 60–84, amber 40–59, red below 40. The drop-shadow hue tracks the stroke so the glow reads as the same colour. */ .mc-postring.is-green .fg { stroke: url(#mc-grad-green); filter: drop-shadow(0 6px 12px rgba(31,138,76,0.25)); } .mc-postring.is-blue .fg { stroke: url(#mc-grad-blue); filter: drop-shadow(0 6px 12px rgba(0,113,188,0.25)); } .mc-postring.is-amber .fg { stroke: url(#mc-grad-amber); filter: drop-shadow(0 6px 12px rgba(214,141,0,0.28)); } .mc-postring.is-red .fg { stroke: url(#mc-grad-red); filter: drop-shadow(0 6px 12px rgba(196,18,48,0.28)); } .mc-postring.is-clay .fg { stroke: url(#mc-grad-clay); filter: drop-shadow(0 6px 12px rgba(194,65,12,0.26)); } /* Score number tracks the ring tier (low=clay, mid=gold, high=green). */ .mc-postring.is-green .ctr .num { color: var(--score-high); } .mc-postring.is-amber .ctr .num { color: var(--score-mid); } .mc-postring.is-clay .ctr .num { color: var(--score-low); } .mc-postring .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mc-postring .ctr .label { font-size: 10px; font-weight: 700; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.14em; } .mc-postring .ctr .num { font-size: 56px; font-weight: 300; color: var(--mc-navy); letter-spacing: -0.04em; line-height: 1; margin-top: 4px; } .mc-postring .ctr .num small { font-size: 21px; font-weight: 400; color: var(--mc-mute); } /* Last action that lifted posture — sits as a single line of inline text beneath the ring, no background container. The arrow + points pop in green, the event reads navy, and the timestamp recedes in muted grey. Keeps the hero card visually uncluttered. */ .mc-posture-lift { display: inline-flex; align-items: baseline; gap: 6px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 12.5px; color: var(--mc-mute); max-width: 100%; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.4; } .mc-posture-lift-arrow { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: transparent; color: var(--mc-green); flex-shrink: 0; align-self: center; } .mc-posture-lift-arrow svg { width: 12px; height: 12px; } .mc-posture-lift-pts { font-weight: 700; color: var(--mc-green); font-size: 13px; letter-spacing: -0.005em; } .mc-posture-lift-sep { color: var(--mc-mute); opacity: 0.6; } .mc-posture-lift-what { font-weight: 600; color: var(--mc-navy); } .mc-posture-lift-when { color: var(--mc-mute); font-size: 12px; } .mc-posture-lift-when::before { content: '·'; margin: 0 6px 0 4px; color: var(--mc-mute); opacity: 0.6; } .mc-postring .ctr .tr { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--mc-green); } .mc-postring .ctr .tr.flat { color: var(--mc-mute); } .mc-postring .ctr .tr.down { color: var(--mc-red); } /* Success-state hero (Frame 6 — Training hit 100%). */ .mc-hero.is-celebrate { background: radial-gradient(circle at 85% 0%, rgba(102, 211, 156, 0.45), transparent 55%), radial-gradient(circle at 0% 100%, rgba(0, 113, 188, 0.12), transparent 55%), linear-gradient(135deg, #e6f4ec 0%, #f4ede0 100%); box-shadow: 0 1px 2px rgba(31,138,76,0.05), 0 14px 30px rgba(31,138,76,0.10); } .mc-hero.is-celebrate h2 em { color: var(--mc-green); } /* ============================================================ 7. SECTION HEADS — used above each module row ============================================================ */ .mc-section-head { padding: 18px 32px 10px; display: flex; align-items: baseline; gap: 8px; } .mc-section-head h3 { margin: 0; font-size: 16px; color: var(--mc-navy); font-weight: 700; } .mc-section-head .meta { font-size: 12px; color: var(--mc-mute); } .mc-section-head a { margin-left: auto; font-size: 12.5px; color: var(--mc-blue); font-weight: 600; text-decoration: none; } .mc-section-head a:hover { text-decoration: underline; } /* ============================================================ 8. ACTION CARDS (What to address today) ============================================================ */ .mc-actrow { padding: 0 32px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1100px) { .mc-actrow { grid-template-columns: 1fr; } } .mc-act { padding: 16px 18px; background: white; border-radius: 14px; border: 1px solid var(--mc-line); box-shadow: 0 1px 2px rgba(11,59,94,0.04); border-top: 4px solid var(--mc-navy); display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none; color: inherit; } /* Address-today card accents stay calm navy regardless of tone; urgency is carried by the posture-component leads below. */ .mc-act.warn, .mc-act.info, .mc-act.bad, .mc-act.ok { border-top-color: var(--mc-navy); } .mc-act:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(11,59,94,0.04), 0 12px 24px rgba(11,59,94,0.08); text-decoration: none; color: inherit; } .mc-act .ico { width: 32px; height: 44px; background: transparent; border: 0; color: var(--mc-mute); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .mc-act h4 { margin: 0 0 2px; font-size: 15px; color: var(--mc-navy); font-weight: 700; line-height: 1.3; } .mc-act p { margin: 0; font-size: 12.5px; color: var(--mc-mute); line-height: 1.45; } .mc-act p b { color: var(--mc-ink); } .mc-act .cta { font-size: 13px; font-weight: 700; color: var(--mc-navy); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .mc-act.warn .cta, .mc-act.info .cta, .mc-act.bad .cta, .mc-act.ok .cta { color: var(--action); } /* ============================================================ 9. POSTURE COMPONENT CARDS (modules grid) ============================================================ */ .mc-pcomp-head { padding: 22px 32px 8px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .mc-pcomp-head h3 { margin: 0; font-size: 16px; color: var(--mc-navy); font-weight: 700; } .mc-pcomp-head .total { padding: 4px 12px; border-radius: 999px; background: var(--mc-green-soft); color: var(--mc-green); font-size: 12px; font-weight: 700; } .mc-pcomp-head .total b { font-size: 14px; } .mc-pcomp-head .meta { font-size: 12px; color: var(--mc-mute); } .mc-pcomp-head a { margin-left: auto; font-size: 12.5px; color: var(--mc-blue); font-weight: 600; text-decoration: none; } .mc-modgrid { padding: 0 32px 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1300px) { .mc-modgrid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .mc-modgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .mc-modgrid { grid-template-columns: 1fr; } } /* ============================================================ "Explore other Medcurity modules" — upsell + integration tiles shown beneath the posture breakdown for modules this tenant doesn't currently have. Visually treated as "not on the account": dashed border, desaturated background, muted icons and text. A solid CTA pill is the only thing that "pops" so the affordance reads as "click to add." ============================================================ */ /* Section divider so the upsell row reads as visually separate from the live posture breakdown above it. */ .mc-offer-section { margin: 20px 32px 0; padding: 18px 0 0; border-top: 1px dashed rgba(11, 59, 94, 0.20); } .mc-offer-section .mc-section-head { padding: 0 0 10px; } .mc-offer-section .mc-section-head h3 { color: var(--mc-mute); } .mc-offer-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mc-mute); background: rgba(11, 59, 94, 0.05); border: 1px dashed rgba(11, 59, 94, 0.25); border-radius: 999px; vertical-align: middle; } .mc-offergrid { padding: 0 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 1100px) { .mc-offergrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .mc-offergrid { grid-template-columns: 1fr; } } a.mc-offer { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; /* Faintly-tinted off-white background instead of pure white so the card visibly "recedes" against the posture rows above. */ background: rgba(11, 59, 94, 0.025); /* Dashed border = the universal "not added / placeholder" cue. */ border: 1.5px dashed rgba(11, 59, 94, 0.20); border-radius: 14px; box-shadow: none; text-decoration: none; color: inherit; transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease; position: relative; } a.mc-offer:hover { /* Hover "wakes" the card — the dashed line becomes a solid blue border so the user gets clear visual feedback that this is an interactive thing they can click. */ border-style: solid; border-color: var(--mc-blue); background: white; box-shadow: 0 6px 18px rgba(0, 113, 188, 0.12); transform: translateY(-1px); text-decoration: none; color: inherit; } .mc-offer-ic { width: 32px; height: 44px; background: transparent; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; color: var(--mc-mute); transition: color 120ms ease; } a.mc-offer:hover .mc-offer-ic { color: var(--mc-navy); } .mc-offer-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .mc-offer-name { font-size: 14px; font-weight: 700; color: var(--mc-mute); letter-spacing: -0.005em; transition: color 120ms ease; } a.mc-offer:hover .mc-offer-name { color: var(--mc-navy); } .mc-offer-desc { font-size: 12.5px; color: var(--mc-mute); line-height: 1.5; opacity: 0.85; } .mc-offer-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--mc-navy); white-space: nowrap; align-self: center; /* Just slightly darker than the card's 2.5% navy-tinted bg so the CTA reads as a quiet affordance, not a flashy primary button. Lifts on hover. */ background: rgba(11, 59, 94, 0.08); border: 1px solid rgba(11, 59, 94, 0.10); border-radius: 999px; box-shadow: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } a.mc-offer:hover .mc-offer-cta { background: rgba(0, 113, 188, 0.12); color: var(--mc-blue); border-color: rgba(0, 113, 188, 0.25); } /* Tone variants — kept as no-ops so the markup still passes the class, but every icon now uses the shared muted-grey treatment from `.mc-offer-ic` regardless of which tone it carries. The "you don't have this yet" cue lives in the dashed card border, not in the icon color. */ .mc-pcomp { background: white; border-radius: 16px; padding: 18px 18px 16px; border: 1px solid var(--mc-line); cursor: pointer; position: relative; box-shadow: 0 1px 2px rgba(11,59,94,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .mc-pcomp:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11,59,94,0.08); border-color: rgba(11,59,94,0.15); text-decoration: none; color: inherit; } .mc-pcomp .pc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mc-pcomp .pc-top .ic { width: auto; height: 32px; background: transparent; border: 0; color: var(--mc-mute); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; padding-right: 2px; } .mc-pcomp .pc-top h5 { margin: 0; font-size: 14px; color: var(--mc-navy); font-weight: 700; line-height: 1.25; } .mc-pcomp .pc-top .pscore { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mc-green); font-variant-numeric: tabular-nums; white-space: nowrap; } .mc-pcomp .pc-top .pscore.hi { color: var(--score-high); } .mc-pcomp .pc-top .pscore.md { color: var(--score-mid); } .mc-pcomp .pc-top .pscore.lo { color: var(--score-low); } .mc-pcomp .pc-top .pscore.empty { color: var(--text-secondary); } .mc-pcomp .pc-bar { height: 11px; border-radius: 999px; background: rgba(11,59,94,0.10); overflow: hidden; margin: 6px 0 14px; box-shadow: inset 0 1px 2px rgba(11,59,94,0.12); } .mc-pcomp .pc-bar i { display: block; height: 100%; border-radius: 999px; /* Dark → light: bar starts at the saturated brand colour at the left edge and softens toward the right tip. Reads as "anchored" rather than "fading in." Same direction across every progress bar on the platform. */ background: linear-gradient(90deg, var(--mc-green), #66d39c); box-shadow: 0 0 8px rgba(31,138,76,0.30); } .mc-pcomp .pc-bar i.hi { background: linear-gradient(90deg, var(--mc-green), #66d39c); box-shadow: 0 0 8px rgba(31,138,76,0.30); } .mc-pcomp .pc-bar i.md { background: linear-gradient(90deg, var(--mc-gold), #e6c264); box-shadow: 0 0 8px rgba(184,134,11,0.30); } .mc-pcomp .pc-bar i.lo { background: linear-gradient(90deg, var(--mc-clay), #e9966a); box-shadow: 0 0 8px rgba(194,65,12,0.30); } .mc-pcomp .pc-bar i.empty { background: rgba(11,59,94,0.12); box-shadow: none; } .mc-pcomp .pc-meta { font-size: 12px; color: var(--mc-mute); line-height: 1.55; } .mc-pcomp .pc-meta b { color: var(--mc-ink); font-weight: 700; } .mc-pcomp .pc-lead { display: block; margin-bottom: 14px; font-weight: 700; color: var(--mc-ink); } .mc-pcomp .pc-lead.ok { color: var(--success); } .mc-pcomp .pc-lead.warn { color: var(--warning); } .mc-pcomp .pc-lead.bad { color: var(--alert); } .mc-pcomp .pc-lead.muted { color: var(--mc-mute); font-style: italic; font-weight: 600; } /* ── Locked signal ──────────────────────────────────────────── When a posture signal can't even be attempted because something else is gating it (Worklist is locked until SRA is finalized, for example), we render the score slot as a small grey lock icon instead of a number. No second colored badge anywhere on the card — the lock + the narrative paragraph carry the message together. Card chrome stays normal (no gray-out). ───────────────────────────────────────────────────────── */ .mc-pcomp .pc-top .pscore.mc-pscore-locked { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; /* Light grey — a couple of steps lighter than --mc-mute so the lock reads as a quiet "blocked" cue rather than a strong icon. Locked signals the tenant still HAS carry their "0 / N" score next to the lock (they count toward the total, earning 0 until unlocked), so the badge keeps a real font size. */ color: rgba(11, 59, 94, 0.38); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .mc-pcomp .pc-top .pscore.mc-pscore-locked i { font-size: 15px; /* Solid FA5 doesn't include a thinner lock variant, so compress horizontally to thin the silhouette while keeping the same rendered height. */ display: inline-block; transform: scale(0.82, 0.95); transform-origin: center; } /* ============================================================ "How Posture Score is calculated" modal — clean redesign. Replaces the default Bootstrap modal chrome with the uplift card aesthetic: white card, soft navy shadow, generous padding, navy heading + muted body, compact row list of signals with mini progress bars, and a single total row at the bottom. Sized so the whole thing fits without scrolling on a typical viewport. ============================================================ */ .mc-pmodal .mc-pmodal-dialog { max-width: 720px; width: calc(100% - 32px); margin: 1.75rem auto; } .mc-pmodal .mc-pmodal-content { position: relative; background: white; border: 0; border-radius: 18px; padding: 28px 30px 24px; box-shadow: 0 24px 60px rgba(11, 59, 94, 0.18), 0 6px 18px rgba(11, 59, 94, 0.10); overflow: hidden; } .mc-pmodal .modal-content > * { font-family: var(--mc-font); } .mc-pmodal-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--mc-mute); font-size: 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; } .mc-pmodal-close:hover { background: rgba(11, 59, 94, 0.06); color: var(--mc-navy); } .mc-pmodal-head { padding: 0; margin: 0 0 18px; } .mc-pmodal-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mc-blue); margin-bottom: 4px; } .mc-pmodal-head h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--mc-navy); letter-spacing: -0.005em; line-height: 1.2; } .mc-pmodal-head p { margin: 0; font-size: 13px; color: var(--mc-mute); line-height: 1.55; max-width: 640px; } .mc-pmodal-head p em { color: var(--mc-navy); font-style: italic; } .mc-pmodal-rows { display: grid; gap: 4px; margin: 0 0 16px; } .mc-pmodal-rowwrap { border-radius: 10px; transition: background 120ms ease; } .mc-pmodal-row { /* Reset button defaults so the row reads as a row, not a button. */ appearance: none; -webkit-appearance: none; background: transparent; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; grid-template-columns: 28px 1fr minmax(120px, 180px) 80px 18px; gap: 14px; align-items: center; padding: 9px 10px; border-radius: 10px; transition: background 120ms ease; } .mc-pmodal-row:hover { background: rgba(11, 59, 94, 0.04); } .mc-pmodal-row:focus-visible { outline: 2px solid rgba(11, 59, 94, 0.35); outline-offset: 2px; } .mc-pmodal-row[aria-expanded="true"] { background: rgba(11, 59, 94, 0.05); } .mc-pmodal-row-chev { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--mc-mute); transition: transform 180ms ease, color 120ms ease; } .mc-pmodal-row:hover .mc-pmodal-row-chev { color: var(--mc-navy); } .mc-pmodal-row[aria-expanded="true"] .mc-pmodal-row-chev { transform: rotate(180deg); color: var(--mc-navy); } /* Expanded detail panel — sits directly under the row. */ .mc-pmodal-row-detail { padding: 2px 10px 10px 50px; /* align under the body column */ } .mc-pmodal-row-detail[hidden] { display: none; } .mc-pmodal-row-detail-inner { display: grid; gap: 10px; padding: 12px 14px; background: white; border: 1px solid rgba(11, 59, 94, 0.10); border-radius: 10px; box-shadow: 0 1px 0 rgba(11, 59, 94, 0.03); opacity: 0; transform: translateY(-2px); transition: opacity 180ms ease, transform 180ms ease; } .mc-pmodal-row-detail.is-open .mc-pmodal-row-detail-inner { opacity: 1; transform: translateY(0); } .mc-pmodal-row-detail-section { display: grid; gap: 3px; } .mc-pmodal-row-detail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-blue); } .mc-pmodal-row-detail-section p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mc-navy); opacity: 0.85; } .mc-pmodal-row.is-locked + .mc-pmodal-row-detail .mc-pmodal-row-detail-label { color: rgba(11, 59, 94, 0.55); } .mc-pmodal-row-ic { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--mc-mute); } .mc-pmodal-row-body { min-width: 0; } .mc-pmodal-row-name { font-size: 13.5px; font-weight: 700; color: var(--mc-navy); letter-spacing: -0.005em; } .mc-pmodal-row-what { font-size: 11.5px; color: var(--mc-mute); margin-top: 1px; } .mc-pmodal-row-bar { padding-right: 6px; } .mc-pmodal-row-bartrack { width: 100%; height: 6px; border-radius: 999px; background: rgba(11, 59, 94, 0.08); overflow: hidden; } .mc-pmodal-row-bartrack i { display: block; height: 100%; background: var(--mc-green); border-radius: 999px; transition: width 0.3s ease; } .mc-pmodal-row-bartrack i.md { background: var(--mc-amber); } .mc-pmodal-row-bartrack i.lo { background: var(--mc-red); } .mc-pmodal-row-score { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; } .mc-pmodal-row-score .num { font-weight: 700; color: var(--mc-navy); } .mc-pmodal-row-score .den { color: var(--mc-mute); margin-left: 2px; } .mc-pmodal-row-score .muted { color: var(--mc-mute); font-style: italic; } .mc-pmodal-row.is-locked .mc-pmodal-row-ic { color: rgba(11, 59, 94, 0.32); } .mc-pmodal-row.is-locked .mc-pmodal-row-name, .mc-pmodal-row.is-locked .mc-pmodal-row-what { font-style: italic; } .mc-pmodal-total { margin-top: 8px; padding: 14px 14px; border-top: 1px solid rgba(11, 59, 94, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mc-pmodal-total-formula { display: flex; flex-direction: column; gap: 2px; } .mc-pmodal-total-label { font-size: 13px; font-weight: 700; color: var(--mc-navy); letter-spacing: -0.005em; } .mc-pmodal-total-formula-text { font-size: 11.5px; color: var(--mc-mute); } .mc-pmodal-total-score { font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 4px; } .mc-pmodal-total-score .num { font-size: 28px; font-weight: 700; color: var(--mc-navy); letter-spacing: -0.02em; line-height: 1; } .mc-pmodal-total-score .den { font-size: 16px; color: var(--mc-mute); font-weight: 500; } /* "What a 100/100 means" footnote — sits under the total row. Deliberately quiet (muted text on a soft navy wash) so it reads as context, not an alert. */ .mc-pmodal-disclaimer { display: flex; align-items: flex-start; gap: 10px; margin: 10px 14px 14px; padding: 12px 14px; background: rgba(11, 59, 94, 0.04); border: 1px solid rgba(11, 59, 94, 0.07); border-radius: 10px; } .mc-pmodal-disclaimer-ic { flex-shrink: 0; color: rgba(11, 59, 94, 0.45); font-size: 13px; line-height: 1.55; padding-top: 1px; } .mc-pmodal-disclaimer p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--mc-mute); } .mc-pmodal-disclaimer p b { color: var(--mc-navy); font-weight: 600; } /* Strip Bootstrap modal default chrome so our custom card shows through cleanly — our card-styling lives on .mc-pmodal-content, which IS the .modal-content element. */ .mc-pmodal .modal-header, .mc-pmodal .modal-footer { display: none; } .mc-pmodal .modal-body { padding: 0; } @media (max-width: 600px) { .mc-pmodal-row { grid-template-columns: 24px 1fr 70px 16px; grid-template-areas: "ic name score chev" ". bar bar bar"; gap: 8px 10px; } .mc-pmodal-row-ic { grid-area: ic; } .mc-pmodal-row-body { grid-area: name; } .mc-pmodal-row-score { grid-area: score; } .mc-pmodal-row-chev { grid-area: chev; } .mc-pmodal-row-bar { grid-area: bar; padding-right: 0; } .mc-pmodal-row-detail { padding-left: 34px; padding-right: 0; } } /* When the card is locked, italicise the supporting text — the lead sentence and the narrative paragraph — so the whole card reads visually as "pending / on hold". The card title (`h5`) stays upright so it still anchors as a real heading. */ .mc-pcomp.is-locked .pc-meta, .mc-pcomp.is-locked .pc-meta .pc-lead { font-style: italic; } .mc-pcomp.is-locked .pc-top h5 { font-style: normal; } /* Legacy `.is-missing` styling removed — non-contributing signals now keep their normal card chrome and instead carry an inline status badge (lock / wrench / hourglass) that explains why the signal isn't measurable. Block left below in case anything still targets it, but all of its rules have been neutralized. */ .mc-pcomp.is-missing-legacy-disabled { background: rgba(255,255,255,0.50); border-style: dashed; border-color: rgba(11,59,94,0.15); } .mc-pcomp.is-missing .pc-top .ic { background: rgba(11,59,94,0.06); color: var(--mc-mute); border-color: transparent; } .mc-pcomp.is-missing .pc-top h5 { color: var(--mc-mute); } .mc-pcomp.is-missing .pc-bar { background: transparent; } .mc-pcomp.is-missing .pc-bar i { display: none; } .mc-pcomp.is-missing .pc-meta { color: var(--mc-mute); } /* Locked / activate card. */ .mc-mod-locked { background: rgba(255,255,255,0.50); border: 1px dashed rgba(11,59,94,0.15); border-radius: 16px; padding: 18px 18px 16px; position: relative; } .mc-mod-locked .ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(11,59,94,0.06); color: var(--mc-mute); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 12px; } .mc-mod-locked h5 { margin: 0; font-size: 13.5px; color: var(--mc-mute); font-weight: 700; } .mc-mod-locked .meta { font-size: 11.5px; color: var(--mc-mute); margin-top: 4px; line-height: 1.4; } .mc-mod-locked .activate { margin-top: 12px; padding: 7px 12px; background: white; border: 1px solid var(--mc-navy); color: var(--mc-navy); border-radius: 999px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .mc-mod-locked .activate:hover { background: var(--mc-navy); color: white; } /* ============================================================ 10. SRA WIZARD STYLES — apply to existing SRA pages by wrapping the SRA body in .mc-sra-wrap. ============================================================ */ .mc-sra-statusbar { background: linear-gradient(180deg, #1a4a6e, var(--mc-navy)); padding: 20px 32px 22px; color: white; border-radius: 18px 18px 0 0; /* Side margin matches the .company_questions outer padding (24px) so the navy bar lines up cleanly with the columns below. */ margin: 24px 24px 0; } .mc-sra-statusbar .meta { display: flex; justify-content: space-between; font-size: 12.5px; opacity: 0.85; margin-bottom: 8px; } .mc-sra-statusbar .meta b { color: white; opacity: 1; font-weight: 700; } .mc-sra-statusbar .titlerow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .mc-sra-statusbar h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: white; } .mc-sra-statusbar h2 b { color: #ffd166; } /* Beat the platform-wide `body.has-uplift .mc-content h2 { color: navy }` default — the statusbar sits on the navy gradient hero, so its heading needs to be white. The non-bold parts ("Keep going", "Generate your risk matrix", etc.) were rendering in navy on navy and disappearing. */ body.has-uplift .mc-content .mc-sra-statusbar h2 { color: white; } body.has-uplift .mc-content .mc-sra-statusbar h2 b { color: #ffd166; } .mc-sra-statusbar .pct { font-size: 36px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: white; /* Force the big number and the small denominator onto the same line — without this the "/140" was wrapping below "126" when the flex item ran out of width. */ white-space: nowrap; } .mc-sra-statusbar .pct small, body.has-uplift .mc-sra-statusbar .pct small { /* Force inline rendering — another rule in app.css resets to display:block, which was stacking "/140" beneath "126" instead of placing it next to the big number. */ display: inline !important; font-size: 18px; /* Match the .foot text visually — that block has opacity: 0.78 on its parent, rendering white at 78% on the navy gradient. The big number stays solid white; this small denominator now sits in the same "supporting label" tier as the foot text. Platform-wide `small { color: var(--mc-mute) }` was winning the cascade, hence !important. */ color: rgba(255, 255, 255, 0.78) !important; margin-left: 1px; } .mc-sra-statusbar .bar { height: 10px; background: rgba(255,255,255,0.16); border-radius: 999px; overflow: hidden; } .mc-sra-statusbar .bar i { display: block; height: 100%; background: linear-gradient(90deg, #1f8a4c, #66d39c); border-radius: 999px; box-shadow: 0 0 16px rgba(102, 211, 156, 0.5); } .mc-sra-statusbar .foot { margin-top: 10px; display: flex; justify-content: space-between; font-size: 12px; opacity: 0.78; } .mc-sra-body { margin: 0 32px 32px; background: white; border-radius: 0 0 18px 18px; box-shadow: var(--mc-shadow-2); padding: 32px 36px; } .mc-sra-body h1, .mc-sra-body h2 { color: var(--mc-navy); font-weight: 500; letter-spacing: -0.014em; } /* Make existing SRA question pages adopt new card style. */ .mc-sra-body .question-row, .mc-sra-body .threat-row, .mc-sra-body .threat-question { background: var(--mc-cream-soft); border: 1px solid #efe6cd; border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; } .mc-sra-body .radio-group label, .mc-sra-body .form-check { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--mc-line); border-radius: 10px; background: white; cursor: pointer; margin-bottom: 10px; transition: border-color 0.15s ease; font-size: 14px; color: var(--mc-ink); font-weight: 600; } .mc-sra-body .radio-group label:hover, .mc-sra-body .form-check:hover { border-color: var(--mc-blue); } /* ============================================================ 10a. SRA QUESTION WALKTHROUGH PAGE — Frame 2 visual match body.questions-pg — company_assessment_questions/index.blade.php ============================================================ */ body.has-uplift.questions-pg .mc-content { padding: 0 0 80px; } body.has-uplift.questions-pg .company_questions { padding: 0; } body.has-uplift.questions-pg .company_questions > section { padding: 0 32px 32px; } /* Left flyout styled as the mockup's stepper. */ body.has-uplift.questions-pg .questions_flyout { background: #f7f9fb; border: 1px solid var(--mc-line); border-radius: 16px; padding: 22px 18px; } body.has-uplift.questions-pg .questions_flyout h3 { font-size: 15px; color: var(--mc-navy); font-weight: 700; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.06em; } body.has-uplift.questions-pg .questions_flyout .close_btn { display: none; } /* Open/Answered tabs in flyout — match the design system's pill tabs. */ body.has-uplift.questions-pg .questions_flyout #nav-tab { background: rgba(11,59,94,0.05); border-radius: 10px; padding: 4px; display: inline-flex; gap: 2px; margin-bottom: 14px; } body.has-uplift.questions-pg .questions_flyout #nav-tab .nav-link { border: none; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--mc-mute); padding: 6px 14px; } body.has-uplift.questions-pg .questions_flyout #nav-tab .nav-link.active { background: white; color: var(--mc-navy); box-shadow: 0 1px 2px rgba(11,59,94,0.06); } /* Section accordion cards inside the flyout. */ body.has-uplift.questions-pg .questions_flyout .section_header { background: white !important; border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--mc-line) !important; } body.has-uplift.questions-pg .questions_flyout .section_header h5 { margin: 0; padding: 10px 12px; } body.has-uplift.questions-pg .questions_flyout .section_header .btn-link { color: var(--mc-navy) !important; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; } body.has-uplift.questions-pg .questions_flyout .section_header img { width: 22px; height: 22px; } body.has-uplift.questions-pg .questions_flyout .questions_toggle.card-body, body.has-uplift.questions-pg .questions_flyout .card-body { padding: 8px 10px; background: transparent; border: none; } body.has-uplift.questions-pg .questions_flyout .list-group { background: transparent; border-radius: 0; } body.has-uplift.questions-pg .questions_flyout .list-group-item { background: transparent; border: none; border-left: 2px solid var(--mc-line-2); margin-left: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--mc-ink); } body.has-uplift.questions-pg .questions_flyout .list-group-item.active { background: var(--mc-blue-soft); color: var(--mc-navy); font-weight: 700; border-left-color: var(--mc-blue); } body.has-uplift.questions-pg .questions_flyout .list-group-item a { color: inherit; text-decoration: none; } /* Main question column — white background, no rounded corners, no border, no shadow. Sits flush against the stepper on the left, the help column on the right, and the navy status bar above. Keeps its white surface so it reads as the focused main content (the side columns are gray #f7f9fb). `max-width: none` + `flex: 1 1 auto` are required overrides: Bootstrap's `.col-lg-8` caps the box at 66.6667% of the row width, which would otherwise leave a transparent gap between this white surface and the help column on its right. Under the grid layout we want the box to fill the 1fr track edge-to-edge. `min-width: 0` so the column can compress freely when the user drags the extra-info divider close to its 500px max — without it, child content's intrinsic min-width would push the column (and therefore the whole row) past the section's right edge. */ body.has-uplift.questions-pg .col-lg-8.questions { background: white; border: 0; border-radius: 0; padding: 32px 36px; box-shadow: none; max-width: none; width: 100%; flex: 1 1 auto; min-width: 0; } body.has-uplift.questions-pg .col-lg-8.questions .open_questions { display: none; } body.has-uplift.questions-pg .col-lg-8.questions > hr { display: none; } /* Question title styling — mockup's .sra-qtitle. */ body.has-uplift.questions-pg .col-lg-8.questions h4, body.has-uplift.questions-pg .col-lg-8.questions h2 { color: var(--mc-navy); font-weight: 500; font-size: 22px; letter-spacing: -0.014em; margin: 0 0 12px; } body.has-uplift.questions-pg .col-lg-8.questions h2 { font-size: 26px; } /* ============================================================ 10c. ANSWER OPTIONS — mockup's .sra-qcard / .sra-opt pattern. Each Yes/No/Partial/N/A answer renders as a click-card with the radio + answer name + outcome badge + sub-explanation. ============================================================ */ body.has-uplift.questions-pg .sra-answers-fieldset { border: none; padding: 0; margin: 22px 0 14px; } body.has-uplift.questions-pg .sra-answers-fieldset legend.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } body.has-uplift.questions-pg .sra-qcard { background: var(--mc-cream-soft); border: 1px solid var(--mc-cream-border); border-radius: 14px; padding: 18px 22px; } body.has-uplift.questions-pg .sra-qcard.is-invalid { border-color: var(--mc-red); box-shadow: 0 0 0 3px rgba(196,18,48,0.10); } body.has-uplift.questions-pg .sra-qcard .lbl { font-size: 13px; color: var(--mc-ink); font-weight: 700; margin-bottom: 14px; } body.has-uplift.questions-pg .sra-opt { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: white; border: 1.5px solid var(--mc-line); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; position: relative; } body.has-uplift.questions-pg .sra-opt:last-child { margin-bottom: 0; } body.has-uplift.questions-pg .sra-opt:hover { border-color: var(--mc-blue); box-shadow: 0 4px 12px rgba(11,59,94,0.06); } body.has-uplift.questions-pg .sra-opt.sel { border-color: var(--mc-navy); background: #f0f6fb; box-shadow: 0 4px 14px rgba(11,59,94,0.08); } body.has-uplift.questions-pg .sra-opt .sra-opt-input { position: absolute; opacity: 0; pointer-events: none; } body.has-uplift.questions-pg .sra-opt .radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mc-mute-3); position: relative; margin-top: 2px; transition: border-color 0.15s ease; } body.has-uplift.questions-pg .sra-opt.sel .radio { border-color: var(--mc-navy); } body.has-uplift.questions-pg .sra-opt.sel .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--mc-navy); } body.has-uplift.questions-pg .sra-opt-body { flex: 1; display: flex; flex-direction: column; gap: 4px; } body.has-uplift.questions-pg .sra-opt .ot { font-size: 14.5px; color: var(--mc-ink); font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.has-uplift.questions-pg .sra-opt .ot .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } body.has-uplift.questions-pg .sra-opt .badge.ok { background: var(--mc-green-soft); color: var(--mc-green); } body.has-uplift.questions-pg .sra-opt .badge.warn { background: var(--mc-amber-soft); color: var(--mc-amber); } body.has-uplift.questions-pg .sra-opt .badge.bad { background: var(--mc-red-soft); color: var(--mc-red); } body.has-uplift.questions-pg .sra-opt .badge.mute { background: rgba(11,59,94,0.06); color: var(--mc-mute); } body.has-uplift.questions-pg .sra-opt .os { font-size: 12.5px; color: var(--mc-mute); line-height: 1.5; } body.has-uplift.questions-pg .sra-actions-inline { margin: 10px 0 0; } body.has-uplift.questions-pg .sra-actions-inline .btn-link { color: var(--mc-mute); font-size: 12.5px; font-weight: 600; padding: 6px 12px; text-decoration: none; } body.has-uplift.questions-pg .sra-actions-inline .btn-link:hover { color: var(--mc-navy); } /* Hide the original "ANSWERS" dark-blue panel header — it's replaced by the .sra-qcard's own label. */ body.has-uplift.questions-pg .ANSWERS, body.has-uplift.questions-pg [class*="ANSWERS"] { display: none; } /* IMPACT OF RISK / LIKELIHOOD blue panels — restyle as mockup's panels. */ body.has-uplift.questions-pg .impact_panel, body.has-uplift.questions-pg .likelihood_panel, body.has-uplift.questions-pg [class*="impact"], body.has-uplift.questions-pg [class*="likelihood"], body.has-uplift.questions-pg .blue_box { background: var(--mc-navy); color: white; border-radius: 9px 9px 0 0; padding: 10px 16px; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; } /* De-select buttons. */ body.has-uplift.questions-pg .deselect-btn, body.has-uplift.questions-pg button[class*="deselect"] { background: var(--mc-red); border-color: var(--mc-red); color: white; border-radius: 8px; font-weight: 600; } /* Back to imported SRA review button. */ body.has-uplift.questions-pg .imported-review-link a { background: white; border: 1px solid var(--mc-blue); color: var(--mc-blue); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; text-decoration: none; } /* Continue / Back / Save buttons. */ body.has-uplift.questions-pg .continue-btn, body.has-uplift.questions-pg .btn-primary[name="continue"] { background: var(--mc-red); border-color: var(--mc-red); color: white; border-radius: 9px; padding: 11px 26px; font-weight: 700; box-shadow: 0 6px 16px rgba(196,18,48,0.30); } body.has-uplift.questions-pg .back-btn, body.has-uplift.questions-pg .btn-default { background: white; border: 1px solid var(--mc-line); color: var(--mc-navy); border-radius: 9px; padding: 10px 18px; font-weight: 600; } /* Help/info icons (red pill buttons next to question title in original). */ body.has-uplift.questions-pg .col-lg-8.questions .help-btn, body.has-uplift.questions-pg .question-help-btn, body.has-uplift.questions-pg .question-evidence-btn { background: var(--mc-red); border-color: var(--mc-red); color: white; border-radius: 8px; } /* "View imported SRA review page" CTA. */ body.has-uplift.questions-pg .col-lg-8.questions .btn-outline-primary, body.has-uplift.questions-pg .col-lg-8.questions .imported-sra-btn { background: white; border: 1px solid var(--mc-blue); color: var(--mc-blue); border-radius: 999px; } /* ============================================================ 10f. WORKLIST PAGE — Frame-2 visual match company_assessment_recommendations/index.blade.php now carries body classes "worklist questions-pg", so the SRA walkthrough styling in 10a–10c above applies to the worklist flyout / Open-Closed tabs / section cards too. (Section 10e's display:none on the legacy flyout is scoped to .company_questions .col-lg-4, so the worklist's .col-md-4 flyout stays visible — here it IS the stepper.) Analytics' "Open worklist item" deep links and the SRA card's "Open Worklist" CTA both land on this page, so it must read as the new UI platform, not the legacy page. The rules below cover worklist-only elements and re- override a few legacy !important declarations from recommendation.scss / format.scss. ============================================================ */ /* Page wrapper — mirror .company_questions > section spacing. */ body.has-uplift.worklist .company_recc > section { padding: 0 32px 32px; } /* Two-column shell. 10a's .col-lg-8.questions override sets width:100% / flex:1 1 auto (correct inside the question page's grid), which under the worklist's legacy Bootstrap flex row would wrap the main column BELOW the flyout. Promote the row to the same kind of grid the walkthrough uses: stepper | main. Selector carries BOTH body classes: the walkthrough's "section:not(:has(.mc-sra-extra)) > .row { 1fr }" fallback (10e layout block, later in this file) otherwise ties this specificity and collapses the worklist to one column. */ body.has-uplift.questions-pg.worklist .company_recc > section > .row { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; margin: 0; align-items: start; } /* Bootstrap's .col-md-4 max-width would clamp the flyout to 33% of its own grid track; neutralize the col sizing inside the grid. */ body.has-uplift.worklist .company_recc .col-md-4.questions_flyout { max-width: none; width: auto; } /* Flyout header — legacy paints a giant #007DC1 banner behind it. */ body.has-uplift.worklist .questions_flyout h3 { background: transparent; color: var(--mc-navy); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 10px; } body.has-uplift.worklist .questions_flyout nav { background: transparent; } /* Open/Closed pill tabs — legacy backgrounds carry !important (.questions_flyout .nav-item), so these need !important too. Full-width flex so the two w-50 links sit side by side instead of stacking inside 10a's inline-flex pill bar. */ body.has-uplift.worklist .questions_flyout #nav-tab { display: flex; flex-wrap: nowrap; width: 100%; } body.has-uplift.worklist .questions_flyout #nav-tab .nav-link { /* w-50 is width:50% !important — with the pill bar's padding+gap that overflows and wraps the second tab onto its own row. */ width: auto !important; flex: 1 1 0; text-align: center; background: transparent !important; color: var(--mc-mute) !important; } body.has-uplift.worklist .questions_flyout #nav-tab .nav-link.active { background: white !important; color: var(--mc-navy) !important; } /* Section icons — legacy forces width: 70px !important. */ body.has-uplift.worklist .questions_flyout .section_header h5 img { width: 22px !important; height: 22px; margin: 0 0 0 10px; } body.has-uplift.worklist .questions_flyout .section_header .btn-link { font-size: 12.5px; } /* User / sort filter form above the tabs — legacy paints a solid #6ea9ca teal panel with white labels and a #005C90 !important button. */ body.has-uplift.worklist .worklist-filters { background: transparent; padding: 0; margin-bottom: 14px; } body.has-uplift.worklist .worklist-filters button { background: var(--mc-navy) !important; border-color: var(--mc-navy); color: white; border-radius: 9px; } body.has-uplift.worklist .worklist-filters button:hover { background: var(--mc-blue) !important; } body.has-uplift.worklist .worklist-filters label { font-size: 11px; font-weight: 700; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 4px; display: block; } body.has-uplift.worklist .worklist-filters .form-control { border: 1px solid var(--mc-line); border-radius: 9px; font-size: 12.5px; color: var(--mc-ink); background: white; } body.has-uplift.worklist .worklist-filters .btn-primary { background: var(--mc-navy); border-color: var(--mc-navy); color: white; border-radius: 9px; width: 100%; } /* Due-date pill on flyout items — keep the red past-due signal. */ body.has-uplift.worklist .due_date_label { background: var(--mc-blue); border-radius: 999px; font-size: 10px; font-weight: 700; padding: 1px 8px; top: 4px; right: 6px; } body.has-uplift.worklist .due_date_label.past_due { background: var(--mc-red); } /* Main column chrome — drop legacy double rules, restyle the threat/question/references icon buttons as quiet pills. */ body.has-uplift.worklist .col-lg-8.questions > hr { display: none; } body.has-uplift.worklist .col-lg-8.questions .text-right.hipaa .btn-primary { background: white; border: 1px solid var(--mc-line); color: var(--mc-navy); border-radius: 9px; font-size: 13px; } body.has-uplift.worklist .col-lg-8.questions .text-right.hipaa .btn-primary:hover { border-color: var(--mc-blue); color: var(--mc-blue); } /* Recommendation body text — legacy paints it 1.5em blue. */ body.has-uplift.worklist #recommendation-title p { font-size: 15px; color: var(--mc-ink); line-height: 1.6; } /* Form labels + controls — legacy paints labels 1.25em blue with a 20px left margin. */ body.has-uplift.worklist .recommendation_form label { color: var(--mc-navy); font-size: 13px; font-weight: 700; margin-left: 0; } body.has-uplift.worklist .recommendation_form .form-control { border: 1px solid var(--mc-line); border-radius: 9px; } /* Comments thread + submit buttons (legacy: 23px font inputs). */ body.has-uplift.worklist dl#comment-list { border: 1px solid var(--mc-line); border-radius: 12px; padding: 18px; } body.has-uplift.worklist .questions dt { color: var(--mc-navy); font-size: 14px; } body.has-uplift.worklist input#submitComment, body.has-uplift.worklist input#submitDetails { font-size: 14px; font-weight: 700; padding: 10px 26px; border-radius: 9px; } /* Previous / Next action pager — legacy paints 2.375em blue text. */ body.has-uplift.worklist .assessment-nav span { color: var(--mc-navy); font-size: 15px; font-weight: 600; } body.has-uplift.worklist .assessment-nav input[type="submit"], body.has-uplift.worklist .assessment-nav .btn { background: white; border: 1px solid var(--mc-line); color: var(--mc-navy); border-radius: 9px; padding: 8px 16px; font-weight: 600; } /* Small screens: legacy hides .questions_flyout behind a "View Worklist" opener that 10a hides under uplift — without this the list would be unreachable below 990px. Stack the columns and keep the flyout inline instead. */ @media (max-width: 990px) { body.has-uplift.questions-pg.worklist .company_recc > section > .row { grid-template-columns: 1fr; } body.has-uplift.worklist .company_recc .questions_flyout { display: block; position: static; height: auto; background: #f7f9fb; margin-bottom: 18px; } body.has-uplift.worklist .questions_flyout #nav-tabContent { background: transparent; border-bottom: 0; box-shadow: none; } body.has-uplift.worklist .questions_flyout h3 { display: block; } } /* ============================================================ 11. VENDOR / BAA LIST STYLES — apply via body.companies-baa, company_baa.*, vendors-* route names. ============================================================ */ body.has-uplift[class*="baa"] .mc-content, body.has-uplift[class*="vendor"] .mc-content { padding-top: 0; } .mc-vd-bar { padding: 24px 32px 18px; background: white; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(11, 59, 94, 0.06); } .mc-vd-title { font-size: 26px; font-weight: 600; color: var(--mc-navy); letter-spacing: -0.018em; margin: 0; } .mc-vd-meta { font-size: 13px; color: var(--mc-mute); margin-top: 2px; } .mc-vd-actions { margin-left: auto; display: flex; gap: 10px; } .mc-vd-segments { margin: 16px 32px 14px; display: inline-flex; gap: 4px; background: rgba(11, 59, 94, 0.05); border-radius: 12px; padding: 4px; } .mc-vd-seg { padding: 8px 18px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--mc-mute); cursor: pointer; text-decoration: none; } .mc-vd-seg.active { background: white; color: var(--mc-navy); box-shadow: 0 1px 2px rgba(11,59,94,0.06); } .mc-vd-seg .mc-seg-count { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(11,59,94,0.08); color: var(--mc-mute); font-size: 11px; font-weight: 700; } .mc-vd-seg.active .mc-seg-count { background: var(--mc-blue-soft); color: var(--mc-blue); } .mc-vd-tilerow { padding: 0 32px 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 980px) { .mc-vd-tilerow { grid-template-columns: repeat(2, 1fr); } } .mc-vd-tile { background: white; border-radius: 14px; padding: 14px 18px; border: 1px solid rgba(11,59,94,0.08); box-shadow: 0 1px 2px rgba(11,59,94,0.04); } .mc-vd-tile .lbl { font-size: 11px; color: var(--mc-mute); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .mc-vd-tile .v { font-size: 26px; color: var(--mc-navy); font-weight: 600; letter-spacing: -0.014em; margin-top: 4px; } .mc-vd-tile .v.red { color: var(--mc-red); } .mc-vd-tile .v.amber { color: var(--mc-amber); } .mc-vd-tile .v.green { color: var(--mc-green); } .mc-vd-tile .s { font-size: 11.5px; color: var(--mc-mute); margin-top: 4px; } .mc-vd-list { padding: 4px 24px 40px; } /* When the existing BAA tables run inside .mc-content, dress them up. */ body.has-uplift[class*="baa"] .table, body.has-uplift[class*="vendor"] .table, body.has-uplift[class*="baa"] table.dataTable { background: white; border-radius: 16px; overflow: hidden; border: 1px solid rgba(11,59,94,0.08); border-collapse: separate; box-shadow: 0 1px 2px rgba(11,59,94,0.04); } /* ============================================================ 11a. VENDORS & BAAs — full redesign (2026-05-28) ============================================================ */ /* Toolbar: segments on left, sort + actions on right. */ .mc-vd-toolbar { display: flex; align-items: center; gap: 14px; padding: 0 32px 14px; flex-wrap: wrap; } .mc-vd-toolbar .mc-vd-segments { margin: 0; } .mc-vd-toolbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .mc-vd-sort-label { font-size: 12px; color: var(--mc-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 6px 0 0; } .mc-vd-sort { background: white; border: 1px solid var(--mc-line); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; color: var(--mc-navy); font-weight: 600; } .mc-vd-sort:focus { outline: none; border-color: var(--mc-blue); } /* Disclaimer details/summary — replaces the legacy collapse button. */ .mc-vd-disclaimer { margin: 0 32px 14px; background: var(--mc-cream-soft); border: 1px solid var(--mc-cream-border); border-radius: 12px; padding: 0; } .mc-vd-disclaimer summary { padding: 12px 18px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mc-navy); list-style: none; } .mc-vd-disclaimer summary::-webkit-details-marker { display: none; } .mc-vd-disclaimer summary i { color: var(--mc-amber); margin-right: 4px; } .mc-vd-disclaimer[open] summary { border-bottom: 1px solid var(--mc-cream-border); } .mc-vd-disclaimer p { padding: 14px 18px; margin: 0; font-size: 12.5px; color: var(--mc-mute); line-height: 1.55; } /* BAA row — design-system replacement for the legacy nested-card markup. */ .mc-baa-list { display: flex; flex-direction: column; gap: 10px; padding: 0 32px 24px; } .mc-baa-row { background: white; border: 1px solid var(--mc-line); border-left: 4px solid var(--mc-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(11,59,94,0.04); overflow: hidden; transition: box-shadow 0.15s ease, transform 0.12s ease; } .mc-baa-row:hover { box-shadow: 0 6px 16px rgba(11,59,94,0.06); transform: translateY(-1px); } .mc-baa-row.warn { border-left-color: var(--mc-amber); } .mc-baa-row.bad { border-left-color: var(--mc-red); } .mc-baa-row.is-deactivated { opacity: 0.55; } .mc-baa-row-head { display: grid; grid-template-columns: 48px 1fr auto auto 36px; gap: 16px; align-items: center; padding: 14px 18px; } @media (max-width: 980px) { .mc-baa-row-head { grid-template-columns: 48px 1fr 36px; } .mc-baa-row-head .mc-baa-pills, .mc-baa-row-head .mc-baa-attest { grid-column: 1 / -1; padding-left: 64px; } } .mc-baa-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--mc-blue), #4ba2e0); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .mc-baa-row.warn .mc-baa-icon { background: linear-gradient(135deg, var(--mc-amber), #d99440); } .mc-baa-row.bad .mc-baa-icon { background: linear-gradient(135deg, var(--mc-red), #e25577); } .mc-baa-meta h4 { margin: 0; color: var(--mc-navy); font-size: 15px; font-weight: 700; } .mc-baa-meta p { margin: 2px 0 0; color: var(--mc-mute); font-size: 12.5px; } .mc-baa-meta p b { color: var(--mc-ink); font-weight: 700; } .mc-baa-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* Status chips. */ .mc-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(11,59,94,0.08); color: var(--mc-mute); letter-spacing: 0.02em; } .mc-chip.ok { background: var(--mc-green-soft); color: var(--mc-green); } .mc-chip.warn { background: var(--mc-amber-soft); color: var(--mc-amber); } .mc-chip.bad { background: var(--mc-red-soft); color: var(--mc-red); } .mc-chip.muted { background: rgba(11,59,94,0.06); color: var(--mc-mute); } .mc-baa-attest { display: inline-flex; gap: 6px; align-items: center; } .mc-baa-attest-add { background: var(--mc-green-soft); color: var(--mc-green); padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .mc-baa-attest-add:hover { background: var(--mc-green); color: white; text-decoration: none; } .mc-baa-attest-link { color: var(--mc-navy); font-size: 12px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .mc-baa-attest-link:hover { color: var(--mc-blue); text-decoration: none; } .mc-baa-attest-del { color: var(--mc-red); font-size: 12px; padding: 4px; text-decoration: none; } .mc-baa-expand { background: transparent; border: 1px solid var(--mc-line); border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--mc-mute); cursor: pointer; transition: transform 0.18s ease; } .mc-baa-expand:hover { background: var(--mc-blue-soft); color: var(--mc-navy); border-color: transparent; } .mc-baa-row .collapsed .mc-baa-expand, .mc-baa-row .mc-baa-expand[aria-expanded="false"] { transform: rotate(-90deg); } /* Expanded body. */ .mc-baa-body { border-top: 1px solid var(--mc-line-2); background: var(--mc-cream-soft); } .mc-baa-actions { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mc-baa-actions .mc-inline-form { display: inline-flex; margin: 0; } .mc-baa-actions .btn { font-weight: 600; } /* Archived children. */ .mc-baa-history { background: white; border-top: 1px solid var(--mc-line-2); padding: 12px 18px; } .mc-baa-history-head { font-size: 10.5px; color: var(--mc-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 8px; } .mc-baa-history-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--mc-line-2); } .mc-baa-history-row:last-child { border-bottom: none; } .mc-baa-history-meta { flex: 1; font-size: 13px; color: var(--mc-ink); } .mc-baa-history-meta b { color: var(--mc-navy); } .mc-baa-history-meta p { margin: 2px 0 0; font-size: 11.5px; color: var(--mc-mute); } .mc-baa-history-actions { display: inline-flex; gap: 6px; } .mc-baa-history-actions .btn-sm { padding: 4px 10px; font-size: 11.5px; } /* "+ Add business associate" CTA below the list. */ .mc-baa-add { margin: 0 32px 32px; padding: 18px 22px; background: white; border: 1px dashed rgba(11,59,94,0.18); border-radius: 14px; text-align: center; } .mc-baa-add a { color: var(--mc-blue); font-weight: 700; text-decoration: none; font-size: 14px; } .mc-baa-add a:hover { color: var(--mc-navy); } .mc-baa-add i { margin-right: 4px; } /* Policy archive toggle (in the row header). */ .mc-policy-archive-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-size: 11.5px; color: var(--mc-mute); font-weight: 600; } .mc-policy-archive-toggle input { position: absolute; opacity: 0; pointer-events: none; } .mc-policy-archive-track { width: 32px; height: 18px; border-radius: 999px; background: rgba(11,59,94,0.15); position: relative; transition: background 0.18s ease; flex-shrink: 0; } .mc-policy-archive-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; transition: transform 0.18s ease; box-shadow: 0 1px 2px rgba(11,59,94,0.20); } .mc-policy-archive-toggle input:checked + .mc-policy-archive-track { background: var(--mc-amber); } .mc-policy-archive-toggle input:checked + .mc-policy-archive-track .mc-policy-archive-thumb { transform: translateX(14px); } .mc-policy-archive-label .label_on { display: none; } .mc-policy-archive-toggle input:checked ~ .mc-policy-archive-label .label_on { display: inline; } .mc-policy-archive-toggle input:checked ~ .mc-policy-archive-label .label_off { display: none; } /* ============================================================ 12. APPENDIX TEMPLATES — design-system tile grid ============================================================ */ .mc-appendix-section { margin: 0 32px 40px; background: white; border: 1px solid var(--mc-line); border-radius: 18px; overflow: hidden; } .mc-appendix-head { padding: 18px 24px; border-bottom: 1px solid var(--mc-line); } .mc-appendix-head h3 { margin: 0 0 10px; font-size: 17px; color: var(--mc-navy); font-weight: 700; } .mc-appendix-empty { padding: 24px; text-align: center; color: var(--mc-mute); font-style: italic; margin: 0; } .mc-appendix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 22px; } @media (max-width: 1100px) { .mc-appendix-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .mc-appendix-grid { grid-template-columns: repeat(2, 1fr); } } .mc-appendix-tile { background: var(--mc-cream-soft); border: 1px solid var(--mc-line); border-radius: 14px; padding: 20px 16px 16px; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mc-appendix-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11,59,94,0.08); } .mc-appendix-tile .file-download { text-decoration: none; color: inherit; display: block; } .mc-appendix-tile .file-download:hover { text-decoration: none; color: inherit; } .mc-appendix-tile .fa-5x { font-size: 56px; } .mc-appendix-title { margin-top: 14px; font-size: 12.5px; line-height: 1.4; color: var(--mc-navy); } .mc-appendix-title b { display: block; font-weight: 700; color: var(--mc-navy); } .mc-appendix-title p { margin: 4px 0 0; color: var(--mc-mute); font-weight: 600; } .mc-appendix-controls { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--mc-line-2); display: inline-flex; gap: 6px; } /* ============================================================ 12. TRAINING (workforce circles) ============================================================ */ .mc-tn-hero { margin: 24px 32px 16px; padding: 28px 32px 22px; background: linear-gradient(115deg, #e9f3fb 0%, #f3ebe0 100%); border: 1px solid var(--mc-line); border-radius: 18px; } .mc-tn-crumbs { font-size: 12px; color: var(--mc-mute); margin-bottom: 10px; } .mc-tn-crumbs a { color: var(--mc-blue); text-decoration: none; } .mc-tn-title { font-size: 28px; color: var(--mc-navy); font-weight: 600; margin: 0 0 4px; letter-spacing: -0.014em; } .mc-tn-sub { font-size: 14px; color: var(--mc-mute); } .mc-tn-row { margin-top: 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .mc-tn-person { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative; text-decoration: none; color: inherit; } .mc-tn-person:hover { text-decoration: none; color: inherit; } .mc-tn-person .ring { width: 56px; height: 56px; border-radius: 50%; position: relative; background: conic-gradient(var(--mc-green) calc(var(--p, 100) * 1%), #ececec 0); display: inline-flex; align-items: center; justify-content: center; } .mc-tn-person .ring.warn { background: conic-gradient(var(--mc-amber) calc(var(--p, 60) * 1%), #ececec 0); } .mc-tn-person .ring.bad { background: conic-gradient(var(--mc-red) calc(var(--p, 40) * 1%), #ececec 0); } .mc-tn-person .av { width: 44px; height: 44px; border-radius: 50%; background: white; color: var(--mc-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .mc-tn-person .nm { font-size: 11.5px; color: var(--mc-ink); font-weight: 600; } .mc-tn-person .rl { font-size: 10.5px; color: var(--mc-mute); } .mc-tn-person .alert { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--mc-red); color: white; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid white; } /* Training hero — gradient hero with workforce rings (Frame 4). */ .mc-tn-hero { margin: 0 32px 18px; padding: 28px 32px; background: linear-gradient(115deg, #e9f3fb 0%, #f3ebe0 100%); border: 1px solid var(--mc-line); border-radius: 18px; } .mc-tn-crumbs { font-size: 12.5px; color: var(--mc-mute); margin-bottom: 10px; } .mc-tn-crumbs a { color: var(--mc-blue); font-weight: 600; text-decoration: none; } .mc-tn-crumbs .sep { margin: 0 6px; color: var(--mc-mute-3); } .mc-tn-title { font-size: 26px; color: var(--mc-navy); font-weight: 600; margin: 0 0 4px; letter-spacing: -0.014em; } .mc-tn-sub { font-size: 14px; color: var(--mc-mute); margin: 0 0 16px; } .mc-tn-sub b { color: var(--mc-navy); } .mc-tn-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; } .mc-tn-person { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; min-width: 64px; } .mc-tn-person .ring { width: 56px; height: 56px; border-radius: 50%; position: relative; background: conic-gradient(var(--mc-green) calc(var(--p, 100) * 1%), #ececec 0); display: inline-flex; align-items: center; justify-content: center; } .mc-tn-person .ring.warn { background: conic-gradient(var(--mc-amber) calc(var(--p, 60) * 1%), #ececec 0); } .mc-tn-person .ring.bad { background: conic-gradient(var(--mc-red) calc(var(--p, 40) * 1%), #ececec 0); } .mc-tn-person .av { width: 44px; height: 44px; border-radius: 50%; background: white; color: var(--mc-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .mc-tn-person .nm { font-size: 11.5px; color: var(--mc-ink); font-weight: 700; max-width: 80px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-tn-person .rl { font-size: 10.5px; color: var(--mc-mute); } .mc-tn-person .alert { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--mc-red); color: white; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid white; } /* Training body — 2-col grid: main card + sidebar. */ .mc-tn-body { margin: 0 32px 32px; display: grid; grid-template-columns: 2fr 1fr; gap: 22px; } @media (max-width: 1100px) { .mc-tn-body { grid-template-columns: 1fr; } } .mc-tn-card { background: white; border-radius: 16px; border: 1px solid var(--mc-line); box-shadow: 0 1px 2px rgba(11,59,94,0.04); overflow: hidden; } .mc-tn-card-head { padding: 14px 18px; border-bottom: 1px solid var(--mc-line); display: flex; align-items: center; gap: 10px; } .mc-tn-card-head h4 { font-size: 14px; color: var(--mc-navy); font-weight: 700; margin: 0; flex: 1; } .mc-tn-search { background: var(--mc-line-2); border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-family: inherit; width: 220px; } .mc-tn-search:focus { outline: none; background: white; box-shadow: inset 0 0 0 1px var(--mc-blue); } .mc-tn-cbtn { padding: 7px 12px; border-radius: 8px; background: var(--mc-blue); color: white; border: none; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .mc-tn-trow { display: grid; grid-template-columns: 1.4fr 1.4fr 110px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--mc-line-2); gap: 14px; } .mc-tn-trow:last-child { border-bottom: none; } .mc-tn-trow-person { display: flex; align-items: center; gap: 10px; } .mc-tn-trow-av { width: 32px; height: 32px; border-radius: 50%; background: var(--mc-blue-soft); color: var(--mc-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .mc-tn-trow-nm { font-size: 13px; font-weight: 600; color: var(--mc-navy); } .mc-tn-trow-rl { font-size: 11px; color: var(--mc-mute); } .mc-tn-trow-course { font-size: 13px; color: var(--mc-ink); } .mc-tn-trow-course small { display: block; font-size: 11px; color: var(--mc-mute); margin-top: 2px; } /* Sidebar cards. */ .mc-tn-sidec { background: white; padding: 20px; border-radius: 16px; border: 1px solid var(--mc-line); margin-bottom: 14px; } .mc-tn-sidec h4 { margin: 0 0 12px; font-size: 13.5px; color: var(--mc-navy); font-weight: 700; } .mc-tn-numrow { display: flex; gap: 22px; padding: 14px 0; border-top: 1px dashed var(--mc-line-2); border-bottom: 1px dashed var(--mc-line-2); margin-bottom: 14px; } .mc-tn-numrow div .v { font-size: 22px; font-weight: 600; color: var(--mc-navy); letter-spacing: -0.01em; } .mc-tn-numrow div .v small { font-size: 14px; color: var(--mc-mute); } .mc-tn-numrow div .l { font-size: 11px; color: var(--mc-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* ============================================================ 13. FORM CARDS — User Profile, Manage Users, Company Profile ============================================================ */ .mc-form-wrap { max-width: 900px; margin: 0 32px 40px; } .mc-form-card { background: white; border: 1px solid var(--mc-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(11,59,94,0.04); margin-bottom: 14px; overflow: hidden; } .mc-form-card-head { padding: 18px 22px; cursor: pointer; display: flex; align-items: center; gap: 12px; list-style: none; background: white; transition: background 0.12s ease; } .mc-form-card-head::-webkit-details-marker { display: none; } .mc-form-card-head:hover { background: var(--mc-cream-soft); } .mc-form-card-head i.fa-fw:first-child { width: 36px; height: 36px; border-radius: 9px; background: var(--mc-blue-soft); color: var(--mc-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .mc-form-card-head h3 { flex: 1; margin: 0; color: var(--mc-navy); font-size: 16px; font-weight: 700; } .mc-form-card-chev { color: var(--mc-mute-2); font-size: 12px; transition: transform 0.18s ease; } .mc-form-card[open] .mc-form-card-chev { transform: rotate(180deg); } .mc-form-card-body { padding: 22px; border-top: 1px solid var(--mc-line-2); } .mc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; } @media (max-width: 700px) { .mc-form-row { grid-template-columns: 1fr; } } .mc-form-field { margin-bottom: 14px; } /* Read-only email display inside the User Information card. Sits as its own row, full-width so the address always fits on one line. */ .mc-form-row.mc-user-email-row { grid-template-columns: 1fr; } .mc-user-email-readout { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(11, 59, 94, 0.04); border: 1px solid rgba(11, 59, 94, 0.10); border-radius: 9px; font-size: 14px; color: var(--mc-mute); font-weight: 500; font-variant-numeric: tabular-nums; word-break: break-all; } .mc-user-email-ic { font-size: 13px; color: var(--mc-mute); flex-shrink: 0; } .mc-user-email-hint { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--mc-mute); white-space: nowrap; } @media (max-width: 540px) { .mc-user-email-hint { display: none; } } /* Inline "Edit" affordance — used by both the Email pill (a