/* ========================================================================== DWT / Draft Calculator (DwtDraftCalc.aspx → DesktopModules/Q88/DWTCalc.ascx) ---------------------------------------------------------------------------- Scoped via `body.page-dwt-draft-calc`. Figma reference: file oM4wJDLxiHlaKMCy6GvTXs, node 15:7499. .ascx structure: two stacked instances (modMain + mod2) both rendering as
. Top card holds the title + vessel selector row; bottom card holds Specify Criteria + Vessel Details + Additional Information + Results + warning footer. Re-skin strategy: - Both .modV2 cards get shadcn card chrome (white bg, #e2e8f0 border, 8px radius, soft drop shadow). 12px gap between them; reads as one cohesive panel without restructuring markup. - Section header rows (tr.trHdr) flatten into centered 16/24 Medium labels with subtle hairline borders, replacing the legacy navy-on-bold MainWhiteout treatment. - All inputs (.NormalNumberBox, .NormalTextBox, asp:DropDownList) get a uniform 32px-tall pill: white bg, 1px #e2e8f0 border, 8px radius. - "Show" + "Calculate" LinkButtons get teal treatment (Show = ghost text-link, Calculate = filled primary). - Right-side hyperlink strip (Intakes | Segregations | Bunkers | Loadline Zones | Vessel Load Lines) becomes a single teal sentence with pipe separators. - "No warranty..." footer becomes a left-aligned small note in red-600. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Tokens — reuse the grid system tokens registered in grid.css so we stay aligned with the rest of the refresh. grid.css is loaded for every authenticated portal page so these variables are available even without the `page-grid` co-class. -------------------------------------------------------------------------- */ body.page-dwt-draft-calc { --dwt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --dwt-fg: var(--raw-slate-900); --dwt-muted-fg: var(--raw-slate-500); --dwt-muted-bg: var(--raw-slate-50); --dwt-border: var(--raw-slate-200); --dwt-card: var(--card, #ffffff); --dwt-primary: var(--primary); --dwt-primary-hover: var(--button-primary-hover); --dwt-primary-fg: #ffffff; --dwt-danger: var(--raw-red-tailwind-700); --dwt-focus-ring: rgba(var(--primary-tint), 0.15); --dwt-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); } /* -------------------------------------------------------------------------- 1. Card chrome — the outer `
` in DWTCalc.ascx provides the single card surface (bg / border / radius / shadow / margin) via the shared `.q88-card` rule (components.css). The two inner ModuleTemplateV2 panels become flat sections inside it. MainWhiteout.css sets `.modV2 { display: table; min-width: 975px; padding: 0 10px }`, which we still have to defeat so the inner panels flow as plain blocks. Chrome (bg/border/radius/shadow) is fully cleared so the outer .q88-card is the only visible card edge. Inner padding kept (16/24 top/bottom + 24 horizontal-ish) so vertical rhythm between the selector row and the form matches the previous visual. The outer .q88-card adds its own 24×28 padding around all of it — yes that means double-padding total ~24+16, intended. -------------------------------------------------------------------------- */ body.page-dwt-draft-calc .dwt-card-wrap { /* Tighten the page-level horizontal padding inside the card so the dense form has room. .q88-card defaults to 24×28; we keep 24 top/ bottom but reduce side padding. */ padding: 24px 24px !important; } body.page-dwt-draft-calc .modV2 { display: block !important; min-width: 0 !important; width: auto !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font-family: var(--dwt-font); color: var(--dwt-fg); text-align: left !important; box-sizing: border-box; } /* First inner section — title + selector. Bottom margin separates it from the form section below; no border (the unified card has its own edge). */ body.page-dwt-draft-calc [id$='_modMain_pnlMod'].modV2 { padding-bottom: 12px !important; } /* Second inner section — form + results. Top padding completes the gap between sections. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'].modV2 { padding-top: 16px !important; } /* MainWhiteout's `.modV2 .modV2Main { background: var(--surface-page) }` paints the inner panel grey — overwrite with the card colour so the card surface is uniform white. Also drop the top padding so content sits tight against our outer 16px padding. */ body.page-dwt-draft-calc .modV2 .modV2Main { background: transparent !important; background-color: transparent !important; padding-top: 0 !important; width: auto !important; } /* The wrapping ModuleTemplateV2 emits — drop its 0px-cellpadding tables visual contribution so layout flows from the inner panels. */ body.page-dwt-draft-calc .modV2 > table { border-collapse: collapse; width: 100%; } body.page-dwt-draft-calc .modV2 > table > tbody > tr > td { padding: 0 !important; border: 0 !important; background: transparent !important; } /* Title row inside ModuleTemplateV2 is unused (this page puts the title inline in
); hide it. */ body.page-dwt-draft-calc .modV2 [id$='_pnlTitle'] { display: none !important; } /* Empty pnlSubHeader paints a 1px navy bottom border from MainWhiteout even when empty — collapse it. */ body.page-dwt-draft-calc .modV2 [id$='_pnlSubHeader'] { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } body.page-dwt-draft-calc .modV2 [id$='_pnlSubHeader']:empty { display: none !important; } /* The .ascx adds an inline `.modMain { background-color: white }` block — we re-assert via our class chrome above. */ /* -------------------------------------------------------------------------- 2. Top card — Title + Vessel Selector row. Markup:
inside pnlSelectDwtCalc with one row of cells: td.modV2Title → "DWT/Draft Calculator:" td → loading text td.tdModV2DropDown → FleetVessel combo (All Fleets) td.tdModV2DropDown → Vessel combo (Vessel Name) td#tdLoadline → Loadline DropDownList (only when vessel loaded) td → spacer td → lnkShow (Show) Re-skin: flex container so cells flow with consistent 16px gaps and the Show link sits on the far right of the row. The legacy 30px clearpixel.gif spacer is irrelevant under flex — it collapses to its content width and gap takes over. -------------------------------------------------------------------------- */ /* Figma 41:18310 puts the title on its OWN row at top, then the [All Fleets][Vessel Name][Show] selector group in a single row below it (left-aligned, 16px gap). The legacy markup is a single
with one holding [title][loading][fleet][vessel] [loadline][spacer][show] in DOM order — we collapse tbody/tr via `display: contents` and lay every
out as a flex item. Forcing the title cell to flex-basis: 100% makes it consume the first row and the remaining cells wrap onto a second row that reads left-to-right (Figma 41:19407, w=517px). */ body.page-dwt-draft-calc [id$='_pnlSelectDwtCalc'] > table { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border: 0; margin: 0; width: 100%; } body.page-dwt-draft-calc [id$='_pnlSelectDwtCalc'] > table > tbody, body.page-dwt-draft-calc [id$='_pnlSelectDwtCalc'] > table > tbody > tr { display: contents; } body.page-dwt-draft-calc [id$='_pnlSelectDwtCalc'] > table > tbody > tr > td { padding: 0; border: 0; vertical-align: middle; } /* Title cell — Inter Semi Bold 16/24 (Figma 41:18313). font-family needs no !important: --dwt-font is the Inter stack and MainWhiteout's `.modV2Title { font-family: var(--font-family) }` also resolves to Inter on refresh pages (tokens.css rebinds --font-family). */ body.page-dwt-draft-calc .modV2 td.modV2Title, body.page-dwt-draft-calc td.modV2Title { font-family: var(--dwt-font); font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: var(--dwt-fg) !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; padding-right: 0 !important; padding-left: 0 !important; margin: 0 0 4px 0 !important; float: none !important; /* flex-basis: 100% makes the title consume the first row so the selector group wraps onto its own row below (Figma 41:18310 + 41:19407). */ flex: 1 0 100% !important; } /* Loading badge — "(Loading...)" — push tight against title, muted style. */ body.page-dwt-draft-calc [id="vslQSLoading"] { font-family: var(--dwt-font); font-size: 12px; font-style: italic; color: var(--dwt-muted-fg); } /* Dropdown wrapper cells — auto width so they hug the FleetVessel / ComboBox content rather than stretching across the row. FleetVessel renders BOTH the fleet (dlVessel) inside this ONE cell, so the selector row's 16px flex gap can't separate them — they'd sit ~3px apart. Lay the cell out as its own 16px-gap flex row so the fleet↔vessel gap matches the rest of the row. The RequiredFieldValidator span (rfvdlVessel) is Display=Dynamic (display:none until triggered) so it adds no phantom gap. */ body.page-dwt-draft-calc .tdModV2DropDown { background: transparent; flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 16px; } /* Loadline pill (only visible after a vessel is loaded). */ body.page-dwt-draft-calc [id$='_tdLoadline'] { flex: 0 0 auto; } /* Show link — Figma 41:19410 "Variant=Link" (teal text, no chrome). asp:LinkButton renders — beat MainWhiteout :link blue with specificity + !important. Sits inline with the dropdowns on the second row of the top card (left-aligned, no margin-left:auto). */ body.page-dwt-draft-calc a#lnkShow, body.page-dwt-draft-calc a#lnkShow:link, body.page-dwt-draft-calc a#lnkShow:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding-top: 0 !important; padding-right: 16px !important; padding-bottom: 0 !important; padding-left: 16px !important; margin: 0 !important; border-radius: 8px !important; background-color: transparent !important; background-image: none !important; color: var(--dwt-primary) !important; font-family: var(--dwt-font); font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; cursor: pointer; transition: color 120ms ease, background-color 120ms ease; } body.page-dwt-draft-calc a#lnkShow:hover { color: var(--dwt-primary-hover) !important; background: rgba(var(--primary-tint), 0.08) !important; } /* Strip the legacy   spacer that LinkButton emits — invisible in block context but a flex item under inline-flex which off-centers the label. Same trap noted in MEMORY.md for charter-clauses. */ body.page-dwt-draft-calc a.LinkButton > ins { display: none !important; } /* Style the embedded FleetVessel uniformly — both render a plain native has runat="server" so the rendered id is `ctl00_..._mod2_tdShipLinks` — must target via [id$='_tdShipLinks'] (literal `#tdShipLinks` never matches). MainWhiteout's `a:link` paints these slate-blue 16/Bold by default — beat it with !important on every typography longhand. */ body.page-dwt-draft-calc [id$='_tdShipLinks'] { text-align: right; font-family: var(--dwt-font); font-size: 14px; line-height: 20px; color: var(--dwt-muted-fg); } body.page-dwt-draft-calc [id$='_tdShipLinks'] a, body.page-dwt-draft-calc [id$='_tdShipLinks'] a:link, body.page-dwt-draft-calc [id$='_tdShipLinks'] a:visited, body.page-dwt-draft-calc [id$='_tdShipLinks'] a:active { color: var(--dwt-primary) !important; font-family: var(--dwt-font); font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; letter-spacing: 0 !important; text-decoration: none !important; text-shadow: none !important; background-color: transparent !important; background-image: none !important; transition: color 120ms ease; } body.page-dwt-draft-calc [id$='_tdShipLinks'] a:hover { color: var(--dwt-primary-hover) !important; text-decoration: underline; } /* -------------------------------------------------------------------------- 4. Form table — sTbl with cargo/draft row + 2 vessel-detail rows + 2 additional-info rows + results row. trHdr rows act as section subheaders (Vessel Details, Additional Information, Results). Re-skin: kill all sTbl borders / row borders, override the legacy trHdr navy treatment, and let cells flow as a 6-column grid. -------------------------------------------------------------------------- */ /* Reset sTbl borders inside mod2 — MainWhiteout sets `border-top: 1px solid var(--surface-secondary)` on every td plus `border-bottom: 1px solid var(--brand-dark)` on trHdr. We want crisp empty space. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl > tbody > tr > td { border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; padding: 8px 12px 8px 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; font-family: var(--dwt-font); font-size: 14px; line-height: 20px; color: var(--dwt-fg); vertical-align: middle; text-align: left; } /* trHdr (Vessel Details, Additional Information, Results) — Figma 41:19709 / 41:19735: left-aligned Inter Semi Bold 16/24, no border separator, generous vertical breathing room to space sections. Apply to all trHdr inside the second form table — the first table.sTbl in mod2 already only holds Specify Criteria (handled in §3). */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl ~ table.sTbl > tbody > tr.trHdr > td, body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr.trHdr > td { text-align: left !important; padding: 20px 0 8px 0 !important; border-top: 0 !important; font-family: var(--dwt-font); font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: var(--dwt-fg) !important; text-transform: none !important; } /* "Vessel Details" is the first trHdr after the cargo row — Figma shows the same gap as before other section headers, so use the uniform top padding from the rule above. No special-case rule needed; the legacy "drop top border" hack is gone now. */ /* "Results (60°F / 15°C)" — same left-aligned section-header treatment as the others. Figma 41:19709 specifically positions Results as a standalone section at the bottom of the card, NOT a centered banner. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='_trResults'] > td { text-align: left !important; padding: 24px 0 8px 0 !important; border-top: 0 !important; font-family: var(--dwt-font); font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: var(--dwt-fg) !important; } /* Label cells — first column of each pair: Inter Semi Bold 14/20. Figma 41:19752 spec is technically Inter Medium 500, but the legacy MainWhiteout cascade lands `font-family: tahoma,helvetica,arial` on td which makes our 500 render visually thinner than Figma's Inter 500. We force Inter AND bump to 600 to match the visual weight the designer intended (and matches the Specify Criteria header at 600, keeping the form's typographic rhythm consistent). */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl > tbody > tr > td:nth-child(odd):not([colspan]) { font-family: var(--dwt-font); font-weight: 600 !important; color: var(--dwt-fg); white-space: nowrap; padding-right: 8px !important; } /* Result row labels (.NormalBold) — match field labels: Inter Semi Bold. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl td.NormalBold { font-family: var(--dwt-font); font-weight: 600 !important; color: var(--dwt-fg); white-space: nowrap; padding-right: 8px !important; } /* -------------------------------------------------------------------------- 4b. Form table column stretching — render the form table as CSS Grid so the legacy ///) is itself a grid item spanning every column, with its own flex layout inside so the 5 cells flow as a single left-to-right line. This bypasses the 100px/1fr column grid that §4b applies to the data rows — the "Specify Criteria" controls shouldn't be split into the same rigid column structure. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:first-child { display: flex !important; flex-wrap: wrap; align-items: center; /* Figma 41:19714 cargo row: 16px (spacing/4) between adjacent control groups; 8px row-gap for wrap fallback at narrow widths. */ gap: 8px 16px; grid-column: 1 / -1; width: 100%; margin-bottom: 4px; } /* All cells in the grid form table — reset table-cell padding/border (the §4 td reset assumed table-layout). Row spacing now lives on the grid as `row-gap: 12px`, so cells have no vertical padding. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr > td { padding: 0 !important; border: 0 !important; vertical-align: middle; min-width: 0; } /* trHdr rows span all 6 columns and stay centered. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr.trHdr > td { grid-column: 1 / -1; } /* Data row VALUE cells (even index inside non-cargo, non-trHdr, non-trData rows) become flex containers so the input + suffix (select, "m3"/"MT" text, checkbox, validator span) flow inline. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:not(.trHdr):not(:first-child):not([id$='trData']) > td:nth-child(even) { display: flex; align-items: center; gap: 8px; } /* trData (result row) — break out of the 6-column data grid (which would stretch each value cell to 1fr and create huge gaps between the Cargo / Draft / Cubic groups). Figma 41:19709 shows Results as a compact left-aligned strip: label tight against value, with a wider gap between adjacent (label, value) pairs. The general `display: contents` override above (§4b) makes the tr invisible and its cells direct grid items — flip that for trData by making the row span the full grid, become a flex row, and let its cells flow as auto-width flex items. `margin-left: 32px` on the 3rd / 5th cells creates the inter-group spacing while leaving the inner (label, value) pair tight. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='trData'] { display: flex !important; flex-wrap: wrap; align-items: flex-start; grid-column: 1 / -1; gap: 8px; margin-top: 0; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='trData'] > td { white-space: nowrap; flex: 0 0 auto; width: auto !important; min-width: 0; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='trData'] > td:nth-child(3), body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='trData'] > td:nth-child(5) { margin-left: 32px; } /* -------------------------------------------------------------------------- 4c. Cargo / Specify Criteria row — single full-width line that flows freely (radio + input + unit-dropdown + radio + input + unit- dropdown + water-type, with Calculate pinned to the far right). The cargo is invisible to layout thanks to §4b's `display: contents`, so we make the FIRST
markup yields three equal label/value column pairs. Setting `display: grid` on the table and `display: contents` on tbody/tr promotes every to a direct grid item, which then snaps to the next slot in the `grid-template-columns` cycle. Result: every label column is exactly 100px and every value column gets `1fr` of remaining width, so inputs and selects with `width: auto` + `flex: 1` (§5) stretch to fill their cell — fixing the "dropdowns don't stretch with the column" complaint. Excluded from the column grid: - tr:first-child = cargo / Specify Criteria row → §4c gives it a single full-width flex line spanning all 6 grid columns. - tr.trHdr = section subheaders (Vessel Details / Additional Information / Results) — also span the full 6 columns. - [id$='trData'] = result row with stacked-text label cells. -------------------------------------------------------------------------- */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl { display: grid !important; grid-template-columns: 100px 1fr 100px 1fr 100px 1fr; /* Figma 41:19735: 12px (spacing/3) between label↔value inside a field, 24px (spacing/6) between adjacent field columns. We use a 12px column-gap uniformly and add a 12px margin-left to label cells in columns 3 and 5 to bump the inter-column gap to 24px. */ column-gap: 12px; /* Figma 41:19710: 12px (spacing/3) between adjacent rows in the same column. Row-gap alone covers it — cell padding lives inline on the cells (see §4b cell rule below). */ row-gap: 12px; /* Vertically center every cell's content so labels line up with the 32px input pill in the value cell (without this they sit at the top of the auto-stretched grid row). */ align-items: center; width: 100%; } /* Extra 12px before columns 3 and 5 → 24px total visual gap between field column pairs (Figma 41:19735 gap: 24px). */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:not(:first-child):not(.trHdr):not([id$='trData']) > td:nth-child(3), body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:not(:first-child):not(.trHdr):not([id$='trData']) > td:nth-child(5) { margin-left: 12px; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody, body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:not(:first-child) { display: contents; } /* Cargo row (first
span the full grid width and become a flex container; the remaining 4 cargo tds and the Calculate cell flow as flex items inside it... almost. The cells are siblings of each other under the tr, so instead of wrapping them, we span each cell across the grid manually and set the row's td container behaviour to flex-row. Cleanest path: set every cargo-row to span ALL 6 columns and stack-flex them into one wrapping line via the implicit grid row — but that yields one td per row. We need a single line with all 5 cells side by side. Solution: give the cargo row its own subgrid-ish behaviour by making each cell sit on the same grid row (`grid-row: 1`) with `grid-column: auto` and a wide `column-gap`. The last (colspan=2) Calculate cell uses `justify-self: end` to pin to the right. -------------------------------------------------------------------------- */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:first-child > td { /* Each cargo td is a flex item inside the cargo row, with its own inner flex layout so input + dropdown / radio + label flow inline. Internal gap = 12px (Figma 41:19715 gap: spacing/3). */ flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 !important; min-width: 0; width: auto; } /* Cargo + Draft inputs — pinned to a sensible 120px pill so the row doesn't span the full card and the flex-row stays compact. The general §5 rule sets flex:1 1 0 which would shrink them to 0 inside the flex cell; override here. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:first-child input.NormalNumberBox { flex: 0 0 auto !important; width: 120px !important; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:first-child select { flex: 0 0 auto !important; width: auto !important; min-width: 92px !important; } /* Calculate cell (colspan=2) — pin to the far right of the cargo row via auto-margin (flex item pattern). */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl + table.sTbl > tbody > tr:first-child > td:last-child { margin-left: auto; justify-content: flex-end; } /* -------------------------------------------------------------------------- 4d. Input + unit suffix grouping — Figma 15:7499 renders every numeric value with its measurement unit ("m3", "MT", "mm", "cm", "m") as muted text INSIDE the input on the right edge, like a Material-UI end adornment. The legacy markup had a plain text node after the textbox; the ascx now wraps each pair as: m3 The wrapper is a positioned flex item that takes the cell's remaining width; the unit pins absolutely to the right edge of the wrapper, overlapping the input's right padding. Siblings (e.g. the "Include?" checkbox in the Slop row) still flow as flex items after the wrapper, not inside the input. -------------------------------------------------------------------------- */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span.dwt-input { position: relative; display: flex; align-items: center; flex: 1 1 0; min-width: 0; } /* Input INSIDE the wrapper fills the wrapper and leaves room on the right for the unit label. The §5 base rule sets `flex: 1 1 0` and `padding-right: 12px` on every .NormalNumberBox — here we bump the padding-right so the value doesn't crash into the suffix, and let the wrapper handle the flex sizing. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span.dwt-input > input.NormalNumberBox { width: 100% !important; flex: 1 1 auto !important; padding-right: 44px !important; text-align: left; } /* The unit label itself — muted slate, sits 12px from the input's right edge, vertically centered. pointer-events:none keeps clicks passing through to the underlying input. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span.dwt-unit { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-family: var(--dwt-font); font-size: 13px; line-height: 16px; color: var(--dwt-muted-fg); pointer-events: none; user-select: none; white-space: nowrap; } /* -------------------------------------------------------------------------- 5. Inputs — text boxes (.NormalNumberBox) + native selects (.NormalTextBox) inside the form. Uniform 32px-tall shadcn pill. Legacy classes: .NormalNumberBox → numeric text inputs (Cargo amount, Draft, Density…) .NormalTextBox → most dropdowns (ddlIntake, ddlUnits, ddlWater, ddlApiSG …) -------------------------------------------------------------------------- */ /* NormalNumberBox — uniform pill input. The legacy inline Width="50" on every renders as style="width:50px" which the cascade must override. NOTE: keep the rule body free of `background:` and `border:` shorthands combined with var() + !important — Chrome's parser silently drops the width declaration when those shorthands appear earlier in the same block (witnessed on this rule). Use the longhand `background-color` / `border-*` family instead. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input.NormalNumberBox, body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input[type="text"].NormalNumberBox { /* Base input chrome — inputs are sized by their parent cell. Value cells in section 4b below become flex containers and the input + min-width:0 + flex:1 grows to fill the cell. The cargo row in section 4c overrides this with a fixed pill width. */ width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; height: 32px !important; padding-top: 0 !important; padding-right: 12px !important; padding-bottom: 0 !important; padding-left: 12px !important; background-color: var(--dwt-card) !important; border-top: 1px solid var(--dwt-border) !important; border-right: 1px solid var(--dwt-border) !important; border-bottom: 1px solid var(--dwt-border) !important; border-left: 1px solid var(--dwt-border) !important; border-radius: 8px !important; font-family: var(--dwt-font); font-size: 14px !important; line-height: 20px !important; color: var(--dwt-fg) !important; box-sizing: border-box !important; transition: border-color 120ms ease, box-shadow 120ms ease; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input.NormalNumberBox:focus, body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input.NormalNumberBox:focus-visible { outline: 0; border-color: var(--dwt-primary) !important; box-shadow: 0 0 0 3px var(--dwt-focus-ring); } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input.NormalNumberBox[readonly], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input.NormalNumberBox[disabled] { background-color: var(--dwt-muted-bg) !important; color: var(--dwt-muted-fg) !important; cursor: not-allowed; } /* Native selects inside the form — uniform min-width so the short options (MT, m, ft, API, SG) don't render as cramped 50-70px pills. Three tiers: small (unit toggles), medium (water type), large (loadline). Same shorthand-with-var()-with-!important parser trap as NormalNumberBox above — use background-color longhand to keep the chevron data: URL on background-image intact. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] select, body.page-dwt-draft-calc [id$='_mod2_pnlMod'] select.NormalTextBox { /* Selects flex like inputs so they share their value cell with the neighbouring input/text — section 4b below makes the cell flex. */ flex: 1 1 0 !important; min-width: 0 !important; height: 32px !important; padding-top: 0 !important; padding-right: 28px !important; padding-bottom: 0 !important; padding-left: 10px !important; background-color: var(--dwt-card) !important; border-top: 1px solid var(--dwt-border) !important; border-right: 1px solid var(--dwt-border) !important; border-bottom: 1px solid var(--dwt-border) !important; border-left: 1px solid var(--dwt-border) !important; border-radius: 8px !important; font-family: var(--dwt-font); font-size: 14px !important; line-height: 20px !important; color: var(--dwt-fg) !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 14px 14px !important; box-sizing: border-box !important; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] select:focus { outline: 0; border-color: var(--dwt-primary) !important; box-shadow: 0 0 0 3px var(--dwt-focus-ring); } /* Radio buttons (Cargo / Draft toggle) — asp:RadioButton renders as . Tidy the spacing and dim the autopostback ` ` spacer. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input[type="radio"] { accent-color: var(--dwt-primary); width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: middle; cursor: pointer; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input[type="radio"] + label { font-family: var(--dwt-font); font-size: 14px; font-weight: 600 !important; line-height: 20px; color: var(--dwt-fg); cursor: pointer; vertical-align: middle; } /* "Include?" checkbox next to Slop (98%). */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input[type="checkbox"] { accent-color: var(--dwt-primary); width: 14px; height: 14px; margin: 0 4px 0 8px; vertical-align: middle; cursor: pointer; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] input[type="checkbox"] + label { font-family: var(--dwt-font); font-size: 14px; font-weight: 500; color: var(--dwt-fg); cursor: pointer; vertical-align: middle; } /* Validator messages — Required / range hints. They render as small red spans next to the input. Drop a bit of left padding and use shadcn red. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="rval"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="reqDraft"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="ReqDwt"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="rfv"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="rng"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="cvAPI"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="Requiredfieldvalidator"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span[id*="Rangevalidator"], body.page-dwt-draft-calc [id$='_mod2_pnlMod'] span.q88-text-error { color: var(--dwt-danger) !important; font-family: var(--dwt-font); font-size: 12px; margin-left: 6px; } /* -------------------------------------------------------------------------- 6. Calculate button — asp:LinkButton with uc:ImageManager inside. ImageManager renders an + label; we want a clean teal pill with just "Calculate". Hide the icon, show the label only. -------------------------------------------------------------------------- */ /* Calculate button — same shorthand-var()-!important parser trap; use background-color longhand and explicit border-* longhands. Also pin box-sizing + height to defeat MainWhiteout `a.LinkButton` default padding which inflates the bounding box past 36px. */ body.page-dwt-draft-calc a[id$='_lnkCalculate'], body.page-dwt-draft-calc a[id$='_lnkCalculate']:link, body.page-dwt-draft-calc a[id$='_lnkCalculate']:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding-top: 0 !important; padding-right: 18px !important; padding-bottom: 0 !important; padding-left: 18px !important; border-radius: 8px !important; background-color: var(--dwt-primary) !important; background-image: none !important; color: var(--dwt-primary-fg) !important; border-top: 1px solid var(--dwt-primary) !important; border-right: 1px solid var(--dwt-primary) !important; border-bottom: 1px solid var(--dwt-primary) !important; border-left: 1px solid var(--dwt-primary) !important; font-family: var(--dwt-font); font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; white-space: nowrap; } body.page-dwt-draft-calc a[id$='_lnkCalculate']:hover { background-color: var(--dwt-primary-hover) !important; background-image: none !important; border-color: var(--dwt-primary-hover) !important; color: var(--dwt-primary-fg) !important; } /* Hide the ImageManager icon — keep the label text only. ImageManager wraps its image in and the label in (typical Q88 pattern). We hide every the LinkButton would render. */ body.page-dwt-draft-calc a[id$='_lnkCalculate'] img { display: none !important; } /* The legacy LinkButton spacer  . */ body.page-dwt-draft-calc a[id$='_lnkCalculate'] > ins { display: none !important; } /* The td that holds the Calculate button — push it right-aligned to mirror Figma 41:19731 (Calculate sits at the far right of the cargo/draft row). */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.sTbl > tbody > tr:first-child > td:last-child { text-align: right !important; padding-right: 0 !important; } /* -------------------------------------------------------------------------- 7. Results row + warning footer Markup: tr#trData with 3 column pairs (Cargo/Displacement, Draft m/ft, Cubic m3/Bbls) and a with the warning span. -------------------------------------------------------------------------- */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='trData'] > td { padding: 0 !important; font-family: var(--dwt-font); font-size: 14px; line-height: 20px; color: var(--dwt-fg); } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] [id$='trData'] [id*="lbl"] { color: var(--dwt-fg); font-weight: 400; } /* Warning footer — kill the BorderTop double-line, swap to red-600 small. */ body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.BorderTop { border-top: 1px solid var(--dwt-border); border-collapse: collapse; margin-top: 12px; padding-top: 12px; width: 100%; } body.page-dwt-draft-calc [id$='_mod2_pnlMod'] table.BorderTop td { border: 0 !important; padding: 12px 0 0 0 !important; background: transparent !important; } body.page-dwt-draft-calc .modV2 .warning, body.page-dwt-draft-calc [id$='_mod2_pnlMod'] .warning { color: var(--dwt-danger) !important; font-family: var(--dwt-font); font-size: 13px !important; font-weight: 400 !important; background: transparent !important; padding: 0 !important; } /* -------------------------------------------------------------------------- 8. Ship-link hover tooltips — Bunkers / Intakes / Segregations / Vessel Load Lines (the "Specify Criteria" right-side links from §3). Mechanism (a 5th popup type, NOT documented in DESIGN.md §16): the legacy `Custom.Utilities.JavascriptHelper.ToolTip` server helper binds an `onmouseover` to each that drives an embedded wz_tooltip.js (Walter Zorn) build. On hover wz_tooltip injects a floating popover into
(inside body.page-dwt-draft-calc):
← navy frame + title bar
Title
← light-blue body pad ← data grid (silver lines) …
EVERYTHING is painted via inline attrs / tags + the legacy .GridHeader (#4F72A4) class, so every override needs `!important` and hooks onto the bgcolor / font-color / Grid* class attributes (the title bar — which has no unique attr — is targeted positionally). `Loadline Zones` is a real PDF link (no tooltip) so it is untouched. Re-skin = DESIGN.md popup conventions: flat white card, slate-200 border, 12px radius, soft popover shadow, Inter; navy title bar → flat white header w/ hairline; navy GridHeader → slate-100 band; data rows → white / slate-50 zebra; silver cellspacing gridlines collapsed in favour of slate-100 row separators. -------------------------------------------------------------------------- */ /* 8.1 Outer popover card. Keep wz_tooltip's inline position/left/top/width/ z-index/visibility — only paint appearance. box-sizing keeps the border inside the inline width; overflow:hidden clips the inner table to the rounded corners. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] { box-sizing: border-box !important; max-width: calc(100vw - 32px) !important; background-color: var(--dwt-card) !important; border: 1px solid var(--dwt-border) !important; border-radius: 12px !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important; overflow: hidden !important; padding: 0 !important; font-family: var(--dwt-font); color: var(--dwt-fg); } /* 8.2 Navy frame table (#2D3663) → flat; collapse cellspacing so the title row + body sit flush on the white card. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] > table, body.page-dwt-draft-calc div[id^="tOoLtIp"] table[bgcolor="#2D3663" i] { background: transparent !important; background-color: transparent !important; border-collapse: collapse !important; width: 100% !important; } /* 8.3 Title bar — first row of the frame table → flat white header, dark Inter 14/20 semibold, hairline divider below. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] > table > tbody > tr:first-child > td { background: var(--dwt-card) !important; padding: 12px 16px !important; border-bottom: 1px solid var(--dwt-border) !important; } body.page-dwt-draft-calc div[id^="tOoLtIp"] font[color="#ffffff" i] { font-family: var(--dwt-font); font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important; color: var(--dwt-fg) !important; } /* 8.4 Body — the #e6ecff light-blue pad cell → white w/ comfortable inset; the #000066 body → slate-700 Inter (also covers the plain-text "Segregations: Not specified." case which has no grid). */ body.page-dwt-draft-calc div[id^="tOoLtIp"] td[bgcolor="#e6ecff" i] { background: var(--dwt-card) !important; background-color: var(--dwt-card) !important; /* Tighter L/R inset than the 16px title so the dense 8-column Intakes grid fits its 400px popover without clipping under overflow:hidden. */ padding: 12px 12px 14px 12px !important; } body.page-dwt-draft-calc div[id^="tOoLtIp"] font[color="#000066" i] { font-family: var(--dwt-font); font-size: 13px !important; font-weight: 400 !important; line-height: 18px !important; color: var(--text-secondary) !important; } /* Inner body wrapper table (cellpadding=3 cellspacing=1, no bgcolor) — flow flush; the pad cell above owns the inset. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] > table > tbody > tr:last-child > td > table { border-collapse: collapse !important; width: 100% !important; } /* 8.5 Data grid (#C0C0C0 silver) — drop the silver cellspacing gridlines; frame it with a single slate-200 border. Row separators (§9.7) do the rest. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] table[bgcolor="#C0C0C0" i] { background: transparent !important; background-color: transparent !important; border-collapse: collapse !important; width: 100% !important; border: 1px solid var(--dwt-border) !important; } /* 8.6 Grid header band (#4F72A4 navy) + the "Total" summary rows → slate-100 band, slate-600 Inter 11/16 semibold. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridHeader, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridHeader > td { background: var(--surface-muted) !important; background-color: var(--surface-muted) !important; } body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridHeader > td { color: var(--dwt-muted-fg) !important; font-family: var(--dwt-font); font-size: 11px !important; font-weight: 600 !important; line-height: 14px !important; padding: 5px 5px !important; border-bottom: 1px solid var(--dwt-border) !important; } /* 8.7 Data rows — white / slate-50 zebra, slate-700 Inter 12/16, hairline row separators. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridData > td, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridDataAlt > td { background: var(--dwt-card) !important; background-color: var(--dwt-card) !important; color: var(--text-secondary) !important; font-family: var(--dwt-font); font-size: 11px !important; font-weight: 400 !important; line-height: 15px !important; padding: 4px 5px !important; border-bottom: 1px solid var(--surface-muted) !important; } body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridDataAlt > td { background: var(--dwt-muted-bg) !important; background-color: var(--dwt-muted-bg) !important; } /* 8.8 Grid footer (e.g. Intakes "Heating: …") → muted note band. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridFooter, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridFooter > td { background: var(--dwt-muted-bg) !important; background-color: var(--dwt-muted-bg) !important; } body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridFooter > td { color: var(--dwt-muted-fg) !important; font-family: var(--dwt-font); font-size: 11px !important; font-weight: 400 !important; line-height: 16px !important; padding: 6px 8px !important; border-top: 1px solid var(--dwt-border) !important; } /* 8.9 Normalize the inline / colour inside every grid cell so the legacy navy/blue text can't leak through the class overrides above. */ body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridHeader > td font, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridHeader > td b, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridFooter > td font, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridFooter > td b { color: var(--dwt-muted-fg) !important; font-family: var(--dwt-font); } body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridData > td font, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridData > td b, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridDataAlt > td font, body.page-dwt-draft-calc div[id^="tOoLtIp"] tr.GridDataAlt > td b { color: #334155 !important; font-family: var(--dwt-font); } /* -------------------------------------------------------------------------- 9. Print resets — restore standard ink for printer output. -------------------------------------------------------------------------- */ @media print { body.page-dwt-draft-calc .modV2 { box-shadow: none; border-color: #cccccc; } body.page-dwt-draft-calc a[id$='_lnkCalculate'], body.page-dwt-draft-calc a#lnkShow { background: transparent !important; color: #000 !important; border-color: #cccccc !important; } }