/* ==========================================================================
   viewship.css — ViewShip.aspx sub-view tab CONTENT skins (QEN-8776)
   ==========================================================================
   Scope: body.page-viewship  (wired in Default.Master.cs for every vessel-view
   request — /ViewShip.aspx any tab + /DesktopDefault.aspx?i=<IMO> any tab).

   Division of labour:
   - SHARED modV2 CHROME (tab strip, vessel-name title, Print/Email/Vessel Search
     action links, footer "Top" button, header/footer card-inset alignment) lives
     in components.css §7 / §7.a / §7.b / §7.c — those rules are scoped to
     body.page-viewship so they paint on EVERY tab.
   - The "Vessel Data" tab FORM body is styled by questionnaire.css (that tab also
     carries body.page-questionnaire).
   - THIS file styles the per-tab CONTENT of the sister sub-views, each gated by
     its visible server panel id-suffix so the rules only fire on the right tab:
       Documents  → [id$='_m_pnlDocuments']
       AIS        → [id$='_m_pnlAIS']
       Dwt/Draft  → [id$='_m_pnlDwt']   (content already skinned by
                    dwt-draft-calc.css — only the outer card framing here)
       USCG PSIX  → [id$='_m_pnlPSIX']
       Photos     → [id$='_m_pnlGoogle'] + #ulVesselPhotoList

   Tokens (DESIGN.md §1): teal --primary #0d9488, foreground #0f172a, muted
   #64748b, card surface #fff / border #e5e5e5 / radius 8px, section band
   --accent #f1f5f9. Card inset mirrors §7.b: width:calc(100% - 96px); margin:auto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid tokens — the --q88-grid-* family is declared PER-PAGE (grid.css under
   body.page-grid; terminal-vetting / usermanagement / vessel-management each
   redeclare it). The Documents + USCG PSIX sTbl skins below consume it, so
   declare the canonical values (from grid.css) under body.page-viewship too.
   -------------------------------------------------------------------------- */
body.page-viewship {
  --q88-grid-fg: var(--foreground);
  --q88-grid-muted: #f5f5f5;
  --q88-grid-muted-fg: var(--text-muted);
  --q88-grid-border: var(--border-default);
  --q88-grid-card: var(--card-raised, #ffffff);
  --q88-grid-primary: var(--primary);
  --q88-grid-row-hover: var(--surface-card);
  --q88-grid-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   0.0 Clamp the DNN ContentPane shrink-to-fit chain to 100% of .q88-content.
   Without this the chain shrink-wraps to EACH tab's content width (narrow
   Documents table vs wide Photos CSE table), so the shared modV2 chrome — the
   tab strip + right-aligned Print/Email/Vessel-Search links (§7.b inset to
   calc(100% - 96px) of this chain) — AND every per-tab card would render at a
   DIFFERENT width per tab and shift when switching tabs. Pinning the chain to
   100% makes the chrome + cards a single consistent full-content width on every
   tab, matching the Vessel-Data reference. Mirror of questionnaire.css's
   :has(#pnlQuestionnaires) clamp, generalised to all page-viewship tabs; wide
   content scrolls inside its card rather than bloating the page. (DESIGN.md §32.1)
   -------------------------------------------------------------------------- */
body.page-viewship .ContentPane,
body.page-viewship .ContentPaneBody,
body.page-viewship #ctl00_cphMiddle,
body.page-viewship #cphMiddle_ctl00_divWrap {
  width: 100% !important;
  max-width: none !important;
}

/* --------------------------------------------------------------------------
   0. Reveal the branded bathymetric pattern behind the content on every tab
      (mirrors questionnaire.css §6, which only covered the Vessel Data card).
      The legacy ModuleTemplateV2 wrappers (.modMain slate-50, .modV2Main white)
      are opaque + full-width and hide the .q88-content::before pattern.
   -------------------------------------------------------------------------- */
body.page-viewship .modMain,
body.page-viewship [id$='_m_pnlMain'].modV2Main {
  background-color: transparent !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   1. Shared content-card framing
      The DIRECT-content panels (Documents = Repeater sTbl, Photos = gallery)
      become white inset cards, centred to the same calc(100% - 96px) column as
      the modV2 header/tabs/footer (§7.b) so the whole tab reads as one aligned
      card stack.
      EXCLUDED — panels that host a NESTED uc:ModuleTemplateV2 (their own card
      chrome, skinned via components.css §7 once re-scoped to page-viewship):
        Dwt/Draft (.q88-card .dwt-card-wrap, dwt-draft-calc.css),
        AIS (nested modV2 around the map — §3),
        USCG PSIX (nested modV2 cpMain — §5).
   -------------------------------------------------------------------------- */
body.page-viewship [id$='_m_pnlDocuments'],
body.page-viewship [id$='_m_pnlPSIX'],
body.page-viewship [id$='_m_pnlGoogle'] {
  display: block;
  width: calc(100% - 96px);
  margin: 0 auto 24px;
  box-sizing: border-box;
  background-color: var(--card-raised, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 20px 24px;
}

/* ==========================================================================
   2. Documents tab  — [id$='_m_pnlDocuments']
   Repeater #rptDocuments → single table.sTbl (tr.trHdr header + classless data
   rows). Render the panel as a full-bleed grid-card and skin the table with the
   canonical --q88-grid-* treatment (mirrors archive.css / Inspections grids).
   Columns: Type | Document | Expires | Modified | Action — the legacy markup
   center-aligns Expires/Modified/Action via inline align attrs, so we DON'T set
   text-align (let the markup's per-column alignment stand).
   ========================================================================== */
/* Grid-card: drop the §1 text padding, clip the table corners to the radius */
body.page-viewship [id$='_m_pnlDocuments'] {
  padding: 0;
  overflow: hidden;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--q88-grid-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--q88-grid-fg);
  background: var(--q88-grid-card);
}
/* Header band — 14/600 on the subtle --q88-grid-muted rail (mirrors archive). */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl tr.trHdr td,
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl tr.trHdr th {
  font-family: var(--q88-grid-font);
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--q88-grid-fg) !important;
  background: var(--q88-grid-muted) !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--q88-grid-border) !important;
  vertical-align: middle;
  white-space: nowrap;
}
/* Body rows (classless <tr id="tr">) — 11/16 padding, 14/20 type, row rules. */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl > tbody > tr:not(.trHdr) > td {
  font-family: var(--q88-grid-font);
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: var(--q88-grid-fg) !important;
  background: var(--q88-grid-card) !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--q88-grid-border) !important;
  vertical-align: middle;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl > tbody > tr:not(.trHdr):hover > td {
  background: var(--q88-grid-row-hover) !important;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl > tbody > tr:not(.trHdr):last-of-type > td {
  border-bottom: 0 !important;
}
/* Document-name / type links → tokenised grid link colour, underline on hover. */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl a:link,
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl a:visited {
  color: var(--q88-grid-primary, var(--text-link));
  text-decoration: none;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl a:hover {
  text-decoration: underline;
}
/* Action column glyphs — swap the legacy rasters for Lucide glyphs so the column
   matches the refresh (the grid links are already teal). Two DIFFERENT element
   types need two DIFFERENT techniques:

   • View = <a><img src="…/txt.gif">  (or editDisabled.png when restricted).
     txt.gif is a transparent-background raster on an <img>, and Chrome honours
     `content:url(<inline SVG>)` on <img> — so we REPLACE the raster outright
     (colour baked into the SVG stroke; content:url can't be recoloured). View →
     teal eye, restricted → dimmed slate eye. The base rule also neutralises the
     GLOBAL edit-swap mask (components.css masks editDisabled.png into a 24px
     pencil — without mask:none it would clip our eye into a pencil silhouette).

   • Email = <input type=image src="…/email.gif"> wrapped in <span.docEmailWrap>.
     email.gif is an OPAQUE raster (white bg) AND Chrome does NOT honour
     content:url on form <input> (only on <img>); masking an opaque raster leaks
     its pixmap ("the edit.gif trap"; see icon-swaps.css). So we use the
     hidden-input + wrapper-pseudo pattern: hide the raster (opacity:0, still
     clickable) and paint a recolourable Lucide envelope on the span ::before
     (pointer-events:none so the click reaches the input underneath). */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td a > img {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: middle;
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;
}
/* View (enabled) — teal eye */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td a > img[src*="txt.gif" i] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
}
/* View (restricted, unauth/free-user) — dimmed slate eye */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td a > img[src*="editDisabled" i] {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>") !important;
  opacity: 1 !important;
  cursor: default;
}
/* Email — hidden input + wrapper-pseudo envelope */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td .docEmailWrap {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td .docEmailWrap input[type="image"].imgEmailDoc {
  position: absolute;
  inset: 0;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  opacity: 0 !important;     /* hide the opaque raster; still clickable */
  cursor: pointer;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td .docEmailWrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;      /* let the click fall through to the input */
  background-color: var(--q88-grid-primary, #0d9488);
  -webkit-mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
          mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
/* Restricted email → dimmed slate envelope, no pointer affordance */
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td .docEmailWrap:has(input[src*="emailDisabled" i])::before {
  background-color: #94a3b8;
}
body.page-viewship [id$='_m_pnlDocuments'] table.sTbl td .docEmailWrap:has(input[src*="emailDisabled" i]) input[type="image"].imgEmailDoc {
  cursor: default;
}

/* ==========================================================================
   3. AIS Tracking tab — [id$='_m_pnlAIS']  (Leaflet map #map2)
   A nested modV2 wraps a full-bleed Leaflet map (the nested title/subheader/footer
   rows render empty here). Inset + card the panel, strip the nested modV2 chrome,
   kill the legacy gray (#666) map border, and let the map fill + clip to the card
   radius. (Leaflet caches container size; a real page load measures the inset
   width on init — only CSS-injected previews need a window 'resize' to re-tile.)
   ========================================================================== */
body.page-viewship [id$='_m_pnlAIS'] {
  display: block;
  width: calc(100% - 96px);
  margin: 0 auto 24px;
  box-sizing: border-box;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  overflow: hidden;
}
body.page-viewship [id$='_m_pnlAIS'] .modV2,
body.page-viewship [id$='_m_pnlAIS'] .modV2Main {
  background: transparent !important;
  border: 0 !important;
}
body.page-viewship [id$='_m_pnlAIS'] #map2 {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   4. Dwt/Draft tab — [id$='_m_pnlDwt']  (content done in dwt-draft-calc.css)
   ========================================================================== */

/* ==========================================================================
   5. USCG PSIX tab — [id$='_m_pnlPSIX']  (carded in §1)
   This vessel only renders lblNoVesselFound (red .warning). When a vessel IS in
   the USCG DB, pnlPSIX hosts a nested ModuleTemplateV2 (#cpMain: "USCG PSIX" title
   + FleetVessel/Show/Email subheader + PSIXDetail.ascx = 3 stacked table.sTbl
   repeaters: Particulars / Cases(+deficiency blocks) / Documents). pnlPSIX is the
   card (§1) → strip the nested modV2's own chrome and skin the sTbl sections with
   the canonical --q88-grid-* treatment.  [Populated state: verify against a real
   USCG vessel — only the empty state is browser-verified here.]
   ========================================================================== */
/* Empty state — friendlier centred muted notice instead of bare red 12px. */
body.page-viewship [id$='_m_pnlPSIX'] [id$='_lblNoVesselFound'],
body.page-viewship [id$='_m_pnlPSIX'] .warning {
  display: block !important;
  text-align: center;
  color: var(--muted-foreground, #64748b) !important;
  font-size: 14px !important;
}
/* Nested PSIX modV2 — pnlPSIX is the card, so strip the nested card chrome. */
body.page-viewship [id$='_m_pnlPSIX'] .modV2,
body.page-viewship [id$='_m_pnlPSIX'] .modV2Main {
  background: transparent !important;
  border: 0 !important;
}
/* Nested "USCG PSIX" title → slate section heading (§7.c is outer-vessel only). */
body.page-viewship [id$='_m_pnlPSIX'] .modV2Title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--foreground, #0f172a) !important;
}
/* Show button (lnkShow .LinkButton) → teal pill; Email (lnkEmail .linkWHover) is
   already teal via components.css §7.a. */
body.page-viewship [id$='_m_pnlPSIX'] a.LinkButton {
  display: inline-block;
  background-color: var(--button-primary-bg, #0d9488) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px;
  padding: 6px 14px !important;
  font-weight: 500;
  text-decoration: none;
}
/* sTbl sections — canonical grid skin (mirrors §2 Documents); 3 stacked tables
   so add a gap between them. */
body.page-viewship [id$='_m_pnlPSIX'] table.sTbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--q88-grid-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--q88-grid-fg);
  margin-bottom: 16px;
}
body.page-viewship [id$='_m_pnlPSIX'] table.sTbl tr.trHdr td {
  font-family: var(--q88-grid-font);
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--q88-grid-fg) !important;
  background: var(--q88-grid-muted) !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--q88-grid-border) !important;
  vertical-align: middle;
  white-space: nowrap;
}
body.page-viewship [id$='_m_pnlPSIX'] table.sTbl > tbody > tr:not(.trHdr) > td {
  font-family: var(--q88-grid-font);
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: var(--q88-grid-fg) !important;
  background: var(--q88-grid-card) !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--q88-grid-border) !important;
  vertical-align: middle;
}
/* rptDocuments AlternatingItemTemplate emits tr.Alt → zebra striping. */
body.page-viewship [id$='_m_pnlPSIX'] table.sTbl > tbody > tr.Alt > td {
  background: var(--q88-grid-row-hover) !important;
}
body.page-viewship [id$='_m_pnlPSIX'] table.sTbl > tbody > tr:not(.trHdr):hover > td {
  background: var(--q88-grid-row-hover) !important;
}
/* Expired-document cell (.Warning) → amber, not legacy red. */
body.page-viewship [id$='_m_pnlPSIX'] table.sTbl td.Warning {
  color: #b45309 !important;
  font-weight: 600 !important;
}
/* Deficiency blocks (code-behind HTML) — soften the hard legacy dashed borders. */
body.page-viewship [id$='_m_pnlPSIX'] .dashedBorderGreen {
  border: 1px dashed var(--primary, #0d9488) !important;
}
body.page-viewship [id$='_m_pnlPSIX'] .dashedBorderRed {
  border: 1px dashed var(--red-600) !important;
}

/* ==========================================================================
   6. Photos tab — [id$='_m_pnlGoogle']  (carded in §1)
   Gallery = ul#ulVesselPhotoList (JS-built <li> = thumbnail <img> + © caption
   <div>). The panel ships an inline <style> with a fixed 980px ul + floated 300px
   li + gray caption; override to a fluid responsive grid of thumbnail cards. The
   Google CSE (#SearchControl / .gsc-*) chrome stays hidden as the inline style
   sets it. This vessel has 0 photos (empty grid). [Populated grid: verify against
   a vessel that has photos. Selectors here are id-scoped (1,1,1) so they beat the
   panel's inline <style> #ulVesselPhotoList rules (1,0,0) by specificity.]
   ========================================================================== */
body.page-viewship [id$='_m_pnlGoogle'] table.search-control {
  width: 100% !important;
}
body.page-viewship [id$='_m_pnlGoogle'] #ulVesselPhotoList {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
body.page-viewship [id$='_m_pnlGoogle'] #ulVesselPhotoList li {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  list-style: none;
  background: var(--card-raised, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  overflow: hidden;
}
body.page-viewship [id$='_m_pnlGoogle'] #ulVesselPhotoList li img {
  width: 100% !important;
  height: 170px !important;
  object-fit: cover;
  display: block;
}
body.page-viewship [id$='_m_pnlGoogle'] #ulVesselPhotoList li div {
  color: var(--muted-foreground, #64748b) !important;
  font-size: 12px;
  text-align: left;
  padding: 8px 12px !important;
}

/* ==========================================================================
   9. Position List iframe embed (context=pos)
   Default.Master.cs adds the `pos-embed` marker class for this request
   (q88Header/sidebarWO hidden, no side nav or top header render) but keeps
   `sidebar-nav`/`page-viewship`/`page-questionnaire` so the card + tab-strip
   skin and the other sidebar-nav-scoped content rules still apply. The
   48px-gutter insets above (§1, §7.b in components.css) assume a full-page
   column; inside PL's small iframe that reads as a lot of dead whitespace
   around the card and tab strip, so collapse them to full-bleed here. The
   extra `.pos-embed` class also raises specificity above the originals, so
   these win regardless of load order.
   ========================================================================== */
body.page-viewship.pos-embed [id$='_m_pnlTitle'],
body.page-viewship.pos-embed [id$='_m_pnlSubHeader'],
body.page-viewship.pos-embed [id$='_m_pnlFooter'],
body.page-viewship.pos-embed [id$='_m_pnlDocuments'],
body.page-viewship.pos-embed [id$='_m_pnlPSIX'],
body.page-viewship.pos-embed [id$='_m_pnlGoogle'] {
  width: 100%;
}

body.page-questionnaire.pos-embed #pnlQuestionnaires.q88-card {
  width: auto;
}

body.page-viewship.pos-embed .q88-card {
  margin: 24px 16px;
}