:root {
  color-scheme: light;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --color-canvas: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-border: #d7dee7;
  --color-border-strong: #b7c1ce;
  --color-text: #172033;
  --color-text-muted: #5b6678;
  --color-primary: #2457d6;
  --color-primary-hover: #1d46ad;
  --color-primary-soft: #eaf0ff;
  --color-success: #237a4b;
  --color-success-soft: #e9f6ee;
  --color-info: #2563a6;
  --color-info-soft: #eaf3fb;
  --color-warning: #805b00;
  --color-warning-soft: #fff6d8;
  --color-warning-row: rgb(255 246 216 / 55%);
  --color-danger: #b42318;
  --color-danger-hover: #8f1c13;
  --color-danger-soft: #fdf0ef;
  --color-danger-row: rgb(253 240 239 / 65%);
  --color-inactive: #667085;
  --color-inactive-soft: #f2f4f7;
  --focus-ring: rgb(36 87 214 / 28%);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius-control: 0.25rem;
  --radius-button: 0.375rem;
  --radius-panel: 0.5rem;
  --topbar-height: 3.5rem;
  --sidebar-width: 15rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  background: var(--color-canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-3) var(--space-4);
  transform: translateY(-160%);
  border-radius: var(--radius-button);
  background: var(--color-text);
  color: var(--color-surface);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    "topbar topbar"
    "sidebar content";
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  grid-area: topbar;
  align-items: center;
  min-width: 0;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.product-identity {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.product-identity img {
  display: block;
  width: 7.25rem;
  height: 2.25rem;
  object-fit: contain;
  object-position: left center;
}

.product-identity:hover {
  color: var(--color-primary);
}

.topbar-contexts {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.context-menu {
  position: relative;
  min-width: 0;
}

.context-menu summary {
  display: flex;
  min-height: 2.75rem;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  cursor: pointer;
  list-style: none;
}

.context-menu summary::-webkit-details-marker {
  display: none;
}

.context-menu summary:hover,
.context-menu[open] summary {
  background: var(--color-surface-subtle);
}

.context-menu-label,
.context-menu-current span {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.context-menu summary strong {
  overflow: hidden;
  max-width: 18rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu-indicator {
  color: var(--color-text-muted);
}

.context-name-compact {
  display: none;
}

.company-logo-trigger {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}

.company-logo-trigger img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.context-menu-panel {
  position: absolute;
  z-index: 70;
  top: calc(100% + var(--space-1));
  left: 0;
  display: grid;
  width: max-content;
  min-width: 15rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: 0 0.75rem 2rem rgb(23 32 51 / 14%);
}

.context-menu-panel-end {
  right: 0;
  left: auto;
}

.context-menu-panel a,
.context-menu-action {
  min-height: 2.75rem;
  justify-content: flex-start;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text);
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}

.context-menu-panel a:hover,
.context-menu-action:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.context-menu-panel form {
  margin: 0;
}

.context-menu-action {
  width: 100%;
}

.context-menu-current {
  display: grid;
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.context-menu-current strong {
  overflow-wrap: anywhere;
}

.navigation-toggle,
.navigation-backdrop,
.bottom-navigation {
  display: none;
}

.sidebar {
  position: sticky;
  top: var(--topbar-height);
  grid-area: sidebar;
  height: calc(100vh - var(--topbar-height));
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.primary-navigation {
  display: grid;
  gap: var(--space-1);
}

.primary-navigation a {
  display: flex;
  min-height: 2.75rem;
  padding: 0.65rem var(--space-3);
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-muted);
  font-weight: 650;
  text-decoration: none;
}

.primary-navigation-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  object-fit: contain;
}

.primary-navigation a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.125rem;
  min-height: 1.125rem;
  padding: 0;
  accent-color: var(--color-primary);
}

.primary-navigation a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.app-content {
  min-width: 0;
  grid-area: content;
  padding: var(--space-6);
}

.app-content:focus {
  outline: none;
}

.bottom-navigation-link,
.bottom-navigation-more {
  display: grid;
  min-width: 0;
  min-height: 3.75rem;
  flex: 1 1 0;
  place-items: center;
  gap: 0.2rem;
  padding: var(--space-2);
  border: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.bottom-navigation-link img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.bottom-navigation-link:hover,
.bottom-navigation-more:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.bottom-navigation-link[aria-current="page"],
.bottom-navigation-more[aria-current="page"] {
  color: var(--color-primary-hover);
}

.page {
  width: 100%;
  margin: 0 auto;
}

.page-form {
  max-width: 45rem;
}

.page-standard {
  max-width: 70rem;
}

.page-wide {
  max-width: 90rem;
}

.breadcrumbs {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
  margin-left: var(--space-2);
  color: var(--color-border-strong);
  content: "/";
}

.breadcrumbs a {
  color: var(--color-text-muted);
}

.page-header,
.panel-header,
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-header {
  margin-bottom: var(--space-5);
}

.module-overview-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
}

.module-overview-icon {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  object-fit: contain;
}

.page-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.page-actions,
.section-actions,
.action-bar,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.inline-actions form {
  margin: 0;
}

/* Document detail header: the document is the identity, one primary action leads, secondary and
   utility actions are quieter, and a destructive action comes last and stands apart. */
/* When the actions leave too little room for the identity, they move below it. */
.page-header:has(> .document-actions) {
  flex-wrap: wrap;
}

.document-heading {
  min-width: min(16rem, 100%);
  flex: 1 1 24rem;
}

.document-actions {
  justify-content: flex-end;
}

.document-key-figure {
  margin: var(--space-2) 0 0;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.action-separated {
  display: inline-flex;
  margin-left: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.action-menu summary {
  color: var(--color-primary);
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  color: var(--color-text);
  line-height: 1.25;
}

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2rem);
}

h2 {
  margin: 0;
  font-size: 1.2rem;
}

h3 {
  margin: 0;
  font-size: 1rem;
}

.page-summary,
.text-muted,
.field-help,
.empty-state p {
  color: var(--color-text-muted);
}

.page-summary {
  max-width: 48rem;
  margin: var(--space-2) 0 0;
}

.button,
button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.button-primary,
button:not([class]) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
}

.button-primary:hover,
button:not([class]):hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--color-surface);
}

.button-secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.button-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.button-quiet {
  min-height: 2.5rem;
  padding: 0.45rem var(--space-3);
  border-color: transparent;
  background: transparent;
  color: var(--color-primary);
}

.button-quiet:hover {
  background: var(--color-primary-soft);
}

.button-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-surface);
}

.button-danger:hover {
  border-color: var(--color-danger-hover);
  background: var(--color-danger-hover);
  color: var(--color-surface);
}

/* A destructive action that must not compete with the page's primary action. */
.button-danger-outline {
  background: var(--color-surface);
  color: var(--color-danger);
}

.button-danger-outline:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger-hover);
}

button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
  border-color: var(--color-border);
  background: var(--color-inactive-soft);
  color: var(--color-inactive);
}

.panel,
.alert,
.confirmation,
.empty-state {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.panel {
  padding: var(--space-5);
}

.panel + .panel,
.panel + [data-invoice-commercial-state],
[data-invoice-commercial-state] + .panel,
.panel + .disclosure,
.alert + .panel {
  margin-top: var(--space-5);
}

.panel-header,
.section-header {
  margin-bottom: var(--space-3);
}

.alert {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-left-width: 4px;
}

.alert h2,
.alert p {
  margin: 0;
}

.alert p + p,
.alert h2 + p {
  margin-top: var(--space-2);
}

.alert-warning {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.alert-error {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.alert-info {
  border-left-color: var(--color-info);
  background: var(--color-info-soft);
}

.alert-success {
  border-left-color: var(--color-success);
  background: var(--color-success-soft);
}

.status-badge {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 750;
  white-space: nowrap;
}

.status-active {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.status-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.status-inactive {
  background: var(--color-inactive-soft);
  color: var(--color-inactive);
}

/* A normal lifecycle state that needs no attention, such as Draft. */
.status-neutral {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  color: var(--color-text-muted);
}

.status-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.toolbar-search {
  flex: 1 1 20rem;
}

.toolbar > .field:not(.toolbar-search) {
  flex: 0 1 12rem;
}

[data-live-list-results] {
  transition: opacity 120ms ease;
}

[data-live-list-results][aria-busy="true"] {
  opacity: 0.55;
}

.filter-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.filter-navigation a {
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  text-decoration: none;
}

.filter-navigation a[aria-current="page"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th,
td {
  height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* A row header stays a header for assistive technology but reads as row content. */
tbody th {
  background: transparent;
  color: var(--color-text);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* A two-line row identity: the recognizable fact first, its context beneath it. */
.row-identity {
  display: inline-block;
  text-decoration: none;
}

.row-identity strong {
  text-decoration: underline;
}

.row-identity span {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Quantities, amounts, and other true numbers: right-aligned with equal-width digits. */
th.numeric,
td.numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

th.sort-header {
  padding: 0;
}

.sort-header-link {
  display: flex;
  width: 100%;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-2) var(--space-3);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.sort-header-link:hover,
.sort-header-link:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.sort-header-active .sort-header-link {
  color: var(--color-text);
  font-weight: 800;
}

.sort-indicator {
  flex: 0 0 auto;
  color: var(--color-primary);
  line-height: 1;
}

.sort-indicator-inactive {
  color: var(--color-text-muted);
  font-size: 0.9em;
  letter-spacing: -0.12em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr[data-row-action] {
  cursor: pointer;
  transition: background-color 120ms ease;
}

tbody tr[data-row-action]:hover {
  background: var(--color-surface-subtle);
}

tbody tr.row-attention-warning {
  background: var(--color-warning-row);
}

tbody tr.row-attention-danger {
  background: var(--color-danger-row);
}

tbody tr[data-row-action].row-attention-warning:hover {
  background: var(--color-warning-soft);
}

tbody tr[data-row-action].row-attention-danger:hover {
  background: var(--color-danger-soft);
}

.attention-indicator {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.2;
}

.attention-indicator-warning {
  color: var(--color-warning);
}

.attention-indicator-danger {
  color: var(--color-danger);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pagination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.empty-state {
  padding: var(--space-6);
  text-align: center;
}

.empty-state h2,
.empty-state p {
  margin: 0;
}

.empty-state p {
  margin-top: var(--space-2);
}

.empty-state .button {
  margin-top: var(--space-4);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-border);
}

.facts div {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
}

.facts dt {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 650;
}

.facts dd {
  margin: var(--space-1) 0 0;
}

.contact-facts-note,
.facts-wide {
  grid-column: 1 / -1;
}

/* An optional one-step suggestion attached to a fact, such as the preferred Warehouse. */
.fact-suggestion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.fact-suggestion p {
  margin: 0;
}

.related-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-facts-note dd {
  white-space: pre-wrap;
}

.catalog-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.catalog-overview-attributes {
  margin-top: var(--space-4);
}

.catalog-overview-attributes h3,
.catalog-detail-subsection h3 {
  margin: 0;
  font-size: 1rem;
}

.compact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.compact-facts div {
  min-width: 0;
}

.compact-facts dt {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 650;
}

.compact-facts dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.catalog-detail-subsection {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.catalog-detail-subsection > p,
.catalog-detail-subsection .subsection-heading p {
  margin: var(--space-2) 0 0;
}

/* Compact barcode entry above the barcode list: code, type and Primary in one row when room allows. */
.barcode-entry {
  margin-bottom: var(--space-4);
}

.barcode-entry-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
  align-items: start;
}

.barcode-entry .form-actions {
  margin-top: var(--space-3);
}

.barcode-row-added > td {
  background: var(--color-success-soft);
}

.catalog-current-prices {
  margin-bottom: var(--space-4);
}

.catalog-current-prices > h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.catalog-current-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-2);
}

.catalog-current-price {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
}

.catalog-current-price-amount {
  font-size: 1rem;
}

.catalog-current-price span,
.catalog-current-price small {
  color: var(--color-text-muted);
}

.compact-empty-state {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
}

.catalog-inline-disclosure {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.catalog-inline-disclosure > summary {
  padding: var(--space-3);
}

.catalog-inline-disclosure > .disclosure-content {
  padding: 0 var(--space-3) var(--space-3);
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
}

.address-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.address-card-inactive {
  border-color: var(--color-border-strong);
  background: var(--color-inactive-soft);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-3);
}

.workspace-header {
  margin-bottom: var(--space-6);
}

/*
 * Workspace hero (UX-BRAND-01): an optional Company photograph shares one calm surface with the
 * greeting. The photograph fades into the card instead of meeting the text at a hard edge, and the
 * text side keeps the plain surface, so its contrast never depends on the image. Without a
 * photograph the compact .workspace-header applies instead. Container queries follow the space
 * the page really has, so the sidebar and a narrow window are handled alike.
 */
.workspace-page {
  container: workspace-page / inline-size;
}

.workspace-hero {
  --workspace-hero-surface: 255 255 255;
  /* The --color-surface-subtle channels, so the fallback veil can fade in the same colour. */
  --workspace-hero-tint: 248 250 252;
  position: relative;
  isolation: isolate;
  margin-bottom: var(--space-6);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: rgb(var(--workspace-hero-surface));
  box-shadow:
    0 1px 2px rgb(23 32 51 / 4%),
    0 16px 32px -24px rgb(23 32 51 / 22%);
}

/* A faint diagonal tint carries the eye from the text surface into the photograph. The
   photograph always lies inside it, so a faded edge never meets two different colours. */
.workspace-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 60%;
  background: rgb(var(--workspace-hero-tint));
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  content: "";
}

.workspace-hero > .workspace-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: 56%;
  min-height: 15rem;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--space-6) var(--space-8) var(--space-8);
}

.workspace-hero .eyebrow {
  margin-bottom: var(--space-2);
}

.workspace-hero h1 {
  font-size: 2.125rem;
  font-size: clamp(1.75rem, 3.4cqi, 2.375rem);
  letter-spacing: -0.015em;
}

.workspace-hero .workspace-hero-context {
  font-size: 1.0625rem;
}

.workspace-hero-media {
  position: absolute;
  inset: 0.375rem 0.375rem 0.375rem auto;
  width: 48%;
  overflow: hidden;
  border-radius: 0.5rem;
}

.workspace-hero-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Fallback fade: without mask support, a tint-coloured veil covers the photograph's left edge.
   The diagonal reaches the lower left corner later, so the fade starts after a short fully hidden
   lead-in; the eased stops keep its end from reading as a band. */
.workspace-hero-media::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(var(--workspace-hero-tint)) 8%,
    rgb(var(--workspace-hero-tint) / 88%) 18%,
    rgb(var(--workspace-hero-tint) / 60%) 29%,
    rgb(var(--workspace-hero-tint) / 25%) 39%,
    rgb(var(--workspace-hero-tint) / 0%) 50%
  );
  content: "";
}

/* Preferred fade: the photograph itself becomes transparent toward the left, revealing the tint. */
@supports (mask-image: linear-gradient(#000, #000)) or
  (-webkit-mask-image: linear-gradient(#000, #000)) {
  .workspace-hero-media > img {
    -webkit-mask-image: linear-gradient(
      100deg,
      transparent 8%,
      rgb(0 0 0 / 12%) 18%,
      rgb(0 0 0 / 40%) 29%,
      rgb(0 0 0 / 75%) 39%,
      #000 50%
    );
    mask-image: linear-gradient(
      100deg,
      transparent 8%,
      rgb(0 0 0 / 12%) 18%,
      rgb(0 0 0 / 40%) 29%,
      rgb(0 0 0 / 75%) 39%,
      #000 50%
    );
  }

  .workspace-hero-media::before {
    content: none;
  }
}

.workspace-hero + .workspace-global-search {
  margin-top: 0;
}

@container workspace-page (max-width: 52rem) {
  .workspace-hero > .workspace-hero-copy {
    width: 62%;
    min-height: 13rem;
    padding: var(--space-6);
  }

  .workspace-hero-media {
    width: 42%;
  }

  .workspace-hero::before {
    width: 52%;
  }
}

/* Narrow: the greeting and the operational content come first; the photograph steps aside. */
@container workspace-page (max-width: 36rem) {
  .workspace-hero > .workspace-hero-copy {
    width: auto;
    min-height: 0;
    padding: var(--space-5);
  }

  .workspace-hero-media,
  .workspace-hero::before {
    display: none;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 40rem) {
    .workspace-hero > .workspace-hero-copy {
      width: auto;
      min-height: 0;
      padding: var(--space-5);
    }

    .workspace-hero-media,
    .workspace-hero::before {
      display: none;
    }
  }
}

.workspace-global-search {
  position: relative;
  z-index: 10;
  max-width: 44rem;
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
}

.workspace-global-search > label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.workspace-global-search-control {
  position: relative;
}

.workspace-global-search-control > input {
  width: 100%;
  min-height: 3rem;
  padding-inline: var(--space-4);
  font-size: 1rem;
}

.workspace-global-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-1));
  right: 0;
  left: 0;
  max-height: min(30rem, 65vh);
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: 0 0.8rem 2rem rgb(23 32 51 / 16%);
}

.workspace-global-search-group + .workspace-global-search-group {
  border-top: 1px solid var(--color-border);
}

.workspace-global-search-group-label {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workspace-global-search-option {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.workspace-global-search-option + .workspace-global-search-option {
  border-top: 1px solid var(--color-border);
}

.workspace-global-search-option:hover,
.workspace-global-search-option[aria-selected="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.workspace-global-search-option small {
  color: var(--color-text-muted);
}

.workspace-global-search-message {
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.workspace-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-6);
}

.workspace-cockpit-single {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-measure-list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.workspace-measure {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  min-height: 5.25rem;
  align-items: center;
  padding: var(--space-4);
  border-left: 0.25rem solid transparent;
  color: var(--color-text);
  text-decoration: none;
}

.workspace-measure + .workspace-measure {
  border-top: 1px solid var(--color-border);
}

.workspace-measure:hover {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.workspace-measure-count {
  color: var(--color-primary-hover);
  font-size: 1.75rem;
  line-height: 1;
  text-align: center;
}

.workspace-measure-copy {
  display: grid;
  gap: var(--space-1);
}

.workspace-measure-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.workspace-measure-label {
  font-weight: 700;
}

.workspace-measure-level {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--color-inactive-soft);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: uppercase;
}

.workspace-measure small {
  color: var(--color-text-muted);
}

.workspace-measure-level-exception {
  border-left-color: var(--color-danger);
}

.workspace-measure-level-exception .workspace-measure-count {
  color: var(--color-danger);
}

.workspace-measure-level-exception .workspace-measure-level {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.workspace-measure-level-attention {
  border-left-color: var(--color-warning);
}

.workspace-measure-level-attention .workspace-measure-level {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.workspace-measure-arrow {
  color: var(--color-primary);
  font-size: 1.75rem;
  line-height: 1;
}

.workspace-readiness {
  margin-bottom: var(--space-5);
}

.workspace-readiness-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-readiness-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.workspace-readiness-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 650;
}

.workspace-readiness-marker {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: 0.75rem;
  font-weight: 750;
}

.workspace-readiness-note {
  color: var(--color-text-muted);
}

.workspace-quick-actions-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.workspace-quick-actions-settings {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}

.workspace-quick-action-list {
  display: grid;
  gap: var(--space-3);
}

.workspace-quick-action {
  width: 100%;
  justify-content: flex-start;
  gap: var(--space-2);
}

.workspace-quick-action span {
  font-size: 1.25rem;
  line-height: 1;
}

.workspace-navigation {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.workspace-navigation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-2);
}

.workspace-navigation-link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  min-height: 3.5rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 650;
  text-decoration: none;
}

.workspace-navigation-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.workspace-navigation-link img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.workspace-empty-state {
  margin: 0;
}

.settings-card {
  display: grid;
  gap: var(--space-2);
  min-height: 7rem;
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.settings-card:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.settings-card strong {
  font-size: 1.05rem;
}

.settings-card span {
  color: var(--color-text-muted);
}

.module-card {
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
}

.module-card-icon {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.module-card-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.settings-card .module-card-copy strong {
  color: var(--color-text);
}

.settings-section + .settings-section {
  margin-top: var(--space-6);
}

.feature-list {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.feature-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.feature-item p {
  margin: var(--space-2) 0 var(--space-3);
}

.feature-identity {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  object-fit: contain;
}

.company-logo-preview {
  display: grid;
  gap: var(--space-4);
}

.company-logo-preview > img {
  display: block;
  width: 100%;
  height: 8rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-subtle);
  object-fit: contain;
}

.branding-workspace-hero {
  margin-top: var(--space-8);
}

/* Shown at the shallow landscape ratio the Workspace uses, cropped the same way. */
.workspace-hero-preview {
  display: grid;
  gap: var(--space-3);
}

.workspace-hero-preview > img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-subtle);
  object-fit: cover;
  object-position: 50% 50%;
}

.workspace-hero-preview > .field-help {
  margin: 0;
}

.action-bar-danger {
  margin-top: var(--space-3);
}

.address-lines {
  margin-top: var(--space-3);
}

.address-lines p {
  margin: 0;
}

.purpose-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.tag {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--color-info-soft);
  color: var(--color-info);
  font-size: 0.8125rem;
  font-weight: 650;
}

.disclosure {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.disclosure summary {
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 750;
}

.disclosure-content {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
}

.workflow {
  margin-bottom: var(--space-5);
}

.workflow summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.workflow summary:hover {
  background: var(--color-surface-subtle);
}

.workflow-summary-label {
  font-size: 0.8125rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.workflow-summary-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.workflow-stage {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.workflow-stage-label {
  font-weight: 600;
}

.workflow-connector {
  color: var(--color-text-muted);
}

.workflow-content {
  padding-top: var(--space-3);
}

.workflow-guidance {
  max-width: 56rem;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.workflow-guidance-attention {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-text);
}

.workflow-rail {
  display: flex;
  width: 100%;
  max-width: 56rem;
  align-items: flex-start;
}

.workflow-node {
  display: grid;
  width: clamp(11.5rem, 18vw, 15rem);
  min-width: 0;
  flex: 0 1 clamp(11.5rem, 18vw, 15rem);
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-subtle);
}

.workflow-node-current {
  border-color: var(--color-border-strong);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.workflow-node-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.workflow-node-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.375rem;
}

.workflow-node-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.workflow-node-heading h2,
.workflow-history h3 {
  margin: 0;
  font-size: 0.9375rem;
}

.workflow-current-indicator {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.workflow-node-optional {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.workflow-node-body > .text-muted,
.workflow-node-status {
  margin: 0;
}

.workflow-rail-connector {
  position: relative;
  width: auto;
  height: 4.25rem;
  min-width: 1.75rem;
  max-width: 5rem;
  flex: 1 1 2.5rem;
  color: var(--color-border-strong);
}

.workflow-rail-connector::before {
  position: absolute;
  top: 2rem;
  right: 0.5rem;
  left: 0.35rem;
  border-top: 2px solid currentcolor;
  content: "";
}

.workflow-rail-connector::after {
  position: absolute;
  top: 1.75rem;
  right: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  transform: rotate(45deg);
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  content: "";
}

.workflow-document,
.workflow-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.workflow-document-primary {
  font-size: 0.9375rem;
  font-weight: 750;
}

.workflow-document-primary a,
.workflow-document-reference a {
  font-weight: 750;
}

.workflow-action {
  margin-top: var(--space-1);
}

.workflow-node .button {
  min-height: 2.25rem;
  padding: 0.4rem var(--space-3);
}

.workflow-documents {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-documents li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.workflow-document-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.workflow-document-date {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.workflow-history {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}

.workflow-history h3 {
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.lifecycle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.lifecycle-item:last-child {
  border-bottom: 0;
}

.lifecycle-item p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.form {
  display: grid;
  gap: var(--space-5);
}

.form-section {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.form-section-header {
  margin-bottom: var(--space-3);
}

.form-section-header h2,
.form-section-header p {
  margin: 0;
}

.form-section-header p {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.field-list {
  display: grid;
  gap: var(--space-3);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.document-currency-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 25rem;
}

.document-currency-form .field {
  flex: 1;
  min-width: 0;
}

.document-currency-form [data-currency-submit][hidden] {
  display: none;
}

.invoice-auto-save-form [data-auto-save-submit][hidden] {
  display: none;
}

.field label,
.field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.optional {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

input,
select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
}

input:hover,
select:hover {
  border-color: var(--color-text-muted);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field-help,
.field-error {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
}

.field-error {
  color: var(--color-danger);
  font-weight: 650;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rapid-search {
  display: flex;
  align-items: end;
  gap: var(--space-3);
}

.rapid-search .field {
  flex: 1 1 24rem;
}

.item-choice-list,
.recent-item-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.item-search-result,
.item-choice {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
}

.item-search-result:hover,
.item-choice:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.item-search-result small,
.item-choice small {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.recent-items {
  margin-top: var(--space-4);
}

.recent-item-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.recent-item-list .item-choice {
  width: 100%;
  min-height: 3.5rem;
  font-weight: 500;
}

.quick-line-editor {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  background: var(--color-surface-subtle);
}

.quick-line-editor[hidden] {
  display: none;
}

.quick-line-heading,
.quick-add-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.quick-line-heading p,
.quick-line-heading h3 {
  margin: 0;
}

.quick-add-action {
  align-self: end;
  justify-content: flex-start;
  min-height: 2.75rem;
}

.sales-line-table {
  min-width: 68rem;
}

.sales-line-table td {
  height: 3.25rem;
}

.inline-edit-control {
  min-width: 8rem;
}

.fallback-inline-value {
  display: block;
  margin-top: var(--space-1);
}

.editable-value {
  display: none;
  min-height: 2rem;
  max-width: 100%;
  justify-content: flex-start;
  gap: 0.25rem;
  margin-top: var(--space-1);
  padding: 0.15rem 0.25rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

.editable-value:hover {
  border-color: var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.editable-description {
  width: 100%;
}

.js [data-sales-order-editor] .editable-value:not([hidden]) {
  display: inline-flex;
}

.js [data-invoice-editor] .editable-value:not([hidden]) {
  display: inline-flex;
}

.js [data-sales-order-editor] .fallback-inline-value {
  display: none;
}

.js [data-invoice-editor] .fallback-inline-value,
.js [data-invoice-editor] .invoice-fallback-edit {
  display: none;
}

.invoice-line-table {
  min-width: 70rem;
}

.invoice-line-table .price-origin,
.invoice-line-table .text-muted {
  display: block;
  margin-top: var(--space-1);
}

.inline-edit-hint {
  display: none;
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.js [data-sales-order-editor] .inline-edit-hint {
  display: block;
}

.sales-order-read-only .inline-actions,
.sales-order-read-only .fallback-action,
.sales-order-read-only [data-line-row-template] {
  display: none;
}

.invoice-read-only .rapid-entry-panel,
.invoice-read-only table td:last-child details,
.invoice-read-only table td:last-child form {
  display: none;
}

.payment-no-allocate .panel:nth-of-type(2):not(:last-of-type),
.payment-no-unallocate a[href$="/void"] {
  display: none;
}

.inline-edit-form {
  display: grid;
  gap: var(--space-1);
  min-width: 12rem;
  margin: 0;
}

.inline-edit-form[hidden] {
  display: none;
}

.inline-edit-form input {
  min-height: 2.5rem;
  padding: 0.4rem var(--space-2);
}

.inline-description {
  min-width: 16rem;
}

.inline-number-form,
.inline-price-form {
  grid-template-columns: minmax(5.5rem, 1fr) auto;
  align-items: center;
  min-width: 8rem;
}

.inline-price-form {
  grid-template-columns: auto minmax(6rem, 1fr);
}

.price-origin,
.inline-save-status {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.price-origin {
  display: block;
  margin-top: var(--space-1);
}

.inline-save-status {
  grid-column: 1 / -1;
}

.inline-save-status:empty {
  display: none;
}

.link-button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 400;
}

.link-button:hover {
  background: transparent;
  color: var(--color-primary-hover);
  text-decoration: underline;
}

[data-remove-line-form] {
  display: none;
}

.js [data-remove-line-form] {
  display: block;
}

.js .fallback-action {
  display: none;
}

.choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.choice-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-card {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 650;
}

.choice-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice-card input,
.checkbox-label input {
  width: 1.125rem;
  min-height: 1.125rem;
  margin: 0;
}

/* A one-line explanation under a choice card's label. */
.choice-card-help {
  display: block;
  font-weight: 400;
}

.purpose-list {
  display: grid;
  gap: var(--space-3);
}

.purpose-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, auto);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 650;
}

.action-bar {
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.error-summary {
  padding: var(--space-4);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: var(--radius-panel);
  background: var(--color-danger-soft);
}

.error-summary h2 {
  font-size: 1rem;
}

.error-summary ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-6);
}

.confirmation {
  padding: var(--space-5);
}

.confirmation-consequences {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.confirmation .action-bar {
  margin-top: var(--space-5);
}

.section-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.section-card + .section-card {
  margin-top: var(--space-5);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

/* A section heading used as the legend of a group of choices. */
legend.form-section-header {
  padding: 0;
}

.contact-form-note textarea {
  display: block;
  width: 100%;
  resize: vertical;
  font: inherit;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.summary-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.summary-card span,
.muted {
  color: var(--color-text-muted);
}

.summary-card strong {
  font-size: 1.25rem;
}

/* Reports & Exports overview (REP-UX1). */
.reports-overview .error-summary {
  margin-bottom: var(--space-4);
}

.report-filter {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.report-filter-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.report-filter-fields > .field {
  flex: 1 1 10rem;
  max-width: 15rem;
}

/* Aligns with the inputs, not the labels, also when a field shows an error below it. */
.report-filter-fields > .button {
  min-height: 2.75rem;
  margin-top: calc(1.5em + var(--space-1));
}

.report-filter-scope {
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
}

.report-overview-invalid {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-panel);
  color: var(--color-text-muted);
}

.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.report-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.report-kpi-card:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.report-kpi-icon {
  display: grid;
  flex: none;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-panel);
  background: var(--color-primary-soft);
}

.report-kpi-icon-payments {
  background: var(--color-info-soft);
}

.report-kpi-icon img {
  width: 1.75rem;
  height: 1.75rem;
}

.report-kpi-body {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.report-kpi-label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 650;
}

.report-kpi-values {
  display: grid;
  gap: var(--space-1);
}

.report-kpi-values strong {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.report-kpi-empty {
  color: var(--color-text-muted);
  font-weight: 600;
}

.report-kpi-link {
  margin-top: var(--space-1);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.report-overview-main {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

@media (min-width: 80rem) {
  .report-overview-main-chart {
    grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
    align-items: start;
  }

  .report-overview-main-chart .sales-chart-plot {
    grid-template-rows: 20rem 2.75rem;
  }
}

.report-panel {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.report-panel-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.report-panel-header p {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
}

.report-panel-header-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}

.report-panel-header-inline p {
  margin: 0;
}

.report-library-category {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-link-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-link-list-columns {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--space-4);
}

.report-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.report-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.report-link-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.report-link-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 0.125rem;
  overflow-wrap: anywhere;
}

.report-link-copy strong {
  font-weight: 650;
}

.report-link-copy span {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.report-link-chevron {
  flex: none;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.report-chart-empty {
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.report-chart-empty p {
  margin: 0;
}

.report-currency-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.sales-chart {
  margin: var(--space-3) 0 0;
}

.sales-chart figcaption {
  font-size: 0.875rem;
}

/* Axis labels are SVG text at native size; only the line and area stretch with the plot. */
.sales-chart-plot {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-rows: 15rem 2.75rem;
  margin-top: var(--space-5);
}

.sales-chart-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sales-chart-y {
  grid-column: 1;
  grid-row: 1;
}

.sales-chart-canvas {
  grid-column: 2;
  grid-row: 1;
}

.sales-chart-x {
  grid-column: 2;
  grid-row: 2;
}

.sales-chart-y text,
.sales-chart-x text {
  fill: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.sales-chart-grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

.sales-chart-zero {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.sales-chart-area {
  fill: var(--color-primary-soft);
  opacity: 0.8;
}

.sales-chart-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sales-chart-point {
  fill: var(--color-primary);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.sales-chart-note {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
}

.sales-chart-values {
  margin-top: var(--space-4);
}

.sales-chart-values summary {
  min-height: 2.75rem;
  padding: var(--space-2) 0;
  color: var(--color-primary);
  font-weight: 650;
  cursor: pointer;
}

.sales-chart-values table {
  margin-top: var(--space-2);
}

@media (max-width: 40rem) {
  .sales-chart-plot {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    grid-template-rows: 12rem 2.75rem;
  }

  .sales-chart-x-minor {
    display: none;
  }

  .report-filter-fields > .field,
  .report-filter-fields > .button {
    flex-basis: 100%;
    max-width: none;
  }

  .report-filter-fields > .button {
    margin-top: 0;
  }

  .report-kpi-card,
  .report-panel {
    padding: var(--space-4);
  }
}

.inventory-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
  align-items: end;
  gap: var(--space-5);
}

.inventory-stock-total {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-subtle);
}

.inventory-stock-total span,
.inventory-stock-total small {
  color: var(--color-text-muted);
}

.inventory-stock-total strong {
  font-size: 1.5rem;
}

.inventory-stock-total .inventory-stock-negative {
  color: var(--color-warning);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.data-export-page > form:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.data-export-page > form:first-of-type > label {
  display: grid;
  gap: var(--space-1);
  font-weight: 700;
}

.data-export-page > .panel > form {
  display: grid;
  gap: var(--space-3);
}

.data-export-page > .panel > form > label {
  display: grid;
  gap: var(--space-1);
}

.data-export-page > .panel > form > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.data-export-page > .panel > form > button {
  justify-self: start;
}

@media (max-width: 56rem) {
  .workspace-cockpit {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell {
    display: block;
  }

  .topbar {
    position: sticky;
    height: var(--topbar-height);
    padding: 0 var(--space-4);
  }

  .sidebar {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .primary-navigation {
    display: flex;
    flex-wrap: wrap;
  }

  .primary-navigation a {
    flex: 1 1 auto;
  }

  .js .navigation-toggle {
    display: inline-flex;
    min-height: 2.5rem;
    margin-right: var(--space-3);
    padding: 0.45rem var(--space-3);
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .js .sidebar {
    position: fixed;
    z-index: 50;
    top: var(--topbar-height);
    bottom: 0;
    left: 0;
    width: min(20rem, calc(100% - 3rem));
    padding: var(--space-4);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    transform: translateX(-105%);
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
    background: var(--color-surface);
  }

  .js .sidebar .primary-navigation {
    display: grid;
  }

  .js[data-navigation-open="true"] .sidebar {
    transform: translateX(0);
  }

  .js[data-navigation-open="true"] .navigation-backdrop {
    position: fixed;
    z-index: 40;
    inset: var(--topbar-height) 0 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgb(23 32 51 / 35%);
  }

  .app-content {
    padding: var(--space-6) var(--space-4) calc(4.75rem + env(safe-area-inset-bottom));
  }

  .js .bottom-navigation {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
}

@media (max-width: 40rem) {
  .contact-form-note {
    grid-column: 1 / -1;
  }

  .workspace-measure {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: var(--space-3);
  }

  .workspace-measure-count {
    font-size: 1.5rem;
  }

  .context-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .context-menu summary {
    padding-inline: var(--space-2);
  }

  .context-menu summary strong {
    max-width: 7rem;
  }

  .company-menu summary strong {
    max-width: 5rem;
  }

  .page-header,
  .panel-header,
  .section-header,
  .lifecycle-item,
  .feature-item {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-actions .button,
  .section-actions .button {
    width: 100%;
  }

  .page-actions .action-menu,
  .page-actions .action-separated {
    width: 100%;
  }

  .document-heading {
    flex: none;
  }

  .document-actions {
    justify-content: flex-start;
  }

  .action-separated {
    margin: var(--space-1) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .action-menu .context-menu-panel {
    position: static;
    width: auto;
    max-width: none;
    margin-top: var(--space-1);
    box-shadow: none;
  }

  .toolbar {
    align-items: stretch;
  }

  .toolbar > .field,
  .toolbar > .button,
  .toolbar > button {
    width: 100%;
    flex-basis: 100%;
  }

  .field-row,
  .facts,
  .compact-facts,
  .catalog-current-price-grid,
  .choice-group,
  .purpose-option,
  .inventory-card-content {
    grid-template-columns: 1fr;
  }

  .workflow-rail {
    flex-direction: column;
  }

  .workflow-node {
    width: 100%;
    flex: none;
  }

  .workflow-rail-connector {
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    flex: none;
  }

  .workflow-rail-connector::before {
    top: 0.25rem;
    right: auto;
    bottom: 0.55rem;
    left: calc(50% - 1px);
    border-top: 0;
    border-left: 2px solid currentcolor;
  }

  .workflow-rail-connector::after {
    top: auto;
    right: auto;
    bottom: 0.45rem;
    left: calc(50% - 0.25rem);
    transform: rotate(45deg);
    border-top: 0;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
  }

  .form-section,
  .panel,
  .confirmation,
  .section-card {
    padding: var(--space-4);
  }

  .action-bar {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .action-bar .button,
  .action-bar button {
    width: 100%;
  }

  .pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .rapid-search,
  .quick-line-heading,
  .quick-add-action {
    align-items: stretch;
    flex-direction: column;
  }

  .rapid-search .field {
    width: 100%;
    flex: 0 1 auto;
  }

  .data-export-page > form:first-of-type {
    align-items: stretch;
  }
}

@media (max-width: 32rem) {
  .product-identity img {
    width: 5.75rem;
    height: 1.75rem;
  }

  .context-name-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .context-name-compact {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-weight: 750;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link,
  .js .sidebar {
    transition: transform 140ms ease-out;
  }
}

/* The roles a Contact holds, kept together beside its name. */
.role-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* An odd number of Contact facts ends on a full-width cell instead of an empty one. */
.contact-facts > div:nth-child(odd):last-child:not(.contact-facts-note),
.contact-facts > div:nth-child(odd):has(+ .contact-facts-note) {
  grid-column: 1 / -1;
}

/* A status beside a section heading keeps its own width when the header stacks. */
.panel-header > .status-badge {
  align-self: flex-start;
}

/* Catalog selection mode and bulk review (CATUX5). */
.bulk-action-panel {
  margin-bottom: var(--space-4);
}

.bulk-action-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.bulk-action-heading h2 {
  margin: 0;
}

.bulk-action-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
}

.bulk-action-controls > .field {
  flex: 1 1 18rem;
  margin: 0;
}

.bulk-select-column {
  width: 2.75rem;
  text-align: center;
}

.bulk-select-column input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
}

.bulk-selection-done {
  margin: 0 0 var(--space-3);
}

.bulk-review-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0 0 var(--space-4);
}

.bulk-review-counts dt {
  color: var(--color-text-muted);
}

.bulk-review-counts dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.bulk-review-section {
  margin-top: var(--space-6);
}

/*
 * Export workspace (Catalog > Price list export and its saved definitions, EXP-UX1): numbered
 * settings sections beside a sticky Export overview. Container queries size the columns by the
 * space the page really has, so the sidebar and a narrow window are handled alike.
 */
.price-list-export-page {
  container: export-page / inline-size;
}

.export-mode-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-5);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}

.export-mode-nav a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-weight: 650;
  text-decoration: none;
}

.export-mode-nav a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.export-mode-nav a[aria-current] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Recent-activity tabs (UX-CTX-02): the segmented look of the export mode switch, as buttons. */
.activity-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-4);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}

.activity-tabs[hidden] {
  display: none;
}

.activity-tabs [role="tab"] {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.activity-tabs [role="tab"]:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.activity-tabs [role="tab"][aria-selected="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.activity-tab-panel + .activity-tab-panel {
  margin-top: var(--space-5);
}

.activity-tab-panel[hidden] {
  display: none;
}

.price-list-summary,
.price-list-export-page > .error-summary {
  margin-bottom: var(--space-5);
}

.export-workspace {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.export-workspace-main {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.export-section,
.export-overview {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(23 32 51 / 4%);
}

.export-section {
  container: export-section / inline-size;
}

.export-section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.export-section-header h2,
.export-overview-header h2 {
  font-size: 1.0625rem;
}

.export-section-number {
  display: inline-flex;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1;
}

.export-section-help {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.export-grid {
  display: grid;
  gap: var(--space-4) var(--space-5);
  align-items: start;
}

.export-grid > * {
  min-width: 0;
}

.export-section legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-weight: 700;
}

.export-section .field {
  margin: 0;
}

.export-section .field-help {
  line-height: 1.4;
}

.export-choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-2);
}

.export-choice-card {
  gap: var(--space-3);
  background: var(--color-surface);
  font-weight: 650;
}

.export-choice-card:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.export-choice-card-text {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

.export-choice-card .choice-card-help {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.export-file-icon {
  display: inline-flex;
  flex: none;
  min-width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.export-file-icon-xlsx {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: 0.875rem;
}

.export-stacked-choices,
.export-inline-choices {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.export-inline-choices {
  flex-flow: row wrap;
  gap: var(--space-1) var(--space-5);
}

.export-radio {
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 600;
}

.export-radio input {
  flex: none;
}

.export-section .field-help + .field-error,
.export-section .export-fixed-date {
  margin-top: var(--space-2);
}

.export-section .price-list-classification {
  margin-top: 0;
}

.price-list-classification > .disclosure-content {
  padding-top: var(--space-4);
}

.price-list-classification .field + .field {
  margin-top: var(--space-3);
}

.export-definition-name input {
  font-size: 1.0625rem;
  font-weight: 650;
}

.export-notes {
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.export-notes h2 {
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: 0.875rem;
}

.export-notes ul {
  margin: 0;
  padding-left: var(--space-5);
}

.export-notes li + li {
  margin-top: var(--space-1);
}

.export-overview-header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.export-overview-unaccepted {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-warning);
  background: var(--color-warning-soft);
  font-size: 0.8125rem;
}

.export-overview-group {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.export-overview-group h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
}

.export-overview-group .export-section-number {
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.75rem;
}

.export-overview-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  font-size: 0.875rem;
}

.export-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-2);
}

.export-overview-term {
  color: var(--color-text-muted);
}

.export-overview-value {
  margin: 0;
  overflow-wrap: anywhere;
}

.export-overview-value .status-badge {
  margin-left: var(--space-1);
  vertical-align: middle;
}

.export-overview-actions {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.export-overview-actions .button {
  width: 100%;
}

.price-list-recent {
  margin-top: var(--space-6);
}

@container export-section (min-width: 34rem) {
  .export-grid-halves,
  .export-grid-basic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .export-grid-full,
  .export-grid > .price-list-classification,
  .export-grid-basic > .export-format {
    grid-column: 1 / -1;
  }
}

@container export-section (min-width: 50rem) {
  .export-grid-basic {
    grid-template-columns: minmax(18rem, 1.5fr) minmax(0, 1fr) minmax(0, 0.75fr);
  }

  .export-grid-basic > .export-format {
    grid-column: auto;
  }
}

@container export-page (min-width: 56rem) {
  .export-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  }

  /* The overview follows the reader only where the whole of it fits on screen. */
  @media (min-height: 46rem) {
    .export-overview {
      position: sticky;
      top: calc(var(--topbar-height) + var(--space-4));
    }
  }
}

@container export-page (min-width: 75rem) {
  .export-workspace {
    grid-template-columns: minmax(0, 7fr) minmax(19rem, 3fr);
  }
}

/* Navigation groups (INVCOUNT1d): Inventory with Stock overview and Inventory Counts. */
.navigation-group-summary {
  display: flex;
  min-height: 2.75rem;
  padding: 0.65rem var(--space-3);
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-muted);
  font-weight: 650;
  cursor: pointer;
}

.navigation-group-summary:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.navigation-group[open] > .navigation-group-summary {
  color: var(--color-text);
}

.navigation-group-links {
  display: grid;
  gap: var(--space-1);
  padding-left: calc(1.5rem + var(--space-3));
}

/* Inventory Counts (INVCOUNT1d). */
.count-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.count-summary li {
  display: flex;
  min-width: 8rem;
  padding: var(--space-2) var(--space-3);
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}

.count-summary strong {
  font-size: 1.25rem;
}

.count-summary span {
  color: var(--color-text-muted);
}

.count-summary .count-summary-attention {
  border-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.count-card-list,
.count-results,
.count-entries,
.count-assignees,
.count-review-lines,
.count-recent-bookings {
  margin: 0;
  padding: 0;
  list-style: none;
}

.count-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.count-card h2 {
  margin: 0;
}

.count-identify {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.count-identify label {
  font-weight: 650;
}

.count-identify-row {
  display: flex;
  gap: var(--space-2);
}

.count-identify-row input {
  flex: 1 1 auto;
  min-height: 3rem;
  font-size: 1.125rem;
}

.count-results li + li,
.count-entries li + li {
  border-top: 1px solid var(--color-border);
}

.count-result {
  display: flex;
  flex-wrap: wrap;
  min-height: 3rem;
  padding: var(--space-3);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.count-result:hover,
.count-result:focus-visible {
  background: var(--color-surface-subtle);
}

.count-result-status {
  display: flex;
  gap: var(--space-1);
}

.count-entries li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
}

.count-entry-quantity {
  font-weight: 650;
  text-align: right;
}

.count-entry-replaced {
  color: var(--color-text-muted);
}

.count-item-card h1 {
  margin: 0;
}

.count-item-description {
  font-size: 1.125rem;
}

.count-item-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

.count-item-facts dt {
  color: var(--color-text-muted);
}

.count-item-facts dd {
  margin: 0;
  font-weight: 650;
}

.count-quantity-form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.count-quantity-form > label {
  font-weight: 650;
}

.count-quantity {
  max-width: 14rem;
  min-height: 3.5rem;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.count-save {
  min-height: 3rem;
  min-width: 10rem;
}

.count-assignees li {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.count-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.count-filters a {
  display: inline-flex;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-text);
  text-decoration: none;
}

.count-filters a[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.count-review-line-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.count-review-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

.count-review-figures dt {
  color: var(--color-text-muted);
}

.count-review-figures dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.count-review-line.count-state-later_bookings,
.count-review-line.count-state-not_tracked,
.count-review-line.count-state-unit_changed,
.count-review-line.count-state-unrepresentable,
.count-review-line.count-state-recount_requested {
  border-left: 4px solid var(--color-warning);
}

.count-resolve-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.count-resolve-options h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.count-assertion {
  padding: var(--space-3);
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-soft);
}

.count-post-form {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

/* Prepared-Item counting and the Count page hierarchy (INVCOUNT1e). */
.count-summary-total {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 650;
}

.count-summary li:has(> .count-summary-link) {
  padding: 0;
}

/* A progress card that opens a filtered list: the whole card is the link. */
.count-summary-link {
  display: flex;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  flex: 1 1 auto;
  flex-direction: column;
  border-radius: var(--radius-button);
  color: var(--color-text);
  text-decoration: none;
}

.count-summary .count-summary-link span {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.count-summary .count-summary-link span::after {
  content: " \203A";
}

.count-summary-link:hover,
.count-summary-link:focus-visible {
  background: var(--color-primary-soft);
}

.count-summary .count-summary-minor strong {
  font-size: 1rem;
}

.count-lines .count-line-actions {
  min-width: 15rem;
}

.count-lines .count-line-article {
  white-space: nowrap;
}

.count-line-count {
  min-width: 6rem;
}

.count-result-action {
  color: var(--color-primary);
  font-weight: 700;
}

.count-next {
  margin-top: var(--space-2);
}

.count-counters summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.count-counters-summary {
  color: var(--color-text-muted);
  font-weight: 400;
}

.count-counters .disclosure-content {
  padding-top: var(--space-3);
}

/* Phones and small tablets: the table would hide its row actions behind a sideways scroll. */
@media (max-width: 56rem) {
  /* The Item list as stacked rows: identity and status first, details below, actions full width. */
  .count-lines-region {
    overflow-x: visible;
  }

  .count-lines {
    min-width: 0;
  }

  .count-lines thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .count-lines tbody {
    display: block;
  }

  .count-lines .count-line {
    display: grid;
    padding: var(--space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .count-lines .count-line > td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .count-lines .count-line-article {
    grid-column: 1;
    grid-row: 1;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .count-lines .count-line-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .count-lines .count-line > .count-line-description,
  .count-lines .count-line > td[data-label],
  .count-lines .count-line > .count-line-actions {
    grid-column: 1 / -1;
  }

  .count-lines .count-line-description {
    overflow-wrap: anywhere;
  }

  .count-lines .count-line > td[data-label] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }

  .count-lines .count-line > td[data-label]::before {
    content: attr(data-label);
  }

  .count-lines .count-line > td.count-line-empty[data-label] {
    display: none;
  }

  .count-lines .count-line-actions {
    margin-top: var(--space-2);
  }

  .count-lines .count-line-actions .inline-actions {
    flex-wrap: wrap;
  }

  .count-lines .count-line-actions .button {
    min-height: 2.75rem;
  }

  .count-line-count {
    flex: 1 1 8rem;
  }
}

/* Cancelling is consequential and rare: last on the page, away from the working actions. */
.count-cancel-zone {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.count-cancel-zone p {
  margin: 0;
}

.count-identify-row .button {
  min-height: 3rem;
  flex: 0 0 auto;
}

.count-candidate-identity {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.count-candidate-unavailable {
  color: var(--color-text-muted);
}

.count-no-exact {
  margin: 0 0 var(--space-2);
}

/* INVCOUNT3: the optional camera scanner, a small modal over the workspace (not full screen).
   The preview carries one thin guide over the band that is decoded, nothing else. */
.count-camera-open {
  justify-self: start;
  gap: var(--space-2);
  min-height: 3rem;
}

.count-camera-icon {
  flex: none;
}

.count-camera {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-text);
  overflow-y: auto;
}

.count-camera[open] {
  display: grid;
  gap: var(--space-3);
}

.count-camera::backdrop {
  background: rgb(23 32 51 / 55%);
}

.count-camera-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.count-camera-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.count-camera-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-control);
  background: #000;
}

.count-camera-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.count-camera-guide {
  position: absolute;
  inset: 25% 8%;
  border: 2px solid rgb(255 255 255 / 85%);
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
  pointer-events: none;
}

.count-camera[data-state="error"] .count-camera-guide {
  display: none;
}

.count-camera-status {
  min-height: 1.5em;
  margin: 0;
  font-weight: 650;
}

.count-camera[data-state="error"] .count-camera-status {
  color: var(--color-danger);
}

.count-camera > .field-help {
  margin: 0;
}

.count-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.count-camera-header .button,
.count-camera-actions .button {
  min-height: 2.75rem;
}

@media (max-width: 40rem) {
  /* The identification field and Find stay on one line: one scan, one tap, no scrolling. */
  .count-identify-row input {
    min-width: 0;
  }

  /* A full-width camera control under the field, easy to reach with the thumb. */
  .count-camera-open {
    justify-self: stretch;
    justify-content: center;
  }

  .count-camera-actions .button {
    flex: 1 1 auto;
  }

  .count-quantity {
    max-width: none;
    width: 100%;
  }

  .count-save {
    width: 100%;
  }

  /* Counted, remaining and needs attention side by side; the minor figures follow smaller. */
  .count-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .count-summary li {
    min-width: 0;
  }

  .count-progress li,
  .count-progress .count-summary-link {
    padding: var(--space-2);
  }

  .count-progress li:has(> .count-summary-link) {
    padding: 0;
  }

  .count-summary strong {
    font-size: 1.125rem;
  }

  .count-summary span {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .count-cancel-zone .button {
    width: 100%;
  }
}