/* HARPS Version 2 — contextual detail panel corrections.
 *
 * The order and invoice detail pages each carry their own copy of the panel's
 * CSS inline, so a fix applied in one of them would have to be applied in all
 * ~190. This file is the shared correction instead: linked from every page that
 * still renders the legacy `.detail-rail`, it fixes the two things that stop the
 * panel doing its job, and nothing else.
 *
 * Scoped through the two panel containers throughout — `.detail-rail` on the
 * order and invoice pages, `.detail-context-panel` on harps-revenue.html — so
 * it cannot reach the tables or the detail cards. harps-revenue.html had its
 * own older panel and now renders from here too.
 *
 * The chip is deliberately absent: it is fixed at source in v2-chip.css, where
 * `width: fit-content` stops a flex column stretching it. Restating that here
 * would give the shared component a second, page-specific owner.
 */

/* ── The record's identity ─────────────────────────────────────────────
   The panel exists to tell you which order you are looking at, and this line
   is the answer. It was being cut to "251904 | Samsung_Ga…" and the full value
   moved into a hover tooltip, which makes identifying the record conditional
   on having a pointer and knowing to hover.

   The truncation is applied at runtime: an inline module adds `.edl-truncate`
   to this element for its tooltip pattern. Two classes outrank that one, so
   these win wherever the sheet sits in the cascade. Undoing the overflow also
   switches the tooltip off by itself — it only shows when scrollWidth exceeds
   clientWidth, which stops being true once the text wraps. Nothing is
   disconnected and the same module keeps truncating the table links, where
   truncation is the right call and a tooltip is a reasonable second route to
   the value. */
.detail-rail .detail-order-title,
.detail-context-panel .detail-order-title {
  /* Stated here rather than left to the pages: harps-revenue.html has no inline
     copy of the panel's CSS, and the ~190 pages that do carry an identical one.
     Owning the type here is what stops the two panels drifting again. */
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: var(--weight-heavy);
  color: var(--gray-95);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  /* The names run together as one token — Samsung_GalaxyFold_HULU_CTV_Q3 has
     no spaces to break at — so allow a break inside a word rather than let it
     push the panel wider than its column. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Wrapping turns one line into four, so the block below it needs room to
   breathe rather than sitting tight under a now much taller heading. */
.detail-rail .detail-order-stack,
.detail-context-panel .detail-order-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The wrap width is part of the treatment: the same 210px column makes the
     title break at the same points on both panels. */
  width: 210px;
}

/* Left-aligned with the heading above it, hugging its label. `align-self` is
   safe to state here — this is a known column — and it makes the intent
   explicit at the call site as well as in the component. */
.detail-rail .detail-status-chip,
.detail-context-panel .detail-status-chip {
  align-self: flex-start;
}

/* ── The section list ──────────────────────────────────────────────────
   Revenue, Invoice, Documents and History. The rows are declared here for the
   same reason the title is: harps-revenue.html was carrying a second, older
   implementation of this list — 20px icons stretched out of their aspect, a
   rounded lavender pill for the current row — while every other detail page
   used the treatment below. Both now resolve to this one component.

   Values match the inline copy the other pages already ship, so adopting this
   sheet as the owner leaves them rendering exactly as before. */
.detail-context-panel .detail-nav-group-row,
.detail-context-panel .detail-nav-subitem {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
  text-decoration: none;
  border-bottom: 1px solid var(--detail-divider);
  box-sizing: border-box;
}

.detail-context-panel .detail-nav-group-row {
  gap: 8px;
  min-height: 43.5px;
  padding: 12px 20px;
  /* No radius: the row is a full-bleed band in this pattern, not a pill. */
  border-radius: 0;
}

.detail-context-panel .detail-nav-group-row--first {
  border-top: 1px solid var(--detail-divider);
}

.detail-context-panel .detail-nav-button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--white);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* The current section. Background only — the row keeps its height, padding and
   type, so nothing shifts as the selection moves between rows. */
.detail-context-panel .detail-nav-group-row[aria-current="page"] {
  background: var(--gray-10);
}

/* A fixed box for every icon regardless of the glyph's own proportions, so the
   labels all start on the same vertical line. The images below keep their
   natural aspect inside it instead of being squared off to the slot. */
.detail-context-panel .detail-nav-icon-slot {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-context-panel .detail-nav-group-row img {
  flex-shrink: 0;
  display: block;
}

.detail-context-panel .detail-nav-icon--revenue {
  width: 9.333px;
  height: 16px;
}

.detail-context-panel .detail-nav-icon--invoice {
  width: 12px;
  height: 13.333px;
}

.detail-context-panel .detail-nav-icon--documents {
  width: 12px;
  height: 14.667px;
}

.detail-context-panel .detail-nav-icon--history {
  width: 14.667px;
  height: 14.667px;
}

.detail-context-panel .detail-nav-group-row .detail-nav-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 21px;
  color: var(--indigo-70);
}

.detail-context-panel .detail-nav-group-row--section .detail-nav-text {
  color: var(--gray-70);
  letter-spacing: -0.1px;
}

/* The count belongs to the section rather than its name, so it keeps its own
   slot at the end of the row instead of being spliced into the label. */
.detail-context-panel .detail-nav-count {
  flex: none;
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: 18px;
  color: var(--gray-70);
  font-variant-numeric: tabular-nums;
}

/* Keyboard only. A mouse click leaves no ring behind, which is what produced
   the black box that outlived the interaction. */
.detail-context-panel .detail-nav-group-row:focus-visible {
  outline: 2px solid var(--indigo-70);
  outline-offset: -2px;
}

/* ── Shell columns ─────────────────────────────────────────────────────
   Order and invoice pages still declare a leftover 68px icon-rail track from
   the pre-v2 Figma frame. The live rail is `--v2-rail-w` (64 collapsed / 200
   expanded), so a 68px first column lets the expanded rail paint over the
   context panel and clip labels like "Orders" to "Or".

   Own the three-column shell here so every detail page picks up the token
   without a 190-file HTML edit. `html body…` outranks the duplicated page
   copies (including those injected after this sheet). Explicit column
   assignment keeps a hidden `.v2-flyout` sibling from stealing the context
   track if it becomes visible. */
html body.harps-invoice-detail .detail-below-nav,
html .detail-below-nav {
  grid-template-columns: var(--v2-rail-w) minmax(236px, 260px) minmax(0, 1fr);
}

@supports (width: 1cqw) {
  html body.harps-invoice-detail .detail-below-nav {
    grid-template-columns: var(--v2-rail-w) clamp(260px, 18.06cqw, 290px) minmax(0, 1fr);
  }
}

html .detail-below-nav > .v2-rail {
  grid-column: 1;
  grid-row: 1 / -1;
}

html .detail-below-nav > .v2-flyout {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  z-index: 20;
}

html .detail-below-nav > .detail-rail {
  grid-column: 2;
  grid-row: 1 / -1;
}

html .detail-below-nav > .harps-detail-main {
  grid-column: 3;
  grid-row: 1 / -1;
}

/* Assign To / External PO body content only. Chrome stays on ads-theme. */
html[data-theme="ads"] #assignModalOverlay .edl-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

html[data-theme="ads"] #assignModalOverlay .edl-modal-search-group {
  gap: 8px;
}

html[data-theme="ads"] #assignModalOverlay .edl-modal-list-wrap::before {
  font: var(--ads-font-body-md-sem, 600 14px/20px "Open Sans", var(--font-family), sans-serif);
  color: var(--ads-gray-600, #1e2528);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 0 8px;
}

html[data-theme="ads"] .po-modal-file-area {
  margin-bottom: 24px;
}

html[data-theme="ads"] .po-modal-meta {
  gap: 16px 24px;
}