/* ========================================================================== Fleet Status page (Q88Status.aspx → Q88Status.ascx) — page-specific overrides. ---------------------------------------------------------------------------- Scoped via `body.page-q88status`. The shared V2 chrome (white card, 8px radius, soft shadow, page title) comes from grid.css via the additional `body.page-grid` co-class. This file only styles the legacy -rendered body — the V2 card from grid.css doesn't target StdTable / .tableHeader / .SubHeader2. Design tokens (--q88-grid-*) are inherited from body.page-grid in grid.css and the values below align with DESIGN.md §5 (data-grid pattern): header 48px / row 42px / cell padding 16px / 14px Inter / no zebra. ========================================================================== */ /* ========================================================================== 0. Title text — Q88Status renders as a flat <div.modV2Title> (no inner <table> / <td>), so grid.css line 111 (which expects td.modV2Title) doesn't match, AND grid.css line 130 actively neutralises div.modV2Title with `font-size/weight: inherit !important`. Result without this rule: 12px tahoma (from body inheritance). Per DESIGN.md §5.2: `text-base/leading-normal/semibold` (16/24/600). The `!important` is required to beat grid.css's neutraliser. ========================================================================== */ body.page-q88status [id$='_pnlTitleLeft'].modV2Title { font-family: var(--q88-grid-font); font-size: 16px !important; font-weight: 600 !important; color: var(--q88-grid-fg); line-height: 24px; /* The flex shell rule in grid.css already sets display:flex / align-items on this same element — those layout properties stay; we only override the font triplet. */ } /* ========================================================================== 1. Repeater table — let the .modV2 card own the frame. Per DESIGN.md §5.1 the card surface is the only visible boundary; the inner table provides cell borders only. ========================================================================== */ body.page-q88status .modV2 .StdTable { border-collapse: separate; border-spacing: 0; width: 100% !important; font-family: var(--q88-grid-font); color: var(--q88-grid-fg); font-size: 14px; } /* The .ascx hard-codes class="StdTable BorderV2Bottom" — neutralise the thick navy bottom border the BorderV2Bottom class adds in MainWhiteout.css so the card's own frame is the only visible boundary. */ body.page-q88status .modV2 .StdTable.BorderV2Bottom { border-bottom: 0; } /* ========================================================================== 2. Header row (tr.SubHeader2 > td.tableHeader) DESIGN.md §5.3: height 48, padding 16h, label `text-sm/leading-none/medium` (14 / 1 / 500). Bottom border 1px var(--q88-grid-border). Alignment is taken from the markup's `align` attribute so numeric columns stay centered while text columns default to left. ========================================================================== */ body.page-q88status .modV2 .StdTable tr.SubHeader2 td.tableHeader { background: var(--q88-grid-muted) !important; /* override navy from MainWhiteout */ color: var(--q88-grid-fg) !important; font-family: var(--q88-grid-font); /* MainWhiteout forces tahoma on td !important */ font-size: 14px; font-weight: 500; line-height: 1; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--q88-grid-border); white-space: nowrap; } /* ========================================================================== 3. Body rows — Repeater emits plain <tr>, no alternating class. DESIGN.md §5.4: row height 42, cell padding 16h, text `text-sm/leading-normal/normal` (14 / 20 / 400). 1px row separator. No zebra striping in spec; hover state only. ========================================================================== */ body.page-q88status .modV2 .StdTable tr:not(.SubHeader2) > td { font-family: var(--q88-grid-font); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--q88-grid-fg); height: 42px; padding: 0 16px; border-bottom: 1px solid var(--q88-grid-border); vertical-align: middle; } /* Drop the bottom border on the very last row so it sits flush with the rounded card corner. */ body.page-q88status .modV2 .StdTable tr:not(.SubHeader2):last-child > td { border-bottom: 0; } /* Hover */ body.page-q88status .modV2 .StdTable tr:not(.SubHeader2):hover > td { background: var(--q88-grid-row-hover); } /* ========================================================================== 3a. HVPQ "warning" status colour. Q88Status.ascx.cs adds class="warning" to the HVPQ cell when the upload is >90 days old; legacy MainWhiteout paints `.warning` red (var(--status-error)). The §3 body-cell rule above sets EVERY cell to slate var(--q88-grid-fg) at higher specificity (0,4,3), swallowing that red — so old-HVPQ dates rendered black and lost their at-a-glance status (UX R&D feedback: "HVPQ column missing status styling"). Restore the warning red on the data cells (matches the inline red the OCIMF OM / Offline columns already use). The added `.warning` class lifts this to (0,5,3) so it wins on specificity; `!important` guards against any legacy !important colour on td. */ body.page-q88status .modV2 .StdTable tr:not(.SubHeader2) > td.warning { color: var(--status-error, #dc2626) !important; } /* The vessel-name image sits to the left of the name; align it tighter and give the label a hair of breathing room. */ body.page-q88status .modV2 .StdTable tr:not(.SubHeader2) > td:first-child img { margin-right: 6px; vertical-align: middle; } /* ========================================================================== 4. Edit / action column — DESIGN.md §5.5: 64px fixed. ========================================================================== */ body.page-q88status .modV2 .StdTable tr.SubHeader2 td.tableHeader:last-child, body.page-q88status .modV2 .StdTable tr:not(.SubHeader2) > td:last-child { width: 64px; min-width: 64px; text-align: center; padding-left: 4px; padding-right: 4px; } /* The Edit column header carries no caption — keep it visually empty without breaking the cell so the column width stays consistent with the body. */ body.page-q88status .modV2 .StdTable tr.SubHeader2 td.tableHeader:last-child { font-size: 0; } /* ========================================================================== 4a. Inline edit pencil — `<asp:ImageButton CssClass="Img-Std Img-Std-EditV2" ImageUrl="~/images/clearpixel.gif">` renders as `<input type="image" class="Img-Std Img-Std-EditV2" src="...">`. The legacy `Img-Std-EditV2` sprite paints a bitmap pencil; replace it with the same Lucide pencil glyph used in grid.css §7 (`.jqEdit img.Img-Std-Edit`) and fleet-management.css §6 so the icon matches Inspections and FleetManagement. The 1×1 clearpixel.gif src becomes a transparent canvas; we mask the element's background-color via currentColor so hover recolour works without a separate asset. ========================================================================== */ body.page-q88status .modV2 .StdTable input[type='image'].Img-Std-EditV2 { width: 24px !important; height: 24px !important; padding: 4px; box-sizing: border-box; border: 1px solid transparent !important; border-radius: 6px; background-image: none !important; color: var(--q88-grid-muted-fg); cursor: pointer; vertical-align: middle; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; -webkit-mask: var(--icon-square-pen) no-repeat center / 16px 16px; mask: var(--icon-square-pen) no-repeat center / 16px 16px; background-color: currentColor !important; } body.page-q88status .modV2 .StdTable input[type='image'].Img-Std-EditV2:hover { color: var(--q88-grid-primary); } /* ========================================================================== 5. Footer status legend — soften the typography and align with the card. The Repeater's <Footer> renders a <table> inside .modV2 with the legend and the "Top" link. grid.css doesn't touch this row. ========================================================================== */ body.page-q88status .modV2 .NormalSmall { font-family: var(--q88-grid-font); color: var(--q88-grid-muted-fg); font-size: 12px; line-height: 1.5; padding: 12px 4px 0; } body.page-q88status .modV2 .NormalSmall b { color: var(--q88-grid-fg); font-weight: 600; margin-right: 4px; } /* Status legend icons — tighten the spacing around each chip */ body.page-q88status .modV2 .NormalSmall .statusIcon { margin: 0 4px 0 8px; border-radius: 50%; } /* "Top" link in the footer right cell */ body.page-q88status .modV2 a.disableButton { font-family: var(--q88-grid-font); font-size: 12px; color: var(--q88-grid-muted-fg); text-decoration: none; } body.page-q88status .modV2 a.disableButton:hover { color: var(--q88-grid-primary); }