/* UltraTech SAPPI — mobile-first styles. Scoped under .fa-wrap / .fa-auth-wrap so nothing here leaks onto the rest of the shared spillcontainment.com site. */ [x-cloak] { display: none !important; } .fa-wrap, .fa-auth-wrap { --fa-primary: #016325; --fa-primary-dark: #014a1c; --fa-text: #414042; --fa-danger: #b3261e; --fa-border: #dfe1e1; --fa-bg: #f6f7f6; --fa-shadow: 0 1px 3px rgba(65,64,66,.08), 0 1px 2px rgba(65,64,66,.06); box-sizing: border-box; max-width: 900px; margin: 0 auto; padding: 16px; color: var(--fa-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; } .fa-wrap *, .fa-auth-wrap * { box-sizing: border-box; } .fa-wrap h2, .fa-wrap h3, .fa-wrap h4, .fa-auth-wrap h2 { color: var(--fa-text); letter-spacing: -.01em; } /* Root cause (confirmed via DevTools, 2026-07-25): this plugin's own CSS prefix "fa-" (for "Facility Assessment") collides with Font Awesome's icon class naming convention — Font Awesome is loaded site-wide and defines a ::before rule for every icon it ships, keyed by class name (e.g. .fa-section, .fa-share, .fa-dashboard). Any of our own classes that happen to also be a real Font Awesome icon name silently inherit that icon's ::before content, which renders as an empty box (a private-use Unicode codepoint with no matching font-family applied). Not heading-specific — any element can collide — so this suppresses ::before/::after on every element in our scope, not just h1–h6. That includes the .fa-wrap/.fa-auth-wrap root element itself (confirmed via DevTools showing div.fa-wrap.fa-dashboard::before) — a plain descendant selector (`.fa-wrap *`) only matches elements INSIDE it, not the wrapper carrying both classes at once, so the wrapper needs its own explicit ::before/::after rule alongside the descendant one. Doubles the wrapper class to out-rank Font Awesome's single-class selector on specificity, in case both rules end up using !important. EXCLUDES input/label (confirmed 2026-07-26): the site's theme draws its checkbox/radio checkmarks via a ::before/::after pseudo-element after resetting the native appearance — this blanket rule was silently killing that too, not just phantom Font Awesome icons, which is why the Non-Compliance checkboxes never showed a check mark. Verified isolated checkbox+accent-color markup renders fine with the suppression scoped away from inputs/labels, so this is narrowed to the actual offenders (divs, headings, sections, etc.) instead of every element unconditionally. */ .fa-wrap.fa-wrap::before, .fa-wrap.fa-wrap::after, .fa-wrap.fa-wrap *:not(input):not(label)::before, .fa-wrap.fa-wrap *:not(input):not(label)::after, .fa-auth-wrap.fa-auth-wrap::before, .fa-auth-wrap.fa-auth-wrap::after, .fa-auth-wrap.fa-auth-wrap *:not(input):not(label)::before, .fa-auth-wrap.fa-auth-wrap *:not(input):not(label)::after { content: none !important; display: none !important; } /* Buttons */ .fa-button { display: inline-block; padding: 12px 18px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; } .fa-button:active { transform: translateY(1px); } /* !important on color/background here is deliberate: these pages render inside the site's normal theme (Elementor/OceanWP), whose own global `a`/`button` styles can otherwise win on specificity or !important and leave button text invisible against the fill color. */ .fa-button-primary { background: var(--fa-primary) !important; color: #fff !important; box-shadow: var(--fa-shadow); border-color: var(--fa-primary) !important; } /* :focus-visible, not plain :focus — clicking the button (mouse, not keyboard) leaves it focused until something else is clicked, and plain :focus would keep it gray even after the mouse moves away. :focus-visible only matches keyboard-driven focus, so a click-then-move-away correctly falls back to green, while tabbing to it with the keyboard still shows the gray as a focus indicator. */ .fa-button-primary:hover, .fa-button-primary:focus-visible { background: var(--fa-text) !important; color: #fff !important; } .fa-button-primary:disabled { opacity: .6; cursor: default; } .fa-button-secondary { background: #fff !important; color: var(--fa-primary) !important; border-color: var(--fa-primary) !important; transition: background-color .5s ease, color .5s ease, border-color .5s ease; } /* Stays unfilled on hover (background stays white) — only the border/text shift to the same muted gray used elsewhere for secondary/quiet text. :focus-visible, not plain :focus — same reasoning as .fa-button-primary above. */ .fa-button-secondary:hover, .fa-button-secondary:focus-visible { border-color: var(--fa-text) !important; color: var(--fa-text) !important; } /* "Empty Trash" (Reports page's Deleted view only — see templates/reports.php) — a full boxy button rather than the small .fa-delete-chip used per-card, since it acts on every trashed assessment at once and sits where the Export to CSV button normally does; same red as .fa-delete-chip so it still reads as destructive at a glance. */ .fa-button-danger { background: var(--fa-danger) !important; color: #fff !important; border-color: var(--fa-danger) !important; } .fa-button-danger:hover, .fa-button-danger:focus-visible { background: var(--fa-text) !important; border-color: var(--fa-text) !important; color: #fff !important; } .fa-button-danger:focus { background: var(--fa-danger) !important; border-color: var(--fa-danger) !important; outline: none; } /* Plain nav/menu item (Back to Dashboard, Log Out, Edit, Copy Share Link) — deliberately not a boxy .fa-button: only one true call-to-action per screen (Download PDF, + New Assessment) should read as a filled button; everything else stays text so the toolbar reads as a menu, not a stack of same-weight pills. */ .fa-nav-link { display: inline-flex; align-items: center; gap: 4px; background: none !important; border: none !important; color: var(--fa-primary) !important; text-decoration: none; cursor: pointer; padding: 6px 2px; font-size: 14px; font-weight: 600; } /* :focus-visible, not plain :focus — same "don't stay highlighted after a mouse click" reasoning as the button fixes elsewhere in this file. */ .fa-nav-link:hover, .fa-nav-link:focus-visible { text-decoration: underline !important; color: var(--fa-text) !important; } .fa-nav-link.fa-copied { color: var(--fa-primary-dark) !important; text-decoration: underline; } /* Deliberately filled + white text (not the plain-link style above) so a destructive action reads as visually distinct from View/Edit/PDF, and so it can't end up "invisible" again from a theme background collision the way the plain button did — background is forced here too, not just color. */ .fa-delete-chip { display: inline-block; background: var(--fa-danger) !important; color: #fff !important; border: none !important; border-radius: 6px; padding: 4px 12px; font-size: 14px; font-weight: 600; cursor: pointer; } .fa-delete-chip:hover, .fa-delete-chip:focus-visible { background: var(--fa-text) !important; } .fa-delete-chip:focus { background: var(--fa-danger) !important; outline: none; } /* Green-filled, same shape/sizing as .fa-delete-chip — the un-doing of a destructive action reads as the opposite color for the same "unmistakable at a glance" reason, on a trashed card that's already red-tinted (see .fa-card-deleted below). */ .fa-restore-chip { display: inline-block; background: var(--fa-primary) !important; color: #fff !important; border: none !important; border-radius: 6px; padding: 4px 12px; font-size: 14px; font-weight: 600; cursor: pointer; } .fa-restore-chip:hover, .fa-restore-chip:focus-visible { background: var(--fa-text) !important; } .fa-restore-chip:focus { background: var(--fa-primary) !important; outline: none; } /* Red-filled + white × — same "force it, don't just set it" reasoning as .fa-delete-chip above: anything that removes/deletes something reads as red so it's unmistakable at a glance, and !important stops the surrounding site theme's own button styling from bleeding through. */ .fa-remove-btn { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none !important; background: var(--fa-danger) !important; color: #fff !important; font-size: 18px; line-height: 1; cursor: pointer; } .fa-remove-btn:hover, .fa-remove-btn:focus-visible { background: var(--fa-text) !important; } /* Notices */ .fa-notice { padding: 12px 14px; border-radius: 6px; margin: 0 0 16px; } .fa-notice-error { background: #fdecea; color: var(--fa-danger); } /* Multiple form-validation problems at once (templates/form.php) render as this list instead of the single-line .fa-notice-error paragraph. */ ul.fa-notice-error { list-style-position: inside; } ul.fa-notice-error li + li { margin-top: 4px; } .fa-notice-success { background: #eaf6ec; color: var(--fa-primary-dark); } /* "Try the New SAPPI" page (includes/class-beta-welcome.php) — a short, narrow read for people coming over from the old tool. !important on the disabled button because .fa-button-primary's own background/color are !important too, so a plain :disabled rule wouldn't visibly dim it. */ .fa-beta-welcome { max-width: 560px; } .fa-beta-welcome p { margin: 0 0 14px; } .fa-beta-agree { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 18px; cursor: pointer; } .fa-beta-agree input { margin-top: 4px; flex-shrink: 0; cursor: pointer; } .fa-beta-welcome .fa-button:disabled { opacity: .5 !important; cursor: default; } .fa-beta-welcome .fa-beta-hint { margin: 10px 0 0; font-size: 13px; color: #888; } /* General-purpose amber notice — the registration page's own "pending approval" notice, the Users page's pending-count banner, and the product-search "there's more, keep typing" hint all use this. */ .fa-notice-warning { background: #fff6e0; color: #8a6100; font-size: 14px; line-height: 1.5; } .fa-notice-warning a { color: #8a6100; font-weight: 600; text-decoration: underline; } /* Site Announcement banner (templates/site-announcement.php, every logged-in/out SAPPI page except the PDF/public share link) — light red per Michael, 2026-08-12, same palette as .fa-notice-error/ .fa-abandoned-notice elsewhere, not the amber .fa-notice-warning above (that stays reserved for the unrelated notices it already covers). */ /* Extra margin-bottom (on top of .fa-notice's own 16px) — per Michael, 2026-08-17: this is the very first thing on every page, sitting directly above the "Logged in as" account line, and 16px alone read as too tight between them. */ .fa-notice-announcement { background: #fdecea; color: var(--fa-danger); font-size: 14px; line-height: 1.5; margin-bottom: 28px; } .fa-notice-announcement a { color: var(--fa-danger); font-weight: 600; text-decoration: underline; } .fa-saved-toast-wrap { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; } .fa-saved-toast { background: rgba(0, 0, 0, 0.82); color: #fff; padding: 18px 32px; border-radius: 10px; font-size: 18px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* Literal value, not inherited — showToast() (app.js) appends this straight to document.body, outside .fa-wrap/.fa-auth-wrap's own scope where font-family is actually declared, so without this it silently fell back to the surrounding theme's font (confirmed 2026-08-11) — same root cause already fixed once for the auth tab bar's own out-of-scope placement. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* showNavigatingToast() (app.js) — the "Loading…" pill shown the instant a chart bar/breakdown row is clicked, while the page reloads to apply that filter. Same dark pill as .fa-saved-toast, just with a spinner alongside the text instead of standing alone. */ .fa-saved-toast-loading { display: flex; align-items: center; gap: 12px; } .fa-saved-toast-spinner { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: fa-toast-spin .7s linear infinite; } @keyframes fa-toast-spin { to { transform: rotate(360deg); } } .fa-empty { color: #666; } /* Reports list with zero results (templates/reports.php) — amber notice naming the date range/filters responsible, plus the way out of each. */ .fa-no-results p { margin: 0; } .fa-no-results p + p { margin-top: 6px; } .fa-no-results .fa-no-results-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; } /* Back to top — every SAPPI page (see app.js), lower-right per Michael, 2026-08-12 (moved from an initial lower-left placement same day). Hidden (not just transparent) until scrolled, both so it's never in the way near the top of a page and so it can't be tabbed to or clicked while invisible. Literal colors, not var(--fa-primary) etc. — those are scoped to .fa-wrap/.fa-auth-wrap (see that rule's own comment), but app.js appends this button straight to , outside that scope, same root cause already documented (and fixed the same way) for .fa-saved-toast's font-family above. Confirmed 2026-08-12 (Michael): the var()-based version rendered with no visible background at all. */ .fa-back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; border: none; background: #016325; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .fa-back-to-top-visible { opacity: 1; visibility: visible; transform: translateY(0); } .fa-back-to-top:hover, .fa-back-to-top:focus-visible { background: #014a1c; } /* Fields */ .fa-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .fa-field span { font-weight: 600; font-size: 14px; } .fa-field input[type="text"], .fa-field input[type="email"], .fa-field input[type="password"], .fa-field input[type="date"], .fa-field input[type="url"], .fa-field textarea, .fa-field select { width: 100%; padding: 12px; border: 1px solid var(--fa-border); border-radius: 8px; font-size: 16px; /* 16px prevents iOS Safari zoom-on-focus */ font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .fa-wrap input:focus, .fa-wrap textarea:focus, .fa-wrap select:focus, .fa-auth-wrap input:focus { outline: none; border-color: var(--fa-primary); box-shadow: 0 0 0 3px rgba(1,99,37,.15); } .fa-field-checkbox { flex-direction: row; align-items: center; } .fa-checkbox-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--fa-border); border-radius: 8px; } .fa-checkbox-option { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; } .fa-checkbox-option input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--fa-primary); cursor: pointer; } .fa-checkbox-other-input { margin-left: 28px; padding: 10px; border: 1px solid var(--fa-border); border-radius: 6px; font-size: 16px; /* 16px prevents iOS Safari zoom-on-focus */ font-family: inherit; width: calc(100% - 28px); } .fa-field-grid { display: grid; grid-template-columns: 1fr; gap: 8px 16px; margin-bottom: 8px; } .fa-auth-form .fa-combo-input { width: 100%; padding: 12px; font-size: 16px; border-radius: 8px; color: inherit; } /* Auth forms */ .fa-auth-wrap { max-width: 420px; padding-top: 24px; } .fa-auth-logo { display: block; height: 50px; width: auto; margin: 0 auto 6px; } .fa-auth-version { margin: 0 0 20px; text-align: center; font-size: 12px; color: #8a8f98; } .fa-form-help { color: #666; font-size: 14px; margin-top: -8px; } /* Login + Create Account start as two separately-rendered shortcodes stacked one after another — reads as an oddly tall, narrow page on a wide screen. app.js collapses them into tabs (only one .fa-auth-wrap visible at a time) when it finds both on the same page, inserting this nav bar as their new sibling; sized/centered to match .fa-auth-wrap's own max-width rather than spanning the surrounding theme content area. */ /* Literal values, not var(--fa-border)/inherited font-family — this nav sits OUTSIDE .fa-wrap/.fa-auth-wrap's own scope (see the comment below), so those custom properties are simply undefined here and font-family would otherwise inherit the surrounding theme's own font instead of SAPPI's (confirmed 2026-08-11: the tabs visibly used a different font than the rest of the app). Same "needs its own copy" fix already applied to the ::before/::after rule further down — kept in sync BY HAND with .fa-wrap/.fa-auth-wrap's own --fa-border/font-family values above. */ .fa-auth-tabs-nav { max-width: 420px; margin: 40px auto 0; display: flex; border-bottom: 2px solid #dfe1e1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* !important throughout, on every state (not just resting) — for the same reason .fa-button-primary needs it above: this renders inside the site's normal theme, whose own button/hover styling can otherwise win. Confirmed 2026-07-28: the theme's default button look (dark green fill) only lost to a plain, un-!important color rule while :hover was active, then reverted the instant the tab lost hover/focus — forcing every state (rest, hover, focus) to the exact same look here removes that inconsistency instead of just patching the one state that showed it. */ .fa-auth-tab, .fa-auth-tab:hover, .fa-auth-tab:focus { flex: 1 1 50%; padding: 12px; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px; font-family: inherit; font-size: 15px; font-weight: 600; color: #666 !important; cursor: pointer; } .fa-auth-tab.fa-auth-tab-active, .fa-auth-tab.fa-auth-tab-active:hover, .fa-auth-tab.fa-auth-tab-active:focus { color: #333 !important; /* Literal value, not var(--fa-primary) — same out-of-scope reason as .fa-auth-tabs-nav's own border-color/font-family fix above. */ border-bottom-color: #016325 !important; } /* This nav is inserted as a sibling of .fa-auth-wrap, not a descendant of it (see app.js) — outside the .fa-wrap::before/::after Font Awesome collision guard near the top of this file, so it needs its own copy rather than relying on that one. */ .fa-auth-tabs-nav::before, .fa-auth-tabs-nav::after, .fa-auth-tabs-nav *::before, .fa-auth-tabs-nav *::after { content: none !important; display: none !important; } /* Site header — account status its own row up top, right-aligned. Below that, the UltraTech logo (left) and customer logo (right, when the assessment has one) share one row, vertically centered against each other via align-items on that row rather than each sitting in its own differently-sized box — they're on opposite ends of the same row, not adjacent to each other, just level with each other. Shared across the three authenticated views (dashboard/form/report) via templates/site-header.php — never shown on the public share page or PDF, which have no logged-in user. Global navigation lives page-side, not here: see templates/dashboard.php (+ New Assessment) and templates/report.php (the My Assessments / Edit / Download PDF / Copy Share Link toolbar) — the only thing this header ever renders below the logo row is a plain "My Assessments" back-link, and only on the form/edit page. */ .fa-site-header { margin-bottom: 24px; } /* Divider + real padding (not just a small margin) between the account/nav row and the logo row below it — per Michael, 2026-08-17: nav is page chrome, the logo row is this specific assessment's own identity, and the two sat close enough to read as one crowded block. The line marks that boundary explicitly; the padding above/below it is what actually gives both rows room to breathe. */ .fa-site-account { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--fa-border); font-size: 13px; color: #666; text-align: right; } /* "Logged in as X." on its own line, the My Assessments/Reports/Users/ Support/Log Out menu on the one below it — per Michael, 2026-08-12, split out of what used to be one wrapping line/paragraph. */ .fa-site-account-greeting { margin: 0 0 4px; } .fa-site-version { color: #8a8f98; font-size: 0.85em; margin-left: 2px; } .fa-site-account-menu { margin: 0; } .fa-site-header-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; } /* !important guards against theme rules like ".entry-content img { height: auto; }" — a class+element selector that outranks our own bare class selector on specificity alone, so a plain override here isn't enough on themes that ship that kind of generic content-image reset. */ .fa-site-logo-ultratech { display: block !important; height: 50px !important; width: 166px !important; max-width: 166px !important; } .fa-site-logo-customer { display: block; max-height: 50px; width: auto; } /* Form page only — the customer logo's one add/change/remove control, right where the logo itself ends up, instead of a separate upload field further down the page duplicating the same image. Edit/remove buttons are always visible (not hover-only) since a hover state doesn't exist on touch devices, which assessors may well be using in the field. */ .fa-site-logo-customer-slot { display: flex; align-items: center; } .fa-site-logo-customer-editable { position: relative; display: inline-flex; } .fa-site-logo-edit-btn, .fa-site-logo-remove-btn { position: absolute; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .fa-site-logo-edit-btn.fa-site-logo-edit-btn { bottom: -7px; right: -7px; border: 1px solid var(--fa-primary) !important; background: var(--fa-primary) !important; color: #fff !important; } .fa-site-logo-edit-btn.fa-site-logo-edit-btn:hover, .fa-site-logo-edit-btn.fa-site-logo-edit-btn:focus-visible { background: var(--fa-text) !important; border-color: var(--fa-text) !important; } .fa-site-logo-edit-btn.fa-site-logo-edit-btn:focus { background: var(--fa-primary) !important; border-color: var(--fa-primary) !important; outline: none; } .fa-site-logo-remove-btn { top: -7px; right: -7px; border: none !important; background: var(--fa-danger) !important; color: #fff !important; font-size: 13px; line-height: 1; } .fa-site-logo-remove-btn:hover, .fa-site-logo-remove-btn:focus-visible { background: var(--fa-text) !important; } /* Wraps the Add button + its own size hint — per Michael, 2026-08-14: people assumed the logo was resized by WIDTH (it's actually a fixed HEIGHT, see FA_Assessment::LOGO_MAX_HEIGHT), so a tall/narrow upload shrinks down to a sliver rather than looking reasonably sized. Only shown before a logo's picked — x-show="!customerLogo" on this wrapper now, moved off the button itself, so the hint disappears the instant one's uploaded rather than lingering as dead advice once it's moot. The hint is absolutely positioned, not stacked in normal flow — deliberately, so this wrap's own in-flow height stays exactly the button's height (matching .fa-site-logo-ultratech's fixed 50px) instead of growing to fit two lines. .fa-site-header-top centers every child on that shared 50px, so a taller in-flow wrap would push the button up off that row entirely; this way it stays put and the hint just hangs below it, out of the way. */ .fa-site-logo-add-wrap { position: relative; display: inline-block; } .fa-site-logo-hint { position: absolute; top: 100%; left: 0; margin: 5px 0 0; max-width: 190px; font-size: 11px; line-height: 1.35; color: #666; } .fa-site-logo-add-btn.fa-site-logo-add-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 14px; border: 1px solid var(--fa-primary) !important; border-radius: 8px; background: var(--fa-primary) !important; color: #fff !important; font-size: 13px; font-weight: 600; cursor: pointer; } .fa-site-logo-add-btn.fa-site-logo-add-btn:hover, .fa-site-logo-add-btn.fa-site-logo-add-btn:focus-visible { background: var(--fa-text) !important; border-color: var(--fa-text) !important; } .fa-site-logo-add-btn.fa-site-logo-add-btn:focus { background: var(--fa-primary) !important; border-color: var(--fa-primary) !important; outline: none; } .fa-site-logo-add-btn:disabled { opacity: .6; cursor: default; } .fa-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Report page's one action row: View/Edit/Share/Download PDF/Copy Share Link, which only exist in the context of this one specific assessment — "My Assessments" itself now lives in the persistent site-header menu instead of being duplicated here. Deliberately a single row rather than splitting anything into the shared site-header above it — two stacked rows of near-identical-looking plain-text links read as much busier than one. See templates/report.php. */ .fa-report-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--fa-border); } /* Pushes the View/Edit/Share/PDF/Products link group to the right — same set, same order, same right alignment as the card action rows on Dashboard/Reports (see .fa-card-links there). margin-left:auto rather than justify-content:space-between on the parent — this row is always just this one group now, but margin-left:auto still keeps it right- aligned regardless. */ .fa-card-links { margin-left: auto; } /* The link matching whichever page you're already on — a plain, inert rather than an with no real destination, styled to look deliberately disabled instead of just another clickable action. */ .fa-card-link-current { color: #999; font-weight: 600; cursor: default; } /* Reports page's activity chart — hand-rolled plain HTML/CSS bars rather than a charting library, matching this plugin's no-third-party-JS- dependency approach everywhere else (self-hosted Alpine, vendored Dompdf). See templates/reports.php and FA_Reports::stats(). */ .fa-stats { margin-bottom: 28px; padding: 18px 20px; background: #fff; border: 1px solid var(--fa-border); border-radius: 10px; } .fa-stats-header { display: flex; align-items: center; gap: 10px; } /* No font-size override — per Michael, 2026-08-12, "Activity" should read at the same size as "All Assessments" below it, so this just inherits the same plain h2 sizing .fa-section-header-row's own h2 gets (no override there either), rather than the smaller 15px this used to be set to back when it was still a subordinate h3 inside a bigger "Analytics" heading. */ .fa-stats-header h2 { margin: 0; } /* Chart + Distributor/Rep Group/Top Users breakdown were two separate cards until merged into this one 2026-08-12 (Michael: "let's just combine the reports at the top of reports into one section") — this is the one visual seam left standing in for that old card boundary, so the breakdown grid doesn't run straight into the chart above it with nothing marking where one dataset ends and the other begins. Only rendered when both are actually present (see templates/reports.php) — the breakdown sits flush at the top of the body on its own otherwise. */ .fa-activity-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--fa-border); } /* Always visible now — per Michael, 2026-08-17, the collapse-to-hide toggle this card used to have (and the button that drove it) is gone entirely: the range tabs directly below double as a real filter for the assessment list, and hiding them behind a collapsed chart card made that connection genuinely confusing ("clicking a range tab to filter results shouldn't also expand a chart section"). Simplest fix was removing the option to hide any of it — chart, breakdown, and range tabs are now just always on screen together. */ .fa-stats-ranges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; margin-bottom: 20px; } .fa-stats-range { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--fa-border); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .fa-stats-range:hover { border-color: var(--fa-primary); background: var(--fa-bg); } .fa-stats-range-count { font-size: 17px; font-weight: 700; color: var(--fa-primary-dark); } .fa-stats-range-label { font-size: 11px; color: #666; } .fa-stats-range-active { border-color: var(--fa-primary); background: var(--fa-bg); } /* "Custom" is a