/* ==========================================================================
   Fleet Report page (FleetList.aspx) — page-specific overrides layered on top
   of grid.css.
   ----------------------------------------------------------------------------
   Scoped via `body.page-fleetreport`. Shared chrome (card, filters, search,
   grid, pager) 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.

   No primary "Add" CTA exists on this page — the TitleRight hosts an "Actions"
   PopupMenu only (Email Report / Export / Scheduled Reports / Manage Fleet /
   Refresh / Reset View / User's Guide), plus an inline edit-vessel flow via
   the hidden `lbEditVessel` LinkButton triggered from row clicks. So no
   `::before` label rule is registered here.

   Inline-style note: FleetReportList.ascx has an inline <style> block that
   restyles the FleetVessel dropdown (transparent bg, border-bottom only).
   Skin stays neutral for that; revisit if the inline block is removed.
   ========================================================================== */


/* ==========================================================================
   1. Edit-Vessel inline edit panel (modEditVessel)
   --------------------------------------------------------------------------
   FleetReportList.ascx ships a legacy `<uc:ModuleTemplate>` (V1) named
   `modEditVessel`. The row-action pencil (`EditVessel(guid)` → the hidden
   `lbEditVessel` postback) flips `modGrid.Visible = false` /
   `modEditVessel.Visible = true` server-side — so this is NOT an MPE popup
   (DESIGN.md §16.3 / §16.5) NOR a `.modPopPnl` (§9.10 never reaches it). It
   renders INLINE as a page-swap edit form using the ModuleTemplate DEFAULT
   wrapper `modContainerStd` (table#divMod) + the V1 `.modInnerContainer` /
   `.modTitle` / `.modMain` / `.modFooter2` class names — fully legacy navy
   (`#2D3663` title ribbon, `#003366` inner border, `#ddd` footer band). This
   is the §16.12 "third popup mechanism" treatment, but shown inline rather
   than in an extender; chrome AND body are owned here.

   Mirrors the proven recipe of admin-form.css §2-4 (self-contained navy strip
   with `!important`, since this page has no shared body-class `.mod*` rules)
   and vessel-management.css §7 (the identical `modEditVessel` control on the
   VesselManagement page) — constrained, centered card footprint for a compact
   label/value edit form.

   SCOPE = the panel by id-suffix `[id$='_modEditVessel_divMod']`
   (naming-container prefix `ctl00_cphMiddle_ctl00_…`), NEVER bare
   `.modContainerStd`: the page's grid is ModuleTemplateV2 (`.modV2*`, hidden
   while editing) and the View-Schedule(s) dialog is a `<uc:Modal>`
   (`.modPopPnl`, §9.10), so id-scope is the only safe match (gotcha #7).

   Literal hex on every border / background / button colour — the
   ModuleTemplate sits under MainWhiteout shorthands; a var() inside a
   shorthand+!important drops the cascade (§32.2 / §32.3). No `overflow:hidden`
   on the card: the date picker calendar + unit-conversion tooltip render as
   absolutely-positioned descendants and would be clipped.

   The `<TitleRight>` is never populated (the ascx defines only TitleLeft), so
   there is no close X to paint/wire — the panel is dismissed via Cancel/Save.
   ========================================================================== */

/* §1.1 — Card surface. Repaint the modContainerStd table#divMod as a white
   q88-card; flatten the DNN table chain so the inner padding/border/navy
   nested-cell chrome collapses. Constrained + centered (compact edit form). */
body.page-fleetreport [id$='_modEditVessel_divMod'] {
    display: block !important;
    width: 880px !important;
    max-width: calc(100% - 48px) !important;
    margin: 24px auto !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 12px !important;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] > tbody,
body.page-fleetreport [id$='_modEditVessel_divMod'] > tbody > tr,
body.page-fleetreport [id$='_modEditVessel_divMod'] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    vertical-align: top !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modInnerContainer {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* §1.2 — Title bar. Strip the navy ribbon → Inter 18/600 slate-900 title on
   the white card, slate-200 underline. Inset by the inner gutter (28px). */
body.page-fleetreport [id$='_modEditVessel_divMod'] .modTitle {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 20px 28px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    line-height: normal !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modTLeft {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--q88-grid-font);
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
}
/* The vessel-name span (inline font-weight:normal) → slate-600 medium so the
   "Edit:" label stays primary and the vessel name reads as the subject. */
body.page-fleetreport [id$='_modEditVessel_divMod'] .modTLeft span[id$='_lblVesselName'] {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
}
/* TitleRight is always empty on this panel — collapse it. */
body.page-fleetreport [id$='_modEditVessel_divMod'] .modTRight {
    display: none !important;
}

/* §1.3 — Body. Transparent main, inner gutter; the Q&A DataList is a plain
   label/value grid. */
body.page-fleetreport [id$='_modEditVessel_divMod'] .modMain {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 16px 28px 8px !important;
    margin: 0 !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_dlEditFleet'] {
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

/* §1.3a — Question label cell (the <td> holding `lblQuestion`) → slate-600
   Inter 14/500, vertically centred against the 36px field, right gutter. */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_dlEditFleet'] td:has(> span[id$='_lblQuestion']) {
    vertical-align: middle !important;
    padding: 6px 16px 6px 0 !important;
    text-align: left !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] span[id$='_lblQuestion'] {
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}
/* Status-icon + answer + comment cells → vertically centred row rhythm. */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdImg'],
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'],
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdComment'] {
    vertical-align: middle !important;
    padding: 6px 0 !important;
}

/* §1.4 — Field unification (DESIGN.md §16.8). Every answer is wrapped in a
   `.qDiv`. Three field shapes share one 36px / 8px / slate-200 / white look:
     • date  (input.qCal)      — ALREADY boxed by datePicker.css; left untouched
                                  (excluded below to avoid a double-skin).
     • numeric (input.qTxtConvert + a.qConvertUnit unit link) — box the qDiv,
       flatten the inner input so the value + unit link sit inside the field
       like the date input + calendar button.
     • Flag   (select.qDdl)    — the <select> is ALREADY its own 8px box (global
       shim); flatten the wrapping qDiv to kill the double border and bump the
       select to 36px.                                                          */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv:has(> input.qTxtConvert) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 304px !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv > input.qTxtConvert {
    flex: 1 1 auto !important;
    width: auto !important;       /* override inline style="width:202px" */
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--text-primary) !important;
}
/* Unit-conversion link ("Metric Tonnes" …) inside the field. This is an
   INTERACTIVE unit-toggle anchor (<a href="javascript:void 0;"> that calls the
   conversion popup), not a passive label — so it takes the teal primary link
   colour (#0d9488), matching the approved questionnaire.css treatment of
   `.qConvertUnit`. (Previously slate-500 #64748b, which read as a disabled hint
   and made the value+unit look like two mismatched columns inside one box.)
   13/20 so the unit sits on the same rhythm as the 14/20 value text. */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv > a.qConvertUnit {
    flex: 0 0 auto !important;
    color: var(--primary) !important;
    font-family: var(--q88-grid-font);
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv > a.qConvertUnit:hover {
    color: var(--button-primary-hover) !important;
    text-decoration: underline !important;
}
/* Numeric input focus ring lives on the qDiv wrapper (the input is borderless). */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv:has(> input.qTxtConvert):focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-tint), 0.16) !important;
}
/* Flag qDiv → flatten (the select is the box). */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv:has(> select) {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdAnswer'] .qDiv > select.qDdl {
    width: 304px !important;
    max-width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

/* §1.5 — Footer. Strip the gray band → flex-end pill cluster. Save = teal
   primary, Cancel = ghost (DESIGN.md §16.7). Hide the LinkButton <ins> spacer
   so the labels stay centred (§32.4). */
body.page-fleetreport [id$='_modEditVessel_divMod'] .modFooter2 {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--border-default) !important;
    padding: 16px 28px !important;
    margin: 8px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    text-align: right !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modFooter2 a.LinkButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-width: 84px !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-family: var(--q88-grid-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
    box-shadow: none !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modFooter2 a.LinkButton:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover) !important;
    color: #ffffff !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modFooter2 a.LinkButton.Secondary {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modFooter2 a.LinkButton.Secondary:hover {
    background-color: var(--surface-card) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .modFooter2 a.LinkButton > ins {
    display: none !important;
}

/* §1.6 — Edit-comment icon (.qImC). The code-behind injects
   `<img src='/cp.gif' class='qImC'>` into `tdComment` (FleetReportList.ascx.cs
   :680); the visible glyph is the legacy /images/icons/StdIcons.png sprite
   (background-position -96px -48px at Main.css:1736 = a navy chat-bubble),
   hidden until row hover. Swap it for the Lucide MessageCircle outline via
   -webkit-mask + a solid slate-900 fill, always visible when a comment exists —
   identical to the approved questionnaire.css :657 / editQuestionAnswerPopup.css
   :1127 treatment (Figma 72:8966). The <img> itself is a 1×1 transparent
   spacer, so overriding background → none and switching to mask preserves
   layout while replacing the icon. */
/* Widen the comment slot from the legacy inline 20px to 40px and centre the
   16px icon, so it carries ~12px breathing room on each side — matching the
   questionnaire's 40px comment cell (questionnaire.css :644) instead of being
   crammed against the field box. */
body.page-fleetreport [id$='_modEditVessel_divMod'] [id$='_tdComment'] {
    width: 40px !important;
    text-align: center !important;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .qImC {
    background-image: none !important;
    background-color: #0f172a;
    visibility: visible;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>") no-repeat center / 16px;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>") no-repeat center / 16px;
}
body.page-fleetreport [id$='_modEditVessel_divMod'] .qImC:hover {
    background-color: var(--primary);
}