/* ── marina-grid-cell ────────────────────────────────────────────── */
/* Padding tokens:  compact = --spacing-sm1 (8px)                    */
/*                  default = --spacing-sm2 (12px)                   */
/*                  spacious = --spacing-md1 (16px)                  */
/* Body hover fill: --cds-color-neutral-200 (fixed, not accent)      */
/* Header accent stroke: --cds-theme-accent (underline variant only) */
/* Focus ring: --cds-color-utility-wcag-focus-state (#386CF7)        */

/* ── Host elements — display:contents makes inner .marina-grid-cell the grid item ──
   Angular renders marina-header-grid-cell / marina-body-grid-cell as custom elements.
   display:contents removes the host box so the inner <div class="marina-grid-cell">
   participates directly in the parent .marina-grid-row subgrid.
   The role="columnheader" / role="gridcell" attributes on the inner div remain
   accessible — display:contents preserves the element in the accessibility tree. */

marina-header-grid-cell,
marina-body-grid-cell {
  display: contents;
}

.marina-grid-cell {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm1);
  padding-left: var(--spacing-sm2);
  padding-right: var(--spacing-sm2);
  box-sizing: border-box;
  min-height: calc(
    2 * var(--spacing-sm2) + var(--cds-typography-line-height-body-regular-base)
  );
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
  color: var(--cds-theme-text);
  background-color: var(--cds-theme-bg);
}

/* ── Role: Header ─────────────────────────────────────────────────── */

.marina-grid-cell--header {
  font-weight: 700;
  position: relative;
}

/* Column separator — centered pseudo-element, line-height tall, not full cell height */
.marina-grid-cell--header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--cds-typography-line-height-body-regular-base);
  width: var(--cds-border-xs);
  background-color: var(--cds-color-neutral-300);
}

/* In the row-based layout, cells are direct children of .marina-grid-row--header.
   Hide the separator on the last header cell. */
.marina-grid-row--header > .marina-grid-cell--header:last-child::after {
  display: none;
}

/* Header focus */
.marina-grid-cell--header:focus-visible {
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: -2px;
}

/* ── Role: Body ───────────────────────────────────────────────────── */

/* Body hover is handled at the row level (.marina-grid-row--body:hover > .marina-grid-cell--body)
   in marina-grid-row.css. Variant-specific overrides below still apply. */

/* Body focus */
.marina-grid-cell--body:focus-visible {
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: -2px;
}

/* ── Cell types — shared layout ───────────────────────────────────── */

/* Checkbox / radio / drag-indicator — centred, fixed narrow width */
.marina-grid-cell--type-checkbox,
.marina-grid-cell--type-radio,
.marina-grid-cell--type-drag {
  justify-content: center;
}

/* Ellipses — centred action trigger */
.marina-grid-cell--type-ellipses {
  justify-content: center;
}

/* Blank — no content */
.marina-grid-cell--type-blank {
  pointer-events: none;
}

/* File cell — label after icon */
.marina-grid-cell--type-file {
  gap: var(--spacing-sm1);
}

/* ── Style variants ───────────────────────────────────────────────── */

/* Gray fill — light gray surface, no stroke */
.marina-grid-cell--variant-gray-fill {
  background-color: var(--cds-color-neutral-200);
}

.marina-grid-cell--variant-gray-fill.marina-grid-cell--body:hover {
  background-color: var(--cds-color-neutral-300);
}

/* Underline — white fill; header separator is neutral-black (overrides row-level accent) */
.marina-grid-cell--variant-underline {
  background-color: var(--cds-color-neutral-white);
}

/* Override the row-level accent border-bottom with neutral-black for underline variant */
.marina-grid-row--header:has(.marina-grid-cell--variant-underline) {
  border-bottom-color: var(--cds-color-neutral-black);
}

/* Gray-fill and white-fill suppress the header accent border */
.marina-grid-row--header.marina-grid-row--variant-gray-fill,
.marina-grid-row--header.marina-grid-row--variant-white-fill {
  border-bottom: none;
}

.marina-grid-cell--variant-underline.marina-grid-cell--body:hover {
  background-color: var(--cds-color-neutral-200);
}

/* White fill — white surface, no stroke */
.marina-grid-cell--variant-white-fill {
  background-color: var(--cds-color-neutral-white);
}

.marina-grid-cell--variant-white-fill.marina-grid-cell--body:hover {
  background-color: var(--cds-color-neutral-200);
}

/* ── Sticky column ───────────────────────────────────────────────── */
/* Apply .marina-grid-cell--sticky to cells in columns that must remain
   visible during horizontal scroll. Also set [stickyLeft] inline style on
   the cell for multi-sticky-column offsets (e.g. style="left:44px").
   The scroll container is .marina-table (overflow-x:auto). Because there is
   no blocking overflow ancestor between the cell and .marina-table, sticky
   positioning works correctly inside the subgrid row.
   Background-color must be explicit (not transparent) to cover scrolled
   content — the variant classes already set an opaque background. */

.marina-grid-cell--sticky {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Only the rightmost sticky column shows the scroll-separator shadow.
   Use a ::before gradient so the shadow is strictly right-side only —
   no vertical bleed between rows. box-shadow with clip-path is unreliable
   in browsers with subgrid + sticky stacking contexts.
   Add marina-grid-cell--sticky-last to the last sticky column's cells. */
.marina-grid-cell--sticky-last {
  overflow: visible;
}

.marina-grid-cell--sticky-last::before {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
  pointer-events: none;
  z-index: 1;
}

.marina-grid-cell--header.marina-grid-cell--sticky {
  z-index: 2; /* header sticky cells sit above body sticky cells */
}

/* ── Padding modifiers (top/bottom only) ──────────────────────────── */

.marina-grid-cell--padding-compact {
  padding-top: var(--spacing-sm1); /* 8px */
  padding-bottom: var(--spacing-sm1);
  /* Override base min-height (sized for default 12px padding) so compact rows are visibly shorter */
  min-height: calc(
    2 * var(--spacing-sm1) + var(--cds-typography-line-height-body-regular-base)
  );
}

.marina-grid-cell--padding-default {
  padding-top: var(--spacing-sm2); /* 12px */
  padding-bottom: var(--spacing-sm2);
}

.marina-grid-cell--padding-spacious {
  padding-top: var(--spacing-md1); /* 16px */
  padding-bottom: var(--spacing-md1);
  min-height: calc(
    2 * var(--spacing-md1) + var(--cds-typography-line-height-body-regular-base)
  );
}

/* ── Centered cell types: strip vertical padding so min-height drives row height ── */
/* These types contain fixed-size controls (24px artboard, SVG icon) rather than    */
/* text. Without this override, explicit padding modifiers (e.g. --padding-default) */
/* push the cell height beyond text cells, misaligning rows across adjacent columns. */
/* Placed after padding modifiers so cascade overrides them for these types.         */

.marina-grid-cell--type-checkbox,
.marina-grid-cell--type-radio,
.marina-grid-cell--type-drag,
.marina-grid-cell--type-ellipses {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── Text size modifiers ──────────────────────────────────────────── */

.marina-grid-cell--text-body-regular {
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base); /* 16px */
  font-weight: var(--cds-typography-font-weight-body-regular-base);
  line-height: var(--cds-typography-line-height-body-regular-base);
}

.marina-grid-cell--text-body-sm {
  font-family: var(--cds-typography-font-family-body-sm-regular-base);
  font-size: var(--cds-typography-font-size-body-sm-regular-base); /* 13px */
  font-weight: var(--cds-typography-font-weight-body-sm-regular-base);
  line-height: var(--cds-typography-line-height-body-sm-regular-base);
}

/* ── Alignment modifiers ──────────────────────────────────────────── */

.marina-grid-cell--align-left {
  justify-content: flex-start;
  text-align: left;
}

.marina-grid-cell--align-center {
  justify-content: center;
  text-align: center;
}

.marina-grid-cell--align-right {
  justify-content: flex-end;
  text-align: right;
}

/* ── Anatomy elements ─────────────────────────────────────────────── */

.marina-grid-cell__label {
  flex: 1;
  min-height: var(--cds-typography-line-height-body-regular-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header-only anatomy: tooltip, sort, filter, resize */

/* Static tooltip icon wrapper (legacy span-based) */
.marina-grid-cell__tooltip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Interactive tooltip trigger button (Angular + React portal implementation) */
.marina-grid-cell__tooltip-trigger {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: default;
  color: var(--cds-theme-text);
  border-radius: var(--cds-radius-small);
}

.marina-grid-cell__tooltip-trigger:hover {
  color: var(--cds-color-neutral-400);
}

.marina-grid-cell__tooltip-trigger:focus-visible {
  color: var(--cds-color-neutral-400);
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 1px;
}

.marina-grid-cell__sort,
.marina-grid-cell__filter,
.marina-grid-cell__resize {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--cds-theme-text);
  border-radius: var(--cds-radius-small);
}

.marina-grid-cell__sort:hover,
.marina-grid-cell__filter:hover,
.marina-grid-cell__resize:hover {
  color: var(--cds-color-neutral-400);
}

.marina-grid-cell__sort:focus-visible,
.marina-grid-cell__filter:focus-visible,
.marina-grid-cell__resize:focus-visible {
  color: var(--cds-color-neutral-400);
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: 1px;
}

/* Accent-coloured operators (sort/filter carry data-accent theming) */
.marina-grid-cell__sort--active,
.marina-grid-cell__filter--active {
  color: var(--cds-theme-accent);
}

/* Ellipses action button — resets browser button styles, fills the cell */
.marina-grid-cell__ellipses-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cds-theme-text);
  border-radius: var(--cds-radius-small);
}

.marina-grid-cell__ellipses-btn:hover {
  color: var(--cds-color-neutral-400);
}

.marina-grid-cell__ellipses-btn:focus-visible {
  outline: 2px solid var(--cds-color-utility-wcag-focus-state);
  outline-offset: -2px;
}

/* File cell icon */
.marina-grid-cell__file-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--cds-color-neutral-500);
}

/* File cell link — wraps icon + label when href is provided */
.marina-grid-cell__file-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm1);
  flex: 1;
  min-width: 0;
  color: var(--cds-color-utility-wcag-inline-link);
  text-decoration: underline;
  overflow: hidden;
}

.marina-grid-cell__file-link:hover {
  color: var(--cds-color-utility-wcag-inline-link-hover);
}

.marina-grid-cell__file-link:visited {
  color: var(--cds-color-utility-wcag-inline-link-visited);
}

/* Icon follows link color — explicit rules required because browsers block
   color:inherit from cascading :visited state to child elements (privacy guard) */
.marina-grid-cell__file-link .marina-grid-cell__file-icon {
  color: var(--cds-color-utility-wcag-inline-link);
}

.marina-grid-cell__file-link:hover .marina-grid-cell__file-icon {
  color: var(--cds-color-utility-wcag-inline-link-hover);
}

.marina-grid-cell__file-link:visited .marina-grid-cell__file-icon {
  color: var(--cds-color-utility-wcag-inline-link-visited);
}

/* Label inside file link — preserve text-overflow */
.marina-grid-cell__file-link .marina-grid-cell__label {
  text-decoration: none; /* underline is on the <a>, not repeated on child */
}
/* 2026-04-02 YETENG0: MCIS-18628 - Story 3.33: Marina Grid DataTable styles
   MARINA_BLOCKS (copy-to-own) — marina-grid-column/row/cell CSS imported in component files.
   @chubb/marina-css/components/marina-text-link imported in MarinaDataTable.tsx (JS-side) */

/* Grid container: CSS Grid for automatic row-height synchronisation.
   grid-template-columns is set via inline style (repeat(N, minmax(0, 1fr))).
   Switched from column-first flex to row-first grid so multi-line cells (Address,
   Primary Contact) correctly align with adjacent single-line cells in the same row. */
.marina-data-table {
  display: grid;
  width: 100%;
  overflow-x: auto;
}

/* Row wrappers use display:contents so their child cells participate directly in the
   CSS grid as grid items. role="row" is preserved on the wrapper for accessibility. */
.marina-data-table__row {
  display: contents;
}

/* Body cells: restore the row separator line (previously on marina-grid-row--body).
   Align content to the top so multi-line cells start at the same vertical position. */
.marina-data-table .marina-grid-cell--body {
  border-bottom: var(--cds-border-xs) solid var(--cds-color-neutral-300);
  align-items: flex-start;
  transition: background-color 60ms ease;
}

/* Suppress Marina's native per-cell hover — row-hover JS state handles the highlight instead.
   Without this, the cell's :hover triggers the white neutral-200 flash before React re-renders. */
.marina-data-table .marina-grid-cell--body:hover {
  background-color: var(--cds-theme-bg);
}

/* Suppress the ::after column separator on the last header cell.
   Marina CSS normally suppresses it via [role="grid"] > :last-child, but that selector
   targets the last grid child (a row wrapper in the new layout), not the last header cell. */
.marina-data-table .marina-grid-cell--last-col::after {
  display: none;
}

/* Row hover — applied via JS hoveredKey state to all cells in the same row simultaneously.
   Scoped to .marina-data-table so specificity beats the :hover suppressor above (same weight, later order). */
.marina-data-table .marina-grid-cell--body.marina-grid-cell--row-hovered {
  background-color: var(--cds-color-neutral-200, #F2F2F2);
}

@media (prefers-color-scheme: dark) {
  /* Row hover in dark mode — neutral-600 gives a visible lift on #191919 body */
  .marina-data-table .marina-grid-cell--body.marina-grid-cell--row-hovered {
    background-color: var(--cds-color-neutral-600, #404040);
  }

  /* Header gray-fill: neutral-300 (#B3B3B3) causes white text on light-gray — fix with neutral-500 */
  .marina-data-table .marina-grid-cell--header.marina-grid-cell--variant-gray-fill {
    background-color: var(--cds-color-neutral-500, #4D4D4D);
  }

  /* 2026-04-13 YETENG0: MCIS-18628 - Story 3-42 BF: commodity group header rows use --body (not --header)
     with --variant-gray-fill; same contrast fix needed as header cells above. */
  .marina-data-table .marina-grid-cell--body.marina-grid-cell--variant-gray-fill {
    background-color: var(--cds-color-neutral-600, #404040);
  }

  /* Links: swap standard blue (#1E1EEA) for the Marina inverse link token (#76B0F3).
     :visited override prevents browser default purple from showing on dark backgrounds. */
  .marina-data-table .marina-text-link--standard,
  .marina-data-table .marina-text-link--standard:visited {
    color: var(--cds-color-utility-wcag-inline-link-inverse, #76B0F3);
  }
  .marina-data-table .marina-text-link--standard:hover,
  .marina-data-table .marina-text-link--standard:visited:hover {
    color: var(--cds-color-utility-wcag-inline-link-hover-inverse, #8EBAF5);
  }
}

/* 2026-04-13 YETENG0: MCIS-18628 - Story 3-42 BF: voyage listing cells — small body font across all
   data columns for density. Wrap variant allows text to flow to a second line; nowrap variant keeps
   Rate ("0.235000%") and Limit ("USD 2,500,000.00") on one line to avoid mid-value breaks. */
.marina-data-table .voyage-cell--wrap > .marina-grid-cell__label,
.marina-data-table .voyage-cell--nowrap > .marina-grid-cell__label {
  font-size: var(--cds-typography-font-size-body-regular-sm, 12px);
  line-height: 1.3;
}

.marina-data-table .voyage-cell--wrap > .marina-grid-cell__label {
  white-space: normal;
  word-break: break-word;
}

/* Empty state rendered below the grid */
.marina-data-table__empty {
  text-align: center;
  color: var(--cds-color-neutral-500);
  padding: var(--spacing-sm2);
  font-family: var(--cds-typography-font-family-body-regular-base);
  font-size: var(--cds-typography-font-size-body-regular-base);
}