:root {
--bs-primary: #e11d2e;
--fsn-navy: #0b1e4a;
/* The SAME colour as `--fsn-navy`, as channels. It exists only so a tint of
the brand navy can be expressed as `rgba(var(--fsn-navy-rgb), .08)`.
`color-mix()` would avoid the duplicate, but it is unsupported in the
browser baseline this build already targets with `@supports not
(container-type: inline-size)`. Keep the two values identical. */
--fsn-navy-rgb: 11, 30, 74;
/* FSN "complete" green — UI-CREATE-WO-SIDEBAR-01.
`--bs-success` CANNOT be used for this. In this Metronic build it resolves
to #1B84FF, a BLUE, so a success mark drawn from it reads as a link and
lands on the same Field Nation blue this project deliberately avoids.
This value is not new: #0F7A34 is the accessible green already used by the
admin pagination rule further down this file, where #17C653 measured only
2.27:1 on white and #0F7A34 reaches 5.45:1. It is promoted to a token so
the completion mark and that rule cannot drift apart. */
--fsn-success: #0f7a34;
/* DASHBOARD CHART TOKENS — UI-DASHBOARD-CLIENT-CONTRACTOR-01.
Two series colours, in a FIXED order. They live here, with every other FSN
colour decision, so `resources/js/fsn-dashboard-charts.js` reads a token
instead of owning a palette.
`--fsn-navy` CANNOT be a chart fill. Measured against the chart surface it
fails both the lightness band and the chroma floor — it reads as a dark
neutral rather than a data colour. `--fsn-chart-series-1` is a lighter,
more chromatic step of the SAME blue family, chosen because it is the
nearest step that passes. `--fsn-chart-series-2` is `--bs-primary`, the FSN
red, unchanged.
The pair was validated, not judged by eye: lightness band, chroma floor,
colour-vision separation across all pairs, and contrast against both the
light and the dark chart surface. It passes every check in BOTH modes,
which is why the series colours do not change with the theme below. The
measured output is recorded in
`docs/context/ui-dashboard-client-contractor-implementation-review.md` §4.
This is NOT a second theme palette and it introduces no new red. A chart
never draws more than two series; a composition with more than two
categories is drawn as a single-hue bar chart, precisely because no
accessible categorical palette of three or more could be built from the
FSN colours. */
--fsn-chart-series-1: #2f6fd0;
--fsn-chart-series-2: #e11d2e;
--fsn-chart-grid: rgba(120, 130, 150, 0.25);
--fsn-chart-ink: #4b5675;
}
/* The chart grid and tick text are theme tokens: they sit ON the surface, so
they must follow it. The two SERIES colours deliberately do not — both already
pass against the dark surface, and repainting a classification on a theme
change would break "colour follows the entity". */
[data-bs-theme="dark"] {
--fsn-chart-grid: rgba(150, 160, 180, 0.22);
--fsn-chart-ink: #9a9cae;
}
/* ============================================================================
🔴 --bs-text-primary — THE TOKEN `--bs-primary` ABOVE DID NOT COVER, AND THE
ONE EVERY "PRIMARY-COLOURED TEXT" UTILITY ACTUALLY READS.
## What was measured
`--bs-primary` is overridden at the top of this file. `--bs-text-primary` is a
SEPARATE Metronic token and was never overridden, so it kept the packaged
green:
[data-bs-theme=light] --bs-text-primary: #17C653
[data-bs-theme=dark] --bs-text-primary: #00A261
Measured in the project's own resolver, through the real cascade:
.text-primary -> #17c653 on #ffffff 2.27:1 FAILS AA
.text-hover-primary -> #17c653 on #ffffff 2.27:1 FAILS AA (on hover)
🔴 THE RESTING STATE IS THE LARGER HALF AND IT WAS NOT THE ONE REPORTED.
`text-primary` is used **57 times** in the views and is green in its RESTING
state; `text-hover-primary` is used **26 times** and is green only on hover.
Both are the same token and the same 2.27:1.
Twenty-eight rules in `style.bundle.css` read this token, including
`.text-primary`, `.text-hover-primary:hover`, `.text-active-primary.active`
and the `btn-*-primary` text and icon families.
## Why THIS value, and not FSN's own `--bs-primary`
`#e11d2e` is the obvious choice and it FAILS. Measured against every ground
this token actually lands on:
ground #e11d2e #b30f1c
white #ffffff 4.75 OK 7.00 OK
primary tint #DFFFEA 4.44 FAIL 6.54 OK
grey-100 #F9F9F9 4.52 OK 6.64 OK
light panel #F5F8FA 4.46 FAIL 6.56 OK
The tint is not hypothetical: `livewire/messages/header-dropdown.blade.php`
puts `text-hover-primary` on a row that carries `bg-light-primary` when the
conversation is unread. A value chosen on white alone ships a failure there.
`#b30f1c` IS NOT A NEW COLOUR. `fsn-app-shell.css` already chose it for
exactly this ground and recorded exactly this figure — "badge-light-primary:
#E11D2E on #DFFFEA measured 4.44:1 -> #B30F1C gives 6.54:1". Reusing it adds
no fourth red and keeps the two rules from drifting apart.
## The dark theme is scoped separately BECAUSE ONE VALUE CANNOT SERVE BOTH
ground #b30f1c #ff7a84
dark body #15171C 2.56 FAIL 7.15 OK
dark tint #1F212A 2.29 FAIL 6.39 OK
dark grey #1B1C22 2.43 FAIL 6.77 OK
Metronic scopes this token under `[data-bs-theme=light]` and
`[data-bs-theme=dark]`, so these mirror those selectors exactly: wherever the
packaged value applies, the FSN value applies and wins on source order.
`ThemeTextPrimaryContrastTest` measures both values against every ground.
============================================================================ */
[data-bs-theme="light"] {
--bs-text-primary: #b30f1c;
}
[data-bs-theme="dark"] {
--bs-text-primary: #ff7a84;
}
/* THE ACTIVE UNDERLINE TAB, DARK THEME ONLY.
Lives here and NOT in the fsn-app-shell palette block: that block is asserted
admin-only — every selector in it must begin `body.fsn-app-shell .wrapper` —
and `BL-QA-01` corrected finding F4 precisely because an unscoped rule there
leaked onto the Client and Contractor tab rows. This correction is FOR those
tab rows, so it belongs in the application-wide sheet.
`BL-FEAT-01` reported `--bs-primary` #E11D2E as failing AA on dark at 3.77:1
and left it for its own pass. This is that pass, and the measurement changed
the answer.
🔴 THE TOKEN CANNOT BE FIXED, BECAUSE IT PLAYS TWO ROLES THAT MOVE IN OPPOSITE
DIRECTIONS. `style.bundle.css` reads `var(--bs-primary)` as `color` 97 times
and as `background-color` 97 times. Lightening it for dark fixes the text and
breaks white-on-primary; darkening it does the reverse. Five candidates were
measured and NONE clears 4.5:1 in both roles:
value text on dark #15171C white on it
#ff7a84 7.15 OK 2.51 FAIL
#ff5c6a 5.97 OK 3.00 FAIL
#f0505f 5.14 OK 3.49 FAIL
#e8455a 4.64 OK 3.87 FAIL
#e11d2e 3.77 FAIL 4.75 OK
So the token is left alone and the TEXT role is corrected where it renders.
Of the three text-role selectors in the bundle, only `.nav-line-tabs` appears
in FSN at all — 9 views, both Work Order tab rows among them. `.alert-primary`
and `.menu-primary` appear in zero views.
`--bs-text-primary` is the token Metronic already provides for the text role,
and FSN set it in both themes. Reading it here introduces no new colour and
inherits that guard.
🔴 DARK ONLY. The light theme keeps #E11D2E at 4.75:1, unchanged, because
nothing about it failed. */
[data-bs-theme="dark"] .nav-line-tabs .nav-item .nav-link.active,
[data-bs-theme="dark"] .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
color: var(--bs-text-primary);
}
/* ADMIN SIDEBAR — FSN navy brand background (uses the --fsn-navy variable; never a
hardcoded hex). Replaces the previous Bootstrap `bg-dark` on the admin aside. */
.fsn-admin-aside {
background-color: var(--fsn-navy);
}
/* ============================================================================
UI-HDR-ALIGN-01 — ONE SHARED PAGE-SHELL HORIZONTAL GUTTER
DEFECT. The Client and Contractor shell mixed two different horizontal
container strategies inside one page:
- the logo/topbar row, the navigation row, the page-title/breadcrumb
toolbar and the footer used Bootstrap `.container-xxl`, which is
CENTRED (`margin-inline: auto`) and capped at `max-width: 1320px`
from 1400px up;
- the main content column used `.container-fluid px-10`, which is
FULL WIDTH with a 2.5rem gutter.
At a 1920px viewport that produced a 289.9px left offset and a matching
289.9px right offset between the header regions and the Flight Board card.
The two regions never shared a content boundary at ANY width.
CANONICAL PAGE-SHELL BOUNDARY. The outer edge of this container is the one
left/right boundary for the whole shell: logo, navigation, page title,
breadcrumb, main content and footer all resolve to it. A card's own inner
padding is separate and is not part of this contract.
GUTTER VALUES. Both values are the values the shell ALREADY used, so no new
spacing is invented:
- below 992px -> 15px, the Metronic mobile shell gutter that the header
and the toolbar already used. The header keeps its existing mobile
spacing, so the logo and the right-side actions do not lose room.
- 992px and up -> 2.5rem, the gutter the main content column already used.
The Flight Board content therefore does NOT move on desktop; only the
header regions move to meet it.
`padding-inline` is logical, so the gutter stays correct under `dir="rtl"`.
NO max-width and NO centring: the header must use the full responsive width
inside the gutters, which is what the content column already did.
============================================================================ */
.fsn-page-container {
--fsn-page-gutter: 15px;
width: 100%;
max-width: none;
margin-inline: auto;
padding-inline: var(--fsn-page-gutter);
}
@media (min-width: 992px) {
.fsn-page-container {
--fsn-page-gutter: 2.5rem;
}
}
/* FSN BUTTON SYSTEM */
/* Primary action */
.btn-fsn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: #ffffff;
font-weight: 600;
padding: 14px 32px;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(225, 29, 46, 0.35);
}
/* UI-CLIENT-QUOTES-01: this hover was a private near-navy hex that did not match
the `--fsn-navy` token used everywhere else. It now reads the token, so ONE
value defines FSN navy across the application. */
.btn-fsn-primary:hover,
.btn-fsn-primary:focus,
.btn-fsn-primary:active {
background-color: var(--fsn-navy);
border-color: var(--fsn-navy);
color: #ffffff;
}
/* Secondary action */
.btn-fsn-secondary {
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
font-weight: 500;
padding: 14px 32px;
border-radius: 6px;
}
.btn-fsn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.btn-fsn-nav {
background-color: #ffffff;
color: var(--fsn-navy);
border: none;
font-weight: 600;
padding: 8px 22px;
border-radius: 6px;
}
.btn-fsn-nav:hover {
background-color: var(--bs-primary);
color: #ffffff;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.landing-dark-bg {
background-color: var(--fsn-navy);
background-image: none !important;
}
.landing-clients img {
opacity: 0.8;
transition: opacity 0.2s ease;
}
.landing-clients img:hover {
opacity: 1;
}
.fsn-hero:hover .landing-clients img {
opacity: 0.75;
}
/* LANDING HEADER STICKY FIX */
.landing-header .btn-fsn-nav {
border-radius: 8px;
padding: 10px 22px;
font-weight: 600;
}
/* When sticky mode is ON (Metronic adds this attribute on body) */
[data-kt-sticky-landing-header="on"] .landing-header .menu .menu-link {
color: var(--fsn-navy) !important;
font-weight: 600;
}
[data-kt-sticky-landing-header="on"] .landing-header .menu .menu-link:hover {
color: var(--bs-primary) !important;
}
/* active item styling */
[data-kt-sticky-landing-header="on"] .landing-header .menu .menu-link.active {
color: var(--bs-primary) !important;
background-color: rgba(225, 29, 46, 0.08) !important;
border-radius: 8px;
}
.landing-header .fsn-brand {
margin-right: 48px;
/* creates clean gap before nav */
}
@media (max-width: 991px) {
.landing-header .fsn-brand {
margin-right: 24px;
}
}
/* Make Select2 look like form-floating */
.form-floating > .select2-container {
width: 100% !important;
}
.form-floating > .select2-container .select2-selection {
height: calc(3.5rem + 2px);
padding: 1.625rem 0.75rem 0.625rem;
border-radius: 0.475rem;
border-color: #e1e3ea;
background-color: #f5f8fa;
}
.form-floating > .select2-container--bootstrap-5 .select2-selection__rendered {
line-height: 1.25;
}
.form-floating > label {
z-index: 1;
}
/* Focus state */
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
border-color: #3e97ff;
box-shadow: 0 0 0 0.25rem rgba(62, 151, 255, 0.25);
}
/* TinyMCE Overrides */
.fsn-tinymce-wrapper {
border-radius: 0.475rem;
overflow: hidden;
}
.fsn-tinymce-wrapper .tox-tinymce {
border-radius: 0.475rem !important;
border-color: var(--bs-gray-300) !important;
}
.fsn-tinymce-wrapper .tox .tox-toolbar,
.fsn-tinymce-wrapper .tox .tox-toolbar__primary,
.fsn-tinymce-wrapper .tox .tox-toolbar__overflow {
background: var(--bs-body-bg) !important;
}
.fsn-editor-content {
line-height: 1.6;
white-space: normal;
overflow-wrap: break-word;
}
.fsn-editor-content p:last-child {
margin-bottom: 0;
}
.fsn-editor-content ul,
.fsn-editor-content ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.fsn-editor-content h1,
.fsn-editor-content h2,
.fsn-editor-content h3,
.fsn-editor-content h4,
.fsn-editor-content h5,
.fsn-editor-content h6 {
margin-top: 0;
margin-bottom: 0.75rem;
}
/* =========================================================
WORK SCOPE EDITOR — UI-CLIENT-QUOTES-01
Two surfaces share one appearance: `.fsn-editor-content` is the Tiptap
editing surface, `.fsn-rich-text` is the READ rendering of the stored,
sanitized value. They are styled together so what a Client writes is what a
Contractor sees.
PLACEMENT: this block must stay ABOVE the two admin marker comments further
down this file. Each of those markers starts a region that a test reads to
the end of the file, requiring every selector in it to be admin-shell-scoped.
These selectors are editor-scoped, not shell-scoped, so they belong here.
Do not repeat either marker's wording in a comment: the tests locate their
region with the FIRST match of the marker text, so quoting it above the real
marker silently moves the region and fails the scan.
========================================================= */
.fsn-editor-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
padding: 0.5rem;
border: 1px solid var(--bs-gray-300);
border-bottom: 0;
border-radius: 0.475rem 0.475rem 0 0;
background: var(--bs-gray-100);
}
.fsn-editor-btn {
min-width: 2rem;
padding: 0.25rem 0.5rem;
line-height: 1.2;
border: 1px solid transparent;
}
.fsn-editor-btn:hover {
background: var(--bs-gray-200);
}
/* The pressed state must be visible without relying on colour alone. */
.fsn-editor-btn.active {
background: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.fsn-editor-select {
width: auto;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.fsn-editor-separator {
width: 1px;
height: 1.5rem;
margin: 0 0.25rem;
background: var(--bs-gray-300);
}
/* ── Compact toolbar popovers — UI-CLIENT-QUOTES-01 ─────────────────────
The text-colour and highlight controls were a native ``
plus a caption and a clear button, which occupied a large part of the toolbar
and opened the operating system's full colour dialog. Both are now one small
toolbar button that opens a small anchored panel.
The panel is positioned against its OWN wrapper, never against the viewport,
so it travels with the toolbar at every width and cannot be left behind when
the toolbar wraps. */
.fsn-editor-pop-wrap {
position: relative;
display: inline-flex;
}
.fsn-editor-pop {
position: absolute;
top: calc(100% + 4px);
left: 0;
/* Above the Bootstrap modal that hosts the editor. */
z-index: 1080;
min-width: 11rem;
padding: 0.6rem;
border: 1px solid var(--bs-gray-300);
border-radius: 0.475rem;
background: var(--bs-body-bg);
box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.fsn-editor-pop[hidden] { display: none; }
/* STAGING-REVIEW-B3 BL-2a: never wider than the screen less its gutters; the
editor script moves an open panel left when it would pass the right edge. */
.fsn-editor-pop-link { min-width: min(17rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); }
.fsn-editor-pop-title {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
color: var(--bs-gray-500);
margin-bottom: 0.4rem;
}
.fsn-editor-pop-actions {
display: flex;
gap: 0.4rem;
margin-top: 0.5rem;
}
.fsn-editor-pop-error {
font-size: 0.75rem;
color: var(--bs-danger);
margin-top: 0.3rem;
min-height: 0.9rem;
}
/* A fixed six-column grid, so the palette is a small square block rather than
a wide strip. */
.fsn-editor-swatches {
display: grid;
grid-template-columns: repeat(4, 1.4rem);
gap: 0.35rem;
}
.fsn-editor-swatch {
width: 1.4rem;
height: 1.4rem;
padding: 0;
border: 1px solid var(--bs-gray-400);
border-radius: 0.25rem;
cursor: pointer;
}
.fsn-editor-swatch:hover { transform: scale(1.12); }
.fsn-editor-swatch:focus-visible {
outline: 2px solid var(--fsn-navy);
outline-offset: 1px;
}
/* The default swatch states "no stored colour" with a diagonal strike, so it
never reads as a white colour choice. */
.fsn-editor-swatch-clear {
background: linear-gradient(
to top left,
transparent calc(50% - 1px),
var(--bs-danger) calc(50% - 1px),
var(--bs-danger) calc(50% + 1px),
transparent calc(50% + 1px)
), #ffffff;
}
.fsn-editor-swatch-icon {
font-size: 0.9rem;
font-weight: 700;
}
.fsn-editor-surface {
border: 1px solid var(--bs-gray-300);
border-radius: 0 0 0.475rem 0.475rem;
background: var(--bs-body-bg);
}
.fsn-editor-content {
min-height: 14rem;
max-height: 28rem;
overflow-y: auto;
padding: 0.75rem 1rem;
}
.fsn-editor-content:focus,
.fsn-editor-content:focus-visible {
outline: 0;
}
/* --- Shared document appearance: editing surface and read rendering --- */
.fsn-rich-text {
line-height: 1.6;
overflow-wrap: break-word;
}
.fsn-rich-text p:last-child {
margin-bottom: 0;
}
.fsn-rich-text ul,
.fsn-rich-text ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.fsn-editor-content blockquote,
.fsn-rich-text blockquote {
margin: 0 0 1rem;
padding: 0.25rem 0 0.25rem 1rem;
border-left: 3px solid var(--bs-gray-300);
color: var(--bs-gray-700);
}
/* The `pre` and `code` rules that stood here are removed with the Code and
Code Block features (UI-CLIENT-QUOTES-01). Neither element can be produced by
the editor or survive the server allow-list, so the rules had no subject. */
.fsn-editor-content hr,
.fsn-rich-text hr {
margin: 1rem 0;
border: 0;
border-top: 1px solid var(--bs-gray-300);
}
.fsn-editor-content mark,
.fsn-rich-text mark {
padding: 0.05em 0.15em;
border-radius: 0.2rem;
}
.fsn-editor-content a,
.fsn-rich-text a {
color: var(--bs-primary);
text-decoration: underline;
}
/* --- Task lists ---
The stored markup carries NO checkbox input: `App\Support\Html\WorkScopeHtml`
drops every form control, so the box is drawn from `data-checked` instead.
That keeps a form element out of every reader's document. */
.fsn-editor-content ul[data-type='taskList'],
.fsn-rich-text ul[data-type='taskList'] {
padding-left: 0;
list-style: none;
}
.fsn-editor-content ul[data-type='taskList'] li,
.fsn-rich-text ul[data-type='taskList'] li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.fsn-rich-text ul[data-type='taskList'] li::before {
content: '☐';
flex: 0 0 auto;
line-height: 1.6;
}
.fsn-rich-text ul[data-type='taskList'] li[data-checked='true']::before {
content: '☑';
}
.fsn-rich-text ul[data-type='taskList'] li[data-checked='true'] {
color: var(--bs-gray-600);
text-decoration: line-through;
}
/* --- Tables --- */
.fsn-editor-content table,
.fsn-rich-text table {
width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
table-layout: fixed;
overflow: hidden;
}
.fsn-editor-content th,
.fsn-editor-content td,
.fsn-rich-text th,
.fsn-rich-text td {
padding: 0.4rem 0.6rem;
border: 1px solid var(--bs-gray-300);
vertical-align: top;
}
.fsn-editor-content th,
.fsn-rich-text th {
background: var(--bs-gray-100);
font-weight: 600;
text-align: start;
}
/* A wide table scrolls inside its own region — the page body never scrolls
sideways (CLAUDE.md §9D). */
.fsn-rich-text {
overflow-x: auto;
}
/* Tiptap column resize handle and cell selection, editing surface only. */
.fsn-editor-content .selectedCell:after {
content: '';
position: absolute;
inset: 0;
background: rgba(27, 132, 255, 0.15);
pointer-events: none;
}
.fsn-editor-content th,
.fsn-editor-content td {
position: relative;
}
.fsn-editor-content .column-resize-handle {
position: absolute;
right: -2px;
top: 0;
bottom: 0;
width: 4px;
background: var(--bs-primary);
pointer-events: none;
}
@media (max-width: 767.98px) {
.fsn-editor-toolbar {
gap: 0.15rem;
padding: 0.35rem;
}
.fsn-editor-separator {
display: none;
}
}
/* =========================================================
Global Scrollspy Navigation
Usage:
- Add data-scrollspy-nav on nav wrapper
- Add .fsn-step-item + data-scrollspy-link + data-target="section-id" on links
- Add matching id="section-id" on sections
========================================================= */
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
[data-scrollspy-link] {
text-decoration: none;
color: inherit;
}
/* The `.fsn-step-item.is-active` rules that stood here are removed by
UI-CREATE-WO-SIDEBAR-01. That class no longer exists: the Create Work Order
navigator was rebuilt as `.fsn-wo-nav-item`, styled in the page itself. The
rules had no subject left.
⚠ RECORDED, NOT FIXED. The `[data-scrollspy-link]` rules below were ALREADY
dead before this boundary — no markup in `resources/` or `app/` carries that
attribute. They are unrelated to this change and are left alone per
`CLAUDE.md` §0G-7. They also hardcode the Field Nation blue `#1b84ff`, which
is why they should be removed by whichever boundary owns them. */
[data-scrollspy-link].is-active {
background: #f0f4ff;
border-left-color: #1b84ff;
}
[data-scrollspy-link].is-active .fsn-step-label {
color: #1b84ff;
font-weight: 600;
}
[data-scrollspy-link].is-active .fsn-step-icon {
background: #1b84ff;
color: #fff;
}
/* ──────────────────────────────────────────────────────────────────────────
Admin sidebar desktop collapse (hotfix).
A body class `admin-aside-minimize` (toggled + persisted by assets/js/admin-ui.js)
shrinks the aside to a clean icon rail. The aside is a rigid flex item (Metronic
`flex-row-auto`), so narrowing it lets the content wrapper reflow automatically —
no fixed positioning / margin math. `overflow: hidden` clips any label spill so
nothing ghosts over the page content. Desktop only (lg+); mobile KTDrawer untouched.
────────────────────────────────────────────────────────────────────────── */
.fsn-admin-aside {
transition: width .3s ease;
}
/* Mini logo shows only when the rail is collapsed. */
.fsn-admin-aside .fsn-logo-mini {
display: none;
}
/* The square mark, cropped out of the wide lockup.
`logo-white-mark.svg` is 153x40 units: a 40x40 bracket frame holding the mark,
then the wordmark from x=53. `cover` scales the SVG so its height fills the 42px
box (making it ~161px wide), and `left center` then shows the leftmost 42px —
which is the square mark and nothing else.
The box was 34px until the collapse control moved out of the logo row. Both
numbers below are 42px; this comment said 34px until BL-CLOSE-02 corrected it. A
comment that contradicts the rule it sits on top of is worse than no comment,
because it is read as the intent and the rule is read as the mistake.
This reuses the file the expanded logo already loads, so the browser has it
cached and the two states cannot drift apart. */
.fsn-admin-aside .fsn-logo-mini-mark {
width: 42px;
height: 42px;
object-fit: cover;
object-position: left center;
}
/* 🔴 THE COLLAPSE CONTROL SITS ON THE BOUNDARY, OUTSIDE THE RAIL.
It used to be a flex child of the logo row, where `justify-content: center`
centred the PAIR: the mark landed at 23px while the icon column below centres at
40px, so the logo read as misaligned. With the control out of that row the mark
centres on its own and lines up with the icons.
`fixed`, not `absolute`: the aside is already `aside-fixed`, and the rail sets
`overflow-x: hidden` when collapsed — a control straddling the edge must not be
clipped by the element it straddles.
`left` transitions on the same .3s curve as the rail's width, so the button
travels with the edge instead of jumping when the state changes. */
.fsn-aside-toggle.btn.btn-icon {
position: fixed;
top: 26px;
left: 275px;
transform: translateX(-50%);
z-index: 101;
width: 28px;
height: 28px;
min-width: 28px;
padding: 0;
border-radius: 50%;
background: #ffffff;
/* Metronic's `.btn` zeroes the border and the shadow, so these two carry
`!important`. Without them the control is a white disc straddling a white
content column and a navy rail - visible on one half and not the other. */
border: 1px solid var(--bs-gray-300) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .12) !important;
transition: left .3s ease, background-color .15s ease;
}
.fsn-aside-toggle.btn.btn-icon:hover {
background: var(--bs-gray-100);
border-color: var(--bs-gray-400);
}
.fsn-aside-toggle i {
color: var(--bs-gray-700);
}
#kt_admin_aside_toggle i {
transition: transform .3s ease;
}
#kt_admin_aside_toggle.active i {
transform: rotate(180deg);
}
@media (min-width: 992px) {
/* Rigid width + clip so the collapsed rail never overlaps page content. */
.fsn-admin-aside {
overflow-x: hidden;
}
body.admin-aside-minimize .fsn-admin-aside {
width: 80px !important;
min-width: 80px !important;
}
/* The control rides the rail's edge. Same duration as the width transition. */
body.admin-aside-minimize .fsn-aside-toggle.btn.btn-icon {
left: 80px;
}
/* Logo area: swap the full lockup for the square brand mark, centred.
It said `mini "FSN" placeholder` until BL-CLOSE-02. The rail did once render
the literal text FSN, but BL-CLOSE-01 replaced that with the real mark cropped
from `logo-white-mark.svg`. The word "placeholder" invited the next reader to
replace something that is already finished. */
body.admin-aside-minimize .fsn-admin-aside .aside-logo {
justify-content: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.admin-aside-minimize .fsn-admin-aside .fsn-logo-full {
display: none !important;
}
body.admin-aside-minimize .fsn-admin-aside .fsn-logo-mini {
display: inline-flex !important;
}
/* Hide labels + section headings cleanly; keep icons centered/visible. */
body.admin-aside-minimize .fsn-admin-aside .menu-title,
body.admin-aside-minimize .fsn-admin-aside .menu-heading,
body.admin-aside-minimize .fsn-admin-aside .menu-content {
display: none !important;
}
/* Clip the scroll area horizontally so nothing spills past the rail.
The box itself must be pinned to the 80px rail: Metronic's .aside-menu keeps
its expanded content min-width (~265px), so without this the width:100% items
below resolve to ~265px and the 56px auto-centred link lands at x≈105 — outside
the rail and clipped away (D-1). min-width overrides the flex min-width:auto. */
body.admin-aside-minimize .fsn-admin-aside .aside-menu {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
overflow-x: hidden !important;
padding-left: .25rem !important;
padding-right: .25rem !important;
}
/* Constrain each item/link + its active pill to a fixed, centered box inside the
80px rail so the white active background can never extend into page content. */
body.admin-aside-minimize .fsn-admin-aside .menu,
body.admin-aside-minimize .fsn-admin-aside .menu-item {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.admin-aside-minimize .fsn-admin-aside .menu-item > .menu-link {
width: 56px !important;
max-width: 56px !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
padding: .6rem 0 !important;
justify-content: center !important;
white-space: nowrap;
overflow: hidden;
}
body.admin-aside-minimize .fsn-admin-aside .menu-icon {
margin-right: 0 !important;
justify-content: center !important;
}
}
/* Keep the floating action menu above the sticky header/aside. */
/* 🔴 `.fsn-header-panel` JOINS THIS RULE — the two hand-rolled header dropdowns
were the only overlays that never got this treatment.
## The report
Haris, 2026-09-02, with a screenshot: on the Work Order listing, for BOTH
roles, the notifications dropdown and the messages dropdown are drawn UNDER
the table header.
## The stacking chain, walked in a browser before anything was changed
NO ANCESTOR CAPS ANYTHING. From either panel up to the document root there is
exactly ONE stacking context — the panel itself. Every ancestor is
`position: static` or `relative` with `z-index: auto`, so both panels compete
directly in the ROOT stacking context. Raising the number is therefore the
correct family of fix here, which is not true in general and was not assumed.
`#kt_header` creates no context of its own: Metronic only makes it
`position: fixed; z-index: 97` under `[data-kt-sticky-header=on]`, an attribute
KTSticky adds after a scroll — and this listing does not scroll the window at
all, so the header is `static`/`auto` permanently. The defect is not
intermittent.
## What the panels were losing to, measured on the page
.fsn-header-panel z-index 3 <- both dropdowns
thead th (centre) z-index 3 <- TIE, and the table is later in the
document, so the table wins
thead th (corner cells) z-index 4 <- outright win over the panel
.fn-dropdown-panel z-index 999 <- the listing's own filter menus
Four header cells were probed with `elementFromPoint` inside the overlap and
the TABLE HEADER painted on top of all four.
## Why 1065 and not a new number
This rule already exists and already carries the reason. FSN raised every
KTMenu dropdown to 1065 so a floating menu clears the header and the aside —
which is why the user-profile menu and the row action menus were never
affected. The two `.fsn-header-panel` overlays are the same class of thing and
were simply missed. Adding the selector here keeps ONE layer for every header
overlay rather than inventing a third.
The `z-index-3` utility was removed from both Blade files at the same time, so
the value has one owner instead of a markup class and a stylesheet rule
disagreeing.
`HeaderOverlayStackingTest` asserts the panels sit on this layer and that no
page-content z-index reaches it. */
.menu-sub-dropdown,
.dropdown-menu,
.fsn-header-panel {
z-index: 1065;
}
/* Wide modal for the contractor Request screen (UI reference C-2), which is a
near-full-page dialog with three side-by-side columns. Metronic ships no
max-width utility above .mw-1000px, so the width is defined here instead of
inline. Below the lg breakpoint the columns stack and the dialog uses the
normal responsive width. */
/* Wide workflow dialogs (Contractor Request, Contractor Counter Offer).
Scoped to lg and up ON PURPOSE. Both dialogs also carry
`modal-fullscreen-lg-down`, and this rule is more specific, so an unscoped
`width` here beat the fullscreen rule and left a 3rem inset at every width.
At 390px that made the dialog 36px narrower than the viewport and exposed the
page behind it. Below lg the fullscreen rule must win. */
@media (min-width: 992px) {
.modal-dialog.fsn-modal-wide {
max-width: 1600px;
width: calc(100% - 3rem);
}
}
/* CQR-3 — Work Order tab rows.
The primary tabs and the Quote lifecycle chips both spread across the content
width and centre their labels. `nav-fill` does the distribution, so neither
row hardcodes a tab count and both absorb a future tab.
Each row keeps its own horizontal scroll region: below the point where the
labels stop fitting, the row scrolls instead of pushing the page body wide
(§9D). */
.fsn-wo-tabs,
.fsn-q-lifecycle {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.fsn-wo-tabs::-webkit-scrollbar,
.fsn-q-lifecycle::-webkit-scrollbar {
height: 4px;
}
/* Equal columns, not `nav-fill` flex distribution.
`nav-fill` sizes items from their CONTENT, so Metronic's tab padding pushed
the row 13 px past its container and showed a scrollbar on a row that fits.
A grid with `grid-auto-columns: 1fr` gives every tab an identical share that
can never exceed the container, and it absorbs a future tab with no change
here — the column count follows the markup. */
.fsn-wo-tabs .nav,
.fsn-q-lifecycle .nav {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
width: 100%;
}
/* Each control fills its own column and centres its label. */
.fsn-wo-tabs .nav-link,
.fsn-q-lifecycle .nav-link {
width: 100%;
justify-content: center;
text-align: center;
}
/* UI-CLIENT-WO-VIEW-01 — the last 13 px of phantom overflow.
A grid item defaults to `min-width: auto`, so it can never shrink below its
own min-content size. The equal columns above sized each tab at 613.26 px
while the Quotes and Messages controls reported a 626 px min-content width
(Metronic's nav-link padding plus the label), so those two items overflowed
their column by 13 px. The overflow propagated to the scroll container and
showed a scrollbar on a row that fits — measured at 1920 px:
scrollWidth 1853 against clientWidth 1840.
`min-width: 0` lets a grid item take the width its column assigns. The labels
are short, so nothing truncates; the row simply stops overflowing. */
.fsn-wo-tabs .nav-item,
.fsn-q-lifecycle .nav-item {
min-width: 0;
}
/* The 13 px itself: Metronic gives every tab after the first a 1rem inline
margin (1rem = 13 px at the Metronic root). Inside a flex `nav-fill` row that
margin is part of the distribution, but inside the equal-column grid above the
column is already exact, so the margin pushed each later control 13 px past
its own column — measured: the Quotes control's right edge at 1272 px against
its column's 1259 px. The grid supplies the spacing, so the margin is removed.
Scoped to these two rows only; every other Metronic nav keeps its margins. */
.fsn-wo-tabs .nav-item,
.fsn-q-lifecycle .nav-item,
.fsn-wo-tabs .nav-item .nav-link,
.fsn-q-lifecycle .nav-item .nav-link {
margin-inline: 0;
}
/* =========================================================
UI-CLIENT-QUOTES-01 — FSN THEME CORRECTIONS
=========================================================
Three corrections, all expressed through the EXISTING tokens at the top of
this file. No second copy of a brand colour is introduced:
--bs-primary #e11d2e FSN primary red
--fsn-navy #0b1e4a FSN navy
========================================================= */
/* 1. The FSN primary-button hover contract: RED by default, NAVY on hover.
`.btn-fsn-primary` (the Login button) already did this, but through a private
near-navy hex rather than the navy token. That declaration is corrected at its
own rule above, so one value defines FSN navy.
`.btn-primary` is the semantic every other FSN primary action already uses
(Create, Submit, Save, Assign), so the contract is applied once here instead
of on each button.
DELIBERATELY UNTOUCHED: danger, secondary, success, warning, info, light,
dark, every `btn-outline-*`, and every `btn-light-*`. Their semantics are not
"primary action" and must keep their own hover.
`:disabled` and `.disabled` are excluded, so a disabled primary button keeps
its muted rest state instead of appearing actionable on hover. Metronic's
`:focus-visible` ring is untouched. */
/* Scoped to `.btn-primary` ONLY.
Metronic drives its primary interaction states from `--bs-primary-active` and
applies the value with `!important`:
.btn.btn-primary:hover:not(.btn-active) { background-color: var(--bs-primary-active) !important }
An earlier attempt overrode that TOKEN. It worked, but the token is also read
by `.btn-outline-primary` and by the `.bg-primary-active` utility, so the
change reached two semantics this boundary must not touch. The token override
is withdrawn.
The correct lever is a more specific rule on the filled primary button alone.
Metronic's selector carries four class-level components; this one carries five
(`.btn` + `.btn-primary` + `:not(:disabled)` + `:not(.disabled)` + `:hover`),
and `fsn-overrides.css` loads after the bundle, so it wins the `!important`
comparison on specificity rather than on source order alone.
UNTOUCHED: `.btn-outline-primary` keeps its own hover, `.bg-primary-active`
keeps its value, and every other semantic (danger, secondary, success,
warning, info, light, dark) keeps its own token.
`:disabled` and `.disabled` are excluded, so a disabled primary keeps its
muted rest state. Metronic's `:focus-visible` ring is untouched. The rule is
theme-independent: both themes use the same FSN navy. */
.btn.btn-primary:not(:disabled):not(.disabled):hover,
.btn.btn-primary:not(:disabled):not(.disabled):focus,
.btn.btn-primary:not(:disabled):not(.disabled):active {
background-color: var(--fsn-navy) !important;
border-color: var(--fsn-navy) !important;
color: #ffffff !important;
}
/* 2. One reusable FSN chip.
The Work Order title carried `badge-light-warning`, a yellow tint. Navy on
white text measures 15.6:1, so the label is readable in both themes and needs
no per-theme override. Use this class for a neutral identity label; it is NOT
a status colour and must not replace a semantic badge. */
.badge.badge-fsn-navy {
background-color: var(--fsn-navy);
color: #ffffff;
}
/* STAGING-REVIEW-B3 card 38 — "not seen yet" on the flight board. A ring around a
count that also SAYS "N new", so the state never rests on colour alone. Theme
tokens, so it reads in light and dark mode. */
.badge.fsn-unseen-ring {
background-color: var(--bs-body-bg);
color: var(--bs-danger);
box-shadow: 0 0 0 2px var(--bs-danger);
font-weight: 600;
width: max-content;
}
/* 3. The Quote lifecycle tabs.
The active tab took Metronic's green (`--bs-link-color` is #17C653 in this
build), which is a success colour on a control that states no success. The
active tab now carries the navy surface; an inactive tab keeps the muted
label, so the two stay distinguishable without relying on colour alone —
the active tab is also the only one with a filled surface. */
.fsn-q-lifecycle .nav-link {
color: var(--bs-gray-700);
transition: background-color .12s ease-in-out, color .12s ease-in-out;
}
/* UI-QUOTE-MSG-ROUTES-01 — the SOLID navy fill was too dark and dominated a row
that is navigation, not emphasis. The active tab now carries a soft tint of
the SAME brand token with navy text, so the surface reads as selected without
competing with the Quote cards below it.
No new colour is introduced: `--fsn-navy-rgb` is `--fsn-navy` as channels.
Contrast IMPROVES — navy #0B1E4A on the 8% tint measures far above the 4.5:1
text minimum, where the previous white-on-navy pairing was the only thing
carrying the state. Weight and tint now carry it together, so the state does
not depend on colour alone. */
.fsn-q-lifecycle .nav-link:hover:not(.active) {
background-color: var(--bs-gray-100);
color: var(--fsn-navy);
}
.fsn-q-lifecycle .nav-link.active {
background-color: rgba(var(--fsn-navy-rgb), .08);
color: var(--fsn-navy);
border-color: transparent;
font-weight: 600;
}
.fsn-q-lifecycle .nav-link.active .badge {
background-color: rgba(var(--fsn-navy-rgb), .12);
color: var(--fsn-navy);
}
/* 4. The Quote card Contractor avatar ring.
The reference draws a coloured status ring around the profile image. FSN uses
its own primary red, never the Field Nation blue. Applied to the image and to
the initials fallback, so both states carry the ring. */
/* UI-CLIENT-QUOTES-01 — the Quotes content grid and the profile panel.
The lifecycle tabs stay full width above; this grid splits only the region
BELOW them, so the panel is scoped to the Quotes content and is never a
global sidebar. Below the lg breakpoint the columns stack — a normal
responsive stack, not an invented offcanvas. */
.fsn-q-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 992px) { .fsn-q-grid { grid-template-columns: minmax(0, 1fr) 360px; } }
/* The panel is PROPORTIONAL above 1400, not a fixed 440.
Browser QA measured the identity row at 1440 with a fixed 440px panel: the
row needed 630px and had 606px, so it wrapped onto a second line — the exact
defect this boundary corrects. `clamp()` gives the panel a smaller share at
1440 and its full width at 1920 and above, so the card stays row-based at
every required desktop width without shrinking the panel where it is not
necessary. */
@media (min-width: 1400px) {
.fsn-q-grid { grid-template-columns: minmax(0, 1fr) clamp(380px, 24vw, 440px); }
}
/* The Quote list is the CONTAINER the cards measure themselves against.
A card must react to the width of this column, not to the viewport, because
collapsing the profile panel changes the column width while the viewport
stays the same. */
.fsn-q-list { container-type: inline-size; container-name: fsn-quote-list; }
.fsn-q-aside { min-width: 0; position: relative; }
/* ── The collapsible profile panel — UI-CLIENT-QUOTES-01 ────────────────
Reference: `Client/quote-listing-profile-sidebar-ui.png`.
The panel collapses toward the RIGHT and the Quote list takes the released
width. The animation runs on the GRID COLUMN and on the panel's own
transform. The page body is never repositioned, and no absolute viewport
coordinate is used anywhere, so the control cannot drift out of the content
area at an untested width. */
@media (min-width: 992px) {
/* The exposed drawer edge — SUPERSEDES the zero-width collapse
(UI-QUOTE-SIDEBAR-DRAWER-01, 2026-08-14).
The collapsed column used to be `0px`: the panel vanished completely and
only the circular toggle remained, which read as a control floating in the
Quote list rather than a drawer. Haris supplied
`quote-listing-profile-sidebar-ui-change.png`, which shows the SAME drawer
still present at the right edge with a narrow white strip exposed and the
toggle sitting on that strip's left boundary.
So the column now collapses to a peek instead of to nothing. Everything
else about the mechanism is unchanged: one grid, one panel, one Alpine
boolean, no Livewire request, no second element. */
.fsn-q-grid { --fsn-drawer-peek: 28px; transition: grid-template-columns 260ms ease; }
.fsn-q-grid.fsn-q-grid-collapsed {
grid-template-columns: minmax(0, 1fr) var(--fsn-drawer-peek);
}
/* The body is clipped by the narrow column, so it slides out of view
rather than being removed. Keeping it mounted is what preserves the
selected Contractor. */
.fsn-q-panel-body {
overflow: hidden;
/* `visibility` switches with no delay when OPENING, so the panel is
focusable as soon as it starts to appear. */
transition: transform 260ms ease, opacity 200ms ease, visibility 0s linear 0s;
}
/* THE VISIBLE STRIP is the aside's own surface, painted only while
collapsed. It reuses the panel's border colour and radius, so the strip
reads as the same drawer seen edge-on rather than as a new element.
The height is stated explicitly because the content leaves the flow
below; without it the strip would collapse to nothing. It matches
`.fsn-profile-scroll`'s own max-height, so the strip is exactly as tall as
the panel it belongs to. */
.fsn-q-grid-collapsed .fsn-q-aside {
background: var(--bs-body-bg);
border: 1px solid var(--bs-gray-200);
border-right: 0;
border-radius: 12px 0 0 12px;
min-height: calc(100vh - 160px);
}
/* The collapsed panel is hidden from the KEYBOARD as well as the eye.
`visibility: hidden` removes the subtree from the tab order natively, and
it is scoped to this breakpoint — which an `inert` attribute could not be.
Below `lg` the panel is an ordinary visible block and this never applies.
It is also taken OUT OF FLOW. A `visibility: hidden` element still lays
out, and at 28px wide its text would wrap into a column hundreds of pixels
tall, which would then drive the strip's height. Absolute positioning
inside the (already `sticky`, therefore positioned) aside removes that
influence entirely, and `overflow: hidden` stops the hidden content from
extending the drawer.
The 260ms delay lets the slide and fade finish before the panel is
hidden; without it the content would vanish instantly and the animation
would not be seen. */
.fsn-q-grid-collapsed .fsn-q-panel-body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
transform: translateX(24px);
opacity: 0;
visibility: hidden;
transition: transform 260ms ease, opacity 200ms ease, visibility 0s linear 260ms;
}
}
/* Below `lg` the two columns stack, so the panel is a normal block and the
collapse control is not offered: there is no side region to collapse. */
.fsn-q-panel-toggle { display: none; }
@media (min-width: 992px) {
.fsn-q-panel-toggle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: -17px;
transform: translateY(-50%);
z-index: 5;
/* Circular, bordered, centred chevron — as the reference draws it.
UI-CONTRACTOR-PROFILE-WORK-EXPERIENCE-01 reduced the visible circle
from 34px to 30px. The CLICK TARGET is kept comfortable by the
transparent ring below, so the control is easier to hit than the
circle it draws. */
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
/* The ONE visual contract, in EVERY state: white interior, FSN primary
red border, FSN primary red chevron. The red comes from the
application's own `--bs-primary` token, so no second red hex exists.
The interior is an explicit `#ffffff` rather than `--bs-body-bg`,
because the requirement is a white circle in every state and in both
themes. A red-bordered white disc stays legible on the dark surface.
The previous rule filled the circle with red on hover and turned the
chevron white. That is removed: the fill read as a pressed or
destructive state on a control that only opens and closes a panel. */
border: 1px solid var(--bs-primary);
background: #ffffff;
color: var(--bs-primary);
box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
transition: box-shadow 150ms ease;
}
/* A comfortable hit area WITHOUT drawing a bigger circle. The ring is
transparent and sits outside the border, so the control measures 30px to
the eye and about 40px to the pointer. */
.fsn-q-panel-toggle::after {
content: '';
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border-radius: 50%;
}
/* Hover and active keep the SAME interior, border and icon. Only the
elevation changes, so the control still answers the pointer. */
.fsn-q-panel-toggle:hover,
.fsn-q-panel-toggle:active {
background: #ffffff;
color: var(--bs-primary);
border-color: var(--bs-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
/* Keyboard focus keeps the SAME white interior and red chevron.
The visible ring itself is NOT drawn here. The shared FSN treatment,
`body.fsn-app-shell :focus-visible`, already gives every control a navy
outline plus a white halo, and it is more specific than a rule on this
class, so a local outline here would be dead CSS. Measured on a real
keyboard Tab: `outline: 1.6px solid rgb(7, 20, 55)` with a 2px white
halo. This rule only guarantees the fill never appears. */
.fsn-q-panel-toggle:focus,
.fsn-q-panel-toggle:focus-visible {
background: #ffffff;
color: var(--bs-primary);
}
/* The chevron scales with the smaller circle, and carries the FSN primary
red EXPLICITLY.
Inheriting from the button is not enough: Metronic gives `.ki-outline` its
own colour, which measured as the grey `rgb(153, 161, 183)` and beat the
inherited value. The icon is therefore coloured on its own selector, in
every state, so the red chevron never depends on inheritance winning. */
.fsn-q-panel-toggle > i,
.fsn-q-panel-toggle:hover > i,
.fsn-q-panel-toggle:active > i,
.fsn-q-panel-toggle:focus > i,
.fsn-q-panel-toggle:focus-visible > i {
font-size: 13px;
line-height: 1;
color: var(--bs-primary);
}
}
/* A viewer who asks for reduced motion gets the same states with no travel. */
@media (prefers-reduced-motion: reduce) {
.fsn-q-grid,
.fsn-q-panel-body { transition: none; }
}
/* ── The Quote card — UI-CLIENT-QUOTES-01 desktop correction ────────────
Reference: `Client/quote-listing-ui.png`.
ROOT CAUSE of the corrected defect. The card was one `flex-wrap` row whose
single content column held the name, the id, the distance, the area and the
phone as SEPARATE block children. Each value therefore began its own line at
every width, so a 1920 px desktop rendered a tall mobile-shaped card that
used a fraction of the list column.
The fix separates the two questions the old markup conflated:
* `.fsn-q-main` is the horizontal frame — avatar, content, actions;
* `.fsn-q-identity` is ONE wrapping inline row, so the five identity values
sit on one line and wrap only when the column truly cannot hold them.
The card responds to the LIST COLUMN, not to the viewport, through a
container query. That is what the boundary requires: when the profile panel
collapses, the column grows and the card must use the released width
immediately — a viewport media query cannot see that change. */
.fsn-q-card {
border: 1px solid var(--bs-gray-200);
border-radius: 12px;
background: var(--bs-body-bg);
/* NO `overflow: hidden` — UI-QUOTE-MSG-ROUTES-01.
It used to be here, to make the rounded corners clip the tinted header
strip. It also clipped the distance tooltip, which opens UPWARD out of the
card: the top of the panel was cut off at the card edge, and browser QA
caught it. A clipped tooltip is a defect against this boundary's
requirement that the panel must not be clipped by the card.
The strip now rounds its OWN top corners instead, so the card looks
identical and nothing that escapes the card is cut. */
}
.fsn-q-card + .fsn-q-card { margin-top: 12px; }
/* ROW 0 — the commercial / classification strip. */
.fsn-q-strip {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 10px 20px;
background: var(--bs-gray-100);
border-bottom: 1px solid var(--bs-gray-200);
font-size: 13px;
/* The card no longer clips, so the strip rounds its own top corners. 11px,
not 12px: the strip sits INSIDE the card's 1px border, and an equal radius
would leave a hairline of card background in each corner. */
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.fsn-q-strip-terms { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.fsn-q-strip-pay { white-space: normal; }
.fsn-q-strip-aside { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* A thin vertical divider, as the reference uses between strip groups. */
.fsn-q-sep { width: 1px; height: 14px; background: var(--bs-gray-300); display: inline-block; }
/* MAIN — avatar | content | actions. `center` puts the actions at the vertical
centre of the card, as the reference does. */
.fsn-q-main {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
}
.fsn-q-content { flex: 1 1 auto; min-width: 0; }
/* ROW 1 — the five identity values on ONE line.
`column-gap` carries the rhythm; `row-gap` only applies once the row is
genuinely too narrow, so wrapping stays controlled instead of automatic. */
.fsn-q-identity {
display: flex;
flex-wrap: wrap;
align-items: baseline;
/* 12px, not 16: browser QA at 1440 measured the row 24px short of fitting
on one line. The five gaps recover 20px of that. */
column-gap: 12px;
row-gap: 4px;
}
.fsn-q-name { text-decoration: none; }
/* Each secondary fact is one non-breaking unit, so a value never splits across
two lines while its neighbour stays on the first. */
.fsn-q-fact { font-size: 13px; white-space: nowrap; }
/* ── The distance panel — UI-WO-VIEW-QUOTE-ACTIONS-01 ──────────────────────
The compact straight-line value opens a panel carrying the real routed
driving distance, the straight-line figure, and the route on Google Maps.
Hover AND `:focus-within` reveal it, so the keyboard reaches every row —
including the directions link, which is a real link and must be tabbable.
`:focus-within` also keeps the panel open while the link itself holds focus,
which a plain `:focus` rule on the trigger would not.
No JavaScript shows or hides it. Alpine's only job on this element is to ask
the server for the routed figure the first time it is opened. */
.fsn-q-dist { position: relative; cursor: default; }
.fsn-q-dist:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 4px; }
/* ── Panel geometry — rebuilt from `quote-distance-tooltip.png`
(UI-QUOTE-MSG-ROUTES-01).
What the reference proves, and what each declaration below answers:
opens ABOVE the distance value ......... `bottom: calc(100% + 8px)`
left edge aligned to the value ......... `left: 0`
plain rounded card, NO caret/arrow ..... no pseudo-element is drawn
white surface, soft lifted shadow ...... `--bs-body-bg` + a wide, low-alpha
shadow rather than a hard border
hairline edge, not a drawn border ...... 1px at gray-200 strength
roomy padding, generous row rhythm ..... 14px 16px, 12px gap
figure semibold, label muted, same size set on the rows in the Blade file
link row in the primary link colour .... `.fsn-q-dist-link`
The reference shows NO pointer, so none is drawn. Adding one would be
invention, and a caret on a panel that flips position is also the part that
most often ends up detached from its trigger. */
.fsn-q-dist-panel {
display: none;
position: absolute;
bottom: calc(100% + 10px);
/* CENTRED on the distance value, as the reference shows: in
`quote-distance-tooltip.png` the panel's midpoint sits over the mileage
group, not against its left edge. */
left: 50%;
transform: translateX(-50%);
z-index: 20;
/* `.fsn-q-fact` sets `nowrap` for the identity row; the panel is its own
block and must wrap normally. */
white-space: normal;
min-width: 224px;
/* Never wider than the viewport, whatever the card width is. The gutter
keeps a panel anchored near the right edge off the screen edge itself. */
max-width: min(280px, calc(100vw - 32px));
padding: 14px 16px;
flex-direction: column;
gap: 12px;
border: 1px solid var(--bs-gray-200);
border-radius: 8px;
background: var(--bs-body-bg);
box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
font-size: 13px;
line-height: 1.3;
text-align: left;
}
.fsn-q-dist:hover .fsn-q-dist-panel,
.fsn-q-dist:focus-within .fsn-q-dist-panel { display: flex; }
/* ── THE HOVER BRIDGE — corrected 2026-08-14.
*
* The defect Haris reported: the panel opened, but moving the pointer toward it
* closed it, so `See driving directions` could not be clicked.
*
* Cause, reproduced: the panel is a CHILD of the trigger, so hovering the panel
* itself keeps `.fsn-q-dist:hover` true — but the 10px OFFSET between the two is
* outside both boxes. Crossing it put the pointer over the card behind, the
* hover was lost, and the panel vanished mid-travel.
*
* The fix is one transparent element that spans the offset, so the trigger and
* the panel form ONE continuous hover region. It exists only while the panel is
* displayed, so it can never block a click on the card underneath. No
* JavaScript, no timers, no state to desynchronise. */
.fsn-q-dist-panel::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -12px;
height: 12px;
}
/* ── THE CARET — required by Haris on 2026-08-14.
*
* This SUPERSEDES the earlier finding that the reference draws no caret. The
* reference image indeed shows none; the caret is a direct instruction, and it
* is recorded as such rather than as screenshot parity.
*
* Drawn as a rotated square rather than a border triangle, so it inherits the
* panel's own 1px edge on the two sides that face outward and reads as part of
* the panel surface instead of a separate shape. */
.fsn-q-dist-panel::after {
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 11px;
height: 11px;
margin-left: -5.5px;
background: var(--bs-body-bg);
border-right: 1px solid var(--bs-gray-200);
border-bottom: 1px solid var(--bs-gray-200);
transform: rotate(45deg);
}
.fsn-q-dist-row { display: flex; align-items: center; gap: 8px; }
.fsn-q-dist-link { text-decoration: none; }
.fsn-q-dist-link:hover { text-decoration: underline; }
/* The directions link carried `text-primary`, but Metronic's own `a` colour
(`--bs-link-color`, the green #17C653 in this build) won on specificity, so
the row rendered GREEN — a success colour on a control that reports no
success. Browser QA caught it while comparing against
`quote-distance-tooltip.png`, whose link sits in the panel's single accent
colour alongside the metric icons.
FSN's informational accent is navy, and the icons above already use it, so the
link joins them. Primary red stays reserved for the page's real actions. */
.fsn-q-dist-panel .fsn-q-dist-link,
.fsn-q-dist-panel .fsn-q-dist-link:hover {
color: var(--fsn-navy);
}
/* The reference draws both metric icons in its own brand accent, not in a grey.
FSN's informational accent is navy — the same decision the four Work Order
summary icons already carry. Primary red stays reserved for actions, which is
why the directions LINK below keeps `text-primary` and these icons do not. */
.fsn-q-dist-icon { color: var(--fsn-navy); flex: 0 0 auto; }
/* ── The message entry point — ONE class for BOTH surfaces
(UI-QUOTE-MSG-ROUTES-01).
The Quote card control and the Contractor profile panel control previously
both carried `btn-light-primary`. Metronic fills that button with the solid
primary on hover, and FSN's primary is the red #E11D2E — so pointing at the
envelope turned it into a dark red block and the icon inverted to white. The
icon became LESS legible at the exact moment the Client aimed at it.
The replacement keeps the icon in the primary red at all times and dims only
the SURFACE behind it, using the neutral gray already used for every other
quiet hover in this file. The icon colour never changes, so contrast never
drops. The two surfaces share this one class, so they cannot drift. */
.fsn-msg-icon {
color: var(--bs-primary);
background-color: transparent;
border-color: transparent;
}
.fsn-msg-icon i,
.fsn-msg-icon .ki-duotone { color: inherit; }
.fsn-msg-icon:hover,
.fsn-msg-icon:focus,
.fsn-msg-icon.show {
color: var(--bs-primary);
background-color: var(--bs-gray-100);
border-color: transparent;
}
/* Pressed reads as one step darker than hover, and still not as a fill. */
.fsn-msg-icon:active,
.fsn-msg-icon:not(.btn-active):active {
color: var(--bs-primary) !important;
background-color: var(--bs-gray-200) !important;
border-color: transparent !important;
}
.fsn-msg-icon:focus-visible {
outline: 2px solid var(--fsn-navy);
outline-offset: 2px;
}
.fsn-msg-icon:disabled,
.fsn-msg-icon.disabled {
color: var(--bs-gray-400);
background-color: transparent;
border-color: var(--bs-gray-200);
opacity: 1;
}
/* ── The Quote card action pair — corrected 2026-08-14.
*
* Haris reported the message control as "too small and visually isolated"
* beside `Review Offer`. Measured before the fix: a 35x35 icon with NO border
* at all — the earlier pass removed `btn-light-primary` to kill the dark-red
* hover and took the enclosing surface with it — next to a 104x35 filled
* primary button. The icon read as a loose glyph rather than a control.
*
* The pair is now sized as a pair:
*
* message control 38 x 38, a REAL 1px neutral border, 18px glyph
* Review Offer 38 tall, narrower padding so it stops dominating
*
* Both are 38 tall and share one baseline, so they read as two controls of the
* same family. The icon keeps the FSN primary red and the approved subtle grey
* hover — the dark-red fill does not return. The primary action stays the only
* filled surface, so the icon gains presence without gaining emphasis.
*/
/* The selectors carry `.btn.btn-icon` deliberately: Metronic sizes this control
with `.btn.btn-icon.btn-sm`, which outranks a two-class selector, so a
shorter selector silently loses the width and the height. */
/* The selectors carry `.btn.btn-icon` deliberately: Metronic sizes this control
with `.btn.btn-icon.btn-sm`, which outranks a two-class selector, so a
shorter selector silently loses the width and the height.
*
* The visible edge is an INSET RING, not a `border`. Metronic resets the border
* with
* `.btn.btn-icon:not(.btn-outline):not(.btn-dashed):not(.border-hover)...`
* whose `:not()` chain outranks any reasonable selector here. Winning that
* contest would mean copying the whole chain or reaching for `!important`, and
* both age badly. An inset ring renders identically at 1px, costs no layout
* width, and does not compete with the reset at all. */
.fsn-q-actions .btn.btn-icon.fsn-msg-icon,
.fsn-profile-actions-end .btn.btn-icon.fsn-msg-icon {
height: 38px;
width: 38px;
border-radius: 6px;
}
/* THE VISIBLE EDGE.
*
* Metronic removes both candidates on this element, each behind a long `:not()`
* chain that outranks a normal selector:
*
* border `.btn.btn-icon:not(.btn-outline):not(.btn-dashed):not(...)`
* box-shadow `.btn:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(...)`
*
* The shadow chain is mirrored below so the ring wins on specificity alone. The
* alternatives were worse: `!important` hides the conflict from the next reader,
* and adding `.shadow` to the markup would import a drop shadow this control
* must not have. The chain is verbose, but it states exactly which reset it is
* answering, and it breaks loudly rather than silently if Metronic changes it. */
.fsn-q-actions .btn.btn-icon.fsn-msg-icon:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs),
.fsn-profile-actions-end .btn.btn-icon.fsn-msg-icon:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs) {
box-shadow: inset 0 0 0 1px var(--bs-gray-300);
}
.fsn-q-actions .btn.btn-icon.fsn-msg-icon:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs):hover,
.fsn-profile-actions-end .btn.btn-icon.fsn-msg-icon:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs):hover {
box-shadow: inset 0 0 0 1px var(--bs-gray-400);
}
.fsn-q-actions .btn.btn-icon.fsn-msg-icon:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs):disabled,
.fsn-profile-actions-end .btn.btn-icon.fsn-msg-icon:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg):not(.shadow-xs):disabled {
box-shadow: inset 0 0 0 1px var(--bs-gray-200);
}
/* The primary action, sized to balance the pair rather than dominate it. */
.fsn-q-actions .btn:not(.fsn-msg-icon),
.fsn-profile-actions-end .btn:not(.fsn-msg-icon) {
min-height: 38px;
padding-inline: 14px;
}
/* =========================================================
MESSAGING SURFACE — UI-QUOTE-MSG-ROUTES-01
ONE stylesheet for BOTH roles. The Client surface previously carried an inline
`