/* =============================================================================
 * Tank Plan Diagram — Q88 vessel tank plan view re-skin (QEN-8776)
 *
 * Scope: body.page-tank-plan-diagram (gated in Default.master.cs by
 *        portal id 0/1/2 + TankPlanDiagram.aspx path).
 *
 * No Figma source for this page — patterns adapted from:
 *   DESIGN.md §6.1   .q88-card canonical content card primitive
 *   DESIGN.md §5.2   data-grid title bar (left title, right action cluster)
 *   inspection-container.css (closest precedent: ModuleTemplateV2 chrome
 *                              with FleetVessel selector + popup menu)
 *   vessel-management.css   (closest precedent: 18/28 page title +
 *                              teal #0d9488 primary pill + ghost secondary)
 *
 * Markup overview (ascx: DesktopModules/Q88/TankPlanDiagram.ascx):
 *   modSelect    .modV2  — FleetVessel + "Show" + Actions popup menu
 *   modTankPlan  .modV2  — vessel banner (Head.gif) + tank grid +
 *                         Poop Deck banner (poop.gif) + Notes +
 *                         Tank Groups sidebar (rptTotalCapacity Repeater)
 *   modSettings  .modV2  — Copy / Export radios + FleetVessel + Cancel/Submit
 *
 * The ship-hull .gif background sprites (Head.gif, poop.gif, pix_*.gif color
 * swatches) define the diagram's visual identity and are left in place — only
 * the surrounding chrome, typography, and form controls are modernised.
 *
 * Section order:
 *   §1  Phase 2 ContentPane release
 *   §2  Card chrome (.modV2)
 *   §3  Title bar (modV2TitleContainer / modV2Title / modV2TRight)
 *   §4  TitleRight content (vessel-name label, FleetVessel, Show, Actions)
 *   §5  Diagram main content + ship banners + tank cells
 *   §6  Tank Groups sidebar (rblUnits toggle + capacity table)
 *   §7  Notes section
 *   §8  Footer (.modPopFooter — Edit Layout / Top / Back / Save Layout)
 *   §9  Settings panel form
 *   §10 Actions popup menu (popMenuActions)
 * ============================================================================= */


/* ============================================================================
 * §1 — Phase 2 ContentPane release
 *
 * DNN wraps the module in a <table class="ContentPane"> chain that
 * shrink-wraps to the widest child. Without this release the modV2 cards
 * size to the diagram's intrinsic width (~800px) instead of filling the
 * .q88-content area, defeating the 24/48 gutter.
 * ========================================================================== */

body.page-tank-plan-diagram .ContentPane,
body.page-tank-plan-diagram .ContentPaneBody,
body.page-tank-plan-diagram .MainTableContent {
    width: 100% !important;
    max-width: none !important;
}


/* ============================================================================
 * §2 — Card chrome
 *
 * DESIGN.md §6.1: 1px #e2e8f0 border, 8px radius, NO shadow (universal rule),
 *                 margin 24/48, max-width 1584, padding 24/28 inner.
 * The page has three .modV2 panels stacked — same chrome on all three.
 * ========================================================================== */

body.page-tank-plan-diagram {
    --tpd-fg: var(--text-primary);
    --tpd-muted-fg: var(--text-muted);
    --tpd-border: var(--border-default);
    --tpd-input-border: var(--border-default);
    --tpd-card-bg: #ffffff;
    --tpd-muted-bg: var(--surface-muted);
    --tpd-row-hover: var(--surface-card);
    --tpd-primary: var(--primary);
    --tpd-primary-hover: var(--button-primary-hover);
    --tpd-primary-fg: #ffffff;
    --tpd-warning-bg: #fef3c7;
    --tpd-warning-fg: #92400e;
    --tpd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family: var(--tpd-font);
    color: var(--tpd-fg);
}

body.page-tank-plan-diagram .modV2 {
    background-color: var(--tpd-card-bg) !important;
    border: 1px solid var(--tpd-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    /* Use the q88-card recipe (width:auto + 48px L/R margin) — NOT max-width
     * + margin:auto — so the card hugs the sidebar+right edge on wide screens
     * instead of leaving ~800px gaps either side at 3440px viewports.
     * (MEMORY: feedback_card-margin-wide-screen-trap) */
    width: auto !important;
    max-width: none;
    margin: 24px 48px !important;
    box-sizing: border-box;
    font-family: var(--tpd-font);
    color: var(--tpd-fg);
    /* Kill any legacy gradient/bg painted on .modV2 by MainWhiteout */
    background-image: none !important;
}

/* The outer <table> inside modV2 is layout-only — flatten its default
 * border-collapse + cellspacing so the title row sits flush at the radius. */
body.page-tank-plan-diagram .modV2 > table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Empty top row that ModuleTemplateV2 emits — collapse it so no phantom gap. */
body.page-tank-plan-diagram .modV2 > table > tbody > tr:first-child > td:empty,
body.page-tank-plan-diagram .modV2 > table > tbody > tr.modV2SubHeader:empty,
body.page-tank-plan-diagram .modV2 > table > tbody > tr > td.modV2SubHeader:empty {
    display: none;
}

/* The .modV2SubHeader <div> is rendered by ModuleTemplateV2 for every panel.
 * MainWhiteout paints a 1px navy (#2d3663) border-bottom on it — wipe that
 * everywhere. QEN-8831: the Figma moves the vessel selector to its OWN row
 * below the title, so modSelect's <SubHeader> now hosts the .tpd-selector-row.
 * modTankPlan / modSettings still ship an EMPTY <SubHeader>, and modSelect's
 * own SubHeader is empty in EditLayout mode (spanVessel.Visible=false) — hide
 * any SubHeader that does NOT contain the selector row. */
body.page-tank-plan-diagram .modV2SubHeader {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

body.page-tank-plan-diagram .modV2SubHeader:not(:has(.tpd-selector-row)) {
    display: none !important;
}

/* modSelect title-bar carries NO bottom separator — the Figma header (title +
 * Email + kebab) flows straight into the selector row with no divider. */
body.page-tank-plan-diagram [id$="_modSelect_pnlMod"] .modV2TitleContainer {
    border-bottom: 0 !important;
}

/* QEN-8831 — merge the two stacked .modV2 panels (modSelect = header + selector
 * row; modTankPlan = diagram + groups + notes + footer) into ONE visual card to
 * match the single-card Figma. modSelect closes flat at the bottom; modTankPlan
 * opens flat at the top; the 24px inter-card gap collapses to 0.
 * modTankPlan only renders once a vessel is picked and "Show" is clicked, and
 * it's wrapped one level deep in a "_pnlTankPlan" panel (not a direct sibling
 * of modSelect) — the :has(~) scope keys off that wrapper so modSelect keeps
 * its own bottom border/radius when standalone, instead of showing an
 * unclosed card in the empty "select a vessel" state. */
body.page-tank-plan-diagram [id$="_modSelect_pnlMod"]:has(~ [id$="_pnlTankPlan"]) {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.page-tank-plan-diagram [id$="_modTankPlan_pnlMod"] {
    margin-top: 0 !important;
    border-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* modTankPlan ships an EMPTY <Title>; ModuleTemplateV2 still emits the title
 * container which would add a blank ~40px band at the top of the merged card.
 * Collapse it so the diagram sits directly under the selector row. */
body.page-tank-plan-diagram [id$="_modTankPlan_pnlMod"] .modV2TitleContainer:not(:has(.modV2Title:not(:empty))) {
    display: none !important;
}


/* ============================================================================
 * §3 — Title bar
 *
 * modV2TitleContainer is the title-bar wrapper (flex row), modV2Title carries
 * the page title text, modV2TRight is the action slot pushed to the right.
 * ========================================================================== */

body.page-tank-plan-diagram .modV2TitleContainer {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 16px 24px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tpd-border) !important;
    box-shadow: none !important;
    /* Without border-box, the 24px L/R padding adds OUTSIDE the parent <td>'s
     * content width — the title-bar bottom border and the Actions kebab then
     * paint ~48px past the card's right edge. Force border-box + width:100%
     * + min-width:0 so the flex container honours its parent's width. */
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    /* MainWhiteout paints a navy/gradient bg here on legacy chrome — wipe it. */
    background-image: none !important;
}

body.page-tank-plan-diagram .modV2Title {
    font-family: var(--tpd-font);
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    color: var(--tpd-fg) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-tank-plan-diagram .modV2TRight {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px; /* Figma gap-2 between Email button and kebab */
    color: var(--tpd-fg);
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
}


/* ============================================================================
 * §4 — Header right cluster (Email button + kebab) and selector row
 *
 * QEN-8831 Figma (node 621:7776) restructures the header into two rows:
 *   Row 1 (.modV2TitleContainer): Title LEFT + [Email outline button] [kebab ⋮]
 *   Row 2 (.modV2SubHeader): "Vessel name:" + All-Fleets + Vessel + [Show]
 *
 * Markup now ships:
 *   <TitleRight>
 *     <asp:LinkButton ID="lnkEmailTop" CssClass="LinkButton tpd-email-btn" Text="Email"/>
 *     <div id="divPopup"><uc:PopupMenu popMenuActions ...Settings/Colors/></div>
 *   </TitleRight>
 *   <SubHeader>
 *     <span id="spanVessel" class="StdPadding tpd-selector-row">
 *       <span class="tpd-selector-label">Vessel name:</span>
 *       <FV:FleetVessel/> <asp:LinkButton lnkShow class="tpd-show-btn" Text="Show"/>
 *     </span>
 *   </SubHeader>
 * ========================================================================== */

/* Email — outline button (h36, 1px border, radius 8, Mail icon 16px + label). */
body.page-tank-plan-diagram .modV2TRight a.LinkButton.tpd-email-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    margin: 0;
    background-color: var(--tpd-card-bg) !important;
    color: var(--tpd-fg) !important;
    border: 1px solid var(--tpd-input-border) !important;
    border-radius: 8px !important;
    font-family: var(--tpd-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-tank-plan-diagram .modV2TRight a.LinkButton.tpd-email-btn:hover {
    background-color: var(--tpd-muted-bg) !important;
    border-color: #cbd5e1 !important;
    color: var(--tpd-fg) !important;
}

/* Mail icon (Lucide mail) painted as a currentColor mask before the label. */
body.page-tank-plan-diagram .modV2TRight a.LinkButton.tpd-email-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon-mail) center / 16px 16px no-repeat;
    mask: var(--icon-mail) center / 16px 16px no-repeat;
}

/* Strip the LinkButton <ins>&nbsp;</ins> spacer so the label stays centered.
 * (MEMORY: linkbutton-ins-spacer-trap) */
body.page-tank-plan-diagram .modV2TRight a.LinkButton.tpd-email-btn > ins {
    display: none !important;
}

/* divPopup wrapper (hosts the Actions kebab) — drop the legacy 8px top pad. */
body.page-tank-plan-diagram .modV2TRight [id$="_divPopup"],
body.page-tank-plan-diagram .modV2TRight > div[style*="padding-top: 8px"],
body.page-tank-plan-diagram .modV2TRight > div[style*="padding-top:8px"] {
    padding-top: 0 !important;
    display: inline-flex;
    align-items: center;
}

/* --- Selector row (now in modSelect's SubHeader) --------------------------- */

/* The selector row wrapper: flex, full-width, 24px h-pad to align the label
 * with the title above, generous breathing room below the header. */
body.page-tank-plan-diagram .modV2SubHeader {
    padding: 0 24px 20px !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
}

body.page-tank-plan-diagram .tpd-selector-row {
    float: none !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--tpd-font);
}

body.page-tank-plan-diagram .tpd-selector-label {
    color: var(--tpd-fg);
    font-family: var(--tpd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

/* FleetVessel native <select>s ("dlFleet", "dlVessel"): 32px refresh inputs.
 * data-q88-shim="1" lets SelectShim.js skin chrome; ensure base box matches. */
body.page-tank-plan-diagram .tpd-selector-row select.NormalTextBox {
    height: 32px;
    box-sizing: border-box;
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--tpd-fg);
}

/* Show button — teal primary pill, h36 (taller than the h32 selects). */
body.page-tank-plan-diagram .tpd-selector-row a.LinkButton.tpd-show-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    margin: 0 0 0 12px;
    background-color: var(--tpd-primary) !important;
    color: var(--tpd-primary-fg) !important;
    border: 1px solid var(--tpd-primary) !important;
    border-radius: 8px !important;
    font-family: var(--tpd-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 120ms ease;
}

body.page-tank-plan-diagram .tpd-selector-row a.LinkButton.tpd-show-btn:hover {
    background-color: var(--tpd-primary-hover) !important;
    border-color: var(--tpd-primary-hover) !important;
    color: var(--tpd-primary-fg) !important;
}

body.page-tank-plan-diagram .tpd-selector-row a.LinkButton.tpd-show-btn > ins {
    display: none !important;
}


/* ============================================================================
 * §5 — Diagram main content + ship banners + tank cells
 *
 * The .modV2Main cell wraps a <center> with #TableTankPlan: a 2-col layout
 * where the left <td> holds the diagram (Head.gif banner row, TankPlanLayout
 * inner grid, poop.gif footer row, Notes section) and the right <td>
 * (#TdGrouping) holds the Tank Groups sidebar.
 *
 * Banners (Head.gif / poop.gif) are deliberately retained — they define the
 * ship-hull silhouette that makes this view recognisable as a "tank plan".
 * Only the surrounding type and spacing get the refresh treatment.
 * ========================================================================== */

body.page-tank-plan-diagram .modV2Main {
    padding: 24px 28px !important;
    background: transparent !important;
    color: var(--tpd-fg);
    font-family: var(--tpd-font);
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
    /* The diagram (ship-hull grid, ~480px) + Tank Groups panel (~340px) need
     * ~870px combined and can't reflow narrower. Table auto-layout otherwise
     * treats that as this cell's min-content and grows the WHOLE page (sidebar
     * included) past the viewport on laptop-width screens. width:0 + min-
     * width:100% opts this cell out of the table's min-content contribution;
     * overflow-x then scrolls just the diagram instead of the whole app. */
    overflow-x: auto;
}

/* The 2-col layout table — spread full width so the diagram sits at the card's
 * left inset and the Tank Groups panel fills toward the right edge (Figma:
 * diagram left, groups right, ~48px gutter). The gutter is carried by
 * TdGrouping's left padding (§6) so border-spacing adds no outer inset. */
body.page-tank-plan-diagram [id$="_TableTankPlan"] {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Left (diagram) cell shrinks to the ship-hull's intrinsic width; the right
 * (Tank Groups) cell absorbs the remaining width so the capacity table fills
 * toward the card's right edge (Figma: groups panel ~⅓ of the card). */
body.page-tank-plan-diagram [id$="_TableTankPlan"] > tbody > tr > td:first-child {
    width: 1%;
    vertical-align: top;
}

/* Vessel-name banner (Head.gif background row): refresh the typography only —
 * the bow-shaped silhouette stays intact via the legacy GIF background. */
body.page-tank-plan-diagram [id$="_lblVesselNameHeading"],
body.page-tank-plan-diagram [id$="_lblVesselNameHeading"] .NormalBold {
    font-family: var(--tpd-font);
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tpd-fg) !important;
    letter-spacing: 0;
}

/* Poop Deck banner caption — same typographic refresh. */
body.page-tank-plan-diagram [id$="_modTankPlan_pnlMod"] td[background*="poop"] {
    font-family: var(--tpd-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--tpd-fg);
    letter-spacing: 0.4px;
}

/* Tank cells inside #TankPlanLayout — labels + cubic numbers. The colored
 * pix_*.gif swatches keep painting; we only tune the legend text. */
body.page-tank-plan-diagram [id$="_TankPlanLayout"] td {
    font-family: var(--tpd-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--tpd-fg);
}

/* Inline cell borders are code-behind emitted as either
 *   border-*: solid 1px black                     (standard cell outline)
 *   border-{left|right}: double 3px red           (port/starboard divider)
 * Both pure black and saturated red fight the refresh slate palette. Recolor
 * to slate-200 for the standard outline and slate-400 for the centerline so
 * the divider stays visually distinct as a double-stroke accent without
 * shouting. DB-painted fill colors (`background-color:#XXXXXX`) stay intact —
 * they encode the tank's coating type and are functional. */
body.page-tank-plan-diagram [id$="_TankPlanLayout"] td {
    border-top-color: var(--tpd-border) !important;
    border-right-color: var(--tpd-border) !important;
    border-bottom-color: var(--tpd-border) !important;
    border-left-color: var(--tpd-border) !important;
}

body.page-tank-plan-diagram [id$="_TankPlanLayout"] td[style*="border-left:double 3px red"] {
    border-left-color: #94a3b8 !important; /* slate-400 — centerline accent */
}

body.page-tank-plan-diagram [id$="_TankPlanLayout"] td[style*="border-right:double 3px red"] {
    border-right-color: #94a3b8 !important; /* slate-400 — centerline accent */
}

/* Tank-cell edit pencils — code-behind emits raw `<img src="/images/edit.gif">`
 * (no Img-Std-Edit class) inside each editable tank cell. The components.css
 * §"Edit-pencil icon — global src-based swap" rule wraps the IMG in a Lucide
 * SquarePen mask + `background-color: currentColor` paint, but the IMG's
 * NATIVE pixmap (the legacy yellow pencil GIF) still paints over the black bg
 * inside the mask shape — so the icon reads as a tan/amber square-pen outline.
 *
 * `filter: brightness(0)` collapses all RGB channels of the GIF content to
 * zero while preserving alpha, so the rendered pixmap becomes pure black.
 * The mask then clips that black pixmap to a SquarePen shape. Result: clean
 * black icon per cell.
 *
 * `color: var(--tpd-fg)` keeps the `background-color: currentColor` paint in
 * slate-900 too (belt-and-suspenders — the bg sits under the now-black gif). */
body.page-tank-plan-diagram [id$="_TankPlanLayout"] img[src*="/edit.gif"] {
    color: var(--tpd-fg) !important; /* #0f172a slate-900 */
    filter: brightness(0) !important;
}

body.page-tank-plan-diagram [id$="_TankPlanLayout"] img[src*="/edit.gif"]:hover {
    /* On hover, a slight opacity dip + teal background ring gives an
     * affordance without un-blackening the icon (brightness:0 stays). */
    color: var(--tpd-primary) !important;
    opacity: 0.7;
}


/* ============================================================================
 * §6 — Tank Groups sidebar (#TdGrouping)
 *
 * Inside the right <td#TdGrouping>:
 *   - "Tank Groups" header label + m3 / bbls RadioButtonList toggle
 *   - rptTotalCapacity Repeater rendering a borderered table with Group / Tank
 *     / % / Cubic columns. Each row has inline background-color (TankColor)
 *     and color (ForeColor) painted from the DB.
 * ========================================================================== */

/* Figma: Tank Groups is OPEN content (no surrounding box) on the right of the
 * card. Drop the card-in-card border/radius; the 48px left padding is the
 * gutter from the diagram column. */
body.page-tank-plan-diagram [id$="_TdGrouping"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 0 48px !important;
    vertical-align: top;
    box-sizing: border-box;
    width: auto !important;
}

/* Header row: "Tank Groups" 18px heading LEFT + m3/bbls toggle RIGHT on one
 * line. The markup stacks <strong> + <br> + <center>(toggle); flex the cell,
 * drop the <br>, and the toggle floats to the right. */
body.page-tank-plan-diagram [id$="_TdGrouping"] > table:first-of-type {
    width: 100% !important;
    margin: 0 0 12px !important;
}

/* Direct-child combinator only — must NOT leak display:flex into the nested
 * rblUnits cells (that stacks the m3/bbls segments vertically). */
body.page-tank-plan-diagram [id$="_TdGrouping"] > table:first-of-type > tbody > tr > td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left !important;
    padding: 0 !important;
}

body.page-tank-plan-diagram [id$="_TdGrouping"] > table:first-of-type br {
    display: none !important;
}

body.page-tank-plan-diagram [id$="_TdGrouping"] > table:first-of-type center {
    display: inline-flex;
    width: auto !important;
}

body.page-tank-plan-diagram [id$="_TdGrouping"] > table:first-of-type strong {
    display: inline-block;
    font-family: var(--tpd-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--tpd-fg);
    margin: 0 !important;
    letter-spacing: 0;
}

/* rblUnits — horizontal m3 / bbls toggle, rendered as RadioButtonList with
 * RepeatDirection="Horizontal". Output is a <table> of radios + labels. */
body.page-tank-plan-diagram [id$="_rblUnits"] {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    border: 1px solid var(--tpd-border);
    border-radius: 8px;
    padding: 3px;
    background: var(--tpd-muted-bg);
    margin: 0 !important;
    width: auto !important;
    border-collapse: separate !important;
}

body.page-tank-plan-diagram [id$="_rblUnits"] td {
    padding: 0 !important;
    background: transparent;
    border: 0;
    font-family: var(--tpd-font);
}

/* Hide native radio, paint label as a pill that flips on :checked. */
body.page-tank-plan-diagram [id$="_rblUnits"] input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

body.page-tank-plan-diagram [id$="_rblUnits"] label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 30px;
    padding: 0 16px;
    border-radius: 6px;
    font-family: var(--tpd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--tpd-muted-fg);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

/* Adjacent-sibling combinator — :has() fails for RepeatLayout=Flow on legacy
 * pages but RadioButtonList outputs <input>+<label> inline, which works.
 * (MEMORY: ASP RadioButtonList selected-state selector trap) */
body.page-tank-plan-diagram [id$="_rblUnits"] input[type="radio"]:checked + label {
    background-color: var(--tpd-card-bg);
    color: var(--tpd-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.page-tank-plan-diagram [id$="_rblUnits"] label:hover {
    color: var(--tpd-fg);
}

/* Capacity table — the Repeater's HeaderTemplate emits an inline-styled
 * <table style="border:solid 1px black"> with .GridHeader top row and
 * .border-bottom: gray cells. Reskin to match grid.css conventions. */
/* Figma: borderless table — no outer frame, no header fill band, thin slate
 * row separators, generous row height. */
body.page-tank-plan-diagram [id$="_rptTotalCapacity"],
body.page-tank-plan-diagram [id$="_TdGrouping"] table[style*="border:solid 1px black"] {
    border: 0 !important;
    border-radius: 0;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: transparent !important;
    font-family: var(--tpd-font);
}

/* The .GridHeader <tr> itself carries a teal (#0d9488) fill from a global
 * refresh rule — kill it on the row so the transparent cells don't reveal it. */
body.page-tank-plan-diagram [id$="_TdGrouping"] tr.GridHeader {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

body.page-tank-plan-diagram [id$="_TdGrouping"] tr.GridHeader td,
body.page-tank-plan-diagram [id$="_TdGrouping"] tr.GridHeader th {
    background: transparent !important;
    border-bottom: 1px solid var(--tpd-border) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 10px 12px !important;
    font-family: var(--tpd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--tpd-fg);
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
}

/* Data rows — preserve inline background-color (TankColor) + foreground color
 * (ForeColor) set per row by rptTotalCapacity_ItemDataBound. Just tune the
 * separator + padding + typography (taller rows per Figma). */
body.page-tank-plan-diagram [id$="_TdGrouping"] tr[id*="trSeg"] td {
    padding: 12px !important;
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    border-bottom: 1px solid var(--tpd-border) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

body.page-tank-plan-diagram [id$="_TdGrouping"] tr[id*="trSeg"]:last-child td {
    border-bottom: 0 !important;
}

/* Grand Total row — Repeater renders the last item with inline
 * `background-color:#000099` (saturated navy) + `color:#FFFFFF` on each cell.
 * Replace with a muted slate "total" treatment: slate-100 panel + slate-900
 * text + heavier weight + slate-200 top rule. Reads as the summary without
 * fighting the teal accents elsewhere. The :last-child anchor is structural —
 * the Repeater's grand total is always the final trSeg. */
body.page-tank-plan-diagram [id$="_TdGrouping"] tr[id*="trSeg"]:last-child,
body.page-tank-plan-diagram [id$="_TdGrouping"] tr[id*="trSeg"]:last-child td {
    background-color: var(--tpd-muted-bg) !important;
    color: var(--tpd-fg) !important;
}

body.page-tank-plan-diagram [id$="_TdGrouping"] tr[id*="trSeg"]:last-child td {
    font-weight: 600;
    border-top: 1px solid var(--tpd-border) !important;
}


/* ============================================================================
 * §7 — Notes section
 *
 * The TRNotes row hosts:
 *   - .GridHeader row: " Notes" cell + Edit/Save/Cancel LinkButton cluster
 *   - body row: lblTankPlanNotes (readonly) OR txtTankPlanNotes (MultiLine
 *               TextBox, 5 rows, 100% width — known cols=20 shrink-wrap trap)
 * ========================================================================== */

body.page-tank-plan-diagram [id$="_TRNotes"] > td {
    padding-top: 24px !important;
}

/* tr.GridHeader carries a legacy navy bg from MainWhiteout (--brand-primary
 * default before refresh tokens reach it). Kill it on both the tr and its td,
 * then repaint with the refresh-friendly transparent header treatment. */
body.page-tank-plan-diagram [id$="_TRNotes"] tr.GridHeader {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--tpd-fg) !important;
}

body.page-tank-plan-diagram [id$="_TRNotes"] tr.GridHeader > td {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tpd-border) !important;
    padding: 8px 4px !important;
    font-family: var(--tpd-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpd-fg) !important;
    text-transform: none;
    letter-spacing: 0;
}

body.page-tank-plan-diagram [id$="_TRNotes"] [id$="_lblTankPlanNotes"] {
    display: block;
    padding: 12px 4px;
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--tpd-fg);
    white-space: pre-wrap;
}

/* Edit / Save / Cancel pill cluster (Notes section). */
body.page-tank-plan-diagram [id$="_TRNotes"] a.SiteLink {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    margin: 0 2px;
    border: 1px solid var(--tpd-border) !important;
    border-radius: 6px !important;
    background-color: var(--tpd-card-bg) !important;
    font-family: var(--tpd-font);
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tpd-fg) !important;
    text-decoration: none !important;
    cursor: pointer;
}

body.page-tank-plan-diagram [id$="_TRNotes"] a.SiteLink:hover {
    background-color: var(--tpd-row-hover) !important;
    border-color: var(--border-strong) !important;
}

/* Notes textarea — bust the cols=20 shrink-wrap by forcing display:block on
 * the wrapping <td> chain. (MEMORY: textarea-cols-shrinkwrap-trap) */
body.page-tank-plan-diagram [id$="_TRNotes"] [id$="_txtTankPlanNotes"] {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 100px;
    padding: 10px 12px !important;
    border: 1px solid var(--tpd-input-border) !important;
    border-radius: 6px !important;
    background-color: var(--tpd-card-bg) !important;
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--tpd-fg);
    resize: vertical;
}

body.page-tank-plan-diagram [id$="_TRNotes"] [id$="_txtTankPlanNotes"]:focus {
    outline: 2px solid var(--tpd-primary);
    outline-offset: -1px;
    border-color: var(--tpd-primary) !important;
}

/* Empty-state warning ("tank plan diagram does not exist") — the code-behind
 * injects a centered <span class="warning"> message. Soften from raw red to
 * amber chip per MEMORY/feedback (avoid loud reds inside cards). */
body.page-tank-plan-diagram [id$="_lblMessage"] span.warning {
    display: inline-block;
    margin: 24px auto;
    padding: 12px 16px;
    background-color: var(--tpd-warning-bg);
    color: var(--tpd-warning-fg);
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-family: var(--tpd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}


/* ============================================================================
 * §8 — Footer (.modPopFooter)
 *
 * ModuleTemplateV2 ships the Footer slot as a <div class="modPopFooter"> at
 * the bottom of the card's inner table. TankPlanDiagram.ascx places three
 * panels here:
 *   pnlSave → Load Sample (Milbros only) / Edit Layout / Back (LinkButtons)
 *   pnlTop  → "Top" anchor with ImageManager icon
 * Each LinkButton wraps an ImageManager that renders <img class="Img-Std-*">
 * + a text label. Convert to ghost / primary pills.
 * ========================================================================== */

body.page-tank-plan-diagram .modPopFooter {
    padding: 16px 24px !important;
    margin: 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--tpd-border) !important;
    box-shadow: none !important;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    /* Same border-box guard as the title bar — the 24px L/R padding would
     * otherwise push the footer's right edge past the card border. */
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    /* MainWhiteout paints a navy/gradient bg on the footer — wipe it. */
    background-image: none !important;
}

body.page-tank-plan-diagram .modPopFooter a,
body.page-tank-plan-diagram .modPopFooter a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid var(--tpd-border) !important;
    border-radius: 8px !important;
    background-color: var(--tpd-card-bg) !important;
    color: var(--tpd-fg) !important;
    font-family: var(--tpd-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-tank-plan-diagram .modPopFooter a:hover,
body.page-tank-plan-diagram .modPopFooter a.LinkButton:hover {
    background-color: var(--tpd-row-hover) !important;
    border-color: var(--border-strong) !important;
    color: var(--tpd-fg) !important;
}

/* LinkButton's invisible <ins>&nbsp;</ins> spacer — strip in flex containers
 * so the label stays centered. (MEMORY: linkbutton-ins-spacer-trap) */
body.page-tank-plan-diagram .modPopFooter a > ins {
    display: none !important;
}

/* btnEditTankPlan = primary teal pill (the dominant "save" / commit action). */
body.page-tank-plan-diagram .modPopFooter a.LinkButton[id$="_btnEditTankPlan"] {
    background-color: var(--tpd-primary) !important;
    border-color: var(--tpd-primary) !important;
    color: var(--tpd-primary-fg) !important;
}

body.page-tank-plan-diagram .modPopFooter a.LinkButton[id$="_btnEditTankPlan"]:hover {
    background-color: var(--tpd-primary-hover) !important;
    border-color: var(--tpd-primary-hover) !important;
    color: var(--tpd-primary-fg) !important;
}

/* ImageManager renders an <img class="Img-Std-*"> wrapped in a span; the
 * label text follows. Hide the legacy sprite so the pill stays text-only —
 * the action label alone is plenty in this density (matches inspection-
 * container.css §7 simplified footer button treatment). */
body.page-tank-plan-diagram .modPopFooter a img.Img-Std,
body.page-tank-plan-diagram .modPopFooter a img[src*="clearpixel"],
body.page-tank-plan-diagram .modPopFooter a img[src*=".gif"] {
    display: none !important;
}


/* ============================================================================
 * §9 — Settings panel (modSettings)
 *
 * Hidden by default; shown when the user picks "Settings" from the Actions
 * popup menu. Hosts:
 *   - rblSettings: vertical RadioButtonList ("Copy tank plan diagram to vessel"
 *                  / "Export Layout")
 *   - FleetVessel2: paired vessel picker for the copy destination
 *   - Footer: Cancel (.LinkButton.Secondary) + Submit (.LinkButton)
 * ========================================================================== */

body.page-tank-plan-diagram [id$="_modSettings_pnlMod"] [id$="_lblVesselName"] {
    font-family: var(--tpd-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--tpd-fg);
}

body.page-tank-plan-diagram [id$="_rblSettings"] td {
    padding: 4px 6px !important;
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--tpd-fg);
}

body.page-tank-plan-diagram [id$="_rblSettings"] input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--tpd-primary);
    margin-right: 6px;
    vertical-align: middle;
}

body.page-tank-plan-diagram [id$="_rblSettings"] label {
    cursor: pointer;
    vertical-align: middle;
}

/* Cancel button: ghost (Secondary class flips palette). */
body.page-tank-plan-diagram .modPopFooter a.LinkButton.Secondary {
    background-color: var(--tpd-card-bg) !important;
    border-color: var(--tpd-border) !important;
    color: var(--tpd-fg) !important;
}

/* Submit button in modSettings: teal primary (the LinkButton without
 * .Secondary at the end of the Settings footer). */
body.page-tank-plan-diagram [id$="_modSettings_pnlMod"] .modPopFooter
    a.LinkButton[id$="_btnSettingsSubmit"] {
    background-color: var(--tpd-primary) !important;
    border-color: var(--tpd-primary) !important;
    color: var(--tpd-primary-fg) !important;
}

body.page-tank-plan-diagram [id$="_modSettings_pnlMod"] .modPopFooter
    a.LinkButton[id$="_btnSettingsSubmit"]:hover {
    background-color: var(--tpd-primary-hover) !important;
    border-color: var(--tpd-primary-hover) !important;
}


/* ============================================================================
 * §10 — Actions popup menu (popMenuActions)
 *
 * uc:PopupMenu renders a <a class="popupMenuV2Trigger"> with "Actions" label +
 * a hidden <div class="popupMenuV2"> body anchored to the trigger. Items are
 * <a class="popupMenuItem"> with an icon span + label. Global chrome lives in
 * components.css §9.10 — only the trigger button needs page-local treatment.
 * ========================================================================== */

body.page-tank-plan-diagram .modV2TRight a.popupMenuV2Trigger,
body.page-tank-plan-diagram .modV2TRight [id$="_popMenuActions"] > a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    margin-left: 4px;
    border: 1px solid var(--tpd-border) !important;
    border-radius: 8px !important;
    background-color: var(--tpd-card-bg) !important;
    color: var(--tpd-fg) !important;
    font-family: var(--tpd-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

body.page-tank-plan-diagram .modV2TRight a.popupMenuV2Trigger:hover {
    background-color: var(--tpd-row-hover) !important;
    border-color: #cbd5e1 !important;
}

/* ActionsMenu kebab — the live trigger renders as `<a class="ActionsMenu">`
 * (not popupMenuV2Trigger), with a child <img src="/cp.gif" class="imageCP16x16">
 * that paints the legacy hamburger sprite. Swap the sprite to Lucide
 * EllipsisVertical (three vertical dots) painted as background, then hide the
 * inner shim image so it doesn't stack a phantom 16×16 box on top.
 * Pattern mirrors inspection-container.css §8. */
body.page-tank-plan-diagram a.ActionsMenu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 36px !important; /* match Email button height; icon vertically centred */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='1'/><circle cx='12' cy='5' r='1'/><circle cx='12' cy='19' r='1'/></svg>") !important;
    background-position: center center !important;
    background-size: 24px 24px !important; /* Figma: Icon / 24px / EllipsisVertical */
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

body.page-tank-plan-diagram a.ActionsMenu img.imageCP16x16,
body.page-tank-plan-diagram a.ActionsMenu img[src="/cp.gif"] {
    visibility: hidden !important;
}


/* ============================================================================
 * §9 — TankColor.aspx colour-picker DataList (TankPlanColor.ascx only)
 *
 * The DataList (CssClass="sTbl") lays out three Segregation-name + Tank-Color
 * <select> groups side by side. Header cells carry class "GridHeader" (the
 * .ascx inline <style> paints them navy #2d3663) and group-boundary cells carry
 * an inline `border-left:2px solid #fff` (specificity 1,0,0).
 *
 * QEN-8831: align to the canonical refreshed grid pattern (DESIGN.md §5.3/§5.4,
 * grid.css §7 .dxgvHeader): muted-slate header band + DARK slate-900 label,
 * 14px, NOT uppercase; no outer table frame (the .modV2 card supplies it —
 * MEMORY global-no-stray-table-frame); 1px slate row separators; NO vertical
 * column dividers (the inline white 2px borders are zeroed). No-op on
 * TankPlanDiagram — it has no .sTbl table.
 * ========================================================================== */
body.page-tank-plan-diagram .sTbl {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 0 !important;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    font-family: var(--tpd-font);
}

/* Header — muted band, slate-900 label, 14px medium, NOT uppercase. The
 * blanket border:0 also drops the inline white 2px column-group dividers; only
 * the 1px bottom rule remains (matches grid.css §7 .dxgvHeader). */
body.page-tank-plan-diagram .sTbl .GridHeader {
    background-color: var(--tpd-muted-bg) !important;
    background-image: none !important;
    color: var(--tpd-fg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tpd-border) !important;
    text-align: left !important;
    vertical-align: middle !important;
}

/* Data cells — 14px Inter slate-900, 1px slate row separators, no vertical
 * dividers, vertically centred so the <select> sits inline with the label. */
body.page-tank-plan-diagram .sTbl td {
    padding: 8px 16px !important;
    font-family: var(--tpd-font);
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--tpd-fg);
    border: 0 !important;
    border-bottom: 1px solid var(--tpd-border) !important;
    vertical-align: middle !important;
    text-align: left !important;
}

/* Last row drops its separator so it doesn't double the card's bottom edge. */
body.page-tank-plan-diagram .sTbl tr:last-child > td {
    border-bottom: 0 !important;
}

/* Tank-color <select> — SelectShim already paints the 32px slate-bordered
 * refresh chrome; just pin the height/type so it stays inline with the label. */
body.page-tank-plan-diagram .sTbl select {
    height: 32px;
    font-family: var(--tpd-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--tpd-fg);
}

/* Column alignment — each group renders FOUR cells in a fixed order:
 *   [auto-td (DataList item wrapper)] [hidden-ID td] [name] [select]
 * The "Segregation" header is colspan=3 (spans the two leading cells + the name),
 * so its label sits at the group's left edge while the segregation NAMES are pushed
 * ~64px right by the two leading cells. Those cells hold nothing visible (the
 * DataList wrapper td + the lblTankSegregationID/lblColorID labels which are
 * Visible="False"), but they carry whitespace text nodes from the markup so CSS
 * `:empty` does NOT match them. Target them positionally instead: with 4 cells per
 * group the spacers are children 1 & 2 of each group (4n+1, 4n+2); :not(.GridHeader)
 * excludes the header row (whose cells carry GridHeader + colspan, different counts).
 * Collapsing them slides the name cell to the group's left edge so its text lines up
 * under the "Segregation" header. Name (4n+3) and select (4n) cells are untouched. */
body.page-tank-plan-diagram .sTbl td:not(.GridHeader):nth-child(4n+1),
body.page-tank-plan-diagram .sTbl td:not(.GridHeader):nth-child(4n+2) {
    padding: 0 !important;
    width: 0 !important;
    border-bottom: 0 !important;
}


/* ----------------------------------------------------------------------------
 * §9b — TankColor.aspx title-bar vessel selector (right-aligned)
 *
 * TankColor was NOT migrated to the SubHeader selector row that TankPlanDiagram
 * uses (no .tpd-selector-row here). Its markup keeps the legacy in-title layout:
 *   <div style="width:850px">
 *     <span class="StdPadding" style="float:left">Vessel name: <FleetVessel/> Show</span>
 *   </div>
 *   <div style="padding-top:8px"> Actions kebab </div>
 * The fixed 850px width + float:left leaves a large dead gap between "Show" and the
 * kebab. Collapse the width and drop the float so the cluster shrinks to content;
 * modV2TitleContainer is justify:space-between, so modV2TRight then rides flush to
 * the right edge — "Vessel name: … Show" sits next to the kebab. No-op on
 * TankPlanDiagram (its selector is in .tpd-selector-row, not this fixed-width div).
 * -------------------------------------------------------------------------- */
body.page-tank-plan-diagram .modV2TRight > div[style*="width:850px"] {
    width: auto !important;
    display: inline-flex;
    align-items: center;
}

body.page-tank-plan-diagram .modV2TRight > div[style*="width:850px"] > span.StdPadding {
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tpd-font);
    font-size: 14px;
    color: var(--tpd-fg);
    white-space: nowrap;
}

/* Show button — already teal via the global .LinkButton rule, but renders
 * display:inline h30; give it the h36 pill box so it centres with the selects. */
body.page-tank-plan-diagram .modV2TRight > div[style*="width:850px"] a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px !important;
    font-family: var(--tpd-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-transform: none !important;
}

body.page-tank-plan-diagram .modV2TRight > div[style*="width:850px"] a.LinkButton > ins {
    display: none !important;
}