/* Product Invoicing mapped directly to the current Navorina DS module. */

.inv-page .nv-inv {
  display: grid;
  gap: 24px;
  min-width: 0;
  padding-block-end: 48px;
  color: var(--nv-table-text);
  font-family: var(--lib-font-primary, Inter, sans-serif);
  container: nv-inv / inline-size;
}

.inv-page .inv-head { display: none; }

body.inv-page .nv-inv .nv-inv__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.inv-page .inv-layout {
  min-width: 0;
}
.inv-page .nv-inv-cal {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: var(--nv-table-island-border);
  border-radius: var(--nv-island-radius);
  background: var(--nv-table-island);
}
.inv-page .nv-inv-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inv-page .nv-inv-cal h2 { margin: 0; color: var(--nv-table-text); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.inv-page .nv-inv-cal__controls,
.inv-page .nv-inv-cal__nav { display: flex; align-items: center; gap: 8px; }
.inv-page :is(.nv-inv-add, .nv-inv-today, .nv-inv-icon) { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--nv-table-well); color: var(--nv-table-head); font: inherit; cursor: pointer; }
.inv-page .nv-inv-add { gap: 8px; padding: 0 14px; font-size: var(--nv-type-subhead-size); letter-spacing: var(--nv-type-subhead-tracking); font-weight: var(--nv-type-weight-semibold); }
.inv-page .nv-inv-today { padding: 0 12px; font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); font-weight: var(--nv-type-weight-semibold); }
.inv-page .nv-inv-icon { width: 40px; padding: 0; }
.inv-page :is(.nv-inv-add, .nv-inv-today, .nv-inv-icon):hover { background: var(--nv-table-well-hover); color: var(--nv-table-text); }
.inv-page .nv-inv-cal__view { overflow-x: auto; }
.inv-page .nv-inv-month { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.inv-page .nv-inv-month th { height: 32px; padding: 0 8px; color: var(--nv-table-head); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-align: start; text-transform: uppercase; }
.inv-page .nv-inv-day { height: 80px; min-height: 0; padding: 5px; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--nv-table-text) 4%, transparent); vertical-align: top; }
.inv-page .nv-inv-day.is-outside { opacity: .4; }
.inv-page .nv-inv-day__head { min-height: 24px; }
.inv-page .nv-inv-day__date { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--nv-table-head); font-size: var(--nv-type-caption-size); letter-spacing: var(--nv-type-caption-tracking); font-weight: var(--nv-type-weight-semibold); }
.inv-page .nv-inv-day__events { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
.inv-page .nv-inv-day__add { min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--nv-table-well); color: var(--nv-table-head); font-size: 10px; font-weight: 600; }
.inv-page .inv-week-timeline__scroll-hint { display: none; }

.inv-page .nv-inv-tools { display: grid; gap: 6px; min-width: 0; }
.inv-page .nv-inv-tools__row { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.inv-page .nv-inv-tools__row::-webkit-scrollbar { display: none; }
.inv-page .nv-inv-switch { display: flex; height: 32px; min-height: 32px; flex: none; align-items: stretch; gap: 8px; padding: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.dash-page.inv-page .nv-inv-switch__tab { height: 32px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--nv-table-well); color: var(--nv-table-head); font-size: var(--nv-type-subhead-size); letter-spacing: var(--nv-type-subhead-tracking); font-weight: var(--nv-type-weight-semibold); transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; }
body.dash-page.inv-page .nv-inv-switch__tab:is(:hover, :focus-visible),
body.dash-page.inv-page .nv-inv-switch__tab[aria-selected="true"] { background: var(--nv-table-well-hover); color: var(--nv-table-text); }
body.dash-page.inv-page .nv-inv-switch__tab:active { transform: scale(.96); }
.inv-page .nv-inv-search { display: flex; height: 32px; min-height: 32px; flex: none; box-sizing: border-box; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; background: var(--nv-table-well); color: var(--nv-table-cell); }
.inv-page .nv-inv-search input { width: 11rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--nv-type-callout-size); letter-spacing: var(--nv-type-callout-tracking); outline: none; }
.inv-page .nv-inv-search input::placeholder { color: var(--nv-table-head); opacity: 1; }
.inv-page .nv-inv-chip { display: inline-flex; height: 32px; min-height: 32px; flex: none; box-sizing: border-box; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--nv-table-well); color: var(--nv-table-cell); font: inherit; font-size: var(--nv-type-subhead-size); letter-spacing: var(--nv-type-subhead-tracking); font-weight: var(--nv-type-subhead-weight); cursor: pointer; }
.inv-page .nv-inv-chip:hover { background: var(--nv-table-well-hover); color: var(--nv-table-text); }
.inv-page .nv-inv-tools .nv-filter-overflow__trigger { height: 32px; min-block-size: 32px; border-radius: 999px; background: var(--nv-table-well); }
.inv-page .nv-inv-cal[hidden] { display: none; }
.inv-page .inv-toolbar__status { margin: -18px 0 0; padding-inline: 4px; color: var(--nv-table-head); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); }

.inv-page .nv-inv-table {
  overflow: hidden;
  border: var(--nv-table-island-border);
  border-radius: var(--nv-island-radius);
  background: var(--nv-table-island);
  container: nv-inv-table / inline-size;
}
.inv-page .inv-table-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 8px;
}
.inv-page .inv-table-card__title {
  margin: 0;
  color: var(--nv-table-text);
  font-size: var(--nv-type-title-3-size);
  font-weight: var(--nv-type-title-3-weight);
  letter-spacing: var(--nv-type-title-3-tracking);
}
.inv-page .inv-table-card__meta {
  margin: 0;
  color: var(--nv-table-head);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
}
.inv-page .nv-inv-table .nv-o-table__grid { min-width: 40rem; table-layout: fixed; }
.inv-page .nv-inv-table :is(th, td).nv-o-table__actions { width: 9rem; }
.inv-page .nv-inv-table .nv-o-table__grid :is(th, td) { box-sizing: border-box; }
.inv-page .nv-inv-table .nv-o-table__grid td { height: auto; padding: 1rem 1.25rem; }
.inv-page .nv-inv-table .nv-o-table__grid :is(th, td).is-amount { text-align: start; }
.inv-page .nv-inv-table .inv-invoice-num,
.inv-page .nv-inv-table .inv-client__name { margin: 0; overflow: hidden; color: var(--nv-table-text); font-size: var(--nv-type-headline-size); letter-spacing: var(--nv-type-headline-tracking); font-weight: var(--nv-type-weight-medium); line-height: var(--nv-type-headline-line); text-overflow: ellipsis; white-space: nowrap; }
.inv-page .nv-inv-table :is(.inv-invoice-date, .inv-client__domain, .inv-amount__sub, .inv-due__sub) { margin: 2px 0 0; overflow: hidden; color: var(--nv-table-head); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); font-weight: var(--nv-type-footnote-weight); line-height: var(--nv-type-footnote-line); text-overflow: ellipsis; white-space: nowrap; }
.inv-page .nv-inv-table .inv-client { display: flex; min-width: 0; align-items: center; }
.inv-page .nv-inv-table .inv-client__avatar { display: grid; width: 24px; height: 24px; min-width: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; font-size: 10px; }
.inv-page .nv-inv-table .inv-amount { margin: 0; color: var(--nv-table-amount); font-size: var(--nv-type-body-size); letter-spacing: var(--nv-type-body-tracking); font-weight: var(--nv-type-weight-semibold); line-height: var(--nv-type-body-line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-page .nv-inv-table .inv-due__date { margin: 0; color: var(--nv-table-text); font-size: var(--nv-type-headline-size); letter-spacing: var(--nv-type-headline-tracking); font-weight: var(--nv-type-weight-medium); line-height: var(--nv-type-headline-line); }
.inv-page .nv-inv-table .inv-status { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); font-weight: var(--nv-type-weight-semibold); line-height: 18px; white-space: nowrap; }
.inv-page .nv-inv-table .inv-status--paid { background: var(--nv-feedback-success-soft); color: var(--nv-feedback-success); }
.inv-page .nv-inv-table .inv-status--overdue { background: var(--nv-feedback-error-soft); color: var(--nv-feedback-error); }
.inv-page .nv-inv-table .inv-status--sent,
.inv-page .nv-inv-table .inv-status--draft { background: var(--nv-table-well-hover); color: var(--nv-table-cell); }
.inv-page .nv-inv-table .inv-status--viewed { background: var(--nv-table-well-hover); color: var(--nv-table-text); }
.inv-page .nv-inv-table .inv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.inv-page .nv-inv-table .inv-preview-btn { min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--nv-table-cell); font-size: var(--nv-type-footnote-size); letter-spacing: var(--nv-type-footnote-tracking); font-weight: var(--nv-type-weight-medium); }
.inv-page .nv-inv-table .inv-preview-btn:hover { background: var(--nv-table-well); color: var(--nv-table-text); }
.inv-page .nv-inv-table .inv-row-action { display: inline-grid; width: 2rem; height: 2rem; place-items: center; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--nv-table-head); }
.inv-page .nv-inv-table .inv-row-action:hover { background: var(--nv-table-well-hover); color: var(--nv-table-text); }
.inv-page .nv-inv-table .inv-lifecycle-menu-trigger:active { transform: scale(.96); }
.inv-page .nv-inv-table .inv-pagination {
  justify-content: flex-end;
  border-block-start: 0;
}

@container nv-inv (max-width: 680px) {
  body.inv-page .nv-inv .nv-inv__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container nv-inv (max-width: 460px) {
  body.inv-page .nv-inv .nv-inv__stats { grid-template-columns: 1fr; }
}