/* Canonical product-page rhythm from the Navorina design system.
 * This file is loaded last by every sidebar route. Page styles own component
 * internals; this contract alone owns the distance between page islands. */

:root {
  --nv-section-island-gap: var(--spacing-2xl, 24px);
  --nv-section-control-gap: var(--spacing-sm, 8px);
  --nv-section-header-gap: var(--spacing-5xl, 40px);
  --nv-section-page-end: var(--spacing-6xl, 48px);
  --nv-viewport-bottom-fade-size: clamp(88px, 11vh, 136px);
}

body.dash-page {
  --dash-island-gap: var(--nv-section-island-gap);
  --dash-main-aside-gap: var(--nv-section-island-gap);
  --dash-shell-content-space: var(--nv-section-header-gap);
  /* Global nested-surface contract. This file is loaded last by every product
     section, so legacy page CSS cannot split the light palette into 4/6/8% grays. */
  --dash-inner-surface: var(--color-surface-inset, var(--color-well));
  --dash-wallet-action-surface: var(--color-surface-inset, var(--color-well));
  --dash-activity-surface: var(--color-surface-inset, var(--color-well));
  --nv-kpi-surface: var(--color-surface-inset, var(--color-well));
  --dash-aside-surface: var(--color-surface-inset, var(--color-well));
  --dash-aside-field: var(--color-surface-inset, var(--color-well));
  --nv-section-surface-soft: var(--color-surface-inset, var(--color-well));
  --nv-section-row-hover: var(--color-surface-inset-hover, var(--color-well-hover));
  --nv-section-row-selected: var(--color-surface-inset-selected, var(--color-well));
  --nv-section-control-surface: var(--color-surface-inset, var(--color-well));
  --nv-section-control-hover: var(--color-surface-inset-hover, var(--color-well-hover));
  --nv-card-tile: var(--color-surface-inset, var(--color-well));
  --nv-card-tile-hover: var(--color-surface-inset-hover, var(--color-well-hover));
  --nv-action-surface: var(--color-surface-inset, var(--color-well));
  --nv-action-surface-hover: var(--color-surface-inset-hover, var(--color-well-hover));
}

/* Light islands have one calm inset at rest. Legacy organisms sometimes used
   the darker hover token for persistent controls and selected states; normalize
   those static fills to the same surface as the Taxes detail cells. */
:is(html.light, html.light-theme) body.dash-page :is(
  .nv-o-table__status--neutral,
  .nv-o-table__empty-button,
  .nv-o-table__page[aria-current="page"],
  .nv-m-chip[aria-pressed="true"],
  .nv-o-topbar__search kbd,
  .nv-o-dialog-sizes__bar,
  .nv-tax-chart .nv-m-tabs__tab[aria-pressed="true"],
  .nv-tax__aside .tax-filing-detail__actions :first-child,
  .acct-detail__button--primary,
  .acct-month-close__button--primary,
  .inc-cat__icon,
  .tx-empty__btn,
  .tx-page-btn.is-active,
  .settings-ds-button:not(.settings-ds-button--primary, .settings-ds-button--danger),
  .settings-ds-billing-plan__status,
  .settings-ds-row__icon,
  .settings-ds-connection__mark,
  .inv-status--draft,
  .pay-status,
  .nv-ntf .nv-m-tabs__tab:is([aria-selected="true"], [aria-pressed="true"]),
  .nv-ntf-tools .nv-m-chip[aria-pressed="true"],
  .api-hub__mark,
  .api-list-row__mark
) {
  background: var(--color-surface-inset, var(--color-well)) !important;
}

/* The calm inset above is the rest state only: secondary buttons still answer hover. */
:is(html.light, html.light-theme) body.dash-page .settings-ds-button:not(.settings-ds-button--primary, .settings-ds-button--danger):hover:not(:disabled) {
  background: color-mix(in srgb, var(--dash-text) 9%, transparent) !important;
}

/* One viewport-level fade for every product section. It belongs to the shell,
   not to a table or island, and the shared runtime only reveals it while the
   active content scroller has more content below the browser edge. */
body.dash-page .dash-main {
  position: relative;
}

body.dash-page .nv-viewport-bottom-fade {
  position: absolute;
  z-index: 8;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--nv-viewport-bottom-fade-size);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--dash-bg, #050505) 22%, transparent) 30%,
    color-mix(in srgb, var(--dash-bg, #050505) 76%, transparent) 72%,
    var(--dash-bg, #050505) 100%
  );
  transition:
    opacity 180ms ease-out,
    visibility 0s linear 180ms;
}

body.dash-page .nv-viewport-bottom-fade.is-visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  body.dash-page .nv-viewport-bottom-fade {
    transition: none;
  }
}

/* The shell owns page insets. Keep the visible distance from the header
   controls to the first page island on the same axis as the island stack. */
body.dash-page .dash-main > .dash-workspace-content {
  padding-block-start: 0 !important;
  padding-block-end: var(--nv-section-page-end) !important;
}

/* Settings can render a verified preview instead of the live content root.
   Both branches obey the same shell inset and end-space contract. */
body.dash-page .dash-main > :is(.wsp-preview, .acct-settings-preview) {
  width: min(
    calc(100% - var(--dash-workspace-margin-right) - var(--dash-workspace-margin-right)),
    var(--dash-main-max-width)
  ) !important;
  inline-size: min(
    calc(100% - var(--dash-workspace-margin-right) - var(--dash-workspace-margin-right)),
    var(--dash-main-max-width)
  ) !important;
  margin-inline: auto !important;
  padding-block-start: 0 !important;
  padding-block-end: var(--nv-section-page-end) !important;
  padding-inline: 0 !important;
}

body.dash-page .dash-main > .dash-workspace-content > :last-child {
  margin-block-end: 0 !important;
}

@media (max-width: 800px) {
  :root {
    --nv-section-header-gap: var(--spacing-2xl, 24px);
  }
}

body.dash-page .dash-main > :is(.wsp-preview, .acct-settings-preview) > :last-child {
  margin-block-end: 0 !important;
}

/* Shell content, section stacks, main columns and right rails use one axis. */
body.dash-page .dash-main > .dash-workspace-content,
body.dash-page :is(
  .dash-content--flat-workspace,
  .nv-tx, .nv-pay, .nv-inv, .nv-acc, .nv-ops,
  .nv-bud, .nv-inc, .nv-tax, .nv-acct, .nv-ins,
  .nv-ntf, .nv-hlp,
  .nv-ins__main, .nv-ins__aside, .nv-ins .ins-aside-rest,
  .nv-ins .ins-briefing, .nv-ins .ins-briefing__grid,
  .nv-ins .ins-journal, .nv-ins .ins-journal__workspace,
  .set-layout, .set-main, .set-aside,
  .settings-ds-current__layout,
  .settings-ds-current__main,
  .settings-ds-current__aside
) {
  gap: var(--nv-section-island-gap) !important;
}

body.dash-page :is(
  .tx-layout, .pay-layout, .inv-layout, .acc-layout, .ops-layout,
  .bud-layout, .inc-layout, .tax-layout, .acct-layout, .ins-layout,
  .nv-ntf__layout, .nv-hlp__layout, .set-layout,
  .settings-ds-current__layout
) {
  column-gap: var(--nv-section-island-gap) !important;
  row-gap: var(--nv-section-island-gap) !important;
}

/* Controls are a compact group; their spacing must not inherit island rhythm. */
body.dash-page :is(
  .nv-ntf-bar,
  .nv-hlp-bar,
  .nv-ntf-selects,
  .nv-hlp-tools
) {
  gap: var(--nv-section-control-gap) !important;
}

@media (max-width: 800px) {
  :root {
    --nv-section-island-gap: var(--spacing-lg, 16px);
    --nv-section-page-end: calc(
      var(--dash-content-pad-bottom, var(--dash-tab-bar-height, 72px)) +
      var(--spacing-2xl, 24px)
    );
  }

  body.dash-page .dash-main > .dash-workspace-content {
    padding-inline: var(--dash-mobile-page-x, var(--spacing-lg, 16px)) !important;
  }

  body.dash-page .dash-main > :is(.wsp-preview, .acct-settings-preview) {
    padding-inline: var(--dash-mobile-page-x, var(--spacing-lg, 16px)) !important;
  }
}

/* Proximity: a filter toolbar belongs to the content it filters, so it sits
   12 px above that content while the KPI row above keeps the 24 px rhythm. */
:root {
  --nv-section-toolbar-gap: var(--spacing-md, 12px);
}

body.dash-page :is(
  .dash-workspace-content,
  .nv-tx, .nv-pay, .nv-inv, .nv-acc, .nv-ops,
  .nv-bud, .nv-inc, .nv-tax, .nv-acct
) > :is(
  .nv-acc-tools, .nv-ops-tools, .nv-bud-tools, .nv-inc-tools,
  .nv-inv-tools, .nv-tax-tools, .nv-acct-tools
) {
  /* The stack gap stays the single owner; the toolbar only pulls the next
     visible row closer, whatever hidden nodes sit between them in the DOM. */
  margin-block-end: calc(var(--nv-section-toolbar-gap) - var(--nv-section-island-gap)) !important;
}