/* HARPS Version 2 — Accounts Receivable content surface and table.
 *
 * Values taken from Figma:
 *   Main screen  5088:20733  (card 1314x812 at x93/y76 in a 1440x900 frame)
 *   Table        5088:20739  (52px header band, 39px tabs, 60px toolbar,
 *                             32px column header, 56px rows, 2160px columns)
 *
 * V2-only. Loaded after v2-density.css so the Figma density wins on this page.
 */

:root {
  /* Figma type ramp used on this screen */
  --ar-font-ui: "Open Sans", var(--font-family, sans-serif);
  --ar-font-display: "MultiPlane", var(--font-family, sans-serif);

  /* Figma colors */
  --ar-indigo: #4045c2;
  --ar-text-rest: #51585b;
  --ar-text-strong: #1e2528;
  --ar-text-muted: #3b4347;
  --ar-header-text: #3a4652;
  --ar-sort-icon: #b8c7d0;
  --ar-divider: #d4dee3;
  --ar-control-border: rgba(15, 18, 20, 0.2);
  --ar-placeholder: #9eb0bd;

  /* Figma geometry.
     Figma places card content 24px from the card edge (header row, toolbar and
     table cells all start at x=24 in 5088:20733). The card draws a 1px border,
     so the padding token is 23px to land content on 24. */
  --ar-card-inset-x: 23px;
  /* Table block starts 16px below the card edge (5088:20740 y=16). */
  --ar-card-inset-top: 15px;
  --ar-row-h: 56px;
  --ar-head-h: 32px;
  /* Distance from the top of a data row to the primary line every cell starts
     on. The tallest content is the two-line name stack at ~40px, so 8px keeps
     it centered-looking inside the 56px row while still giving one shared
     line. Header and body cell padding read from here, so the line cannot
     drift between them. */
  --ar-row-content-top: 8px;

  /* Fixed chrome around the internally-scrolling row region: shell topbar +
     page gutters + this card's own header band, tabs, toolbar, pagination
     footer and 2px border (1px top + 1px bottom). All eight pieces are
     already-established, Figma-sourced constants (see file header and
     `.ar-header`/`.top-tab-bar .tab-list.tabs`/`.tab-bar-row-toolbar`/
     `.pagination-bar`), not new guesses — summing them here lets the row
     region's max-height track the *actual* viewport instead of a value
     baked in for one screen size. */
  --ar-workspace-chrome-h: calc(
    var(--v2-topbar-h) + var(--v2-page-pad-top) + var(--v2-page-pad-bottom)
    + 2px + var(--ar-card-inset-top) + 52px + 39px + 60px + 52px
  );
}

/* ═══ CONTENT SURFACE ══════════════════════════════════════════════════ */
/* The gutters that used to be spelled out here now live on `.page-content` in
   v2-shell.css, so the detail pages inherit the same grid from one place. */

/* Figma 1440x900: card occupies the main column between a 25px left and 33px
   right margin (=1314 at that frame) and is 812 tall. It fills the main column
   rather than being pinned to 1314, so wider viewports expand cleanly with no
   detached strip on the right. */
.overview-card.orders-card {
  width: 100%;
  /* Intrinsic height. This used to be pinned to
     calc(100vh - topbar - 32px), which is 812 — right at the 1440x900 Figma
     frame and wrong at every other height: on a taller viewport the card
     grew with the window and the table wrapper below absorbed the surplus,
     opening a blank band between the last row and pagination. The same 812
     now comes from the content itself (header + tabs + toolbar + 32 header
     row + 10 x 56 rows + scrollbar + 52 pagination), so extra viewport
     height falls outside the card where it belongs. */
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--ar-divider);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Table area takes the remaining card height; rows scroll inside it.
   The top inset is what lifts the title and Select Period off the card edge
   (Figma 5088:20740 sits 16px below the card top). */
.overview-card.orders-card > .card-header,
html[data-theme="ads"] .overview-card.orders-card > .card-header,
html[data-theme="dark"] .overview-card.orders-card > .card-header,
html[data-theme="wireframe"] .overview-card.orders-card > .card-header {
  flex: 0 0 auto;
  padding-top: var(--ar-card-inset-top);
  border-bottom: 0;
}

/* Sized by its rows up to a viewport-derived ceiling, not by whatever height
   is left over and not by an unbounded intrinsic height either. Below the
   ceiling this still behaves exactly like the old `0 0 auto` — a short page
   (few Orders, nothing expanded) sits at its natural height with no gap
   before pagination. Past the ceiling — e.g. several Orders' invoices
   expanded on a normal-height screen — this pins in place and the scroller
   inside (`.table-body-scroll`, `overflow-y: auto`) absorbs the rest, so
   pagination never gets pushed off-screen. `min-height` is a density floor
   for very short viewports; below it the *page* scrolls a little rather than
   the row region collapsing to nothing. */
.overview-card.orders-card .table-scroll-wrapper {
  flex: 0 0 auto;
  min-height: 160px;
  max-height: calc(100dvh - var(--ar-workspace-chrome-h));
}

/* GL Export replaces the table + pagination. Cap it to the same viewport
   ceiling (plus the toolbar and pager it hides) so the page does not grow
   and the exports table scrolls inside the outer AR surface. */
.overview-card.orders-card > .card-footer > .ar-glx,
.overview-card.orders-card .ar-glx {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100dvh - var(--ar-workspace-chrome-h) + 60px + 52px);
}

/* ═══ PAGE HEADER (inside the card) ════════════════════════════════════ */
/* Figma 5091:57948 — 52px row, title group and Dropdown both centred on it
   (title y=12 in a 52px row; Dropdown y=-2 with its own 56px height). */
.ar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Fixed, not min-height: the 56px Dropdown is meant to overhang this 52px
     row by 2px top and bottom rather than stretch it. */
  height: 52px;
  padding: 0 var(--ar-card-inset-x);
  box-sizing: border-box;
}

/* Optional subtitle sits 4px under the 52px title row, same inset as the
   title. One sentence on every Finance workspace — never a second heading. */
.overview-card > .card-header > .page-subtitle,
.overview-card .ar-header + .page-subtitle {
  margin: 4px 0 8px;
  padding: 0 var(--ar-card-inset-x);
  box-sizing: border-box;
  font-family: "Open Sans", var(--font-family), sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #51585b;
  max-width: none;
}

/* ADS Card Elevation None — shared AP / AR-hosted GL KPI surface. */
html[data-theme="ads"] .overview-card .dash-kpi-card,
html[data-theme="wireframe"] .overview-card .dash-kpi-card,
html[data-theme="dark"] .overview-card .dash-kpi-card,
.overview-card .dash-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(15, 18, 20, 0.1);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0;
}

.overview-card .dash-kpi-label,
html[data-theme="ads"] .overview-card .dash-kpi-label,
html[data-theme="wireframe"] .overview-card .dash-kpi-label {
  font-family: "Open Sans", var(--font-family), sans-serif;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: #3b4347;
  margin-bottom: 8px;
}

.overview-card .dash-kpi-sub,
html[data-theme="ads"] .overview-card .dash-kpi-sub,
html[data-theme="wireframe"] .overview-card .dash-kpi-sub {
  font-family: "Open Sans", var(--font-family), sans-serif;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #51585b;
  margin-top: auto;
}

/* Keep the "?" 16px clear of the 52px card footer / pagination bar.
   The feedback launcher sets an inline bottom offset, so this has to win. */
html:has(.pagination-bar) .rcf-launch {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + 52px + 16px) !important;
}

.overview-card.orders-card .pagination-bar {
  padding-right: 16px;
}

/* Figma 5105:61858 — the caret follows the title's trailing space, so the gap
   is one space at the title size rather than a fixed rhythm step. */
.ar-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 1;
}

/* The workspace switcher wraps the title and caret in its own trigger button,
   so the Figma title-to-caret gap has to be set there too. Visual only — the
   switcher's markup, handlers and ARIA are untouched. */
.ar-title-group .hv-ws-trigger {
  gap: 6px;
}

/* Figma 5091:57953 (heading/lg): MultiplaneTWDC Display Medium 24/28,
   letter-spacing 0, black.
   "MultiPlane Display" rather than "MultiPlane": the page-level @font-face for
   the latter is local()-only and errors when the font is not installed, which
   silently dropped this title to a fallback. See v2-shell.css.
   `!important` is required because #harps-typography-stabilization forces
   `font-family: var(--font-family) !important` onto h1, and ads-theme.css
   redefines that token as Open Sans. */
.page-title.ar-title,
html[data-theme="ads"] .page-title.ar-title,
html[data-theme="dark"] .page-title.ar-title,
html[data-theme="wireframe"] .page-title.ar-title {
  margin: 0;
  font-family: "MultiPlane Display", "MultiPlane", var(--font-family) !important;
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
  color: #000000;
  white-space: nowrap;
}

.ar-title-caret {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Period selector — ADS Dropdown, Figma 5091:57966 (5091:44070).
   Label and trigger are one stacked field group: 12/18 label, 8px gap, 30px
   trigger = the 56px instance height. Figma insets the group 16px from the
   header row's content edge, i.e. 40px from the card edge. */
.ar-period {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  margin-right: 16px;
  flex-shrink: 0;
}

.ar-period-label {
  font-family: var(--ar-font-ui);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--ar-text-strong);
}

/* select-trigger — 30px tall, 6px radius, 1px rgba(15,18,20,.2), 16px caret
   10px from the right edge.

   The control itself is the shared ADS Select (assets/v2-select.css +
   v2-select.js), which owns the chrome, the popover, and every state. All
   this block does is size that component to the Figma frame, so the Order,
   Deal, and GL export tabs — which share this header — stay identical and
   inherit any future change to the component. */
.ar-period .ads-select {
  --ads-select-height: 30px;
  /* 9 + the 1px border = Figma's 10px inset, which it measures from the
     frame edge because the stroke sits inside. */
  --ads-select-pad-x: 9px;
  --ads-select-radius: 6px;
  --ads-select-font-size: 13px;
  --ads-select-line: 18px;
  --ads-select-border: var(--ar-control-border);
  --ads-select-brand: var(--ar-indigo);
  --ads-select-text: var(--ar-text-muted);

  font-family: var(--ar-font-ui);
}

/* ═══ TABS — ADS Primary Tab 5088:21414 ════════════════════════════════
   States implemented from 5088:21475 (active), 5088:21482 and 5098:59809
   (rest). Each tab carries its own 16px padding-x, and the strip is offset a
   further 8px (7px + the card's 1px border) so tab text starts on the same
   24px content edge as the title. Tabs are adjacent — the rhythm comes from
   the tab padding, not a list gap. */
.top-tab-bar {
  height: auto;
  padding: 0 7px;
  border-bottom: 0;
}

/* Tabs keep their intrinsic height and hang from the top of the strip: the
   active tab is 39px (8 + 24 + 4 + 3) and rest tabs are 32px, exactly as the
   Figma variants measure. Stretching them would pad the active tab and push
   its underline away from the label. */
.top-tab-bar .tab-list.tabs {
  gap: 0;
  min-height: 39px;
  align-items: flex-start;
}

.top-tab-bar .tab-item {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 16px 0 16px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Figma stacks the tab strip directly on the toolbar with no gap. */
.orders-card .card-header .tab-bar {
  gap: 0;
}

.top-tab-bar .tab-item-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Selection must not change a tab's geometry. Weight is therefore constant in
   every state — swapping 400 for 600 re-measured the label and pushed every
   following tab sideways — and the active state is carried by colour plus the
   underline instead. */
.top-tab-bar .tab-item .tab-item-text,
.top-tab-bar .tab-item:not(.active) .tab-item-text {
  font-family: var(--ar-font-ui);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ar-text-rest);
  white-space: nowrap;
}

.top-tab-bar .tab-item.active .tab-item-text {
  color: var(--ar-indigo);
}

.top-tab-bar .tab-item:not(.active):hover .tab-item-text {
  color: var(--ar-text-strong);
}

/* The 4px label-to-underline distance is the tab's flex gap; the legacy rule
   also carried a margin, which double-counted it. */
.top-tab-bar .tab-underline {
  height: 3px;
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.top-tab-bar .tab-item.active .tab-underline {
  background: var(--ar-indigo);
}

/* The underline slot is reserved in every state. Removing it from layout made
   a rest tab 32px against the active tab's 39px, so selecting one changed its
   height and nudged the row. It is hidden, not un-laid-out. */
.top-tab-bar .tab-item:not(.active) .tab-underline {
  visibility: hidden;
}

.top-tab-bar .tab-item:focus-visible {
  outline: 2px solid var(--ar-indigo);
  outline-offset: -2px;
}

/* ═══ TOOLBAR — Figma 5088:20768 (32px buttons + 403px pill search) ════ */
/* Figma 5088:20754 — the 60px toolbar band holds a 36px control row inset 16px
   from the tabs above and 8px from the table header below. */
.tab-bar-row-toolbar {
  padding: 16px var(--ar-card-inset-x) 8px;
}

/* Figma 5088:20768 — Filter, Columns and Search on one 36px row, 16px apart. */
.tab-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 36px;
}

/* The page gives the two buttons their own margin-right, which stacks on top
   of the flex gap. Spacing here comes from the gap alone. ID selectors are
   needed to match the specificity of the rules being neutralised. */
.tab-actions #filter-panel-btn,
.tab-actions #colsel-btn {
  margin: 0;
}

/* Icon-only square buttons — Figma 5088:20770 / 5088:21366:
   32x32, 1px indigo, 8px radius, 16px icon. Label kept for screen readers. */
.tab-actions .action-icon-btn.tab-action-pill {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--indigo-70);
  border-radius: 8px;
  background: #ffffff;
  color: var(--indigo-70);
}
html[data-theme="ads"] .tab-actions .action-icon-btn.tab-action-pill {
  border: 1px solid var(--ads-brand, var(--indigo-70, #4045c2));
  border-radius: var(--radius-button, 6px);
  background: var(--ads-card-bg, #ffffff);
  color: var(--ads-brand, var(--indigo-70, #4045c2));
}

.tab-actions .action-icon-btn.tab-action-pill svg {
  width: 16px;
  height: 16px;
}

.tab-actions .action-icon-btn.tab-action-pill:hover {
  background: #f2f3f7;
}

.tab-actions .action-icon-btn.tab-action-pill:focus-visible {
  outline: 2px solid var(--ar-indigo);
  outline-offset: 1px;
}

.tab-actions .tab-action-pill-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The page fixes this wrapper at 310px; Figma's Search instance is 399 wide.
   The wrapper also anchors the suggestions dropdown, so it has to match.

   403 rather than Figma's 399: kept deliberately so a longer placeholder than
   the current one still clears the 347px text slot without clipping. Every
   other value here is Figma's — 12px padding, 20px icon, 8px gap, 36px tall. */
.tab-actions .tab-toolbar-search-wrap {
  flex: 0 0 403px;
  width: 403px;
  max-width: 403px;
}

.tab-toolbar-search-field {
  width: 403px;
  height: 36px;
  padding: 8px 12px;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--ar-control-border);
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
html[data-theme="ads"] .tab-toolbar-search-field {
  background: var(--ads-card-bg, #ffffff);
  border-radius: 100px;
}

/* The page pins this control with `position:absolute; right:0`, which puts the
   magnifier after the text and makes `order` inert. Returning it to flow lets
   the flex order place it first, matching Figma's leading icon; the 8px flex
   gap then supplies the icon-to-text distance.
   Figma 5088:20771 places a single 20px magnifier LEADING the input. Our
   markup puts the search/clear button after the field, so reorder it rather
   than adding a second icon. */
.tab-toolbar-search-field .tab-toolbar-search-submit {
  position: static;
  order: -1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ar-text-rest);
}

.tab-toolbar-search-field .tab-toolbar-search-submit:hover {
  background: none;
}

/* Size only — the page toggles `display` on these two icons to swap the
   magnifier for the clear affordance, and a `display` here would outrank it
   and render both at once. */
.tab-toolbar-search-field .tab-toolbar-search-submit svg {
  width: 20px;
  height: 20px;
}

/* ADS magnifier is a compound path (ring + handle). Without evenodd the
   lens fills solid and reads as a square with a circle inside. */
.tab-toolbar-search-submit svg path,
.tab-toolbar-search-icon-search path {
  fill-rule: evenodd;
  clip-rule: evenodd;
}

.tab-toolbar-search-field .tab-toolbar-search-submit:focus-visible {
  outline: 2px solid var(--ar-indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The old rule reserved 24px on the right for the trailing icon that no longer
   sits there, and forced a 30px box inside a 20px content row. The input also
   inherits a border and radius from the generic field styling, which drew a
   second rounded box inside the pill — in Figma the pill is the only outline. */
.tab-toolbar-search-field .tab-toolbar-search-input,
html[data-theme="ads"] .tab-toolbar-search-field .tab-toolbar-search-input,
html[data-theme="dark"] .tab-toolbar-search-field .tab-toolbar-search-input,
html[data-theme="wireframe"] .tab-toolbar-search-field .tab-toolbar-search-input {
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tab-toolbar-search-input {
  font-family: var(--ar-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--ar-text-strong);
  border: 0;
  background: none;
  flex: 1 0 0;
  min-width: 0;
}

.tab-toolbar-search-input::placeholder {
  color: var(--ar-placeholder);
}

.tab-toolbar-search-input:focus {
  outline: none;
}

html[data-theme="ads"] .tab-toolbar-search-field .tab-toolbar-search-input:focus,
html[data-theme="ads"] .tab-toolbar-search-field .tab-toolbar-search-input:focus-visible {
  outline: none;
  outline-offset: 0;
  border: none;
  box-shadow: none;
}

.tab-toolbar-search-field:focus-within {
  border-color: var(--ar-indigo);
}

/* ═══ TABLE — Figma 5090:25394 ═════════════════════════════════════════ */
.trow {
  padding: 0 0 0 var(--ar-card-inset-x);
  gap: 0;
  border-bottom: 1px solid var(--ar-divider);
}

.trow-header {
  height: var(--ar-head-h);
  background: #ffffff;
  /* Pins to the top of `.table-body-scroll` (its nearest scrolling ancestor)
     so the column header stays put while Order/Invoice rows scroll past it
     inside the row region. z-index 5 clears the frozen body cells (2), the
     frozen-boundary shadow (3) and the frozen header cells (4) below, so a
     scrolled-up row — frozen columns included — never paints over it. */
  position: sticky;
  top: 0;
  z-index: 5;
}

.trow-data {
  height: var(--ar-row-h);
}

.td-cell,
.td-name-cell,
.td-stack-cell {
  padding: 0 8px;
  gap: 8px;
}

/* ── One primary line per row ──────────────────────────────────────────
   Every value starts on the same line: a two-line cell puts its name there
   and its secondary text below, a one-line cell puts its only value there and
   leaves the space beneath empty. Each cell used to center its own content
   instead, which meant a one-line value like 06/2026 settled halfway between
   the two lines of the advertiser beside it — 11px off, and no line shared
   across the row to read along. Two-line cells disagreed with each other by a
   further 3px for the same reason, since a taller stack centers higher.

   Split by flex direction on purpose. In a row-direction cell the cross axis
   is vertical, so `align-items` is the vertical control and `justify-content`
   is the horizontal one that Invoice and Order Quantity use for their left
   edge. In a column-direction stack those two swap, so only `justify-content`
   is touched — Order Value's `align-items: flex-end` is what right-aligns its
   amounts, and setting it here would silently undo that. */
.trow-data > .td-cell,
.trow-data > .td-name-cell {
  align-items: flex-start;
  padding-top: var(--ar-row-content-top);
}

.trow-data > .td-stack-cell {
  justify-content: flex-start;
  padding-top: var(--ar-row-content-top);
}

/* Status is the exception the ADS pattern makes: a chip is a shape rather than
   a line of text, so it centers in the row instead of sitting on the baseline. */
.trow-data > .col-status.td-cell {
  align-items: center;
  padding-top: 0;
}

/* Header cells share the body's 8px inset so a header sits on exactly the
   same left edge as the values under it. The columns below are sized to fit
   label + sort glyph at this padding, which is what the earlier 3px inset
   was working around. */
.th-cell {
  padding: 0 8px;
  gap: 4px;
  min-width: 0;
}

.th-sort {
  flex-shrink: 0;
  line-height: 0;
}

.th-sort svg {
  width: 10px;
  height: 10px;
}

/* Column header label — Figma body/normal/sm on Gray/80 */
.th-cell {
  overflow: hidden;
}

/* Theme-scoped to outrank ads-theme.css, which sets a 13px/600 header for
   div-based tables. Colour and weight now follow Figma 5099:59896
   (body/semibold/sm on #666D70) and are declared once for every V2 table in
   assets/v2-table-header.css; only truncation is AR-specific. Wireframe
   keeps its own greyscale header colour. */
.th-label,
html[data-theme="ads"] .th-label,
html[data-theme="dark"] .th-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

html[data-theme="wireframe"] .th-label {
  font: 400 12px/18px var(--ar-font-ui);
  color: var(--ar-header-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.th-sort svg path {
  fill: var(--ar-sort-icon);
}

/* Cell text — Figma body/normal/md over a 20px line, secondary on 18px */
.td-text,
.td-stack-primary {
  font-family: var(--ar-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--ar-text-strong);
}

.td-stack-secondary {
  font-family: var(--ar-font-ui);
  font-size: 12px;
  line-height: 18px;
  color: var(--ar-text-muted);
}

.td-stack-inner,
.td-name-stack {
  gap: 0;
}

/* Order name link + secondary ID. The link's colour and type come from the
   shared table-link style in v2-table-link.css; only the ID is styled here. */
.order-id {
  font-family: var(--ar-font-ui);
  font-size: 12px;
  line-height: 18px;
  color: var(--ar-text-muted);
}

/* Figma renders the secondary line as "ID: 2843215". */
.order-id::before {
  content: "ID: ";
}

/* ═══ STATUS CHIP — Figma Chip 4949:37688 (small) ══════════════════════ */
.badge {
  height: 22px;
  min-height: 22px;
  padding: 1px 6px;
  gap: 4px;
  border-radius: 100px;
  border: 1px solid transparent;
  box-sizing: border-box;
  font-family: var(--ar-font-ui);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

/* ═══ COLUMN WIDTHS + ORDER — Figma row header 5090:25395 ══════════════ */
/* `order` reorders the flex row to the Figma sequence (Status first) without
   touching the row markup, so header and body stay aligned.

   Widths are measured, not chosen: each is the larger of what the header
   needs (8px + label + 4px gap + 10px sort glyph + 8px) and what the widest
   value needs (content + 16px), plus a few px so the sort glyph never meets
   the next column and two-line cells keep breathing room.

   Total 1928px, down from 2124px. The old numbers were uniform-ish rather
   than content-derived, which left Assigned To, Order Type, and Order Value
   carrying 50–80px of dead space each — that slack is what made Order Type
   and Bill Category read as disconnected — while Bill Period and Advertiser
   were actually too narrow and clipped their own headers. The table still
   overflows the card horizontally by design. */
/* One source for the two frozen columns: the widths below and the sticky
   offsets further down both read these, so a header cell and its body cells
   can never disagree about where the frozen boundary sits. */
.table-inner {
  /* ── Cross-level alignment anchors ────────────────────────────────────
     Four guides run from the parent order row straight down through the
     expanded invoice rows:

       1  Status              ↔  Status
       2  Order Name/ID       ↔  Invoice Name/ID
       3  Bill Period         ↔  First Exported
       4  Invoice             ↔  Last Exported

     Both grids are sized from the tokens below rather than from two
     independent width lists, so a guide cannot drift when one side is
     retuned. Past the fourth anchor the child stops tracking the parent and
     sizes its remaining columns for its own content — pinning Exports under
     Advertiser would be alignment for its own sake.

     The parent lays its columns edge to edge; the child separates its cells
     with --inv-col-gap. A child anchor column is therefore its parent
     counterpart less one gap, which lands the following child cell exactly
     on the next parent boundary. */
  --ar-row-pad-left: 23px;      /* .trow's own inset */
  --ar-panel-pad-left: 16px;    /* .invoice-panel's own inset */
  --ar-cell-pad: 8px;           /* inline cell padding, parent and child alike */

  /* The chevron gets a gutter of its own and is deliberately outside the
     Status anchor — the control is parent-only, and letting it set the
     Status guide is what used to push the child's chips 41px left. */
  --ar-freeze-expand-w: 40px;

  --ar-freeze-status-w: 147px;
  --ar-freeze-name-w: 448px;

  /* Anchor 3, declared rather than aliased. --harps-col-w-billing-period says
     116px but v2-density.css narrows the column to 100px, so the page token is
     not the rendered width and the child cannot derive from it. 116 is what
     the child needs anyway: "First Exported" is an 81px label in a column one
     gap narrower, and at 100 that header renders outside its own cell. */
  --ar-anchor-period-w: 116px;

  /* ── Child column widths ──────────────────────────────────────────────
     Declared here rather than on .invoice-inner because not every authored
     panel has that wrapper — one template in the clone pool goes straight
     from .invoice-panel to .inv-header, and every order rendered from it lost
     the lot: undefined widths collapsed the cells to shrink-to-fit and the
     undefined gap fell back to `normal`. Holding the tokens on .table-inner
     puts them above every panel, wrapper or not.

     The first two are derived from the anchors above: each is its parent
     counterpart less one gap, which lands the following child cell exactly on
     the next parent boundary. */
  --inv-col-gap: 12px;
  --inv-w-status:   calc(var(--ar-freeze-status-w) - var(--inv-col-gap));
  --inv-w-firstexp: calc(var(--ar-anchor-period-w) - var(--inv-col-gap));

  /* Past the fourth anchor the child sizes for its own content. Every one is
     header-bound rather than value-bound — "Net Invoice Amount" is wider than
     any figure under it — so each is its label plus the 16px of cell padding
     and a little slack. Sizing to the labels keeps the steps even instead of
     leaving one wide column beside three cramped ones. */
  --inv-w-lastexp: 100px;   /* "Last Exported" 80 + 16 */
  --inv-w-exports: 72px;    /* "Exports" 44 + 16 */
  --inv-w-amount: 140px;    /* "Net Invoice Amount" 116 + 16 */
  --inv-w-units: 104px;     /* "Invoice Units" 75 + 16 */
  --inv-w-lock: 96px;       /* "Lock Status" 67 + 16 */
}

/* Compact the frozen context. In flow the name column is 480px, which is the
   width a full order name wants; pinned it is 480px taken out of a viewport
   that by definition is already short of room, and together with the chevron
   and Status it held 667px — over half a 1280 table. That is what pushed Bill
   Period and Invoice out of sight behind the frozen edge and clipped
  Advertiser at the boundary. 340px still carries the name and its ID and
  brings the context to ~516px, a comfortable fraction of the table.

   Retuning the token rather than the sticky rule keeps every dependant in
   step: the invoice name column is derived from this value, so First Exported
   stays on Bill Period's guide in the compact state too. */
.table-inner[data-frozen="true"] {
  --ar-freeze-name-w: 348px;
}

.col-status            { width: var(--ar-freeze-status-w); flex: 0 0 var(--ar-freeze-status-w); order: 1; }
/* Order Name / ID is the one growable column: at viewports wider than the
   table it absorbs the leftover instead of leaving a blank strip on the
   right, and it never drops below 480px so names stay readable. The
   max-width the page sets alongside the old fixed width has to go, or it
   caps the growth at the basis. */
.col-name              { width: var(--ar-freeze-name-w); flex: 1 0 var(--ar-freeze-name-w); max-width: none; order: 2; }
/* Anchor 3 has to be declared here to win: v2-density.css narrows this column
   to 100px, which is too tight for the child's "First Exported" header. */
.col-billing-period    { width: var(--ar-anchor-period-w); flex: 0 0 var(--ar-anchor-period-w); order: 3; }

/* Invoice takes order only. It is already sized by the page's --harps-col-w-*
   layer, which the resize handle owns, and that layer also pins a max-width —
   so a wider basis declared here is silently clamped back. 76px is the header
   plus sort at the shared 8px inset; extra width here only opened a void
   between the right-aligned count and Advertiser. Anchor 4 does not depend
   on it: the guide is where Bill Period ends, which the child derives from
   --ar-anchor-period-w. */
.col-invoices          { order: 4; }
.col-agency            { width: 220px; flex: 0 0 220px; order: 5; }
.col-sales             { width: 192px; flex: 0 0 192px; order: 6; }
.col-assigned          { width: 140px; flex: 0 0 140px; order: 7; }
.col-dates             { width: 160px; flex: 0 0 160px; order: 8; }
.col-value             { width: 140px; flex: 0 0 140px; order: 9; }
.col-external-po       { width: 132px; flex: 0 0 132px; order: 10; }
.col-order-type        { width: 116px; flex: 0 0 116px; order: 11; }
.col-billing-category  { width: 104px; flex: 0 0 104px; order: 12; }
.col-order-quantity    { width: 120px; flex: 0 0 120px; order: 13; }

/* The invoice rows need their identity held on screen for the same reason the
   order row above them does: scrolled sideways without it, an expanded order
   shows a run of dates and amounts with nothing naming them, and the child
   loses its relationship to its parent. Status pins at the scroller edge and
   Invoice Name/ID on the parent name's own guide, so the two context blocks
   read as one. Only while frozen — in flow these are ordinary cells.

   Opaque, and above the cells passing beneath them, but below the order
   header's own sticky cells so the header still wins where they meet. */
.table-inner[data-frozen="true"] .inv-col-status,
.table-inner[data-frozen="true"] .inv-name-cell,
.table-inner[data-frozen="true"] .inv-th.inv-col-name {
  position: sticky;
  z-index: 2;
  background: var(--gray-05);
}

/* Pinned on the parent's own guides, not at the scroller edge. Status pins
   where the parent's Status pins — past the chevron gutter, which is a
   parent-only control — so the frozen boundary stays one straight line
   through both levels instead of stepping 40px left at the child. */
.table-inner[data-frozen="true"] .inv-col-status {
  left: var(--ar-freeze-expand-w);
}

.table-inner[data-frozen="true"] .inv-name-cell,
.table-inner[data-frozen="true"] .inv-th.inv-col-name {
  left: calc(var(--ar-freeze-expand-w) + var(--ar-freeze-status-w));
}

/* One scroller for the whole table. The invoice panel carried its own
   overflow-x, so expanding an order produced a second horizontal scrollbar and
   the child columns tracked a scroll position of their own — scroll the order
   row and its invoices stayed put. The panel already lives inside
   .table-inner, so removing the inner overflow hands it to the table's own
   scroller: one bar, one position, parent and child moving together. */
.invoice-scroll-area {
  overflow-x: visible;
  overflow-y: visible;
  max-width: none;
  width: auto;
}

/* ── Nested invoice columns ────────────────────────────────────────────
   The invoice panels are authored name-first, so Invoice Name/ID sat at the
   panel's left edge — 127px left of Order Name/ID, and left even of the
   parent's own Status chips, which read as the nested rows escaping the row
   that owns them. Reordering with `order` rather than in markup keeps one
   definition for the 44 invoice panels a page carries, exactly as the
   `.col-*` block above reorders the parent without touching its rows.

   Status leads here because it is the invoice's primary state, and putting
   it first is also what carries Invoice Name/ID across to the parent's
   Order Name/ID: 8px inset + 174px + 12px gap = 304px, the x the parent's
   name column starts at. The two name columns are the only pair aligned on
   purpose; the rest of the child is sized for its own content. */
.inv-col-status               { order: 1; }
.inv-col-name, .inv-name-cell { order: 2; }
.inv-col-firstexp             { order: 3; }
.inv-col-lastexp              { order: 4; }
.inv-col-exports              { order: 5; }
.inv-col-amount               { order: 6; }
.inv-col-units                { order: 7; }
.inv-col-lock                 { order: 8; }

/* Measured the same way as the parent block: the larger of the header label
   and the widest value, plus the cell's 12px of padding, plus a few px so
   nothing meets its neighbour. Status is the one column sized by content
   rather than label — 162px chip + 12px. The dates are given equal widths
   because they are the same kind of value and reading as a pair is worth
   more than saving 2px on the shorter label. */
/* Restated on the wrapper as well as on .table-inner above, and both are
   needed. A custom property resolves from the nearest ancestor that declares
   it, and harps.html declares its own --inv-w-* set on this element — so
   without this block a wrapped panel reads the page's older widths and only
   the wrapper-less panels would pick up the anchors. .table-inner covers the
   panels that have no .invoice-inner; this covers the ones that do. */
.invoice-inner {
  --inv-col-gap: 12px;
  --inv-w-status:   calc(var(--ar-freeze-status-w) - var(--inv-col-gap));
  --inv-w-firstexp: calc(var(--ar-anchor-period-w) - var(--inv-col-gap));
  --inv-w-lastexp: 100px;
  --inv-w-exports: 72px;
  --inv-w-amount: 140px;
  --inv-w-units: 104px;
  --inv-w-lock: 96px;

  /* Lead-in (47) + the four anchored columns + the four that follow +
     7 gaps (84) + the row's trailing 8px. */
  --inv-min-width: 1318px;
}

/* The child's lead-in. The parent reaches Status through its own row inset
   plus the chevron gutter; the panel starts from a different inset, so the
   difference is what the invoice rows pad by. Computed rather than measured,
   so retuning the gutter or either inset keeps Status on one guide. */
.inv-header,
.inv-row {
  padding-left: calc(
    var(--ar-row-pad-left) + var(--ar-freeze-expand-w) - var(--ar-panel-pad-left)
  );
}

/* Header and body cells read one padding token, and it is the parent's, so
   the text inside a child cell starts exactly where the text inside the
   parent cell above it does. The name cells already carry the same 8px
   through --harps-order-name-inline-pad. */
.inv-th,
.inv-cell {
  padding-left: var(--ar-cell-pad);
  padding-right: var(--ar-cell-pad);
}

/* ── Child column alignment ───────────────────────────────────────────
   Declared header-and-body together so the two can never drift. Exports and
   Invoice Units are counts, not amounts, so they read left with their
   headers; only Net Invoice Amount takes the right edge finance tables
   compare down, and its header goes with it. */
.inv-th.inv-col-exports,
.inv-cell.inv-col-exports,
.inv-th.inv-col-units,
.inv-cell.inv-col-units,
.inv-th.inv-col-lock,
.inv-cell.inv-col-lock {
  justify-content: flex-start;
  text-align: left;
}

.inv-th.inv-col-amount,
.inv-cell.inv-col-amount {
  justify-content: flex-end;
  text-align: right;
}

/* Figures line up digit over digit when the face has tabular numerals. */
.inv-cell.inv-col-amount .inv-cell-text,
.inv-cell.inv-col-units .inv-cell-text,
.inv-cell.inv-col-exports .inv-cell-text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Invoice Name/ID spans the parent's name column less one gap, which puts
   First Exported exactly on Bill Period's left edge. Deriving it from
   --ar-freeze-name-w rather than repeating a literal means the child's export
   columns follow the parent's name column if it is ever retuned or dragged.

   It must not flex. As the only growable cell in the row it collected every
   pixel the panel gained, so on a wide screen the name column stretched to
   several hundred px past its content and shoved the export columns far right
   of anything they line up with — that gap is what this replaces. */
.inv-header > .inv-th.inv-col-name,
.inv-row > .inv-name-cell {
  flex: 0 0 calc(var(--ar-freeze-name-w) - var(--inv-col-gap));
  width: calc(var(--ar-freeze-name-w) - var(--inv-col-gap));
  min-width: 0;
}

/* ── Frozen leading columns ────────────────────────────────────────────
   Status and the record name stay put while everything from Bill Period
   rightward scrolls behind them, so the row is always identifiable. Header
   and body use the same two declarations, so they cannot drift apart.

   Conditional, not permanent. Freezing only earns its keep while there is
   something to scroll past; on a wide screen where every column already fits,
   it pins columns that were never going to move and draws a divider that
   splits the table for no reason. `data-frozen` is set by v2-table-sticky.js
   from the scroller's own measurements, so the switch follows the real
   overflow — which also accounts for the sidebar expanding, the Order/Deal
   mode changing the total width, and columns being hidden from the picker.

   Offsets come from the width tokens above: Status pins at 0, the name
   column pins at exactly Status's width.

   Status freezes alongside the name rather than on its own: it sits to the
   name's left, so leaving it in flow would let it slide underneath while the
   name stayed put.

   Layering: sticky header cells (4) sit above the rest of the header (3),
   which sits above sticky body cells (2), which sit above ordinary cells.
   The backgrounds are opaque so scrolled content cannot show through.

   The expand chevron (Order mode only — see .table-mode-deals above) sits to
   Status's left and freezes with it: leaving it in flow would let it slide
   underneath the frozen region while Status and the name stayed put, which
   reads as the row's identity briefly losing its own control. */
.table-inner.table-mode-order[data-frozen="true"] .col-expand,
.table-inner[data-frozen="true"] .col-status,
.table-inner[data-frozen="true"] .col-name {
  position: sticky;
  background: #ffffff;
}

.table-inner.table-mode-order[data-frozen="true"] .col-expand { left: 0; z-index: 2; }
.table-inner[data-frozen="true"] .col-status { left: 0; z-index: 2; }
.table-inner.table-mode-order[data-frozen="true"] .col-status { left: var(--ar-freeze-expand-w); }
.table-inner[data-frozen="true"] .col-name { left: var(--ar-freeze-status-w); z-index: 2; }
.table-inner.table-mode-order[data-frozen="true"] .col-name {
  left: calc(var(--ar-freeze-expand-w) + var(--ar-freeze-status-w));
}

.table-inner.table-mode-order[data-frozen="true"] .trow-header .col-expand,
.table-inner[data-frozen="true"] .trow-header .col-status,
.table-inner[data-frozen="true"] .trow-header .col-name {
  z-index: 4;
}

/* A soft gradient — not a hard divider — marks the frozen boundary, and
   only after the name column so Status and the name don't get a double
   edge. `.col-name` needs `overflow: visible` so the shadow can sit outside
   the sticky cell's own box without covering the name/ID text inside it.

   Shown only when `data-frozen-shadow="true"`, which v2-table-shadow.js sets
   from the scroller's own scrollLeft — so it appears while there is content
   to scroll to on the right, and disappears once the user has scrolled all
   the way there or the table isn't frozen at all. */
.table-inner[data-frozen="true"] .col-name {
  overflow: visible;
}

.table-inner[data-frozen="true"][data-frozen-shadow="true"] .col-name::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, rgba(15, 18, 20, 0.12), rgba(15, 18, 20, 0));
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity 150ms ease;
}

.table-inner[data-frozen="true"] .col-name::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, rgba(15, 18, 20, 0.12), rgba(15, 18, 20, 0));
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 150ms ease;
}

/* Frozen cells follow the row they belong to, including on hover, so the
   frozen region never reads as a separate surface. */
.table-inner.table-mode-order[data-frozen="true"] .trow:hover .col-expand,
.table-inner[data-frozen="true"] .trow:hover .col-status,
.table-inner[data-frozen="true"] .trow:hover .col-name {
  background: inherit;
}

/* ── Column alignment ──────────────────────────────────────────────────
   Alignment belongs to the column, not the row, so header and body are
   always declared together and can never drift apart. Everything not named
   here inherits the default left alignment.

   Invoice and Order Quantity are numeric but read as counts rather than
   amounts, so they align left with their headers. Bill Period and Order
   Value keep the right alignment finance tables expect; those are declared
   alongside the table markup in harps.html. */
.col-invoices .th-cell,
.col-invoices.td-cell,
.col-order-quantity .th-cell,
.col-order-quantity.td-cell {
  justify-content: flex-start;
  text-align: left;
}

/* `.trow > .col-name` carries margin-left: calc(32px - 24 - 28 - 8 - 8) = -36px
   to compensate for the 28px expander column. V2 hides that column, so the pull
   now drags the name column back underneath Status — a 36px overlap that makes
   the first two headers read as one ("Deal StatusDeal Name / ID") and puts the
   status chip under the name link. Shared by Order and Deal, so clearing it
   fixes both from one place. */
.orders-card .trow > .col-name {
  margin-left: 0;
}

/* The expandable Order → Invoice drill-down (5111:69471 / 5111:73210) adds a
   leading chevron column to Order rows only. Deal rows share the same row
   markup (buildDealsMode clones Order's snippets) but have no per-deal
   invoice drill-down in this design, so the column stays hidden there —
   scoped to the mode class rather than removed outright, so the underlying
   expand/collapse JS and markup stay intact for both. */
.table-inner.table-mode-deals .col-expand {
  display: none;
}

/* ═══ PAGINATION — Figma 5088:21031 (52px band, 36px items) ═══════════ */
.table-footer,
/* Figma 5088:21031 — 52px bar, content inset 16px, three regions.
   A 1fr/auto/1fr grid centres the page controls on the bar itself rather than
   on the space left over between the two side groups, which is what a flex
   space-between produced. */
.pagination-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  border-top: 1px solid var(--ar-divider);
  box-sizing: border-box;
  flex: 0 0 auto;
}

.pagination-bar > .pg-section:first-child { justify-self: start; }
.pagination-bar > .pg-center { justify-self: center; }
.pagination-bar > .pg-section:last-child { justify-self: end; }

.pagination-bar .pg-section,
.pagination-bar .pg-center,
.pagination-bar .pg-numbers {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.pagination-bar .pg-section { gap: var(--space-4, 4px); }
.pagination-bar .pg-center { gap: var(--space-12, 12px); }
.pagination-bar .pg-numbers { gap: var(--space-4, 4px); }

/* Page buttons and prev/next — Figma PaginationItem 36x36, 8px radius */
.pagination-bar .pg-num,
.pagination-bar .pg-nav-btn {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--ar-control-border);
  border-radius: 8px;
  font-family: var(--ar-font-ui);
  font-size: 14px;
  color: var(--ar-text-strong);
}
html[data-theme="ads"] .pagination-bar .pg-num,
html[data-theme="ads"] .pagination-bar .pg-nav-btn {
  border-radius: var(--radius-button, 6px);
}

.pagination-bar .pg-num {
  width: auto;
}

.pagination-bar .pg-num.active {
  background: var(--ar-indigo);
  border-color: rgba(15, 18, 20, 0.5);
  color: #ffffff;
}

.pagination-bar .pg-num:hover:not(.active),
.pagination-bar .pg-nav-btn:hover:not(.disabled) {
  background: #f2f3f7;
}

.pagination-bar .pg-nav-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination-bar .pg-nav-btn svg {
  width: 16px;
  height: 16px;
}

/* Show / Go to page — shared ADS Select (v2-select.css + v2-select.js).
   The wrap is only a layout host; chrome, chevron, focus, and the portaled
   listbox all belong to the component so the OS native menu never appears. */
.pagination-bar .pg-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 32px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.pagination-bar .pg-select-wrap::after {
  content: none;
}

.pagination-bar .pg-select-wrap:focus-within {
  outline: none;
}

.pagination-bar .pg-select-wrap .ads-select {
  --ads-select-height: 32px;
  --ads-select-pad-x: 8px;
  --ads-select-radius: 8px;
  --ads-select-font-size: 14px;
  --ads-select-line: 20px;
  --ads-select-border: var(--ar-control-border);
  --ads-select-brand: var(--ar-indigo);
  --ads-select-text: var(--ar-text-strong);
  font-family: var(--ar-font-ui);
  min-width: 68px;
}

.pagination-bar .pg-section:last-child .ads-select {
  min-width: 56px;
}

.pagination-bar .pg-label,
.pagination-bar .pg-total,
.pagination-bar .pg-jump-label {
  font-family: var(--ar-font-ui);
  font-size: 12px;
  line-height: 18px;
  color: var(--gray-95);
}

/* ── Expander alignment ────────────────────────────────────────────────
   The chevron's 32px box was centred inside the 40px expander cell, which
   left its visual edge 4px inside the column and therefore 4px right of the
   Filter button above it. The cell itself is already on the Filter button's
   line, so only the glyph needs to start at the cell's leading edge. The
   32x32 hit target is unchanged — it grows rightward into the column's own
   width, so it still cannot reach the status chip. */
.table-inner .trow-data .td-expand,
.table-inner .trow-data .col-expand.td-expand {
  justify-content: flex-start;
}

/* Nested invoice rows inherit the same leading edge so the child table reads
   as part of the parent grid rather than a separately indented block. */
.invoice-panel .inv-row .inv-expand,
.invoice-panel .inv-row .td-expand {
  justify-content: flex-start;
}

/* ── Status chips ──────────────────────────────────────────────────────
   Two vocabularies over one palette. The parent Order row answers "where is
   this order in the billing workflow"; the expanded invoice rows answer
   "what is happening to this invoice". Review, Approval and Ready mean the
   same thing at both levels and take the same colour, which is what makes an
   expanded group read as belonging to the row above it.

   Every chip is a wash with a matching border and dark text of the same hue,
   so the set stays quiet at a glance and the label — never the colour alone —
   carries the meaning. Only Failed and Issue are allowed to be loud, and only
   because a failed export is the one state that wants finding. */

/* Passed / Exported — clean, done. */
.status-chip--passed,
.inv-chip--exported {
  background: #e8f4ec;
  border-color: #9bcbaf;
  color: #1c6b3f;
}

/* Invoiced — the deeper green, so "finished with" reads as a step beyond
   "went out cleanly". */
.status-chip--invoiced {
  background: #dcedE3;
  border-color: #79b394;
  color: #14532d;
}

/* Review — a person has to look at it. */
.status-chip--review,
.inv-chip--review {
  background: #fff1e6;
  border-color: #f0a868;
  color: #9a4a06;
}

/* Adjusting — deliberately yellow rather than a second orange, so it cannot
   be mistaken for Review at a glance. */
.inv-chip--adjusting {
  background: #fbf3d0;
  border-color: #d9bd3f;
  color: #6f5502;
}

/* Approval — waiting on somebody else. */
.status-chip--approval,
.inv-chip--approval {
  background: #f1ecfa;
  border-color: #b6a2e0;
  color: #59389c;
}

/* Peer Review — high-value invoices. Emphasis indigo, distinct from
   Ready (info blue), Review (warning orange) and Draft (neutral/info). */
.inv-chip--peer-review {
  background: #e2e3f2;
  border-color: #6567ce;
  color: #2d2f8c;
}

/* Ready — approved, queued, not yet gone. Blue keeps it clearly apart from
   the greens that mean it has actually shipped. */
.status-chip--ready,
.inv-chip--ready {
  background: #e8effa;
  border-color: #93b3e0;
  color: #1d4e89;
}

/* Draft — nothing has happened yet. */
.inv-chip--draft {
  background: #f1f3f5;
  border-color: #cbd2d9;
  color: #4a525c;
}

/* Locked — finalised and immovable, but not yet sent. A cool slate rather
   than a green, so the eye does not read it as shipped. */
.inv-chip--locked {
  background: #e6ebf0;
  border-color: #a5b2be;
  color: #33414f;
}

/* Issue / Failed — the only pair meant to be found. */
.status-chip--issue,
.inv-chip--failed {
  background: #fdeaea;
  border-color: #e59a9a;
  color: #9b1c1c;
}

/* ═══ 2.0a — EXPANDED INVOICE AS A NESTED CARD ═════════════════════════════
   Figma: HARPS 5175:26069 (expanded invoice) and 5174:24792 (full page).

   Everything above this block builds the child table as a continuation of the
   parent: its columns derive from the parent's anchors so Status, Name and
   First Exported sit on the parent's guides, and it shares the parent's
   background. That reads as one very tall table, and at a glance you cannot
   tell where the order stops and its invoices start.

   The 2.0a design replaces that with a containment model. The panel becomes a
   light neutral well, indented from the parent row, holding a titled white
   card. Hierarchy comes from the nesting — well, heading, card — rather than
   from column alignment, so the child is free to size its own columns to its
   own content and no longer has to track the parent's.

   This block therefore deliberately unwinds the parent-alignment rules for
   this build only. It is appended rather than edited in place so the derived
   system above stays intact and reviewable, and because v2a owns this file:
   2.0, 2.0b and 2.0c load their own copies and are untouched.
   ─────────────────────────────────────────────────────────────────────── */

/* ── The well ─────────────────────────────────────────────────────────────
   5% black over the row background, which is what separates it from both the
   white parent rows above and the white card inside it. The left inset is the
   hierarchy cue that the removed column alignment used to carry. */
/* 8px above the Invoice (n) heading and 10px below the card.

   The top padding is what stops the heading reading as part of the parent
   row's divider. The heading band centres 22px of text in 40px, so it carries
   9px of its own above and below; with nothing above the band that was the
   whole gap, against 17px below once the band's own 8px margin is counted —
   the label sat nearly twice as close to the order above it as to its own
   table. One 8px increment on this side brings both to 17px.

   The 10px below closes the section before the next order. It was 16px, which
   at that height read as an empty scrollbar rail rather than spacing, and
   briefly 0, which ran the card straight into the following row. */
/* The well is sized to the detail, not to the table. The panel used to stretch
   the full 2000-odd px of the table's scroll width while the invoice content
   inside it runs to about 1240, so scrolling the order table right walked off
   the end of the invoices and left a long empty gray band with nothing in it.

   max-content sizes the fill to the widest child, and sticky keeps it at the
   scrollport edge on the same terms as the children it wraps — one scroller
   still, no nested overflow, and the well now travels with the detail it
   belongs to instead of trailing behind it. */
.invoice-panel {
  position: sticky;
  left: 0;
  width: max-content;
  padding: 8px 0 10px;
  background: rgba(15, 18, 20, 0.05);
  border-bottom: 1px solid #d4dee3;
}

/* ── One scroll context ───────────────────────────────────────────────────
   The panel is as wide as the table's full scroll width, so its contents
   scrolled the whole 2000-odd px with the columns and the card was gone off
   the left edge long before the parent's own frozen Status and Name had
   moved at all — the two halves of the same row visibly coming apart.

   The detail is pinned instead. Sticky keeps it in the parent's single
   scroller — no nested overflow, no second scrollbar, nothing to sync — and
   because the card is narrower than the scrollport the whole invoice table
   stays on screen at every scroll position, so no invoice column is ever
   scrolled out of reach.

   The indent moves onto the pinned children for the same reason: padding on
   the panel would be outside the sticky box and the card would lose its
   inset the moment it pinned. */
.inv-section-head,
.invoice-panel > .invoice-scroll-area {
  position: sticky;
  left: 0;
  width: max-content;
}

/* ── Alignment guide ──────────────────────────────────────────────────────
   The section hangs off the parent's Billing Status column rather than the
   table edge, so the nesting reads against the grid instead of against the
   page. That x is the row's own inset, past the chevron gutter, plus the
   cell's padding — the same three tokens the parent lays its own columns
   with, so this tracks them if any is ever retuned rather than being a
   measured constant.

   Both the heading and the card take it, and both are the sticky children,
   so the inset is inside the pinned box and the section keeps its alignment
   at every scroll position instead of sliding flush at the left edge. */
.table-inner {
  --ar-inv-inset: calc(
    var(--ar-row-pad-left) + var(--ar-freeze-expand-w) + var(--ar-cell-pad)
  );
}

.invoice-panel > .invoice-scroll-area {
  padding: 0 24px 0 var(--ar-inv-inset);
}

/* setupInvoicePanelHScroll still builds a proxy scrollbar row per panel from
   the era when the panel scrolled on its own. It is already display:none, but
   it is the one element left inside a panel that declares overflow-x, so its
   overflow goes too: there is then no second scroll container here at all,
   whatever the display value. */
.invoice-panel > .table-scrollbar-row.invoice-panel-hscroll {
  display: none;
  overflow: hidden;
}

/* Stub divider from the flush-panel treatment: it drew a 16px rule in the old
   left inset, which is now padding. */
.invoice-panel::before {
  content: none;
}

/* ── Section heading ──────────────────────────────────────────────────────
   Figma body/bold/lg in a 40px band. Sits on the well rather than on a fill
   of its own — the design's #f3f3f3 and the well resolve to the same value
   over white, and one surface means no seam between the two. The 8px inset
   sets it just outside the card's first column, as in the reference. */
.inv-section-head {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 24px 0 var(--ar-inv-inset);
  /* Clear of the card without detaching from it — the band sat directly on
     the card's top edge, which read as one block rather than a heading over
     a table. */
  margin-bottom: 8px;
}

.inv-section-title {
  color: #1e2528;
  font-family: var(--ar-font-ui, "Open Sans", sans-serif);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

/* ── The card ─────────────────────────────────────────────────────────────
   Sized to its columns instead of to the panel. The panel is as wide as the
   parent's scroll width, so stretching the card to it would leave the last
   column stranded several hundred px from the rest; content width keeps the
   table reading as one block, exactly as the reference frames it. */
.invoice-inner {
  width: max-content;
  min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 18, 20, 0.1);
  border-radius: var(--radius-card);
  /* Vertical only, and only on overflow. max-height with overflow-y:auto
     means a short panel still sizes to its rows and shows no scrollbar at
     all — the bar is a consequence of the content being taller than the
     allowance, not of any invoice count. The card is the scroller rather
     than the panel so the "Invoice (N)" heading, which sits outside it,
     never scrolls away.

     clamp keeps the allowance proportional without letting it collapse on a
     short window or run away on a tall one. overflow-x stays hidden, not
     auto: the row widths are already the card's own width, so there is
     nothing to scroll sideways, and the parent table keeps sole ownership of
     horizontal scrolling. */
  max-height: clamp(360px, 46vh, 440px);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Holds the column labels against the rows moving under them. The header
   already carries its own background, so rows are occluded rather than
   showing through. */
.invoice-inner > .inv-header {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* One density at every invoice count.
   The card is a flex column, and a flex item's default flex-shrink is 1, so
   when the list grew past the max-height above the browser took the cheapest
   way out and shrank the rows to fit: a 21-invoice order rendered 36px rows
   under a 33px header, against 48px and 40px everywhere else. The rows were
   being compressed instead of the container overflowing.
   Refusing to shrink makes that overflow real, which is what the max-height
   turns into scrolling. It is a property of the row, not of how many rows
   there are, so density stays fixed for any count. */
.invoice-inner > .inv-header,
.invoice-inner > .inv-row {
  flex-shrink: 0;
}

/* Child columns now answer to their own content. The eight the reference
   shares with this build take its widths; Order Line Item ID is 2.0a's and is
   sized the same way the others were — its 12px label plus the cell's
   padding. */
.table-inner .invoice-inner,
.table-inner {
  --inv-col-gap: 4px;
  --inv-w-status: 160px;
  --inv-w-name: 409px;
  --inv-w-lineitem: 128px;
  --inv-w-firstexp: 120px;
  --inv-w-lastexp: 120px;
  --inv-w-exports: 72px;
  --inv-w-amount: 152px;
  --inv-w-units: 140px;
  --inv-w-lock: 120px;
}

/* The lead-in existed to push the child's first column onto the parent's
   Status guide. The card supplies the inset now. */
.inv-header,
.inv-row {
  padding-left: 8px;
  padding-right: 8px;
  gap: var(--inv-col-gap);
  min-width: 0;
}

/* Name is the one column the parent used to size, and pinning it to the
   reference's width detaches it. It is also the column that takes up the
   slack: at 393px flat the card stopped about 440px short of the scrollport
   and every expanded row carried a band of parent-table white down its right
   side.

   The card has to stay inside the scrollport — that is what keeps all eight
   invoice columns reachable without scrolling (see .invoice-panel above) — so
   the name tracks the viewport rather than growing freely. 1200px is what the
   rest of the row costs: the other seven columns, the gaps, the row padding,
   the card's indent and gutter, and the 139px the rail and card insets take
   out of the viewport, with a few pixels spare so the card lands inside the
   scrollport rather than on its edge. Below that the clamp returns the column
   to 393px and the card scrolls as it did before; above it the column stops
   at 1200px rather than running away on a very wide display. */
.inv-header > .inv-th.inv-col-name,
.inv-row > .inv-name-cell {
  flex: 0 0 clamp(var(--inv-w-name), calc(100vi - 1200px), 1200px);
  width: clamp(var(--inv-w-name), calc(100vi - 1200px), 1200px);
}

.inv-th.inv-col-lineitem,
.inv-cell.inv-col-lineitem {
  flex: 0 0 var(--inv-w-lineitem);
  width: var(--inv-w-lineitem);
}

/* ── Header ───────────────────────────────────────────────────────────────
   One step darker than the card and lighter than the parent's own header, so
   it scans as a subheading rather than a second table head. */
.inv-header {
  height: 40px;
  background: #eceeee;
  border-top: 0;
  border-bottom: 1px solid #d4dee3;
}

/* Hairline that used to bridge the gap beside the header's top border. The
   card's own edge closes that gap now. */
.inv-header::before {
  content: none;
}

.inv-header .inv-th-label {
  color: #666d70;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

/* ── Rows ─────────────────────────────────────────────────────────────────
   White against the well. The last row drops its rule so the divider does not
   double up with the card's own bottom edge. */
.inv-row {
  height: 48px;
  background: #ffffff;
  border-bottom: 1px solid #d4dee3;
}

.inv-row:last-child {
  border-bottom: 0;
}

/* The flush-panel treatment drew its row rule as an absolutely positioned
   ::after in --gray-20. Left in place it sat directly on top of the border
   above, so every separator rendered as two stacked hairlines in two
   different greys — the weight this block is asked to take out. One border,
   one colour. */
.inv-row::after {
  content: none;
}

/* Figma right-aligns both figures; Exports and Lock Status stay left with
   their labels. */
.inv-th.inv-col-amount,
.inv-cell.inv-col-amount,
.inv-th.inv-col-units,
.inv-cell.inv-col-units {
  justify-content: flex-end;
  text-align: right;
}

.inv-cell.inv-col-units .inv-cell-text {
  text-align: right;
}

/* ── Freezing ─────────────────────────────────────────────────────────────
   The child's sticky columns were the other half of the alignment model:
   they held Status and Name against the parent's frozen edge. Inside a card
   that scrolls as one object they would detach from their own header, so the
   card scrolls whole. The parent's own frozen columns are untouched. */
.table-inner[data-frozen="true"] .inv-col-status,
.table-inner[data-frozen="true"] .inv-name-cell,
.table-inner[data-frozen="true"] .inv-th.inv-col-name {
  position: static;
  left: auto;
  z-index: auto;
  background: transparent;
}

/* ═══ NUMERIC ALIGNMENT AND CHILD TYPOGRAPHY ════════════════════════════
   Two rules, stated together because they govern the same reading task.

   Alignment follows what a column means, not whether its text contains
   digits. An invoice count, an export count, a currency amount and a unit
   total are quantities you scan down and compare, so they take a right edge.
   An order ID, a line-item ID, a PO number and an export date are labels that
   happen to be numeric, so they read from the left like any other text.

   Header and body are declared together per column so the two cannot drift,
   and values carry tabular numerals so digits stack rather than only their
   right edges lining up.

   Declared at the end of the file because several of these columns were set
   left further up; this is the single place the final rule lives. */

/* ── Parent order table ───────────────────────────────────────────────
   Invoice and Order Quantity are counts. Order Value is already right and is
   left alone. Bill Period, Flight Date and External PO stay left. */
.col-invoices .th-cell,
.col-invoices.td-cell,
.col-order-quantity .th-cell,
.col-order-quantity.td-cell {
  justify-content: flex-end;
  text-align: right;
}

.col-invoices .td-text,
.col-order-quantity .td-text,
.col-value .td-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Nested invoice table ─────────────────────────────────────────────── */
.inv-th.inv-col-exports,
.inv-cell.inv-col-exports,
.inv-th.inv-col-amount,
.inv-cell.inv-col-amount,
.inv-th.inv-col-units,
.inv-cell.inv-col-units {
  justify-content: flex-end;
  text-align: right;
}

.inv-cell.inv-col-exports .inv-cell-text,
.inv-cell.inv-col-amount .inv-cell-text,
.inv-cell.inv-col-units .inv-cell-text {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The numeric-looking columns that are not measures. */
.inv-th.inv-col-lineitem,
.inv-cell.inv-col-lineitem,
.inv-th.inv-col-firstexp,
.inv-cell.inv-col-firstexp,
.inv-th.inv-col-lastexp,
.inv-cell.inv-col-lastexp,
.inv-th.inv-col-lock,
.inv-cell.inv-col-lock {
  justify-content: flex-start;
  text-align: left;
}

/* ── Expanded invoice typography ──────────────────────────────────────
   The child rows are measured against the parent's Order ID — the parent's
   own secondary line, 12px/18px — not against its 14px order name, so the
   detail stays subordinate to the row it belongs to. The values follow that:
   12px on 18px leading, and the ID takes the same muted token the parent's
   Order ID uses so the two secondary lines match.

   The invoice name is the exception. It is the row's label rather than one
   more value in it, and it was swept into the same rule as the cell text,
   which dropped it to 12px and left the name and the ID reading as one
   undifferentiated block. It sits at body size, which is what the rest of
   the product uses for a primary label, and the ID stays 12px underneath.
   20px leading rather than the 21px body default: the two lines have to
   stack inside a 48px row without pushing it taller. */
.inv-cell-text {
  font-size: 12px;
  line-height: 18px;
}

.inv-name-text,
.inv-name-link {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.inv-name-id {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--ar-text-muted);
}

/* Invoice sits immediately before Advertiser. Shared 8px cell padding on both
   sides is the gutter; the extra 16px trailing pad used to push the count
   (and its header) 8px further from the advertiser names. */

/* The invoice name is an anchor in most panels, and the shared table-link
   style claims every table link at the parent's 14px/600 through a selector
   specific enough to beat a plain class. The two panels that render a span
   instead take the rule above, so without matching that specificity here the
   same column shows two different sizes.

   This used to pull the anchor down to the Order ID's 12px, which made the
   name and the ID below it read as one block and lost the row its label. It
   takes body size now, the same as the span variant, and keeps weight 500
   rather than the shared 600 so it stays lighter than the order name above
   it. Only the type is overridden; the link's colour, hover and focus still
   come from the shared style. */
html:not([data-theme="wireframe"]) .invoice-panel a.inv-name-link:any-link {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* ═══ EXPANDED INVOICE SORTING ══════════════════════════════════════════
   2.0 and 2.0-a only — 2.0-b and 2.0-c never load assets/ar-invoice-sort.js
   and so never build the control this styles.

   The arrow is the same --ads-sort-arrow mask in currentColor that every
   other V2 header uses, and follows the same states: nothing at rest, a
   muted pair while the header is hovered or focused, and the chosen
   direction fully opaque once its column is sorting. What differs from the
   parent header is that both directions are offered at once, so picking one
   is a click rather than a cycle.

   Stacked rather than side by side because the widest headers here leave
   little room: two 12px arrows in a row would cost 32px, the stack costs
   14px, and the columns had to grow to afford even that. */
.table-inner {
  --inv-sort-w: 16px;
}

/* The slot is always present at full width, hovered or not, so revealing the
   arrows cannot move a label, a column edge or a body cell. */
.inv-th-sort {
  display: inline-flex !important;
  flex: 0 0 var(--inv-sort-w);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--inv-sort-w);
  margin-left: 4px;
  align-self: center;
}

/* Right-aligned numeric headers put the slot before the label, so the label
   keeps the right edge its values are aligned to.

   justify-content flips with the direction: in row-reverse, flex-end packs
   toward the left. These cells inherit flex-end from the alignment block
   above, which reversed would push the whole header away from the edge its
   values sit on, so the packing is restated here to match. */
.inv-th.inv-col-exports,
.inv-th.inv-col-amount,
.inv-th.inv-col-units {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.inv-th.inv-col-exports .inv-th-sort,
.inv-th.inv-col-amount .inv-th-sort,
.inv-th.inv-col-units .inv-th-sort {
  margin-left: 0;
  margin-right: 4px;
}

.inv-sort-arrow {
  display: block;
  /* Visually 12x7; the padding gives each direction a target worth aiming
     at without either one growing the slot. */
  width: var(--inv-sort-w);
  height: 11px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}

.inv-sort-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--ads-sort-arrow) center / 12px 12px no-repeat;
  mask: var(--ads-sort-arrow) center / 12px 12px no-repeat;
}

/* One glyph, rotated, so the two directions cannot drift apart visually —
   the same trick the parent header uses for its single indicator. */
.inv-sort-arrow[data-dir="asc"]::before { margin-top: -1px; }
.inv-sort-arrow[data-dir="desc"]::before { margin-top: -1px; transform: rotate(180deg); }

/* Available while the header is hovered or anything inside it is focused,
   which is what keeps the feature reachable from the keyboard rather than
   the pointer alone. Muted, so an affordance never reads as the active sort. */
.inv-th:hover .inv-sort-arrow,
.inv-th:focus-within .inv-sort-arrow {
  opacity: 0.45;
}

.inv-th .inv-sort-arrow:hover { opacity: 0.75; }

/* The active direction stays fully painted after the pointer leaves, so the
   sorted column still says so at rest. */
.inv-th[data-sort="asc"] .inv-sort-arrow[data-dir="asc"],
.inv-th[data-sort="desc"] .inv-sort-arrow[data-dir="desc"] {
  opacity: 1;
}

.inv-sort-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ar-indigo, #3611c8);
  outline-offset: 1px;
  border-radius: 2px;
}

.inv-sort-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Room for the slot. Only the four columns whose label already filled their
   width grow; the rest had spare room and keep the width they had. First
   Exported leaves Bill Period's guide as a result — accepted deliberately so
   every sortable header carries the same control. */
.table-inner {
  --inv-w-firstexp: calc(var(--ar-anchor-period-w) - var(--inv-col-gap) + 20px);
  --inv-w-lastexp: 120px;
  --inv-w-amount: 164px;
  --inv-w-lock: 112px;
}

/* Customize columns search.
   ads-theme.css paints `html[data-theme="ads"] input[type="text"]` at (0,2,2)
   with 12px padding, which outranks the 36px left inset meant for the overlay
   icon. Put the icon in flow, like the Order toolbar search, so the glyph and
   placeholder cannot occupy the same pixels. */
.colsel-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ar-control-border, rgba(15, 18, 20, 0.20));
  border-radius: var(--radius-field, 4px);
  background: var(--ads-card-bg, #fff);
  box-sizing: border-box;
}
.colsel-search-wrap:focus-within {
  border-color: var(--ar-indigo, #4045c2);
  box-shadow: 0 0 0 1px var(--ar-indigo, #4045c2);
}
.colsel-search-icon {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--ar-placeholder, #9eb0bd);
}
html[data-theme="ads"] .colsel-search-wrap input.colsel-search[type="text"],
html[data-theme="ads"] .colsel-search-wrap input.colsel-search[type="text"]:focus,
.colsel-search-wrap .colsel-search {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  outline: none;
}

/* Modal/drawer body content only — section headings and 8/16/24 rhythm.
   Header, footer, close, and buttons stay on ads-theme.css. */
html[data-theme="ads"] .filter-panel-body .filter-field,
.filter-panel-body .filter-field {
  gap: 8px;
}

html[data-theme="ads"] .filter-panel-body,
.filter-panel-body {
  padding: 16px 24px;
  gap: 16px;
}

html[data-theme="ads"] .filter-panel-body .filter-field-label,
.filter-panel-body .filter-field-label {
  margin: 0;
  color: var(--ads-gray-200, #3b4347);
  font: var(--ads-font-body-sm-sem, 600 12px/18px "Open Sans", var(--font-family), sans-serif);
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="ads"] .colsel-body,
.colsel-body {
  padding: 16px 24px;
}

html[data-theme="ads"] .colsel-body .colsel-section-title,
.colsel-body .colsel-section-title {
  margin: 0 0 8px;
  color: var(--ads-gray-600, var(--ar-text-strong, #1e2528));
  font: var(--ads-font-body-md-sem, 600 14px/20px "Open Sans", var(--font-family), sans-serif);
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="ads"] .colsel-body .colsel-section,
.colsel-body .colsel-section {
  margin: 0 0 24px;
}

html[data-theme="ads"] .colsel-body .colsel-section:last-child,
.colsel-body .colsel-section:last-child {
  margin-bottom: 0;
}

html[data-theme="ads"] .po-modal-body,
.po-modal-body {
  padding: 16px 24px;
}

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

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

html[data-theme="ads"] .po-modal-body .po-modal-meta-label,
.po-modal-body .po-modal-meta-label {
  margin: 0;
  color: var(--ads-gray-200, #3b4347);
  font: var(--ads-font-body-sm-sem, 600 12px/18px "Open Sans", var(--font-family), sans-serif);
  letter-spacing: 0;
  text-transform: none;
}

.col-billing-category .ads-chip .td-text {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.ar-table-empty[hidden] {
  display: none !important;
}

.ar-table-empty:not([hidden]) {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 48px 24px;
  text-align: center;
}

.ar-table-empty-title {
  margin: 0;
  font-family: var(--ar-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #1e2528;
}

.ar-table-empty-helper {
  margin: 0;
  font-family: var(--ar-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #51585b;
}

.ar-table-empty .edl-modal-btn {
  margin-top: 8px;
}