/* ==========================================================================
   Load Lines page (LoadLineList.aspx) — page-specific overrides layered on
   top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-loadlines`. Shared chrome (card, filters, search,
   grid, pager, primary CTA pill) comes from grid.css via the additional
   `body.page-grid` class.

   Grid columns are DB-driven (tblGridColumn via shared ~/DesktopModules/GridView.ascx
   wrapper), so per-column nth-child width locks are intentionally omitted —
   users can reorder/hide columns and the locks would break.

   Inline-style note: LoadLineList.ascx has inline styles on its FleetVessel
   dropdown (border-bottom + transparent background) plus an embedded
   LoadLineNew panel. Skin remains neutral — do not fight those here.
   ========================================================================== */

/* CTA label — the shared grid.css rule styles the teal pill AND hides the
   inner <img>; this `::before` renders the label text in the same position
   as Inspections' `lbNewInspection::before`. The CTA LinkButton is
   `lbNewLoadLine` (rendered id ends with `_lbNewLoadLine`). */
body.page-loadlines a[id$='_lbNewLoadLine']::before {
    content: 'New Load Line';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ==========================================================================
   New Load Line modal (LoadLineNew.ascx → mpeNewLoadLine) — the SAME control
   and markup as the "Loadline: New" modal on LoadLineDetail.aspx
   (loadline-detail.css §13); this page instantiates it as `loadLineNew`
   instead of `ucNew`, so the rendered popup panel ID ends differently
   (`..._loadLineNew_mpeNewLoadLine_pnlModalPopup` here vs
   `..._ucNew_mpeNewLoadLine_pnlModalPopup` there) — hence a duplicated block
   here rather than a shared selector. Layout rules below are transplanted
   1:1 from that §13 (right-aligned staggered per-row label widths → one
   left-aligned label column with label+field kept on the SAME line; legacy
   `.createLoadlineRequirementsRow{height:30px}` row-clip fix; RecenterModalPopup
   has no bottom clamp, so cap+scroll the body instead). Keep the two in sync.

   Scope: `[id$="_mpeNewLoadLine_pnlModalPopup"]` (Modal.ascx → pnlModalPopup;
   the bare suffix already uniquely identifies this modal within
   body.page-loadlines, so it doesn't need the `_loadLineNew_` prefix).
   ========================================================================== */
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] {
    width: 700px !important;
    max-width: calc(100vw - 32px) !important;
}
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopContent {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopContent table {
    display: block !important;
    width: 100% !important;
}
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopContent tbody {
    display: block !important;
}
body.page-loadlines [id$="_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;
    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-loadlines [id$="_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. */
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr > td:first-child,
body.page-loadlines [id$="_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;
    padding-top: 7px !important;
    margin: 0 !important;
}
/* Field cell — input/dropdown + trailing unit label flow left-to-right on
   the label's line; the FleetVessel dropdown pair (Fleet+Vessel) wraps to
   its own line beneath "Vessel:" when it can't fit both selects, same
   graceful fallback as the Detail-page instance of this modal. */
body.page-loadlines [id$="_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-loadlines [id$="_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-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr[id$="_trCopyDate"] {
    align-items: center !important;
}
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopContent tr[id$="_trCopyDate"] > td:first-child {
    padding-top: 0 !important;
}

/* Text inputs (Description + Repeater-rendered numeric fields) — the legacy
   `class="NormalTextBox"` only paints a 1px gray border with no padding/
   radius/font. */
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] input.NormalTextBox {
    height: 32px !important;
    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-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] [id$="_txtDescription"] {
    width: 100% !important;
    max-width: 420px !important;
}
body.page-loadlines [id$="_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-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] [id$="_lblLoadLineValueUnit"] {
    color: var(--text-secondary, #475569) !important;
    font-size: 13px !important;
    white-space: nowrap;
}

/* Footer buttons — uc:ImageManager inside each LinkButton renders an extra
   `<img>` next to the label that pushes the button taller than the
   refresh-standard 36px pill. Hide the icon (the label is self-explanatory)
   and keep the standard refresh padding. */
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopFooter .LinkButton img,
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] [id$="_pnlFooter"] .LinkButton img {
    display: none !important;
}

body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] .modPopFooter .LinkButton,
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] [id$="_pnlFooter"] .LinkButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--raw-space-8, 16px) !important;
    gap: 0 !important;
}

/* Copy-Date radios (rbYes / rbNo) — QEN-8831 (feedback #2). The legacy markup
   renders bare `<input type=radio>Yes <input type=radio>No`: the "Yes"/"No" are
   literal text nodes after each input, with NO `<label>`. The field column's
   own `gap: 8px` flex (above) already spaces every child — radio, "Yes" text
   node, radio, "No" text node — so the old sibling-margin hack this rule used
   before the column became a flex row is gone; just standardize the control
   itself: teal accent + vertical-align so it sits on the text baseline. */
body.page-loadlines [id$="_mpeNewLoadLine_pnlModalPopup"] input[type="radio"] {
    accent-color: var(--button-primary-bg, #0d9488);
    width: 16px;
    height: 16px;
    margin: 0 !important;
    vertical-align: middle;
}