/* ==========================================================================
   Loadline Detail page (LoadLineDetail.aspx → DesktopModules/Q88/LoadLineDetails.ascx)
   --------------------------------------------------------------------------
   Scope: `body.page-loadline-detail` (set in Default.Master.cs when the
   request URL is LoadLineDetail.aspx). No `page-grid` co-class — this is a
   form, not an ASPxGridView.

   Same archetype as Certificate Document Detail (certificates.css
   §page-certificate-detail): a uc:ModuleTemplateV2 wraps a two-column layout
   built from the SAME legacy classes (sTbl / tblCertDates / tblCertAttrOther
   / qDiv / grayContentF8). The chrome-stripping + card + input-chip patterns
   below are ported from that proven skin.

   KEY DIVERGENCES from the certificate skin (why this is its own scope, not a
   shared selector list):
     1. `tblCertDates` is reused THREE times here — the Dates grid
        (`:has(input.jaQCal)`), the Attachments table (`#upAttachments …`), and
        the full-width Re-Measured Loadline Questions table
        (`.modV2Main > table.tblCertDates`). The cert skin injects a
        "Basic Information" caption on every `tblCertDates::before`; that would
        be wrong here, so we KEEP each table's real `trHdr` header instead.
     2. Loadline KEEPS the Modified Date / Modified By metadata in the title
        right (cert hides it).
     3. SubHeader is a Loadline-Status radio + Description input + Add action
        (cert has a certificate-name dropdown).
     4. Footer is scoped to `#pnlFooter` (the ModuleTemplateV2 footer) + the
        specific button id-suffixes, because `.modPopFooter` is ALSO used by
        the cookie-consent banner and by the three nested `<uc:Modal>` confirm
        dialogs (which already get global components.css §9.10 chrome).

   All overrides chain `body.page-loadline-detail` (0,1,x) to beat the ascx's
   inline-block `<style>` rules and source-order ties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1  Card chrome — ModuleTemplateV2 wrapper → .q88-card primitive (§16.1)
   -------------------------------------------------------------------------- */
body.page-loadline-detail .modV2 {
    position: relative;
    background: var(--surface-raised, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 12px;
    box-shadow: none;
    padding: 24px 28px;
    margin: 24px 48px;
    /* Beat `width: 100%` from .sidebar-nav .modV2 (navigation.css) so the
       48px L/R margins reduce the box instead of pushing it past the
       .q88-content right edge. */
    width: auto;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary, #0f172a);
}

/* Strip any legacy mod chrome (red title bar, corner gradients). Harmless if
   the element isn't emitted on this ModuleTemplateV2 variant. */
body.page-loadline-detail .modV2 .modV2TitleBg,
body.page-loadline-detail .modV2 .modV2TitleBgLeft,
body.page-loadline-detail .modV2 .modV2TitleBgRight,
body.page-loadline-detail .modV2 .modV2TitleBg2,
body.page-loadline-detail .modV2 .modV2TitleCornerLeft,
body.page-loadline-detail .modV2 .modV2TitleCornerRight,
body.page-loadline-detail .modV2 .modV2BodyBg,
body.page-loadline-detail .modV2 .modV2FooterBg,
body.page-loadline-detail .modV2 .modV2TopLeftCorner,
body.page-loadline-detail .modV2 .modV2TopRightCorner,
body.page-loadline-detail .modV2 .modV2BottomLeftCorner,
body.page-loadline-detail .modV2 .modV2BottomRightCorner {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
}

/* Suppress the stray <br> the ascx ships around ModuleTemplateV2 */
body.page-loadline-detail .modV2 + br,
body.page-loadline-detail > br:first-of-type {
    display: none;
}

/* --------------------------------------------------------------------------
   §2  Title row — vessel name (left) + Modified Date/By metadata (right)
   -------------------------------------------------------------------------- */
body.page-loadline-detail .modV2TitleContainer {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
body.page-loadline-detail .modV2Title {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-family: inherit;
    color: var(--text-primary, #0f172a) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    height: auto !important;
}

/* Modified Date / Modified By — kept as small muted metadata (cert hides this;
   loadline keeps it). The legacy markup is a little table with bold labels. */
body.page-loadline-detail .modV2TRight {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: auto !important;
    flex: 0 0 auto;
}
body.page-loadline-detail .modV2TRight table,
body.page-loadline-detail .modV2TRight tbody,
body.page-loadline-detail .modV2TRight tr,
body.page-loadline-detail .modV2TRight td {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 0 6px !important;
    font-family: inherit;
    font-size: 12px !important;
    line-height: 18px !important;
    color: var(--text-muted, #64748b) !important;
    text-align: right;
    vertical-align: middle;
}
body.page-loadline-detail .modV2TRight label,
body.page-loadline-detail .modV2TRight b {
    font-weight: 600 !important;
    color: var(--text-secondary, #475569) !important;
}

/* --------------------------------------------------------------------------
   §3  SubHeader — Loadline Status radios + Description input + Add action
   -------------------------------------------------------------------------- */
body.page-loadline-detail .modV2SubHeader {
    background: transparent !important;
    border: 0 !important;
}
body.page-loadline-detail .modV2SubHeader > div {
    /* QEN-8831 (feedback #5): 24px gap between the header region (title +
       status/description) and the body — no divider rule, gap carries it. */
    padding: 0 0 24px 0 !important;
}
body.page-loadline-detail .modV2SubHeader table {
    border-collapse: collapse;
    width: auto !important;
}
body.page-loadline-detail .modV2SubHeader td {
    padding: 0 8px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    vertical-align: middle !important;
}
/* Field labels ("Loadline Status:", "Description:") */
body.page-loadline-detail .modV2SubHeader td.NormalBold {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary, #475569) !important;
    white-space: nowrap;
    width: auto !important;
    padding: 0 8px 0 24px !important;
}
body.page-loadline-detail .modV2SubHeader td.NormalBold:first-child {
    padding-left: 0 !important;
}
/* Radio buttons (Active / Inactive) */
body.page-loadline-detail .modV2SubHeader input[type="radio"] {
    accent-color: var(--button-primary-bg, #0d9488);
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
    vertical-align: middle;
}
body.page-loadline-detail .modV2SubHeader input[type="radio"] + label,
body.page-loadline-detail .modV2SubHeader label {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    margin-right: 14px;
    vertical-align: middle;
}
/* Description text input → §16.8 chip */
body.page-loadline-detail .modV2SubHeader input.NormalTextBox,
body.page-loadline-detail .modV2SubHeader input[type="text"] {
    height: 32px;
    width: 280px !important;
    max-width: 100%;
    padding: 4px 12px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--surface-raised, #ffffff) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
    vertical-align: middle;
}
body.page-loadline-detail .modV2SubHeader input.NormalTextBox:focus,
body.page-loadline-detail .modV2SubHeader input[type="text"]:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12) !important;
}
/* "(max 25 characters)" disclaimer + read-only description label */
body.page-loadline-detail .modV2SubHeader [id$="_lblDescriptionDisclamer"],
body.page-loadline-detail .modV2SubHeader [id$="_lblDescription"] {
    font-size: 12px !important;
    color: var(--text-muted, #64748b) !important;
    margin-left: 6px;
}

/* Add-new-loadline action — legacy `Img-Std-Add` sprite → Lucide CirclePlus
   icon button (mirrors the cert skin's plus affordance). */
body.page-loadline-detail .modV2SubHeader a.Img-Std.Img-Std-Add,
body.page-loadline-detail .modV2SubHeader a.Img-Std-Add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 0 0 8px !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary, #0f172a) !important;
    line-height: 0 !important;
    text-decoration: none !important;
    vertical-align: middle;
}
body.page-loadline-detail .modV2SubHeader a.Img-Std.Img-Std-Add > ins,
body.page-loadline-detail .modV2SubHeader a.Img-Std-Add > ins,
body.page-loadline-detail .modV2SubHeader a.Img-Std-Add img {
    display: none !important;
}
body.page-loadline-detail .modV2SubHeader a.Img-Std.Img-Std-Add::before,
body.page-loadline-detail .modV2SubHeader a.Img-Std-Add::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>") no-repeat center / 22px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>") no-repeat center / 22px;
}
body.page-loadline-detail .modV2SubHeader a.Img-Std.Img-Std-Add:hover,
body.page-loadline-detail .modV2SubHeader a.Img-Std-Add:hover {
    background: var(--raw-slate-100, #f1f5f9) !important;
}

/* --------------------------------------------------------------------------
   §4  Main body + two-column layout + shared table reset (KEEP trHdr headers)
   -------------------------------------------------------------------------- */
body.page-loadline-detail .modV2Main {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    color: var(--text-primary, #0f172a);
}
body.page-loadline-detail .modV2Main > div {
    padding: 0 !important;
}

/* Outer 2-column tblCert → fluid 50/50, drop the spacer cell. The first <tr>
   (data-changed message banner, colspan=3) is left untouched; the layout row
   is the SECOND <tr> (`tr + tr`). */
body.page-loadline-detail table.tblCert {
    width: 100% !important;
    /* `auto` (not `fixed`): the first <tr> is a colspan=3 message banner, so
       fixed layout can't derive the 50/50 column widths from it and collapses
       the columns. Auto layout honors the explicit 50% widths on the real
       layout row below. */
    table-layout: auto;
    border-collapse: collapse;
    margin: 0 0 8px 0;
}
body.page-loadline-detail table.tblCert > tbody > tr + tr > td {
    vertical-align: top !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-loadline-detail table.tblCert > tbody > tr + tr > td:nth-child(1) {
    /* Left column (Dates grid + Other Information) gets the larger share — the
       Dates grid needs room for date + calendar-icon chips across 3 columns.
       60% (was 55%): the global datePicker leading-icon chip anatomy spends
       ~24px on icon+gap, so the date columns need the extra room to keep
       "Sep 02, 2024" unclipped down to ~1366px viewports. The right column
       (Attachments / Comments) shrinks gracefully. */
    width: 60%;
    padding: 0 20px 0 0 !important;
}
body.page-loadline-detail table.tblCert > tbody > tr + tr > td:nth-child(2) {
    display: none !important; /* 40px spacer — replaced by the column padding */
}
body.page-loadline-detail table.tblCert > tbody > tr + tr > td:nth-child(3) {
    width: 40%;
    padding: 0 0 0 20px !important;
}

/* Shared sTbl reset — drop the legacy gray bg + #adadad border kit. Header
   bands and per-row borders are layered back per-table below. */
body.page-loadline-detail table.sTbl {
    background: transparent !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 0 !important;
    margin: 0 0 20px 0;
    table-layout: auto;
}
body.page-loadline-detail table.sTbl > tbody > tr > td {
    border: 0 !important;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary, #0f172a);
    background: transparent;
    vertical-align: middle;
}

/* trHdr header band — KEPT for the functional COLUMN-header data tables
   (Dates / Attachment / Re-Measured), whose column labels are meaningful.
   Faint slate band, slate-600 600-weight text, rounded top corners.
   QEN-8831 (feedback #5): the legacy `border-bottom:1px #adadad` divider line
   under every header is removed — we don't want section rule lines; vertical
   gaps carry the separation instead. The slate band still distinguishes a
   column-header row from its data, so no line is needed. */
body.page-loadline-detail table.sTbl > tbody > tr.trHdr > td {
    background: var(--raw-slate-50, #f8fafc) !important;
    color: var(--text-secondary, #475569) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0.01em;
    border: 0 !important;
    padding: 8px 12px !important;
    text-align: left !important;
    vertical-align: middle !important;
}
/* QEN-8831 (feedback #4): the two SINGLE-CELL section-title headers
   ("Other Information" + "Comments") are NOT column headers — they're section
   titles. Render them as plain bold text on the white card (no slate band, no
   divider), mirroring the Certificate Detail twin's comment/section heading.
   The multi-cell Dates/Attachment/Re-Measured headers above keep their band.
   QEN-8865: the Comments table is matched structurally (bare `.sTbl`, no
   `.tblCertDates`/`.tblCertAttrOther` companion class) rather than via
   `:has(textarea)` — Read-Only mode swaps `txtComments` for a plain
   `asp:Literal` with no textarea, which left the grey band on in that mode. */
body.page-loadline-detail table.tblCertAttrOther > tbody > tr.trHdr > td,
body.page-loadline-detail .modV2Main table.sTbl:not(.tblCertDates):not(.tblCertAttrOther) > tbody > tr.trHdr > td {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--text-primary, #0f172a) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 0 0 8px 0 !important;
}
body.page-loadline-detail table.sTbl > tbody > tr.trHdr > td:first-child {
    border-top-left-radius: 8px;
}
body.page-loadline-detail table.sTbl > tbody > tr.trHdr > td:last-child {
    border-top-right-radius: 8px;
}

/* "instructions" / "instructionsWBg" legacy blue centered text → muted empty
   state (e.g. "No Attachments"). */
body.page-loadline-detail .modV2Main .instructions,
body.page-loadline-detail .modV2Main .instructionsWBg {
    background: var(--raw-slate-50, #f8fafc) !important;
    color: var(--text-muted, #64748b) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 16px !important;
    text-align: center;
    border-radius: 0 0 8px 8px;
}

/* --------------------------------------------------------------------------
   §5  Dates grid (the only tblCertDates with calendar inputs)
   -------------------------------------------------------------------------- */
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) {
    table-layout: fixed !important;
    margin-bottom: 12px !important;
}
/* Date chips fill their column. Chip ANATOMY (flex row, 36px height, leading
   Lucide calendar ::before, left-anchored transparent jaQCal click overlay,
   teal focus ring) now comes from the GLOBAL datePicker.css trigger chrome
   (`body.sidebar-nav .qDiv:has(> input.qCal)`, "Trigger anatomy — general
   scope") — the same chrome used by Create/View Questionnaire, Terminal
   Vetting and the certificate-detail twin. QEN-8801: this file's original
   32px right-icon chip pre-dated that global block and half-collided with it
   (height/padding from datePicker, icon/input from here → 36px boxes with
   doubled icons and off-grid offsets). This file now only sizes the chip to
   its column and leaves the anatomy to datePicker.css. */
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) .qDiv {
    width: 100% !important;
    max-width: 100% !important;
    /* Slightly tighter interior than the global `padding: 0 12px; gap: 8px`
       — these chips sit in narrow grid columns, and the freed pixels keep the
       date text unclipped at ~1366px viewports. (0,4,3) beats the datePicker
       general-scope (0,3,2) without !important. */
    padding: 0 8px;
    gap: 6px;
}
/* Row labels (Issued / Intermediate / Annual / Expires) */
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr:not(.trHdr) > td:first-child {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary, #475569) !important;
    width: 84px !important;
    padding: 8px 12px 8px 0 !important;
    text-align: left !important;
}
/* Date columns (Last / Next) get the room — a date + calendar icon needs
   ~150px. The Window column only holds a "±N Months" dropdown, so it's pinned
   narrow (116px) rather than taking an equal third (which clipped the dates). */
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr > td:nth-child(2),
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr > td:nth-child(3) {
    /* `auto` (was `calc((100% - 84px - 116px) / 2)`): under table-layout:fixed
       the calc misresolved (each date column landed ~24px short and the
       window column ~24px wide, clipping dates at laptop widths). With the
       label (84) and Window (116) columns pinned, fixed layout splits the
       remainder equally between these two auto columns — the exact intent. */
    width: auto !important;
}
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr > td:nth-child(4) {
    width: 116px !important;
}
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr.trHdr > td:first-child {
    width: 84px !important;
}
/* Data cells — let the date wrapper fill, 48px row stride. 8px horizontal
   (was 12): chips carry their own borders, and the slack keeps the dates
   unclipped in the narrow columns. */
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr:not(.trHdr) > td {
    padding: 8px 8px !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 20px;
}
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr:not(.trHdr) {
    height: 48px;
}
/* Kill whitespace-text-node line boxes in the input cells (the ascx renders
   the qDiv with adjacent newlines + hidden siblings that bloat row height). */
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr:not(.trHdr) > td:not(:first-child) {
    font-size: 0;
    line-height: 0;
}
body.page-loadline-detail table.tblCertDates:has(input.jaQCal) > tbody > tr:not(.trHdr) > td:not(:first-child) > * {
    font-size: 14px;
    line-height: 20px;
}
/* Per-row status sprites (jqImgValid/Tentative/Expired/Clear) — legacy 13×21
   sprites that stack above the qDiv and bloat the row. Hide in the grid. */
body.page-loadline-detail table.tblCertDates img.jqImgValid,
body.page-loadline-detail table.tblCertDates img.jqImgTentative,
body.page-loadline-detail table.tblCertDates img.jqImgExpired,
body.page-loadline-detail table.tblCertDates img.jqImgClear {
    display: none !important;
}
/* Drop the 1px filler footer row used as a horizontal rule */
body.page-loadline-detail table.tblCertDates > tbody > tr:last-child > td[colspan="4"],
body.page-loadline-detail table.tblCertAttrOther > tbody > tr:last-child > td[colspan="3"] {
    display: none !important;
}

/* qDiv wrapper inside date / other-info cells → flex input chip (§16.8).
   Only the Dates grid and Other Information carry qDivs, so `.tblCertDates
   .qDiv` and `.tblCertAttrOther .qDiv` never reach the Attachments /
   Re-Measured tables. */
body.page-loadline-detail .tblCertDates .qDiv,
body.page-loadline-detail .tblCertAttrOther .qDiv {
    position: relative;
    display: flex !important;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    height: 32px;
    background: var(--surface-raised, #ffffff);
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0));
    border-radius: 8px;
    padding: 0 8px 0 12px;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.page-loadline-detail .tblCertDates .qDiv:focus-within,
body.page-loadline-detail .tblCertAttrOther .qDiv:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12);
}
/* Date-input (`.qCal`) text styling, the calendar glyph, and the transparent
   `input.jaQCal` click overlay are ALL owned by datePicker.css's general-scope
   trigger chrome (see the §5 chip note above). The per-page right-pinned
   overlay + ::after icon + ::before suppression that used to live here were
   removed in QEN-8801 — they fought the global anatomy (doubled icons,
   30px-vs-24px inputs, right-vs-left click targets). */

/* Window column — ddl + lb link rendered as input chip */
body.page-loadline-detail .tblCertDates select,
body.page-loadline-detail .tblCertDates .qDdl {
    width: 100% !important;
    height: 32px !important;
    max-width: 100%;
    padding: 4px 32px 4px 12px !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    background-color: var(--surface-raised, #ffffff) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Let the Window qDiv fill its cell instead of the legacy fixed width */
body.page-loadline-detail .tblCertDates td:nth-child(4) .qDiv {
    width: 100% !important;
    max-width: 100% !important;
}
/* Nested-border kill: zero the inner .qDdl border so only the qDiv chrome shows */
body.page-loadline-detail .tblCertDates .qDiv .qDdl,
body.page-loadline-detail .tblCertDates .qDiv select.qDdl {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 4px 28px 4px 4px !important;
}
/* Window "click-to-edit" link (lbWindowAnnual / lbWindowExpires) — an
   EDIT-MODE-ONLY toggle that reveals the window <select>. The select already
   renders the value as a chip alongside it, so the link is a redundant
   duplicate ("2 Months" twice). Hide it; the select carries the value. (The
   read-only VIEW mode uses the ltWindow* literal, not this link.) */
body.page-loadline-detail .tblCertDates [id*="_lbWindow"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   §6  Other Information (tblCertAttrOther) — label / value rows
   -------------------------------------------------------------------------- */
body.page-loadline-detail table.tblCertAttrOther {
    margin-bottom: 20px;
}
body.page-loadline-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td {
    padding: 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    vertical-align: middle !important;
    /* The legacy markup centers the value cells (presentational align attr),
       so inline-block controls (select / NormalTextBox) floated ~28px right
       of the block-level qDiv chips. Left-align everything onto one column
       edge (QEN-8801 "Other Information labels and fields misaligned"). */
    text-align: left;
}
body.page-loadline-detail table.tblCertAttrOther > tbody > tr:not(.trHdr) > td:first-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #475569) !important;
    width: 200px;
    padding-left: 12px !important;
}
/* Inputs / selects in Other Information → chips. The code-behind stamps an
   INLINE `style="width:260px; height:20px; border-radius:4px"` on these
   controls, which only !important can beat — hence the !important height /
   width below (legacy-inline-style escape hatch, not specificity war). Width
   tracks the cell up to the same 320px cap as the qDiv chips so every row's
   control shares both edges of the value column. */
/* `:not(.qCal):not(.NormalDateBox)` keeps the date text-input INSIDE the
   qDiv calendar chip out — datePicker.css flattens it borderless there, and
   an !important border/height here would paint a nested box inside the chip. */
body.page-loadline-detail table.tblCertAttrOther input[type="text"]:not(.qCal):not(.NormalDateBox),
body.page-loadline-detail table.tblCertAttrOther input.NormalTextBox:not(.qCal):not(.NormalDateBox),
body.page-loadline-detail table.tblCertAttrOther select {
    height: 32px !important;
    width: 100% !important;
    max-width: 320px;
    padding: 4px 12px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--surface-raised, #ffffff) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
body.page-loadline-detail table.tblCertAttrOther input[type="radio"] {
    accent-color: var(--button-primary-bg, #0d9488);
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
    vertical-align: middle;
}
/* Radio option labels (Certificate On Board: Yes / No / N/A) — the legacy
   RadioButtonList emits input+label pairs back-to-back, so each label touched
   the next radio ("Yes◯No◯N/A"). 14px breathing room after every option
   (mirrors the §3 SubHeader radio spacing), none after the last. */
body.page-loadline-detail table.tblCertAttrOther input[type="radio"] + label {
    margin-right: 14px;
    vertical-align: middle;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
}
body.page-loadline-detail table.tblCertAttrOther input[type="radio"] + label:last-child {
    margin-right: 0;
}
/* Read-only value wrapper (.qDivRo, e.g. "Certificate On Board" radios) —
   legacy ships a gray #f5f5f5 pill; flatten it so the value/radios read on the
   white card. */
body.page-loadline-detail .tblCertAttrOther .qDiv.qDivRo,
body.page-loadline-detail .tblCertAttrOther .qDivRo {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
}

/* qDiv inside Other Information — flatten the inner control border */
body.page-loadline-detail .tblCertAttrOther .qDiv {
    width: 100% !important;
    max-width: 320px;
}
body.page-loadline-detail .tblCertAttrOther .qDiv .qTxt,
body.page-loadline-detail .tblCertAttrOther .qDiv .qDdl,
body.page-loadline-detail .tblCertAttrOther .qDiv .qTxtConvert {
    width: 100% !important;
    max-width: 100%;
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    height: 30px !important;
}
body.page-loadline-detail .tblCertAttrOther .qDiv .qDdl {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 28px !important;
}

/* --------------------------------------------------------------------------
   §7  Attachments table + Comments (right column)
   -------------------------------------------------------------------------- */
body.page-loadline-detail #upAttachments table.tblCertDates {
    margin-top: 4px;
}
body.page-loadline-detail #upAttachments table.tblCertDates > tbody > tr.trHdr > td {
    font-weight: 600 !important;
    font-size: 12px !important;
}
body.page-loadline-detail #upAttachments table.tblCertDates > tbody > tr:not(.trHdr) > td {
    padding: 10px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--raw-slate-100, #f1f5f9) !important;
    vertical-align: middle !important;
    text-align: left !important;
}
body.page-loadline-detail #upAttachments table.tblCertDates > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
body.page-loadline-detail #upAttachments input[type="checkbox"] {
    accent-color: var(--button-primary-bg, #0d9488);
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/* Publish / Private permission icons → Lucide lock masks */
body.page-loadline-detail .jqAccessLink img.Img-Std-Publish,
body.page-loadline-detail .jqAccessLink img.Img-Std-Private,
body.page-loadline-detail #upAttachments .Img-Std-Publish,
body.page-loadline-detail #upAttachments .Img-Std-Private {
    background-image: none;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 16px;
            mask-size: 16px;
    width: 16px !important;
    height: 16px !important;
}
body.page-loadline-detail .jqAccessLink img.Img-Std-Publish,
body.page-loadline-detail .Img-Std-Publish {
    background-color: var(--raw-teal-600, #0d9488) !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 9.9-1'/></svg>") no-repeat center / 16px !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 9.9-1'/></svg>") no-repeat center / 16px !important;
}
body.page-loadline-detail .jqAccessLink img.Img-Std-Private,
body.page-loadline-detail .Img-Std-Private {
    background-color: var(--text-muted, #64748b) !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") no-repeat center / 16px !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") no-repeat center / 16px !important;
}

/* "Attach File" / "Replace" upload buttons — soften the legacy widget. Don't
   force display (JS toggles show/hide between the two). */
body.page-loadline-detail .qq-upload-button,
body.page-loadline-detail .qq-upload-replace-button {
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--surface-raised, #ffffff) !important;
    color: var(--text-primary, #0f172a) !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
}
body.page-loadline-detail .qq-upload-button:hover,
body.page-loadline-detail .qq-upload-replace-button:hover {
    background: var(--raw-slate-100, #f1f5f9) !important;
}

/* Attachment selected-actions message box (Email | Download | Delete) */
body.page-loadline-detail .attachmentsSelectedMessageBox {
    background: var(--surface-notice, #fef9c3) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0));
    border-radius: 8px;
    padding: 10px 12px !important;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    margin: 0 0 12px 0 !important;
}

/* Comments — heading + single textarea card (structural match, see QEN-8865
   note above — must apply in both Edit and Read-Only rendering). */
body.page-loadline-detail .modV2Main table.sTbl:not(.tblCertDates):not(.tblCertAttrOther) {
    background: transparent !important;
    margin-top: 4px;
}
body.page-loadline-detail .modV2Main table.sTbl:not(.tblCertDates):not(.tblCertAttrOther) > tbody > tr:not(.trHdr) > td {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
body.page-loadline-detail .modV2Main textarea[id$="_txtComments"],
body.page-loadline-detail .modV2Main #txtComments {
    width: 100% !important;
    min-height: 96px;
    height: 96px;
    padding: 10px 12px !important;
    /* QEN-8831 (feedback #4): the "Comments" title above is now plain text (no
       slate band card-top), so the textarea is a standalone bordered box —
       full border + full radius (was border-top:0 / bottom-only radius when it
       sat under the grey header band). */
    border: 1px solid var(--raw-slate-200, var(--border-default, #e2e8f0)) !important;
    border-radius: 8px !important;
    background: var(--surface-raised, #ffffff) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    resize: vertical;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
body.page-loadline-detail .modV2Main textarea[id$="_txtComments"]:focus,
body.page-loadline-detail .modV2Main #txtComments:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12) !important;
}
/* QEN-8831 (feedback #4): the legacy markup nests the textarea in
   `<div style="padding:6px"><div class="qDiv"><textarea>`. That outer 6px div
   pushed the textarea 6px right of the now-plain-text "Comments" title (which
   sits at the cell edge). Zero it so the title and the textarea box share the
   column's left edge — same title↔content alignment as the left column's
   "Other Information" section. (`td > div` only matches the data-row wrapper;
   the trHdr title cell holds bare text, no div.) */
body.page-loadline-detail .modV2Main table.sTbl:not(.tblCertDates):not(.tblCertAttrOther) > tbody > tr:not(.trHdr) > td > div {
    padding: 0 !important;
}
/* Flatten the generic .qDiv wrapper around the Comments textarea (nested-
   border "input inside an input" — the qDiv-skin rules above only target the
   .tblCert* qDivs). */
body.page-loadline-detail .modV2Main .qDiv:has(> textarea[id$="_txtComments"]),
body.page-loadline-detail .modV2Main .qDiv:has(> #txtComments) {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   §8  Re-Measured Loadline Questions — full-width table below the columns
   (`.modV2Main > table.tblCertDates`: the only tblCertDates that is a direct
   child of modV2Main; the Dates grid is nested inside table.tblCert).
   -------------------------------------------------------------------------- */
body.page-loadline-detail .modV2Main > table.tblCertDates {
    margin-top: 8px;
    /* QEN-8831 (feedback #5): zero the legacy inline `margin-bottom:15px` on the
       Re-Measured table (the last body element) so the footer's own 24px
       margin-top is the sole body→footer gap (was 15+24 = 39px). */
    margin-bottom: 0 !important;
    table-layout: auto;
}
body.page-loadline-detail .modV2Main > table.tblCertDates > tbody > tr:not(.trHdr) > td {
    padding: 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--raw-slate-100, #f1f5f9) !important;
    vertical-align: middle !important;
}
body.page-loadline-detail .modV2Main > table.tblCertDates > tbody > tr:not(.trHdr) > td:first-child {
    font-size: 13px;
    color: var(--text-primary, #0f172a) !important;
}
/* Answer input + unit / aggregated columns */
body.page-loadline-detail .modV2Main > table.tblCertDates input.NormalTextBox,
body.page-loadline-detail .modV2Main > table.tblCertDates input[type="text"] {
    height: 32px;
    width: 120px !important;
    max-width: 100%;
    padding: 4px 12px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--surface-raised, #ffffff) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
body.page-loadline-detail .modV2Main > table.tblCertDates input.NormalTextBox:focus,
body.page-loadline-detail .modV2Main > table.tblCertDates input[type="text"]:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12) !important;
}
/* Drop the 1px filler footer row (colspan=5) */
body.page-loadline-detail .modV2Main > table.tblCertDates > tbody > tr:last-child > td[colspan="5"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   §9  Footer — Cancel / Delete (ghost) + Save (teal).
   The ModuleTemplateV2 footer panel id is `..._mod_pnlFooter` (the control is
   `ID="mod"`). `[id$='_mod_pnlFooter']` matches ONLY it — the nested <uc:Modal>
   confirm dialogs end in `_modFormChanged_pnlFooter` etc. and the cookie banner
   in `_modalTOSConsent_pnlFooter`, so they keep the global §9.10 chrome.
   Button chrome is keyed off the three unique button id-suffixes (NOT a footer
   descendant selector) so the nested modal buttons are never touched.
   -------------------------------------------------------------------------- */
body.page-loadline-detail [id$="_mod_pnlFooter"] {
    background: transparent !important;
    /* QEN-8831 (feedback #5): no divider rule above the footer buttons — a flat
       24px gap separates the body from the footer (was a 1px slate-100 border-top
       + 16/16 padding/margin). */
    border: 0 !important;
    padding: 0 !important;
    margin: 24px 0 0 0 !important;
}
body.page-loadline-detail [id$="_mod_pnlFooter"] > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 !important;
    background: transparent !important;
}
/* Button reset — the three footer buttons only. The `.modPopFooter` ancestor
   lifts specificity to (0,4,2) so it beats the global components.css §9.10
   `.LinkButton` chrome (the unique id-suffix still keeps nested modal buttons
   out — they carry different suffixes). */
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbCancelLoadLine"],
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbDeleteLoadLine"],
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbSaveLoadLine"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    /* Longhand border (NOT `border: ... var()` shorthand) to dodge the
       shorthand+var+!important parser trap that was dropping the colour
       declarations below. */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: transparent !important;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
}
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbCancelLoadLine"] > ins,
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbDeleteLoadLine"] > ins,
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbSaveLoadLine"] > ins,
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbCancelLoadLine"] img,
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbDeleteLoadLine"] img,
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbSaveLoadLine"] img {
    display: none !important;
}
/* Cancel + Delete = ghost (outline). Hardcoded hex + longhands only — var()
   in a shorthand+!important silently dropped these (see reset note above). The
   hexes mirror the resolved refresh tokens (slate-200 border, slate-900 text,
   slate-100 hover). */
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbCancelLoadLine"],
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbDeleteLoadLine"] {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbCancelLoadLine"]:hover,
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbDeleteLoadLine"]:hover {
    background-color: var(--surface-muted) !important;
}
/* Save = teal primary (teal-600 / teal-700 hover) */
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbSaveLoadLine"] {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
body.page-loadline-detail .modPopFooter a.LinkButton[id$="_lbSaveLoadLine"]:hover {
    background-color: var(--button-primary-hover) !important;
}
/* Keep the hidden delete-proxy LinkButtons hidden */
body.page-loadline-detail [id$="_lbDeleteNormal"],
body.page-loadline-detail [id$="_lbDeleteProhibited"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   §10  Misc — data-changed notice banner; border helper softening
   -------------------------------------------------------------------------- */
/* The "Please review dates…" banner is hidden by default (display:none on the
   inner div). When shown, it already carries .q88-bg-notice; just give the
   wrapping cell breathing room and full width. */
body.page-loadline-detail table.tblCert > tbody > tr > td[colspan="3"] {
    padding: 0 0 12px 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center;
}
/* Soften the legacy #adadad border helper classes (border-left/right/bottom) */
body.page-loadline-detail .modV2Main .borderRight,
body.page-loadline-detail .modV2Main .borderLeft,
body.page-loadline-detail .modV2Main .borderBottom {
    border-color: var(--raw-slate-100, #f1f5f9) !important;
}

/* --------------------------------------------------------------------------
   §11  Attachment Details hover popup (#TipPopup / #ArchivePopup) —
   LoadlineDocumentAttachmentGeneratePopup / archiveAttachmentGeneratePopup
   build the SAME .toolTipPopupContainer markup (navy .tL/.tM/.tR title bar,
   .contentPreview/.StdPadding body, .bL/.bM/.bR footer rule) that
   certificates.css's "New Certificate/Document modal" help tooltip
   (#HelpToolTipPopup) already re-skins for the twin Certificate Detail page.
   Neither page had ever re-skinned the MAIN attachment-list instance of this
   chrome — it was still rendering fully legacy (navy header, red inline
   error text, no radius/shadow). Ported 1:1 from that certificates.css block.
   Both ids are plain (non-runat) HTML, so no naming-container suffix needed.
   -------------------------------------------------------------------------- */
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .toolTipPopupContainer {
    width: 250px !important;
    background: var(--surface-raised) !important;
    border: 1px solid var(--raw-slate-200, var(--border-default)) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.10) !important;
    overflow: hidden !important;
    font-family: inherit !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .toolTipPopupContainer table {
    width: 100% !important;
}
/* Drop the legacy decorations: corner/edge sprite cells, pointer, footer rule row */
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .pointerTl,
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) > table > tbody > tr:last-child {
    display: none !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .tL,
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .tR,
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .contentL,
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .contentR {
    background: none !important;
    width: 0 !important;
    font-size: 0 !important;
}
/* Title row ("Attachment Details") */
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .tM {
    background: none !important;
    margin: 0 !important;
    padding: 8px 4px 0 12px !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    height: auto !important;
    text-align: left !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .tM .sub {
    font-weight: 600 !important;
}
/* Close X — Lucide glyph via mask, matches the modal close */
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .tClose {
    background: none !important;
    width: 16px !important;
    padding: 10px 12px 0 0 !important;
    vertical-align: top !important;
    color: var(--text-muted);
    cursor: pointer;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .tClose::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 14px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center / 14px;
}
/* Body — "Uploaded By" caption + thumbnail preview + Download link */
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .contentPreview {
    background: transparent !important;
    border: none !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .StdPadding {
    padding: 2px 12px 10px 12px !important;
    color: var(--text-secondary, var(--text-muted)) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) .Separator {
    height: 8px !important;
    padding: 0 !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) a.popupLnk {
    color: var(--text-link, var(--primary)) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
body.page-loadline-detail :is(#TipPopup, #ArchivePopup) a.popupLnk:hover {
    text-decoration: underline !important;
}
/* "Preview Pane Not Available" fallback — JS sets this inline (color:Red;
   font-weight:bold), so only !important on a matching selector overrides it. */
body.page-loadline-detail #TipPopup #divThumbnail span,
body.page-loadline-detail #ArchivePopup #divArchiveThumbnail span {
    color: var(--destructive, #dc2626) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   §12  Permissions Menu (Publish/Private) popup — DisplayAttachmentPermissionMenu
   The ascx's own inline <style> block (.permissionsMenu/.permissionsPopup/
   .popupMenuItem/.popupMenuItemLink) never got the refresh treatment — it's
   still the legacy 80px-wide #ADB9C9-bordered box with #E5F1FD hover. Bring it
   in line with the canonical popupMenuV2 dropdown chrome (components.css §9.10
   sub-block): white surface, 8px radius, shadow-lg, slate-subtle border.
   Scoped to `.permissionsPopup` (not the bare `.popupMenuItem`/
   `.popupMenuItemLink` class names, which other legacy widgets reuse
   elsewhere) so no other popup on this page is affected.
   -------------------------------------------------------------------------- */
body.page-loadline-detail .permissionsMenu {
    width: auto !important;
}
body.page-loadline-detail .permissionsPopup {
    width: auto !important;
    min-width: 140px;
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle, var(--border-default)) !important;
    border-radius: 8px !important;
    box-shadow: var(--raw-shadow-lg, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .1)) !important;
    padding: 4px 0 !important;
    overflow: hidden;
}
body.page-loadline-detail .permissionsPopup td.popupMenuItem {
    padding: 0 !important;
}
body.page-loadline-detail .permissionsPopup .popupMenuItem:hover {
    background-color: var(--surface-accent-hover) !important;
}
body.page-loadline-detail .permissionsPopup .popupMenuItemLink {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px !important;
    color: var(--text-primary) !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 400 !important;
}
body.page-loadline-detail .permissionsPopup .popupMenuItemLink:hover {
    background-color: var(--surface-accent-hover) !important;
    color: var(--text-primary) !important;
    padding-left: 12px !important;
}

/* --------------------------------------------------------------------------
   §13  "Loadline: New" modal (ucNew / LoadlineNew.ascx) — body layout + inputs.
   The modal CHROME (card/header/footer) is global <uc:Modal> chrome (§16.3).
   The ascx's own two-column table right-aligns every label against the
   field column, with a DIFFERENT hardcoded width per row (335px / 330px /
   a 20%-wide inline-block <div> on Description — which has no
   `align="right"` attribute at all, so the original label-color rule
   silently skipped it). Right-aligning a label column against a REPEATER
   of unknown-length dynamic questions ("What is the height of the manifold
   connections above the waterline...") produces 2-3 line right-aligned
   wraps that are hard to scan, and every row's field lands at a different
   x depending on how long that row's own label happens to be.
   Flip every row to a left-aligned label so labels read naturally, while
   keeping label + field on the SAME line (just like every other refreshed
   form on this site, e.g. certificates.css's New Certificate/Document
   modal) — the label sits in a capped-width left column that WRAPS long
   dynamic questions internally instead of right-justifying them, and the
   field starts at a consistent gap after it rather than at a different x
   per row.
   The Vessel/Fleet <uc:FleetVessel> dropdowns keep their own chip styling
   from elsewhere — only their row's label/alignment changes here.
   -------------------------------------------------------------------------- */
/* Several rows (the repeater's long questions especially) are two-line
   label + field pairs; 11 of them can still add up to more height than a
   short viewport. RecenterModalPopup (script.js) only clamps the popup's
   TOP to a 16px floor — it has no bottom clamp / max-height, so on a short
   viewport the footer (Cancel/Create) can land below the fold with no way
   to reach it. Cap + scroll the body only (header/footer stay put) rather
   than touching that shared global function. */
/* Widen past the ascx's 650px so a 300px label column still leaves enough
   room for a value input AND its trailing unit label ("Metric Tonnes") on
   the same line — mirrors certificates.css overriding its New Certificate/
   Document modal's ascx width (500→530) for the identical reason. */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] {
    width: 700px !important;
    max-width: calc(100vw - 32px) !important;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent table {
    display: block !important;
    width: 100% !important;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tbody {
    display: block !important;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    column-gap: 16px;
    row-gap: 4px;
    width: 100% !important;
    /* The repeater's own inline <style> (.createLoadlineRequirementsRow)
       pins height:30px — without an explicit override here that fixed
       height wins per-property (our selector has higher specificity, but
       never declared `height` at all) and clips this row's real content
       (a wrapped 2-line question + 32px input), spilling it into the next
       row. */
    height: auto !important;
    margin: 0 0 14px 0 !important;
}
/* No last-row margin-zeroing here on purpose: the popup content is TWO
   separate <table>s (Vessel row alone, then Description/Repeater/CopyDate),
   each with its own parent, so `:last-of-type`/`:last-child` both match the
   Vessel row too (it's the only row under ITS parent) — zeroing its margin
   and leaving 0px before Description. The extra 14px before the footer that
   this leaves behind is harmless (the footer already carries its own 16px
   top padding). */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr > td {
    display: block !important;
    max-width: 100% !important;
    text-align: left !important;
    vertical-align: top !important;
    padding: 0 !important;
}
/* Label cell — covers both `<td align="right">` rows AND the Description
   row, whose label text lives in a nested inline-block <div> instead.
   Capped (not full) width so short labels don't stretch, and long dynamic
   questions wrap onto a 2nd/3rd line INSIDE the column instead of pushing
   the field further right per row. */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr > td:first-child,
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr > td:first-child > div {
    display: block !important;
    flex: 0 1 300px !important;
    width: auto !important;
    max-width: 300px !important;
    text-align: left !important;
    color: var(--text-secondary, #475569) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    line-height: 18px !important;
    /* Nudges the label's first line down so it optically centers against
       the 32px input on the same line instead of hugging its top edge. */
    padding-top: 7px !important;
    margin: 0 !important;
}
/* Field cell — input/dropdown + trailing unit label flow left-to-right on
   the label's line; wraps below only if the row genuinely can't fit both
   (e.g. Fleet + Vessel dropdowns together on the first row). */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr > td:last-child {
    display: flex !important;
    flex: 1 1 200px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    color: var(--text-primary, #0f172a);
    font-size: 14px;
    font-family: inherit;
}
/* Fleet/Vessel <uc:FleetVessel> renders both <select>s as siblings in this
   one field td; the generic 8px gap above (tuned for input+unit-label pairs)
   reads as glued when the two full-width dropdowns stack. */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr > td:has(> select[id$="_fvLoadLine_dlFleet"]) {
    gap: 12px !important;
}
/* Copy-Date row (rbYes/rbNo) — its value is a ~20px inline radio+text line,
   not a 32px input, so the generic label `padding-top: 7px` (tuned to
   optically center against a 32px input) sits the label's text lower than
   the radio's center. Center this ONE row on the flex cross-axis instead
   and zero the label's nudge so flexbox aligns them, rather than a second
   hardcoded pixel guess. */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr[id$="_trCopyDate"] {
    align-items: center !important;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr[id$="_trCopyDate"] > td:first-child {
    padding-top: 0 !important;
}

body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] input.NormalTextBox {
    height: 32px !important;
    /* Narrow enough that input + gap + the longest unit label ("Metric
       Tonnes") still fit on the label's line within the field column's
       ~336px budget (700px modal - 48px card padding - 300px label - 16px
       gap). Description overrides this below since it holds free text and
       has no trailing unit. */
    width: 160px !important;
    margin: 0 !important;
    padding: 4px 12px !important;
    border: 1px solid var(--border-default, #e2e8f0) !important;
    border-radius: 8px !important;
    background: var(--surface-raised, #ffffff) !important;
    font-family: inherit;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary, #0f172a) !important;
    box-sizing: border-box;
    box-shadow: none !important;
    outline: none !important;
}
/* Description holds free-text, not a short number — give it more room than
   the numeric fields below it. */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] [id$="_txtDescription"] {
    width: 100% !important;
    max-width: 420px !important;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] input.NormalTextBox:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-tint), 0.12) !important;
}
/* Unit label ("Metric Tonnes" / "Metres") trailing its input */
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] [id$="_lblLoadLineValueUnit"] {
    color: var(--text-secondary, #475569) !important;
    font-size: 13px !important;
    white-space: nowrap;
}
body.page-loadline-detail [id$="_ucNew_mpeNewLoadLine_pnlModalPopup"] input[type="radio"] {
    accent-color: var(--button-primary-bg, #0d9488);
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
    vertical-align: middle;
}