/* ==========================================================================
   Request Access page (RequestAccess.aspx → RequestAccess.ascx + VesselAccessSuggestions.ascx)
   ----------------------------------------------------------------------------
   Scoped via `body.page-requestaccess`. The shared V2 chrome (white card,
   12px radius, soft shadow, page tokens) comes from grid.css via the
   `body.page-grid` co-class. This file styles the legacy <asp:Repeater>
   StdTable bodies + the request-form filter row + the multi-view header
   variants (tr.Header / tr.ColHeader / tr.SubHeader1 / tr.SubHeader2)
   so all four MultiView panels look like the new grid skin.

   Design tokens (--q88-grid-*) are inherited from body.page-grid in grid.css.
   ========================================================================== */

/* ==========================================================================
   0. Title text — VesselAccessSuggestions renders <Title> as a bare
      <asp:Literal> inside the V2 title container, which becomes a flat
      div.modV2Title (no inner <table>/<td>). grid.css's V2 title rule
      targets td.modV2Title so it never fires here, AND grid.css actively
      neutralises div.modV2Title with `font-size/weight: inherit !important`.
      Same pattern + fix as q88status.css.
   ========================================================================== */

body.page-requestaccess [id$='_pnlTitleLeft'].modV2Title {
    font-family: var(--q88-grid-font);
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--q88-grid-fg);
    line-height: 40px;
}

/* View 1 wraps the title in <table><td class="largeHeader">Request Access</td>;
   grid.css already styles td.largeHeader inside .modV2 — but the OUTER
   wrapper (<asp:View><table><tr><td>) sits OUTSIDE .modV2 in this view
   because the LinkButton row at the bottom shares the same outer table.
   Promote the largeHeader caption when it appears as a direct page-level
   header (top of the form view). */
body.page-requestaccess td.largeHeader {
    font-family: var(--q88-grid-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--q88-grid-fg);
    padding: 0 0 8px;
    border: 0;
    background: transparent;
}

/* ==========================================================================
   1. TitleRight action links (Pending Requests / Request Access to Other Vessels)
      In View 0, these are <asp:HyperLink class="linkWHover"> wrapping an
      ImageManager. Re-skinned to match the Vessel Search Advanced action bar
      (vesselSearchAdvanced.css §16.7, Figma Button 430:5451): 36h/8px-radius
      buttons, with the primary action (Request Access to Other Vessels) as a
      solid CTA and the rest as ghost/outline secondary buttons.
   ========================================================================== */

body.page-requestaccess .modV2TitleContainer a.linkWHover,
body.page-requestaccess .modV2TitleContainer a[id$='_lnkPendingRequests'],
body.page-requestaccess .modV2TitleContainer a[id$='_hlOtherRequest'],
body.page-requestaccess .modV2TitleContainer a[id$='_hlPending'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #475569 !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none !important;
    transition: border-color 120ms, color 120ms, background 120ms;
}

body.page-requestaccess .modV2TitleContainer a.linkWHover:hover,
body.page-requestaccess .modV2TitleContainer a[id$='_lnkPendingRequests']:hover,
body.page-requestaccess .modV2TitleContainer a[id$='_hlPending']:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a !important;
}

/* Primary action — solid CTA */
body.page-requestaccess .modV2TitleContainer a[id$='_hlOtherRequest'] {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff !important;
}
body.page-requestaccess .modV2TitleContainer a[id$='_hlOtherRequest']:hover {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    color: #ffffff !important;
}

/* The ImageManager renders <img> + text node inside the anchor. Hide the
   tiny legacy chrome icons so the pill reads cleanly — keep just the label. */
body.page-requestaccess .modV2TitleContainer a.linkWHover img,
body.page-requestaccess .modV2TitleContainer a[id$='_lnkPendingRequests'] img,
body.page-requestaccess .modV2TitleContainer a[id$='_hlOtherRequest'] img,
body.page-requestaccess .modV2TitleContainer a[id$='_hlPending'] img {
    display: none;
}

/* The two HyperLinks are separated by `&nbsp;&nbsp;&nbsp;&nbsp;` text nodes
   in the .ascx — collapse those to zero width. grid.css's shared
   `[id$='_pnlTitleRight'] { gap: 8px }` (body.page-grid co-class) also adds
   flex gap between the two buttons; zero that too so they sit flush. */
body.page-requestaccess .modV2TitleContainer {
    font-size: 0;
}

body.page-requestaccess .modV2TitleContainer > * {
    font-size: 13px;
}

body.page-requestaccess [id$='_pnlTitleRight'],
body.page-requestaccess .modV2TitleContainer {
    gap: 0 !important;
}

/* ==========================================================================
   2. StdTable — shared styling across all four views.
      Repeater-rendered <table class="StdTable"> body in V2 (Views 0, 1)
      and legacy ModuleTemplate (Views 2, 3). Header row class differs:
        View 0: tr.Header (section) + tr.ColHeader (column headers)
        View 2: tr.SubHeader2
        View 3: tr.SubHeader1 with td.tableHeader
   ========================================================================== */

/* StdTable flows edge-to-edge inside the card — the card's own 1px border
   is the only frame. Drop the legacy table border + radius so we don't get
   a "frame inside a frame" look (DESIGN.md §5.1: grid sits flush inside
   the card, header row IS the visual top of the grid). */
body.page-requestaccess .StdTable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;
    border: 0;
    border-radius: 0;
    font-family: var(--q88-grid-font);
    color: var(--q88-grid-fg);
    font-size: 14px;
    margin: 0;
}

/* Neutralise the thick navy bottom border that BorderV2Bottom adds in
   MainWhiteout.css — the card frame is the only boundary now. */
body.page-requestaccess .StdTable.BorderV2Bottom {
    border-bottom: 0;
}

/* The View-0 ascx ships an inline <style> `.tableHeader { position: sticky;
   top: 0 }` — the rounded card has overflow:hidden so sticky won't actually
   travel, but the rule is harmless. We re-skin colours/typography. */

/* ----- Section header (full-width caption row, View 0) ----- */
body.page-requestaccess .StdTable tr.Header > td {
    background: var(--q88-grid-muted) !important;
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 16px;
    border-bottom: 1px solid var(--q88-grid-border);
}

body.page-requestaccess .StdTable tr.Header > td b {
    font-weight: 600;
}

/* ----- Column header rows (all four header dialects)
   Matches Inspections / Certificates / Inspectors DX grid header:
   14px sentence-case, NOT uppercase. DESIGN.md §5.3 + Figma reference. */
body.page-requestaccess .StdTable tr.ColHeader > td,
body.page-requestaccess .StdTable tr.SubHeader1 > td,
body.page-requestaccess .StdTable tr.SubHeader1 > td.tableHeader,
body.page-requestaccess .StdTable tr.SubHeader2 > td {
    background: var(--q88-grid-muted) !important;
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding: 11px 16px;
    border-bottom: 1px solid var(--q88-grid-border);
    white-space: nowrap;
}

/* ----- Body data rows
   Matches Inspections DX grid: 14px, 8/16 padding, ~36px row height.
   DESIGN.md §5.4 (implementation density). */
body.page-requestaccess .StdTable tr:not(.Header):not(.ColHeader):not(.SubHeader1):not(.SubHeader2):not(.DisabledAlt) > td {
    font-family: var(--q88-grid-font);
    font-size: 14px;
    color: var(--q88-grid-fg);
    padding: 8px 16px;
    border-bottom: 1px solid var(--q88-grid-border);
    vertical-align: middle;
}

body.page-requestaccess .StdTable tr:not(.Header):not(.ColHeader):not(.SubHeader1):not(.SubHeader2):not(.DisabledAlt) > td:first-child {
    font-weight: 500;
}

/* Hover */
body.page-requestaccess .StdTable tr:not(.Header):not(.ColHeader):not(.SubHeader1):not(.SubHeader2):not(.DisabledAlt):hover > td {
    background: var(--q88-grid-row-hover);
}

/* Drop the bottom border on the very last row so it sits flush with the
   rounded card corner. The Repeater's <FooterTemplate> in View 0 emits a
   tr.DisabledAlt note row — that becomes the visual last row. */
body.page-requestaccess .StdTable tr:last-child > td {
    border-bottom: 0;
}

/* ----- Footer note row (tr.DisabledAlt, View 0) ----- */
body.page-requestaccess .StdTable tr.DisabledAlt > td {
    background: #fafafa;
    color: var(--q88-grid-muted-fg);
    font-family: var(--q88-grid-font);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding: 12px 16px;
    border-top: 1px solid var(--q88-grid-border);
}

/* ==========================================================================
   3. Inline action links inside grid cells (Resubmit | Cancel | Dismiss |
      Accept | Decline | Grant Access). These are <asp:LinkButton> /
      <asp:HyperLink> elements rendered as plain <a> tags. Style them as
      teal text links so they don't fall through to the legacy navy
      LinkButton pill chrome.
   ========================================================================== */

body.page-requestaccess .StdTable td a:not(.LinkButton) {
    color: var(--q88-grid-primary);
    text-decoration: none;
    font-weight: 500;
}

body.page-requestaccess .StdTable td a:not(.LinkButton):hover {
    color: var(--q88-grid-primary-hover);
    text-decoration: underline;
}

/* The "Acting As" / "Action" dropdown cells — give the legacy <select>
   a modern pill outline. */
body.page-requestaccess .StdTable td select {
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--q88-grid-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--q88-grid-fg);
    font-family: var(--q88-grid-font);
    font-size: 12px;
}

body.page-requestaccess .StdTable td select:focus {
    outline: 2px solid var(--q88-grid-primary);
    outline-offset: -1px;
    border-color: var(--q88-grid-primary);
}

/* ==========================================================================
   4. View 1 — Request Access form
      The .ascx hard-codes inline navy borders/padding on the company filter
      table (`tblCompanyAdminOnly`). Neutralise those and re-skin the row
      as a soft filter card matching the grid filter strip on Inspections.
   ========================================================================== */

body.page-requestaccess table[id$='_tblCompanyAdminOnly'] {
    border: 1px solid var(--q88-grid-border) !important;
    border-radius: 8px;
    background: #fafafa;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-spacing: 8px !important;
    border-collapse: separate !important;
}

body.page-requestaccess table[id$='_tblCompanyAdminOnly'] td {
    font-family: var(--q88-grid-font);
    font-size: 13px;
    color: var(--q88-grid-fg);
    padding: 4px 6px;
    vertical-align: middle;
}

body.page-requestaccess table[id$='_tblCompanyAdminOnly'] select,
body.page-requestaccess table[id$='_tblCompanyAdminOnly'] input[type='text'] {
    height: 32px;
    min-width: 240px;
    padding: 4px 10px;
    border: 1px solid var(--q88-grid-border);
    border-radius: 6px;
    background: #ffffff;
    font-family: var(--q88-grid-font);
    font-size: 13px;
    color: var(--q88-grid-fg);
}

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

/* "Go" inline LinkButton in the filter row — ghost outline pill */
body.page-requestaccess table[id$='_tblCompanyAdminOnly'] a.LinkButton,
body.page-requestaccess table[id$='_tblCompanyAdminOnly'] a.CommandButton {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    padding: 0 16px !important;
    border: 1px solid var(--q88-grid-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--q88-grid-fg) !important;
    font-family: var(--q88-grid-font);
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.page-requestaccess table[id$='_tblCompanyAdminOnly'] a.LinkButton:hover,
body.page-requestaccess table[id$='_tblCompanyAdminOnly'] a.CommandButton:hover {
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
    background: #ffffff !important;
}

/* Multiline textarea ("Enter vessel name or IMO# ... one per line") */
body.page-requestaccess textarea {
    font-family: var(--q88-grid-font);
    font-size: 13px;
    color: var(--q88-grid-fg);
    padding: 10px 12px;
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    background: #ffffff;
    line-height: 1.5;
}

body.page-requestaccess textarea:focus {
    outline: 2px solid var(--q88-grid-primary);
    outline-offset: -1px;
    border-color: var(--q88-grid-primary);
}

/* ==========================================================================
   5. Bottom action row — Cancel / Submit / Close pills.
      In Views 1 and 2 the LinkButtons sit in <td style="text-align:right;
      padding-top:5px;"> outside the ModuleTemplate. View 3 puts the Close
      button in <Footer2>. Style all three locations.
   ========================================================================== */

/* Right-aligned pill row outside the V2 card (Views 1 & 2) */
body.page-requestaccess td[style*='text-align:right'] a.LinkButton,
body.page-requestaccess .modBottom2 a.LinkButton,
body.page-requestaccess .modV2 + tr td a.LinkButton,
body.page-requestaccess [id$='_lnkRequestAccess1'],
body.page-requestaccess [id$='_lnkSubmitRequest'],
body.page-requestaccess [id$='_lnkRequestAccesCancel1'],
body.page-requestaccess [id$='_lnkRequestAccesCancel2'],
body.page-requestaccess [id$='_lnkClose'] {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-family: var(--q88-grid-font);
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-left: 8px !important;
    box-shadow: none !important;
    line-height: 36px !important;
}

/* Primary (Submit) — teal */
body.page-requestaccess [id$='_lnkRequestAccess1'],
body.page-requestaccess [id$='_lnkSubmitRequest'] {
    background: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary-fg) !important;
    border: 1px solid var(--q88-grid-primary) !important;
}

body.page-requestaccess [id$='_lnkRequestAccess1']:hover,
body.page-requestaccess [id$='_lnkSubmitRequest']:hover {
    background: var(--q88-grid-primary-hover) !important;
    border-color: var(--q88-grid-primary-hover) !important;
    color: var(--q88-grid-primary-fg) !important;
}

/* Secondary / ghost (Cancel, Close) */
body.page-requestaccess [id$='_lnkRequestAccesCancel1'],
body.page-requestaccess [id$='_lnkRequestAccesCancel2'],
body.page-requestaccess [id$='_lnkClose'] {
    background: #ffffff !important;
    color: var(--q88-grid-fg) !important;
    border: 1px solid var(--q88-grid-border) !important;
}

body.page-requestaccess [id$='_lnkRequestAccesCancel1']:hover,
body.page-requestaccess [id$='_lnkRequestAccesCancel2']:hover,
body.page-requestaccess [id$='_lnkClose']:hover {
    border-color: var(--q88-grid-primary) !important;
    color: var(--q88-grid-primary) !important;
    background: #ffffff !important;
}

/* The pill renders as <a> wrapping <span>(<img>)<text>. Hide the legacy icon
   so the label reads cleanly. */
body.page-requestaccess [id$='_lnkRequestAccess1'] img,
body.page-requestaccess [id$='_lnkSubmitRequest'] img,
body.page-requestaccess [id$='_lnkRequestAccesCancel1'] img,
body.page-requestaccess [id$='_lnkRequestAccesCancel2'] img,
body.page-requestaccess [id$='_lnkClose'] img {
    display: none;
}

/* ==========================================================================
   6. Legacy ModuleTemplate (Views 2 & 3)
      View 2 (post-submit confirmation) and View 3 (Pending Requests) use
      <uc:ModuleTemplate> — NOT V2. grid.css's .modV2 chrome doesn't match,
      so we re-implement the white card directly on the legacy wrapper
      (modContainerLarge / modInnerContainer / modTitle) like
      vessel-management.css does.

      Scoped under `[id$="trContentRow"]` (Default.Master's page-content
      row, rendered `ctl00_trContentRow`) — `.modContainerStd` /
      `.modInnerContainer` / `.modMain` etc. are the SAME generic
      ModuleTemplate classes the site-wide AlertBox popup renders
      (Controls/AlertBox.ascx), which lives in the SIBLING `trAlertRow`,
      not inside the page's own content. Without this scope these rules
      leaked onto the AlertBox confirmation popup whenever it fired on
      this page (QEN-8831 "Confirmation popup is misformed") — most
      visibly `margin: 24px 48px` (§7 below) shoving the card away from
      its calculated position, plus `padding: 0` here flattening its text
      against the card edge. Verified via computed-style probe: without
      this scope the popup's `.modContainerStd`/`.modInnerContainer`
      picked up `margin: 24px 48px` / `padding: 0px` from this file.
   ========================================================================== */

body.page-requestaccess [id$="trContentRow"] .modContainerLarge,
body.page-requestaccess [id$="trContentRow"] .modContainerStd {
    border: 0 !important;
    background: transparent;
    margin: 0;
    border-spacing: 0;
}

/* Card chrome — matches Inspections (.modV2 in grid.css): 8px radius,
   1px border, subtle shadow. Padding stays 0 so the title bar / subheader /
   StdTable can each own their gutters edge-to-edge (DESIGN.md §5.1). */
body.page-requestaccess [id$="trContentRow"] .modInnerContainer {
    background: #ffffff;
    border: 1px solid var(--q88-grid-border);
    border-radius: 8px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.05);
    padding: 0 !important;
    overflow: hidden;
}

/* Title bar — matches DESIGN.md §5.2 (h≈40 + 16px gutter). */
body.page-requestaccess [id$="trContentRow"] .modTitle {
    background: #ffffff;
    border-bottom: 1px solid var(--q88-grid-border);
    padding: 12px 16px;
}

body.page-requestaccess [id$="trContentRow"] .modTLeft {
    font-family: var(--q88-grid-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--q88-grid-fg);
    line-height: 24px;
}

body.page-requestaccess [id$="trContentRow"] .modSubHeader {
    background: transparent;
    color: var(--q88-grid-muted-fg);
    font-family: var(--q88-grid-font);
    font-size: 13px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--q88-grid-border);
}

/* No padding — let the StdTable inside flow edge-to-edge so the header row
   IS the top of the grid section (matches Inspections .modV2 → DX grid). */
body.page-requestaccess [id$="trContentRow"] .modMain {
    padding: 0;
    background: #ffffff;
}

/* Footer band — same 16px gutter, sits at card bottom. */
body.page-requestaccess [id$="trContentRow"] .modBottom2 {
    background: #ffffff;
    border-top: 1px solid var(--q88-grid-border);
    padding: 12px 16px;
    text-align: right;
}

/* ==========================================================================
   7. Outer table layout — fill available width
      The .ascx wraps Views 1 and 2 in a bare <table><tr><td>...</td></tr></table>
      with NO width attribute, so the table renders shrink-to-fit (~826px) inside
      a 1257px content cell, leaving big empty margins on either side.

      Force any outer wrapper table that contains a V2 panel or legacy
      ModuleTemplate to fill the available width, matching Inspections /
      Manage Vessels which use the full content column.

      :has() is already used in grid.css; supported in Edge/Chrome.
   ========================================================================== */

/* ----- Bare outer wrapper tables (Views 1, 2) -----
   The .ascx wraps these views in <table><tr><td>...</td></tr></table> with
   no width attribute (shrink-to-fit ~826px). Force them to 100% so the
   V2 / legacy module nested inside has the full content cell to work with.
   The module then enforces its OWN gutters (calc(100% - 24px)). */
body.page-requestaccess table:has(> tbody > tr > td > [id$='_pnlMod']),
body.page-requestaccess table:has(> tbody > tr > td > .modV2),
body.page-requestaccess table:has(> tbody > tr > td > .modContainerLarge),
body.page-requestaccess table:has(> tbody > tr > td > .modContainerStd) {
    width: 100% !important;
}

/* ----- Legacy ModuleTemplate (Std + Large) -----
   These ARE <table> elements (the module's own outer chrome) — used by
   View 3 Pending Requests (.modContainerStd) and View 2 confirmation
   (.modContainerLarge). Match Inspections .modV2 gutter pattern: card
   inset 48px from sidebar edge + 48px from right edge (DESIGN.md §5.1),
   with a 24px vertical margin so it floats on the page background.
   Scoped to `[id$="trContentRow"]` — see §6 banner comment above; the
   site-wide AlertBox popup (Controls/AlertBox.ascx) also renders a bare
   `table.modContainerStd` but lives in the sibling `trAlertRow`, not here. */
body.page-requestaccess [id$="trContentRow"] table.modContainerStd,
body.page-requestaccess [id$="trContentRow"] table.modContainerLarge {
    width: calc(100% - 96px) !important;
    max-width: calc(100% - 96px) !important;
    margin: 24px 48px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* The V2 panel itself caps at calc(100% - 24px) via grid.css. Now that its
   parent table fills the row, the card uses the full width too. */
body.page-requestaccess .modV2 + tr > td,
body.page-requestaccess .modContainerLarge {
    padding: 0;
}

/* ----- View 3 (Pending Requests): hard-coded width="750px" on the StdTable
        in the .ascx [L145]. Override with !important since the HTML attr
        is the cascade origin we need to beat (attr → presentational =
        author normal, our rule wins on specificity but make it explicit). */
body.page-requestaccess #rptPendingRequests_table,
body.page-requestaccess [id$='_modPendingRequests'] .StdTable,
body.page-requestaccess .modMain > .StdTable {
    width: 100% !important;
    max-width: none !important;
}

/* ----- View 1: the txtRequestAccessVessel textarea explicitly Width="100%"
        but its grandparent table (cellspacing=0 cellpadding=0 width="100%")
        sits inside the same outer wrapper. With the wrapper now 100%,
        the textarea grows correctly. No extra rule needed. */