/* Shared product surface contract. Dashboard islands are the visual reference. */

:root[data-library="navorina"] {
  --nv-island-padding: 24px;
  /* Resolve from the root workspace token: page-island is rebound inside each
     module, after root custom properties have already reached computed value. */
  --nv-section-surface: var(
    --dash-workspace-bg,
    color-mix(in srgb, var(--color-surface-muted, rgba(238, 238, 238, 0.06)) 52%, transparent)
  );
  --nv-section-surface-soft: var(--color-surface-inset, var(--dash-inner-surface, rgba(255, 255, 255, 0.015)));
  --nv-section-row-hover: var(--color-surface-inset-hover, var(--dash-activity-surface, rgba(255, 255, 255, 0.025)));
  --nv-section-row-selected: var(--color-surface-inset-selected, var(--color-surface-inset-hover, rgba(255, 255, 255, 0.028)));
  --nv-section-control-surface: var(--color-surface-inset, rgba(255, 255, 255, 0.035));
  --nv-section-control-hover: var(--color-surface-inset-hover, rgba(255, 255, 255, 0.055));
  --nv-table-island: var(--nv-section-surface);
  --nv-card-tile: var(--nv-section-surface-soft);
  --nv-table-row-selected: var(--nv-section-row-selected);
}

/* One outer content frame for every non-table island. Table organisms own the
   same 24 px frame through nv-table.css so their cells never receive it twice. */
.dash-page :is(
  .nv-o-card,
  .nv-o-list,
  .nv-o-chart,
  .pay-panel,
  .pay-treasury-card,
  .pay-treasury-panel,
  .inv-week-timeline,
  .inv-reconciliation,
  .acc-panel,
  .ops-card,
  .ops-panel,
  .bud-chart-card,
  .bud-panel,
  .inc-chart-card,
  .inc-panel,
  .tax-chart-card,
  .tax-panel,
  .acct-chart-card,
  .acct-panel
):not(.nv-o-table) {
  box-sizing: border-box;
  padding: var(--nv-island-padding) !important;
}

/* Chart islands: the 24 px island frame is the only inset. The chart
   organisms (nv-o-chart, nv-chart and section wrappers) used to add their own
   18-24 px on top of it, pushing titles to 42-48 px. Inside the frame the
   parts stack on the grid: head, 16 legend, 12 plot, 8 axis. */
.dash-page :is(.nv-o-chart, .nv-chart, [class$="-chart-card"]):not(.nv-o-table) {
  --nv-chart-inset: 0px;
}

.dash-page :is(.nv-o-chart, .nv-chart) :is(.nv-o-chart__head, .nv-chart__head) {
  padding: 0 !important;
}

.dash-page :is(.nv-o-chart, .nv-chart) :is(.nv-m-chart-legend, .nv-chart-legend) {
  padding: 16px 0 0 !important;
}

.dash-page :is(.nv-o-chart, .nv-chart) :is(.nv-o-chart__body, .nv-chart__body) {
  padding-inline: 0 !important;
  padding-block-end: 0 !important;
}

.dash-page :is(.nv-o-chart, .nv-chart) :is(.nv-o-chart__axis, .nv-chart__axis-labels):not(.nv-chart__axis-labels--bands) {
  padding-inline: 0 !important;
  padding-block-end: 0 !important;
}

:root[data-library="navorina"].light,
:root[data-library="navorina"].light-theme {
  --nv-section-surface: #fff;
  --nv-section-surface-soft: var(--color-surface-inset);
  --nv-section-row-hover: var(--color-surface-inset-hover);
  --nv-section-row-selected: var(--color-surface-inset-selected);
  --nv-section-control-surface: var(--color-surface-inset);
  --nv-section-control-hover: var(--color-surface-inset-hover);
}

.dash-page :is(
  .nv-o-table,
  .nv-o-card,
  .nv-o-list,
  .nv-o-chart,
  .tx-table-card,
  .pay-card,
  .pay-panel,
  .pay-treasury-card,
  .pay-treasury-panel,
  .inv-week-timeline,
  .inv-reconciliation,
  .inv-table-card,
  .acc-table-card,
  .acc-panel,
  .ops-card,
  .ops-panel,
  .bud-chart-card,
  .bud-table-card,
  .bud-panel,
  .inc-chart-card,
  .inc-table-card,
  .inc-panel,
  .tax-chart-card,
  .tax-table-card,
  .tax-panel,
  .acct-chart-card,
  .acct-table-card,
  .acct-panel
) {
  border-color: transparent;
  background-color: var(--nv-section-surface);
  box-shadow: none;
}

.dash-page .nv-o-table__grid tbody tr {
  background-color: transparent;
}

.dash-page .nv-o-table__grid tbody tr:hover {
  background-color: var(--nv-section-row-hover);
}

.dash-page .nv-o-table__grid tbody tr:is(.is-selected, [aria-selected="true"]) {
  background-color: var(--nv-section-row-selected);
}

.dash-page .nv-o-table__grid tbody tr:is(.is-selected, [aria-selected="true"]) > td {
  background-color: transparent;
}

/* Island head contract. Every island head is one 32 px row (the control
   height), so titles sit on the same line in neighbouring islands whether or
   not the head carries controls. One title style: 16 px, 600, on a 32 px
   line box, so a lone title and a title beside 32 px controls share a centre. */
.dash-page :is(
  .nv-o-table__head,
  .nv-o-card__head,
  .nv-o-list__head,
  .nv-o-chart__head,
  .nv-chart__head,
  [class*="-card__head"],
  [class*="-panel__head"],
  .dash-month-summary__head,
  .inv-week-timeline__head,
  .acct-detail__head,
  .acct-workflow__head,
  .bud-detail__head
) {
  min-block-size: 32px;
  align-items: center;
}

.dash-page :is(
  .nv-o-table__head,
  .nv-o-card__head,
  .nv-o-list__head,
  .nv-o-chart__head,
  .nv-chart__head,
  [class*="-card__head"],
  [class*="-panel__head"],
  .dash-month-summary__head,
  .inv-week-timeline__head,
  .acct-detail__head,
  .acct-workflow__head,
  .bud-detail__head
) :is(h2, h3):not([class*="eyebrow"], [class*="label"]),
.dash-page :is(
  .nv-o-card,
  .nv-o-list,
  .dash-card,
  .set-card,
  .set-panel,
  .pay-panel,
  .acc-panel,
  .ops-panel,
  .bud-panel,
  .inc-panel,
  .tax-panel,
  .acct-panel,
  .ins-panel
) > :is(h2, h3):first-child {
  margin: 0;
  font-size: var(--nv-type-title-3-size) !important;
  font-weight: var(--nv-type-title-3-weight) !important;
  line-height: 32px !important;
  letter-spacing: var(--nv-type-title-3-tracking);
}

/* Table head canon (docs: design-system/docs/navorina-table-contract.md § 3).
   Row 1: the title on the left, head actions on the right (Copy all,
   Export CSV, + Add …) drawn as the DS ghost small button whatever legacy
   class a page still carries. Row 2, only when the table owns filters:
   one toolbar of chips, chip selects, search and tool icons that wraps
   instead of hiding filters behind "More filters" or pushing actions into two
   lines. Filters that drive the whole page stay above the islands. */
.dash-page .nv-o-table > .nv-o-table__head {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  column-gap: 16px !important;
  row-gap: 12px !important;
}

.dash-page .nv-o-table__head > :first-child {
  min-width: 0;
}

.dash-page .nv-o-table__head > .nv-o-table__head-actions {
  display: flex !important;
  flex: none !important;
  align-items: center;
  gap: 4px !important;
  margin-inline: auto calc(var(--product-button-padding-sm, 12px) * -1) !important;
  white-space: nowrap;
}

.dash-page .nv-o-table__head-actions > :is(button, a) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: var(--product-button-height-sm, 32px) !important;
  min-height: var(--product-button-height-sm, 32px) !important;
  padding: 0 var(--product-button-padding-sm, 12px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--product-button-secondary-text, var(--dash-text)) !important;
  font-family: var(--lib-font-primary) !important;
  font-size: var(--nv-type-footnote-size) !important;
  letter-spacing: var(--nv-type-footnote-tracking);
  font-weight: var(--nv-type-weight-medium) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.dash-page .nv-o-table__head-actions > :is(button, a):hover,
.dash-page .nv-o-table__head-actions > :is(button, a):focus-visible {
  background: var(--nv-section-control-hover) !important;
  color: var(--dash-text) !important;
}

.dash-page .nv-o-table__head-actions > :is(button, a) svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.dash-page .nv-o-table__head > .nv-o-table__toolbar {
  order: 3;
  display: flex !important;
  flex-direction: row !important;
  flex: 1 0 100% !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Chip groups and the old overflow wrapper dissolve into the toolbar, so every
   chip wraps on the same 8 px rhythm. */
.dash-page .nv-o-table__toolbar :is(.nv-filter-overflow, .nv-filter-overflow__panel, .tx-chips, .pay-chips, .acc-chips, .rpt-filters) {
  display: contents !important;
}

.dash-page .nv-o-table__toolbar .nv-filter-overflow::details-content {
  display: contents !important;
  content-visibility: visible !important;
}

.dash-page .nv-o-table__toolbar .nv-filter-overflow__trigger {
  display: none !important;
}

/* Search and tool icons close the row on the right. */
.dash-page .nv-o-table__toolbar > :is(.nv-search-field, .rpt-table-search) {
  width: min(16rem, 100%) !important;
  margin-inline-start: auto !important;
}

.dash-page .nv-o-table__toolbar :is(.nv-select-wrap, .nv-select__trigger) {
  width: auto !important;
  flex: none !important;
}