/* ==========================================================================
   Manage Fleets page (FleetManagement.aspx → FleetManagement.ascx) — page
   skin layered on top of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-fleet-management`. Shared chrome (card, title bar,
   pnlTitleLeft / pnlTitleRight flex collapse, primary "Add" CTA pill) comes
   from grid.css via the additional `body.page-grid` class.

   Body grid here is a legacy <asp:DataGrid> (NOT an ASPxGridView), rendering
   a plain HTML <table class="StdTable NoBorder">. The DataGrid emits:
     - Header row : <tr class="ColHeader"><td>...</td></tr>
     - Item row   : <tr valign="top">              (no class)
     - Alt row    : <tr class="Alt NoBorder" valign="top">

   Inside each row a single-column TemplateColumn renders a fleet name +
   inline edit pencil + a nested DataList (dlVessels / dlHistoricalVessels)
   that lays out the fleet's vessels in a 4-column table. The edit state
   replaces the cell content with a fleet-name TextBox, Save/Cancel/Delete
   LinkButtons, "Show fleet for" dropdown and a CheckBoxList of vessels.

   Shared by Q88 (portal 0/1) and Milbros (portal 2). Default.master.cs
   resolves the body class branch before the Milbros milbros-grid branches,
   so both portals get the same skin without portal-specific logic.

   Design tokens are inherited from grid.css (#0d9488 teal, Inter 14, etc.).
   ========================================================================== */

/* ==========================================================================
   1. Title bar — primary CTA label
   ----------------------------------------------------------------------------
   grid.css §5 already paints `a.Img-Std-Add` in the title bar as a 36px teal
   pill and hides the inner <img>. The DataGrid here renders the LinkButton
   as `<a class="Img-Std Img-Std-Add"></a>` with no inner content — we inject
   "New Fleet" via ::before so the pill reads correctly.
   ========================================================================== */

body.page-fleet-management a[id$='_btnAddNew']::before {
    content: 'New Fleet';
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* The .ascx wraps the CTA in a pnlTitleRight inner table with cellspacing="3"
   and inline `vertical-align: bottom` styles. grid.css collapses that table to
   `display: contents` for the canonical title-row layout, but the inline
   `style="vertical-align:bottom"` on the <a> drags the pill 5px below the
   center axis. Reset to baseline center (matching every other grid page). */
body.page-fleet-management [id$='_pnlTitleRight'] a[id$='_btnAddNew'] {
    vertical-align: middle !important;
    margin: 0 !important;
}

/* The CTA's nested table on this page also ships an inline width="100%".
   Without this rule the right-aligned <td> stretches its parent across the
   full title-bar width on viewports above ~1100px, pushing the pnlTitleLeft
   filters into a single narrow column. */
body.page-fleet-management [id$='_pnlTitleRight'] table {
    width: auto !important;
}

/* ==========================================================================
   2. pnlTitleLeft inner filter — Company dropdown + "Go" LinkButton
   ----------------------------------------------------------------------------
   The .ascx renders:
     <td class="modV2Title">Fleets</td>
     <td id="tdCompany"><select id="ddlCompany"> Go LinkButton</td>
   grid.css §3 already restyles the <select> via the canonical components.css
   §12.5 path (sidebar-nav scope). It does NOT, however, restyle inline
   `.LinkButton` in the title bar — MainWhiteout paints those with the brand
   colour and !important. The "Go" button is only relevant in admin mode, but
   when visible we want it to look like a small ghost-outline pill matching
   the Vessel Management filter row (vessel-management.css §4).
   ========================================================================== */

body.page-fleet-management [id$='_pnlTitleLeft'] a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px !important;
    border-radius: 8px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    vertical-align: middle;
}

body.page-fleet-management [id$='_pnlTitleLeft'] a.LinkButton:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
}

/* The Company dropdown is wider than the canonical 240px filter pill — it
   has to fit company names. Cap it so a 70-char company name doesn't push
   the right side of the title bar off-screen. */
body.page-fleet-management [id$='_pnlTitleLeft'] select[id$='_ddlCompany'] {
    max-width: 360px;
    width: 280px;
}

/* ==========================================================================
   3. DataGrid wrapper — flatten the legacy CellPadding/CellSpacing/border.
   ----------------------------------------------------------------------------
   The .ascx ships `CellPadding="3" CellSpacing="1" BorderWidth="0"` and
   `CssClass="StdTable NoBorder"`. Combined with the `<tr class="ColHeader">`
   navy bar from MainWhiteout this creates the legacy heavy header look.
   We collapse cells, neutralise the navy header band, and let our row rules
   below paint the modern light-card grid.

   The outer wrapping <table cellspacing/cellpadding> in the .ascx Main slot
   is purely structural — its inner <td> hosts the DataGrid. We force its
   width to 100% so the grid fills the card.
   ========================================================================== */

body.page-fleet-management .modV2Main > table {
    width: 100% !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

body.page-fleet-management table[id$='_dgFleetManagement'] {
    width: 100% !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--q88-grid-card) !important;
    border-radius: 8px;
    overflow: hidden;
    table-layout: fixed;
    /* DataGrid emits cellpadding/cellspacing as HTML attributes; CSS can't
       remove the attribute but border-collapse:separate + our per-cell padding
       below override the resulting visual spacing. */
}

/* ==========================================================================
   4. Header row (`<tr class="ColHeader">`)
   ----------------------------------------------------------------------------
   The single column "Fleet/Vessels" header. Repaint as a soft uppercase
   muted band matching the dxgvHeader look from grid.css §7.
   ========================================================================== */

body.page-fleet-management table[id$='_dgFleetManagement'] tr.ColHeader > td {
    background: var(--q88-grid-muted) !important;
    background-image: none !important;
    color: var(--q88-grid-muted-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* MainWhiteout's `.ColHeader td` rule paints the navy band background-image
   gradient. Force a clean transparent surface above the muted bg painted on
   the cell itself. */
body.page-fleet-management table[id$='_dgFleetManagement'] tr.ColHeader {
    background: transparent !important;
    background-image: none !important;
}

/* ==========================================================================
   5. Data rows — paint the white card + soft hover.
   ----------------------------------------------------------------------------
   DataGrid item rows render WITHOUT a class (`<tr valign="top">`). Alternate
   rows render with `class="Alt NoBorder"`. We target both via `:not(.ColHeader)`
   so we don't repaint the header row. The dlVessels nested DataList renders
   its own <tr> rows — we restrict the row rules to the OUTER DataGrid via
   `> tbody > tr` to avoid bleeding into the inner vessel grid.
   ========================================================================== */

body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr:not(.ColHeader),
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr.Alt {
    background: var(--q88-grid-card) !important;
    transition: background-color 120ms ease;
}

body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr:not(.ColHeader):hover,
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr.Alt:hover {
    background: var(--q88-grid-row-hover) !important;
}

body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr:not(.ColHeader) > td,
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr.Alt > td {
    background: transparent !important;
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q88-grid-border) !important;
    padding: 14px 20px !important;
    vertical-align: top !important;
}

/* Last row drops bottom border to avoid a double line against the card edge. */
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

/* "Fleet:" label inline next to the bold name. Push it to a small uppercase
   tag matching the modern grid look. */
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr:not(.ColHeader) > td > span.NormalBold,
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr.Alt > td > span.NormalBold {
    font-family: var(--q88-grid-font);
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--q88-grid-fg) !important;
    line-height: 24px !important;
    /* The "(Personal)" suffix is concatenated into the label text — let it
       inherit so the parenthetical still renders on the same line. */
}

/* Free-text run "Fleet:" in front of the label — keep muted so the bold name
   reads as the row heading. */
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr:not(.ColHeader) > td,
body.page-fleet-management table[id$='_dgFleetManagement'] > tbody > tr.Alt > td {
    color: var(--q88-grid-muted-fg) !important;
}

/* Re-paint the bold name dark so the muted "Fleet:" prefix doesn't bleach
   the headline — the rule above turned the cell's default text muted. */
body.page-fleet-management table[id$='_dgFleetManagement'] span[id*='_lblFleetName'] {
    color: var(--q88-grid-fg) !important;
}

/* ==========================================================================
   6. Inline edit pencil — `<input type="image" class="Img-Std Img-Std-EditV2">`
   ----------------------------------------------------------------------------
   The DataGrid renders a 1×1 clearpixel.gif `<input type="image">` with the
   `Img-Std-EditV2` sprite class painting the pencil icon. The legacy sprite
   is a bitmap pencil — we replace with the same crisp Figma vector glyph
   used on grid.css §7's `.jqEdit img.Img-Std-Edit` rule, masking the element
   background-color via currentColor so it recolours on hover/focus.
   ========================================================================== */

body.page-fleet-management table[id$='_dgFleetManagement'] input[type='image'].Img-Std-EditV2 {
    width: 24px !important;
    height: 24px !important;
    padding: 4px;
    margin: 0 0 0 4px;
    box-sizing: border-box;
    border: 1px solid transparent !important;
    border-radius: 6px;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--q88-grid-muted-fg);
    cursor: pointer;
    vertical-align: -6px;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    /* Mask the 1×1 transparent pixel src into the Figma pencil glyph so the
       icon recolours via currentColor without a separate asset. */
    -webkit-mask: var(--icon-square-pen) no-repeat center / 16px 16px;
            mask: var(--icon-square-pen) no-repeat center / 16px 16px;
    background-color: currentColor !important;
}

body.page-fleet-management table[id$='_dgFleetManagement'] input[type='image'].Img-Std-EditV2:hover {
    color: var(--q88-grid-primary);
}

/* ==========================================================================
   7. Nested vessel DataList (`dlVessels` / `dlHistoricalVessels`)
   ----------------------------------------------------------------------------
   Renders as `<table style="width:100%"><tr><td style="width:25%;..."></td>×4</tr>`
   for each fleet. Each cell holds a vessel name as plain text. Reset the
   inner table cell paint so the inner padding doesn't double up with the
   outer item row's 14px/20px paddings, and tighten the line height to keep
   the four-column grid compact.
   ========================================================================== */

body.page-fleet-management table[id*='_dlVessels'],
body.page-fleet-management table[id*='_dlHistoricalVessels'] {
    margin-top: 8px;
    border: 0;
    background: transparent;
}

body.page-fleet-management table[id*='_dlVessels'] td,
body.page-fleet-management table[id*='_dlHistoricalVessels'] td {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 12px 4px 0 !important;
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    vertical-align: top !important;
}

/* Historical vessels keep the gray italic tag emphasised from the .ascx —
   just bring the colour into our muted-fg system. */
body.page-fleet-management table[id*='_dlHistoricalVessels'] td span {
    color: var(--q88-grid-muted-fg) !important;
}

/* "No vessels specified, please edit ..." warning label. */
body.page-fleet-management span[id*='_lblAddNew'].Warning {
    display: inline-block;
    margin-top: 8px;
    color: #b45309;        /* amber-700 — matches questionnaire status warnings */
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    background: #fffbeb;   /* amber-50 */
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 6px 10px;
}

/* ==========================================================================
   8. Edit form (DataGrid EditItemTemplate)
   ----------------------------------------------------------------------------
   When a row is in edit mode the cell content is replaced by:
     - "Fleet name:" text + TextBox
     - Save | Cancel | Delete LinkButtons (separated by literal " | " text)
     - "Show fleet for:" + DropDownList (All users / Personal)
     - "Select vessels to include in this fleet:" + Select all / Select none
     - CheckBoxList rendering a 4-column vessel grid (`<table class="chkBoxList">`)
     - Hidden "Show/Hide Historical Vessels" with a second CheckBoxList

   The .ascx ships an inline `<style>` rule `.chkBoxList td { width: 120px }`
   which clamps each vessel cell to 120px — fine, we don't override that.
   We only need to sand the controls into the modern look.
   ========================================================================== */

body.page-fleet-management table[id$='_dgFleetManagement'] input[type='text'][id$='_txtFleetName'] {
    height: 32px;
    min-width: 240px;
    padding: 6px 12px;
    background-color: var(--q88-grid-card);
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    color: var(--q88-grid-fg);
    font-family: var(--q88-grid-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    margin: 0 8px;
    vertical-align: middle;
}

body.page-fleet-management table[id$='_dgFleetManagement'] input[type='text'][id$='_txtFleetName']:focus {
    border-color: var(--q88-grid-primary);
    outline: 2px solid var(--q88-grid-primary);
    outline-offset: -1px;
}

/* "Show fleet for" dropdown sits inside a <p> inside the edit cell — let
   the canonical components.css <select> skin paint it. We just enforce the
   filter-pill height to match the txtFleetName input above. */
body.page-fleet-management table[id$='_dgFleetManagement'] select[id$='_dpdShowFleet'] {
    height: 32px;
    min-width: 180px;
    margin: 0 8px;
    vertical-align: middle;
}

/* Inline action LinkButtons inside the edit row — Save / Cancel / Delete.
   The .ascx uses literal " | " separators between them and they render as
   `<a>...</a>` plain anchors (no class). Hide the literal pipes (they read
   as awkward when rendered next to pill buttons) and turn each anchor into
   a small text-link styled in the brand teal. */
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkSave'],
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkCancel'],
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkDelete'] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    margin: 0 4px;
    padding: 0 14px !important;
    border-radius: 8px;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Save = primary teal pill */
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkSave'] {
    background: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary-fg) !important;
    border: 1px solid var(--q88-grid-primary) !important;
}
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkSave']:hover {
    background: var(--q88-grid-primary-hover) !important;
    border-color: var(--q88-grid-primary-hover) !important;
}

/* Cancel = ghost outline */
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkCancel'] {
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
}
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkCancel']:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
}

/* Delete = ghost outline tinted red */
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkDelete'] {
    background: var(--q88-grid-card) !important;
    color: #b91c1c !important;          /* red-700 */
    border: 1px solid #fecaca !important; /* red-200 */
}
body.page-fleet-management table[id$='_dgFleetManagement'] a[id*='_lnkDelete']:hover {
    background: #fef2f2 !important;     /* red-50 */
    border-color: #b91c1c !important;
    color: #991b1b !important;          /* red-800 */
}

/* "Select all" / "Select none" mini-links inside the edit form — keep them
   as inline text-links in the brand teal so they read as secondary actions
   next to the CheckBoxList. */
body.page-fleet-management table[id$='_dgFleetManagement'] a[id^='lnkSelect'],
body.page-fleet-management table[id$='_dgFleetManagement'] a[id^='lnkDeselect'],
body.page-fleet-management table[id$='_dgFleetManagement'] a.whiteoutBlueLink {
    color: var(--q88-grid-primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 4px !important;
    margin: 0 !important;
    line-height: 20px !important;
    height: auto !important;
    box-shadow: none !important;
}

body.page-fleet-management table[id$='_dgFleetManagement'] a[id^='lnkSelect']:hover,
body.page-fleet-management table[id$='_dgFleetManagement'] a[id^='lnkDeselect']:hover,
body.page-fleet-management table[id$='_dgFleetManagement'] a.whiteoutBlueLink:hover {
    color: var(--q88-grid-primary-hover) !important;
    text-decoration: underline !important;
}

/* CheckBoxList layout: each vessel checkbox gets a label inline.
   The MainWhiteout default font is tahoma; we promote to Inter to match the
   rest of the page. The .ascx clamps cell width to 120px via inline
   `.chkBoxList td { width: 120px }` — leave that alone. */
body.page-fleet-management table[id$='_dgFleetManagement'] table.chkBoxList td {
    font-family: var(--q88-grid-font);
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--q88-grid-fg) !important;
    padding: 4px 8px !important;
    line-height: 20px;
    vertical-align: middle;
    background: transparent !important;
    border: 0 !important;
}

body.page-fleet-management table[id$='_dgFleetManagement'] table.chkBoxList input[type='checkbox'] {
    margin-right: 6px;
    vertical-align: middle;
}

body.page-fleet-management table[id$='_dgFleetManagement'] table.chkBoxList label {
    vertical-align: middle;
    color: var(--q88-grid-fg);
}

/* Validator messages ("Required") inside the edit form — keep them inline,
   small, and tinted with the status-error token. */
body.page-fleet-management table[id$='_dgFleetManagement'] span.Warning,
body.page-fleet-management table[id$='_dgFleetManagement'] [id*='_rfvOneVessel'],
body.page-fleet-management table[id$='_dgFleetManagement'] [id*='_rfvFleetName'] {
    color: #b91c1c !important;
    font-family: var(--q88-grid-font);
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
}

/* The edit form's instructional <p> blocks read as wall-of-text in tahoma —
   tighten typography and add a subtle separator between sections. */
body.page-fleet-management table[id$='_dgFleetManagement'] tr:not(.ColHeader) > td > p {
    font-family: var(--q88-grid-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--q88-grid-muted-fg);
    margin: 16px 0 8px 0;
    line-height: 20px;
}

/* ==========================================================================
   9. Footer "Top" anchor (`.modPopFooter > a.disableButton`)
   ----------------------------------------------------------------------------
   The .ascx wraps a "back to top" link as:
     <a href="#top" class="disableButton">
         <ins>&nbsp;</ins>
         <uc:ImageManager ImageIcon="Top" LabelText="Top" />
     </a>
   The ImageIcon resolves to a tiny sprite that doesn't render here (the
   ImageManager outputs the label text directly when the icon is missing),
   leaving the empty `<ins>&nbsp;</ins>` to render as a stray underlined gap
   in front of "Top". Hide the <ins> and repaint the anchor as a compact
   ghost text-link aligned right.
   ========================================================================== */

body.page-fleet-management .modV2 .modPopFooter {
    background: transparent !important;
    border-top: 1px solid var(--q88-grid-border);
    padding: 8px 8px 0 8px !important;
    margin-top: 8px;
    text-align: right;
}

body.page-fleet-management .modV2 .modPopFooter a.disableButton {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: 28px;
    padding: 0 12px !important;
    border-radius: 8px;
    background: var(--q88-grid-card) !important;
    color: var(--q88-grid-muted-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
    font-family: var(--q88-grid-font);
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.page-fleet-management .modV2 .modPopFooter a.disableButton:hover {
    background: var(--q88-grid-row-hover) !important;
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
}

/* Hide the empty <ins>&nbsp;</ins> placeholder + any sprite img the
   ImageManager emits; the label text "Top" stays visible as the anchor's
   text node. Adding an upward chevron via ::before keeps the visual
   affordance without depending on the missing sprite. */
body.page-fleet-management .modV2 .modPopFooter a.disableButton ins,
body.page-fleet-management .modV2 .modPopFooter a.disableButton img {
    display: none !important;
}

body.page-fleet-management .modV2 .modPopFooter a.disableButton::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--icon-chevron-up) no-repeat center / contain;
            mask: var(--icon-chevron-up) no-repeat center / contain;
}