/* Work-portal base styles (older than the design system). Layer "legacy": design-system.css wins
   over everything here; declarations it fully replaces have been removed. */
@layer reset, legacy, features, ds, overrides;
@layer reset {
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

code {
  padding: 2px 0.375rem;
  border-radius: 0.375rem;
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

select {
  min-height: 2.375rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

select {
  max-width: 100%;
  padding: 0 2.125rem 0 0.75rem;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: var(--text-2xl);
  line-height: 1.2;
}

h2 {
  font-size: var(--text-md);
  line-height: 1.3;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.75rem 0.625rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}
@container page (max-width: 53.75rem) {
  h1 {
    font-size: var(--text-xl);
  }
}
}
@layer legacy {
/* Product experience, personal cockpit and company catalog administration */
.search { position: relative; }
.global-search-results {
  position: absolute;
  inset: calc(100% + 0.5rem) 0 auto 0;
  z-index: 90;
  min-width: 26.875rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.global-search-results button { display: grid; grid-template-columns: 5rem 1fr; width: 100%; padding: 0.625rem 0.75rem; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }

.global-search-results button span { grid-row: span 2; color: var(--color-text-placeholder); font-size: var(--text-xs); }
.global-search-results button strong { font-size: var(--text-sm); }
.global-search-results button small, .global-search-empty { color: var(--color-text-placeholder); }
.global-search-empty { padding: 1rem; text-align: center; }

.personal-cockpit-header { display: flex; justify-content: space-between; gap: 1rem; }

.personal-cockpit-header p { margin: 0; color: var(--color-text-placeholder); }
.personal-cockpit-grid { display: grid; }
.personal-cockpit-card { display: grid; align-items: center; text-align: left; cursor: pointer; }

.personal-cockpit-card svg { grid-row: span 2; }

.personal-cockpit-card small { grid-column: 2 / 4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crm-process-guide { display: grid; grid-template-columns: minmax(14.375rem, .8fr) minmax(30rem, 1.8fr) auto; gap: 1.375rem; align-items: center; margin-bottom: 1rem; padding: 1.25rem; }
.crm-process-guide h2 { margin: 2px 0 0.25rem; }
.crm-process-guide p { margin: 0; color: var(--color-text-placeholder); }
.crm-process-steps { display: flex; align-items: center; min-width: 0; }
.crm-process-step { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.3125rem; color: var(--color-text-disabled); font-size: var(--text-xs); text-align: center; }
.crm-process-step:not(:last-child)::after { content: ""; position: absolute; top: 0.5625rem; left: 58%; right: -42%; height: 2px; background: var(--color-border); }
.crm-process-step svg { z-index: 1; width: 1.25rem; height: 1.25rem; padding: 0.1875rem; border-radius: 50%; background: var(--color-surface); }
.crm-process-step.is-complete { color: var(--color-success-text); }
.crm-process-step.is-complete::after { background: var(--color-success-fill); }
.crm-process-step.is-current { color: var(--color-accent-text); font-weight: 600; }
.crm-saved-views-bar { display: flex; justify-content: space-between; gap: 0.875rem; align-items: center; margin-bottom: 0.875rem; padding: 0.625rem 0.875rem; }
.crm-saved-views-bar > div { display: flex; gap: 0.75rem; align-items: center; }
.crm-saved-view-list, .settings-saved-views, .settings-favorites { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crm-saved-view { display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.4375rem 0.625rem; border: 1px solid var(--color-border); cursor: pointer; }
.crm-saved-view svg { width: 0.875rem; }

.crm-offer-configurator { border-color: var(--color-accent-border); background: linear-gradient(150deg, var(--color-surface), var(--color-surface-subtle)); }
.crm-configurator-head { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 0.75rem; margin-bottom: 0.9375rem; }
.crm-configurator-head label { display: grid; gap: 0.375rem; color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-configurator-head input, .crm-configurator-head select, .crm-configurator-item input[type=number] { min-width: 0; padding: 0.5625rem 0.625rem; border: 1px solid var(--color-border-control); border-radius: 0.5625rem; background: var(--color-surface); }
.crm-configurator-items { display: grid; gap: 0.5rem; }
.crm-configurator-item { display: grid; grid-template-columns: auto minmax(11.875rem, 1fr) 8.75rem 5rem 5rem auto; gap: 0.625rem; align-items: center; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: 0.6875rem; background: var(--color-surface); }
.crm-configurator-module { display: grid; gap: 0.1875rem; }
.crm-configurator-module small { color: var(--color-text-placeholder); }

.crm-configurator-footer { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; margin-top: 1rem; }
.crm-configurator-totals { display: flex; gap: 1.125rem; }
.crm-configurator-totals span { display: grid; gap: 0.1875rem; color: var(--color-text-placeholder); font-size: var(--text-xs); }
.crm-configurator-totals strong { color: var(--color-text-secondary); font-size: var(--text-md); }
.crm-service-description { margin: 0.75rem 0; padding: 0.5625rem 0.6875rem; border: 1px solid var(--color-border); border-radius: 0.5625rem; background: var(--color-surface-subtle); }
.crm-service-description summary { color: var(--color-accent-text); font-weight: 600; cursor: pointer; }
.crm-service-description p { margin: 0.5rem 0 0.1875rem; }
.crm-service-description-missing, .catalog-gap { color: var(--color-warning-text); font-size: var(--text-xs); }
.catalog-scope-cell { max-width: 26.25rem; white-space: normal; }

.settings-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.settings-profile-card { display: flex; gap: 1rem; align-items: center; }
.settings-profile-avatar { display: grid; place-items: center; width: 3.625rem; height: 3.625rem; font-size: var(--text-lg); }
.settings-profile-card span, .settings-profile-card p { color: var(--color-text-placeholder); }
.settings-profile-card h2, .settings-profile-card p { margin: 0.1875rem 0; }
.settings-summary { display: grid; grid-template-columns: 1fr auto; gap: 0.5625rem 1rem; margin: 0; }

.settings-summary dd { margin: 0; text-align: right; }

html[data-density="compact"] th, html[data-density="compact"] td { padding-top: 0.5rem; padding-bottom: 0.5rem; }

@container page (max-width: 45rem) {
  .global-search-results { min-width: min(92vw, 26.875rem); }
  .personal-cockpit-grid, .settings-profile-grid, .crm-configurator-head { grid-template-columns: 1fr; }
  .crm-process-steps { overflow-x: auto; padding-bottom: 0.3125rem; }
  .crm-process-step { min-width: 5.625rem; }
  .crm-configurator-item { grid-template-columns: auto 1fr; }
  .crm-configurator-item input[type=number], .crm-configurator-item > span:last-child { grid-column: 2; text-align: left; }
  .crm-configurator-footer, .crm-configurator-totals { align-items: stretch; flex-direction: column; }
}

.changelog-heading { align-items: stretch; }
.changelog-release-badge { display: grid; min-width: 15.3125rem; padding: 0.875rem 1.125rem; border: 1px solid var(--color-accent-border); }
.changelog-release-badge span, .changelog-release-badge small { color: var(--color-text-placeholder); font-size: var(--text-xs); }
.changelog-release-badge strong { margin: 0.1875rem 0; }
.changelog-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 1.75rem; align-items: center; margin-bottom: 1.125rem; overflow: hidden; }

.changelog-hero h2 { max-width: 45rem; margin: 0.3125rem 0 0.5rem; }
.changelog-hero p { max-width: 47.5rem; margin: 0; }
.changelog-hero-stats { display: flex; gap: 0.625rem; }
.changelog-hero-stats article { display: grid; min-width: 5.625rem; padding: 0.8125rem; text-align: center; }

.changelog-hero-stats span { font-size: var(--text-xs); }
.changelog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.changelog-card { display: grid; grid-template-columns: auto 1fr; gap: 0.9375rem; }
.changelog-card h2, .changelog-card p { margin-top: 0; }
.changelog-card p { color: var(--color-text-placeholder); }
.changelog-card ul { display: grid; gap: 0.4375rem; margin: 0; padding-left: 1.125rem; color: var(--color-text-muted); }
.changelog-icon { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; flex: 0 0 2.625rem; }
.changelog-icon svg { width: 1.3125rem; }
.changelog-quality, .changelog-known { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; }
.changelog-quality > div, .changelog-known > div { display: flex; align-items: center; gap: 0.875rem; }
.changelog-quality h2, .changelog-quality p, .changelog-known h2, .changelog-known p { margin: 2px 0; }
.changelog-quality p, .changelog-known p { color: var(--color-text-placeholder); }
.changelog-known { margin-top: 1rem; border-color: var(--color-warning-border); background: var(--color-surface); }

@container page (max-width: 56.25rem) {
  .changelog-hero { grid-template-columns: 1fr; }
  .changelog-grid { grid-template-columns: 1fr; }
}
@container page (max-width: 38.75rem) {
  .changelog-release-badge { min-width: 0; }

  .changelog-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .changelog-hero-stats article { min-width: 0; }
  .changelog-quality { align-items: flex-start; flex-direction: column; }
}

body.mobile-menu-open {
  overflow: hidden;
}

.is-hidden {
  display: none !important;
}

.nav-list {
  display: grid;
}

.nav-section {
  display: grid;
}

.nav-section[open] .nav-toggle svg {
  transform: rotate(0deg);
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
}

.nav-toggle::-webkit-details-marker {
  display: none;
}

.nav-toggle svg {
  transform: rotate(-90deg);
  transition: transform 0.16s ease;
}

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

.nav-item svg, .report-panel svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.workspace {
  min-width: 0;
}

.search {
  display: flex;
  align-items: center;
}

.search input {
  width: 100%;
  outline: 0;
  color: var(--color-text);
}

.filter-row, .panel-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

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

.view {
  display: none;
}

.view.is-visible {
  display: block;
}

.page-heading > div {
  min-width: 0;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-heading p,
.report-panel p {
  color: var(--color-text-muted);
  margin-top: 0.3125rem;
}

.status-pill, .badge {
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.875rem;
  padding: 0 0.625rem;
  border-radius: 62.4375rem;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-weight: 600;
  white-space: nowrap;
}

.status-pill span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success-text);
}

.metric-grid {
  display: grid;
}

.compliance-metrics {
  margin-bottom: 0.875rem;
}

.hr-planning-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(17.5rem, 0.85fr);
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

.team-coordination-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.9fr);
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

.hr-calendar-panel,
.hr-side-panel,
.team-calendar-panel,
.team-side-panel {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 1rem;
}

.absence-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planning-kpi span,
.planning-kpi small,
.approval-item span,
.time-member-card span,
.time-member-card small {
  color: var(--color-text-muted);
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.calendar-toolbar .badge {
  min-width: 10rem;
  justify-content: center;
}

.calendar-weekdays {
  margin-bottom: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-height: 5.25rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.calendar-day.is-empty {
  border-style: dashed;
  background: transparent;
}

.calendar-day small {
  overflow: hidden;
  padding: 0.1875rem 0.3125rem;
  border-radius: 0.375rem;
  background: var(--color-surface);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event {
  overflow: hidden;
  min-height: 1.5rem;
  border: 0;
  border-radius: 0.375rem;
  padding: 0.1875rem 0.3125rem;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-xs);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event:hover {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.calendar-event.paid,
.calendar-day small.paid {
  color: var(--color-success-text);
}

.calendar-event.review,
.calendar-day small.review {
  color: var(--color-warning-text);
}

.calendar-event.danger,
.calendar-day small.danger {
  color: var(--color-danger-text);
}

.calendar-day em {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: normal;
}

.approval-rail,
.time-team-board,
.team-member-list {
  display: grid;
  gap: 0.625rem;
}

.approval-item,
.time-member-card,
.team-member-card {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
}

.approval-item,
.team-member-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.team-member-card small {
  display: block;
  margin-top: 0.375rem;
  color: var(--color-text-muted);
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.legend-dot.requested {
  background: var(--color-warning-fill);
}

.legend-dot.approved {
  background: var(--color-success-fill);
}

.legend-dot.unavailable {
  background: var(--color-danger-border);
}

.progress-track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: var(--color-border);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--color-success-text));
}

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

.delta {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 62.4375rem;
  font-weight: 600;
  background: var(--color-surface-sunken);
}

.delta.positive {
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.delta.warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.delta.danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.legend {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.legend-dot {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 0.8fr);
}

.lower-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(18.75rem, 0.75fr);
}

.panel {
  min-width: 0;
}

.panel-header {
  justify-content: space-between;
}

.chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(2.625rem, 1fr));
  align-items: end;
  padding-top: 0.75rem;
}

.chart-column {
  display: grid;
  gap: 0.5rem;
}

.bar-pair {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 0.375rem;
  height: 13.125rem;
  border-bottom: 1px solid var(--color-border);
}

.chart-label {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.queue-list {
  display: grid;
  gap: 0.625rem;
}

.queue-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.queue-item div {
  display: grid;
  gap: 0.25rem;
}

.queue-item div:last-child {
  justify-items: end;
}

.progress {
  height: 0.5625rem;
  border-radius: 62.4375rem;
  background: var(--color-surface-sunken);
  overflow: hidden;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-success-text);
}

.progress span.warning {
  background: var(--color-warning-text);
}

.progress span.danger {
  background: var(--color-danger-text);
}

td.amount {
  font-weight: 600;
}

.invoice-list {
  display: grid;
  gap: 0.625rem;
}

.filter-row {
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
}

.crm-workspace-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.875rem;
  padding: 0.9375rem 1.0625rem;
}

.crm-workspace-mark {
  display: grid;
  width: 2.875rem;
  height: 2.875rem;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: none;
}

.crm-workspace-profile[data-variant="logistics"] .crm-workspace-mark {
  background: var(--color-success-fill);
  box-shadow: none;
}

.crm-workspace-profile[data-variant="trade"] .crm-workspace-mark {
  background: var(--color-warning-fill);
}

.crm-workspace-profile[data-variant="shipping"] .crm-workspace-mark {
  background: var(--color-accent);
}

.crm-workspace-profile[data-variant="fleet"] .crm-workspace-mark {
  background: var(--color-chart-4);
}

.crm-workspace-profile[data-variant="warehouse"] .crm-workspace-mark {
  background: var(--color-warning-fill);
}

.crm-workspace-copy h2,
.crm-workspace-copy p {
  margin: 0;
}

.crm-workspace-copy h2 {
  font-size: var(--text-md);
}

.crm-workspace-copy p {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-workspace-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.crm-eyebrow, .crm-section-kicker {
  display: block;
  margin-bottom: 0.3125rem;
}

.crm-tabs {
  margin-bottom: 1.125rem;
  scrollbar-width: thin;
}

.crm-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4375rem;
}

.crm-panel {
  display: none;
}

.crm-panel.is-active {
  display: grid;
  gap: 0.875rem;
}

.crm-panel-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 2px 2px 0;
}

.crm-panel-intro {
  margin: -0.25rem 0 0.875rem;
  color: var(--color-text-muted);
}

.logistics-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem;
  border: 1px solid var(--color-success-border);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-accent-soft) 100%);
}

.logistics-hero h2 {
  margin: 2px 0 0.4375rem;
  font-size: clamp(1.375rem, 3vw, 1.9375rem);
}

.logistics-hero p {
  max-width: 47.5rem;
  margin: 0;
  color: var(--color-text-muted);
}

.logistics-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(22.5rem, 0.85fr);
  gap: 0.875rem;
}

.logistics-config-grid > .panel {
  min-width: 0;
}

.crm-industry-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 0.875rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.625rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.crm-industry-workflow article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.crm-industry-workflow article > span {
  display: grid;
  width: 1.5625rem;
  height: 1.5625rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

.crm-industry-workflow article > strong {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-industry-workflow article > svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-text-muted);
}

.crm-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-metric {
  position: relative;
  overflow: hidden;
}

.crm-metric::after {
  position: absolute;
  right: -1.375rem;
  bottom: -2.25rem;
  width: 5.875rem;
  height: 5.875rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  content: "";
}

.crm-metric-primary::after {
  background: transparent;
}

.crm-metric span,
.crm-metric small {
  position: relative;
  z-index: 1;
  color: var(--color-text-muted);
}

.crm-metric strong {
  position: relative;
  z-index: 1;
}

.crm-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18.75rem, 0.8fr);
  gap: 0.875rem;
}

.crm-overview-panel {
  min-height: 20.625rem;
}

.crm-funnel-summary {
  display: grid;
  gap: 0.625rem;
}

.crm-funnel-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
}

.crm-funnel-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.crm-funnel-track {
  height: 0.5625rem;
  overflow: hidden;
  border-radius: 62.4375rem;
  background: var(--color-surface-sunken);
}

.crm-funnel-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), var(--color-success-fill));
}

.crm-funnel-value {
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: right;
}

.crm-activity-list {
  display: grid;
  gap: 0.5625rem;
}

.crm-activity-item {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface-hover);
}

.crm-activity-icon {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  font-weight: 600;
}

.crm-activity-item strong,
.crm-activity-item small {
  display: block;
}

.crm-activity-item small {
  margin-top: 0.1875rem;
  color: var(--color-text-muted);
}

.crm-pipeline-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(13.125rem, 1fr));
  gap: 0.625rem;
  padding-bottom: 0.3125rem;
  overflow-x: auto;
}

.crm-pipeline-column {
  min-height: 22.5rem;
  padding: 0.625rem;
}

.crm-pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1875rem 2px 0.6875rem;
}

.crm-pipeline-header strong {
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.crm-pipeline-header span {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4375rem;
  border-radius: 62.4375rem;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.crm-deal-card {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.crm-deal-card small {
  color: var(--color-text-muted);
}

.crm-deal-card-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 0.4375rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
}

.crm-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.crm-product-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  min-height: 7.375rem;
  padding: 0.9375rem;
}

.crm-product-card-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
}

.crm-product-card strong,
.crm-product-card small {
  display: block;
}

.crm-product-card small {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
}

.crm-product-price {
  margin-top: 0.75rem;
  font-size: var(--text-lg);
  font-weight: 600;
}

.crm-panel-description {
  max-width: 42.5rem;
  margin: 0.3125rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-module-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.crm-module-card {
  display: flex;
  min-width: 0;
  min-height: 20.625rem;
  flex-direction: column;
  gap: 0.8125rem;
  padding: 1.125rem;
}

.crm-module-card-header {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6875rem;
}

.crm-module-card-header h3,
.crm-module-card p {
  margin: 0;
}

.crm-module-card-header small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-muted);
}

.crm-module-icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
}

.crm-module-card > p {
  min-height: 2.25rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.crm-module-features {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-module-features li {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--text-xs);
}

.crm-module-features svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--color-success-text);
}

.crm-module-price {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.crm-module-price strong {
  font-size: var(--text-lg);
}

.crm-module-price span,
.crm-module-meta {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-module-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.375rem 0.75rem;
}

.crm-secondary-table {
  border-top: 1px solid var(--color-border);
  padding-top: 0.25rem;
}

.crm-empty-state {
  place-items: center;
  border-radius: 0.5rem;
}

.compact-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(8.75rem, 1fr));
  gap: 0.5rem;
}

/* Same height as the buttons and inputs of the row (38 px selects next to 44 px controls in the DMS filter). */
.compact-filter-row :is(select, input:not([type="checkbox"]):not([type="radio"]), .ds-btn, .compact-button) {
  min-height: var(--control-h);
}

.account-grid, .report-grid {
  display: grid;
}

.account-card, .report-panel {
  min-height: 9.375rem;
}

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

.account-card strong {
  display: block;
  margin: 1.125rem 0 0.75rem;
  font-size: var(--text-lg);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.report-panel {
  display: grid;
  align-content: start;
  gap: 0.625rem;
}

@container page (max-width: 67.5rem) {
  .content-grid,
  .lower-grid {
    grid-template-columns: 1fr;
  }

  .crm-metric-grid,
  .crm-product-grid,
  .crm-module-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-overview-grid {
    grid-template-columns: 1fr;
  }
}

@container page (max-width: 53.75rem) {
  .page-heading,
  .panel-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-actions,
  .calendar-toolbar {
    justify-content: stretch;
  }

  .page-actions > *,
  .calendar-toolbar > * {
    flex: 1 1 auto;
  }

  .metric-grid, .account-grid, .report-grid, .hr-planning-layout, .team-coordination-grid, .absence-kpis, .employee-detail-grid, .employee-detail-sections {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .content-grid,
  .lower-grid {
    grid-template-columns: 1fr;
  }

  .crm-panel-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

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

  .logistics-config-grid {
    grid-template-columns: 1fr;
  }

  .crm-industry-workflow {
    display: flex;
    overflow-x: auto;
  }

  .crm-industry-workflow article {
    flex: 0 0 9.6875rem;
  }

  .crm-tabs {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

  .calendar-weekdays,
  .calendar-grid {
    grid-template-columns: repeat(7, minmax(5.375rem, 1fr));
    min-width: 41.25rem;
  }

  .planning-calendar {
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .calendar-day {
    min-height: 4.75rem;
    padding: 0.375rem;
  }

  /* Narrow day cells: names wrap onto up to three lines instead of being cut off (no tooltip on touch). */
  .calendar-event {
    display: -webkit-box;
    min-height: 2rem;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .chart {
    grid-template-columns: repeat(6, minmax(3.625rem, 1fr));
    overflow-x: auto;
  }
}

@container page (max-width: 30rem) {
  .crm-metric-grid,
  .crm-product-grid,
  .crm-module-catalog {
    grid-template-columns: 1fr;
  }

  .crm-funnel-row {
    grid-template-columns: 5.125rem minmax(0, 1fr);
  }

  .crm-funnel-value {
    grid-column: 2;
    text-align: left;
  }

  .crm-activity-item {
    grid-template-columns: 2.375rem minmax(0, 1fr);
  }

  .crm-activity-item > .badge {
    grid-column: 2;
    justify-self: start;
  }
}

.is-loading {
  position: relative;
}

.toast-stack {
  position: fixed;
  right: 1.125rem;
  bottom: 1.125rem;
  z-index: 50;
  display: grid;
  gap: 0.625rem;
  width: min(22.5rem, calc(100vw - 2.25rem));
}

.toast {
  padding: 0.75rem 0.875rem;
}

.workspace-page {
  display: none;
}

.workspace-page.is-visible {
  display: block;
}

.workspace-page .action-modal,
.workspace-page .employee-detail-modal {
  width: 100%;
  max-height: none;
  overflow: visible;
}

.workspace-page .action-modal {
  max-width: 60rem;
}

.workspace-page .employee-detail-modal {
  max-width: none;
}

.action-modal {
  display: grid;
  gap: 1rem;
  width: min(35rem, 100%);
  max-height: calc(100vh - 2.25rem);
  overflow: auto;
  padding: 1.125rem;
}

.action-modal-header,
.action-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.action-modal-header span {
  display: block;
}

.action-modal-header strong {
  display: block;
  margin-top: 0.1875rem;
}

.action-fields {
  display: grid;
  gap: 0.75rem;
}

.compact-form {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.compact-action-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-action-fields .action-field:has(textarea) {
  grid-column: 1 / -1;
}

.action-field {
  display: grid;
}

.action-field span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.action-field input,
.action-field select,
.action-field textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5625rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.selectable-row {
  cursor: pointer;
}

.selectable-row:hover {
  background: var(--color-surface-sunken);
}

.employee-detail-modal {
  display: grid;
  gap: 1rem;
  width: min(57.5rem, 100%);
  max-height: calc(100vh - 2.25rem);
  overflow: auto;
  padding: 1.125rem;
}

.employee-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.employee-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.employee-detail-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.employee-detail-sections section {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  min-width: 0;
}

@container page (max-width: 47.5rem) {
  .workspace-page .action-modal,
  .workspace-page .employee-detail-modal,
  .employee-detail-grid,
  .employee-detail-sections {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .crm-workspace-profile {
    grid-template-columns: 1fr;
  }

  .crm-workspace-mark {
    display: none;
  }

  .crm-workspace-meta {
    align-items: stretch;
    flex-direction: column;
  }
}

.employee-mini-table {
  display: grid;
  gap: 0.5rem;
}

.employee-mini-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.employee-mini-row span {
  display: grid;
  gap: 2px;
}

.employee-mini-row small {
  color: var(--color-text-muted);
  font-weight: 600;
}

.employee-mini-row strong {
  overflow-wrap: anywhere;
}

.employee-note-list {
  display: grid;
  gap: 0.5rem;
}

.employee-note-row {
  display: grid;
  gap: 0.375rem;
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.employee-note-row span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.employee-note-row p {
  margin: 0;
  overflow-wrap: anywhere;
}

.empty-state {
  border-radius: 0.5rem;
}

/* Quote calculator: labelled editable fields also fit phones and tablets. */
.crm-configurator-item > label, .crm-configurator-module label { display: grid; gap: 0.25rem; min-width: 0; font-size: var(--text-xs); }
.crm-configurator-item input:not([type=checkbox]), .crm-configurator-item select { width: 100%; box-sizing: border-box; min-width: 0; padding: 0.5625rem; border: 1px solid var(--color-border-control); border-radius: 0.5625rem; }
.crm-configurator-totals { flex-wrap: wrap; }
@container page (max-width: 68.75rem) { .crm-configurator-item { grid-template-columns: auto minmax(0, 1fr); } .crm-configurator-item > label, .crm-configurator-item > button { grid-column: 2; } }

/* Customer files and the document workspace share clear document actions. */
.crm-relation-open, .dms-document-select { background: transparent; color: inherit; border: 0; padding: 0.25rem; text-align: left; cursor: pointer; font: inherit; min-width: 0; overflow-wrap: anywhere; }
.crm-relation-open { display: grid; gap: 0.25rem; flex: 1; }

.crm-relation-open small { color: var(--color-text-placeholder); }
.dms-tools summary, .dms-advanced summary { cursor: pointer; padding: 0.625rem 0.25rem; font-weight: 600; }
.dms-tools .button-row { margin-top: 0.625rem; }
#dms-preview-panel { scroll-margin-top: 5rem; min-width: 0; }
#dms-preview .queue-item span { white-space: pre-wrap; overflow-wrap: anywhere; }
#dms-view .filter-row { flex-wrap: wrap; }
#dms-view .filter-row select { min-width: 0; max-width: 100%; }
#dms-result-count { color: var(--color-text-placeholder); font-size: var(--text-sm); }
@container page (max-width: 53.75rem) { #dms-view > .content-grid { grid-template-columns: minmax(0, 1fr); } .crm-detail-relation-row { flex-wrap: wrap; gap: 0.5rem; } .crm-detail-relation-row .button-row { flex-wrap: wrap; } }

.crm-workflow-buttons { margin: 0.625rem 0; }
.crm-workflow-form { max-width: 47.5rem; margin: 1.25rem auto; }
.crm-workflow-form h1 { margin-bottom: 0.5rem; }
.crm-workflow-error { color: var(--color-danger-text); padding: 0.75rem; border: 1px solid currentColor; border-radius: 0.5rem; }
.crm-deal-card[draggable=true] { cursor: grab; }
.crm-detail-timeline small { display: block; }
@container page (max-width: 43.75rem) { .crm-workflow-buttons button { flex: 1 1 auto; min-height: 2.75rem; } .crm-workflow-form { margin: 0; } }
/* Keep the final form actions clear of the floating language selector. */

.crm-offer-terms { margin: 1.25rem 0; padding: 1rem; }
.crm-offer-terms label { display: grid; gap: 0.375rem; }
.crm-offer-terms p { color: var(--color-text-muted); font-size: var(--text-sm); }
.offer-brand-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; margin: 1.25rem 0; border-top: 8px solid; background: var(--color-surface); }
.offer-brand-preview small { flex-basis: 100%; color: var(--color-text-tertiary); }
.offer-brand-preview [data-preview-logo] { padding: 0.75rem; border-radius: 0.5rem; color: var(--color-on-accent); font-weight: 600; }
.offer-brand-preview img { max-width: 7.5rem; max-height: 4rem; object-fit: contain; }
.offer-settings-page label { display: grid; gap: 0.375rem; min-width: 0; }
.offer-settings-page input, .offer-settings-page select, .offer-settings-page textarea { max-width: 100%; min-width: 0; }

/* CRM follows work processes; technical setup lives in its own area. */
.crm-work-filters { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap:1rem; margin: 1rem 0; }
.crm-work-filters label, .crm-work-edit label, .crm-process-guide label { display:grid; gap:0.375rem; min-width:0; }
.crm-process-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; margin-top:1.125rem; }
.crm-process-definition { padding:1rem; border:1px solid var(--color-border); border-radius:0.625rem; }
.crm-process-definition summary { cursor:pointer; font-weight: 600; }
.crm-process-definition p { line-height:1.6; }

.crm-work-queue { margin:1.125rem 0; }
#crm-process-selected { max-width:100%; }
@container page (max-width:47.5rem) { .crm-process-catalog, .crm-work-filters { grid-template-columns:minmax(0,1fr); } .crm-work-edit input, .crm-work-edit select, .crm-work-edit textarea { min-width:0; max-width:100%; } }
.crm-tabs { flex-wrap: wrap; }
.crm-work-filters input, .crm-work-filters select { width:100%; min-width:0; padding:0.5625rem 0.75rem; border:1px solid var(--color-border); border-radius:0.5rem; background:var(--color-surface); color:var(--color-text); }

/* Customer inventory stays readable in narrow customer files. */
[data-crm-detail-panel="inventory"] .crm-detail-card-header {
  flex-wrap: wrap;
}
[data-crm-detail-panel="inventory"] td {
  overflow-wrap: anywhere;
}
@container page (max-width: 47.5rem) {
  .crm-record-page .crm-detail-tabs {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Company inventory: keep filters usable on small screens. */
.inventory-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.875rem;
  margin: 1.125rem 0;
}
.inventory-filters label { display: grid; gap: 0.375rem; min-width: 0; }
.inventory-filters input, .inventory-filters select { width: 100%; min-width: 0; }
#inventory-metrics .metric strong { overflow-wrap: anywhere; }
@container page (max-width: 43.75rem) {
  .inventory-filters { grid-template-columns: 1fr; }
}

.inventory-dialog { width: min(56.25rem, 94vw); max-height: 92dvh; overflow: auto; padding: 1.375rem; color: var(--color-text); }
.inventory-dialog::backdrop { background: color-mix(in srgb, var(--color-inverse-bg) 60%, transparent); }
.inventory-dialog label { display: grid; gap: 0.375rem; margin: 0.75rem 0; }
.inventory-dialog input, .inventory-dialog select { min-width: 0; width: 100%; }
.inventory-dialog fieldset { min-width: 0; border: 1px solid var(--color-border); border-radius: 0.5rem; }
.inventory-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.inventory-video { width: 100%; max-height: 20rem; background: var(--color-inverse-bg); border-radius: 0.5rem; }
.inventory-label { text-align: center; }
.inventory-qr { display: block; width: 13.75rem; max-width: 100%; margin: 0.625rem auto; background: var(--color-surface); padding: 0.75rem; }
.inventory-barcode { display: block; width: 23.75rem; max-width: 100%; margin: 0.625rem auto; background: var(--color-surface); padding: 0.625rem; }
.inventory-lifecycle { padding: 1rem 0; }
.inventory-lifecycle td { white-space: normal; min-width: 8.75rem; }
@container page (max-width: 43.75rem) { .inventory-profile-grid { grid-template-columns: 1fr; } .inventory-dialog { padding: 0.875rem; } }

.inventory-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.inventory-workflow-card { border: 1px solid var(--color-border); padding: 0.875rem; border-radius: 0.5rem; margin: 0.75rem 0; }
.inventory-workflow-card summary { font-weight: 600; cursor: pointer; margin-bottom: 0.625rem; }
.inventory-workspace .panel > button { margin: 0.25rem; }
.inventory-workspace td { max-width: 20rem; overflow-wrap: anywhere; }
.inventory-workspace .panel { min-width: 0; }

@container page (min-width: 68.8125rem) { .crm-configurator-item { grid-template-columns: auto minmax(10rem, 1fr) 9.0625rem 7.5rem 4.375rem 4.6875rem auto; } }
}
@layer overrides {
.changelog-icon.is-success { background: var(--color-success-bg); color: var(--color-success-text); }
.changelog-icon.is-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

.calendar-day.has-items {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}

.calendar-day.has-requested {
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.calendar-day.has-approved {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.calendar-day.has-unavailable {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

/* Industry variants: a calm coloured edge instead of a gradient. */
.crm-workspace-profile[data-variant="logistics"] { box-shadow: inset 3px 0 0 var(--color-success-fill), var(--shadow-sm); }
.crm-workspace-profile[data-variant="service"],
.crm-workspace-profile[data-variant="shipping"] { box-shadow: inset 3px 0 0 var(--color-accent), var(--shadow-sm); }
.crm-workspace-profile[data-variant="trade"],
.crm-workspace-profile[data-variant="warehouse"] { box-shadow: inset 3px 0 0 var(--color-warning-fill), var(--shadow-sm); }
.crm-workspace-profile[data-variant="fleet"] { box-shadow: inset 3px 0 0 var(--color-tag-violet-text), var(--shadow-sm); }

.crm-module-card:hover {
  border-color: var(--color-accent-border);
  box-shadow: var(--shadow-md);
}

.selectable-row.is-selected {
  background: var(--color-selected-bg);
}
.crm-workflow-form .action-fields { grid-template-columns: minmax(0, 1fr); }
@container page (max-width:47.5rem) {
  .crm-workspace-copy p, #crm-workspace-version { display:none; }
}
}

/* =====================================================================================
   WORK PORTAL, UI modernization Phase 2 (docs/ui-modernization/design-system.md, section 8).
   Shell = .ds-shell (top bar, sidebar, drawer below 60rem), page headers = .ds-page-header with one
   primary action and "Weitere Aktionen", KPI rows as auto-fitting grids, stacked tables.
   Layer "overrides": these rules deliberately refine the Phase-1 mappings of the work-portal
   classes in design-system.css section 8 (.workspace, .metric-grid, .page-heading …), which
   still use px media queries.  rem and tokens only; breakpoints are @container page queries.
   ===================================================================================== */
@layer overrides {
/* ---------------------------------------------------------------- shell */
/* .app-shell (kept for tests) has px-media grid columns in design-system.css section 8; the shell's own
   container query decides here. */
.ds-shell.app-shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  /* The sidebar colour and its hairline run down the full page height, also on long pages. */
  background: linear-gradient(90deg, var(--color-sidebar-bg) calc(var(--sidebar-w) - 1px), var(--color-border) calc(var(--sidebar-w) - 1px),
    var(--color-border) var(--sidebar-w), var(--color-canvas) var(--sidebar-w));
}
.ds-shell > .workspace { min-width: 0; padding: var(--space-5) var(--page-pad-x) var(--space-7); }

.work-topbar { gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-5); }
.work-brand {
  display: flex; flex: 0 1 auto; align-items: center; gap: var(--space-3); min-width: 0; max-width: 17rem; min-height: var(--target-min);
  margin-inline-start: calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-2);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
}
.work-brand:hover { background: var(--color-surface-hover); }
.work-brand__text { display: grid; min-width: 0; line-height: var(--leading-tight); }
.work-brand__text strong { font-size: var(--text-base); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.work-brand__text span { color: var(--color-text-muted); font-size: var(--text-sm); }
.work-topbar .navigation-history { display: flex; flex: 0 0 auto; gap: var(--space-1); }
.work-search { flex: 1 1 18rem; max-width: 40rem; }
.work-search input { min-height: var(--control-h); }
.work-search .global-search-results {
  position: absolute; inset: calc(100% + var(--space-1)) auto auto 0; z-index: var(--z-dropdown);
  width: max(100%, min(28rem, 100vw - 2rem)); min-width: 0; max-width: none; max-height: min(70vh, 32rem); overflow: auto; padding: var(--space-2);
}
.work-search .global-search-results button { grid-template-columns: 6rem minmax(0, 1fr); min-height: var(--target-min); }
.work-search .global-search-results button span, .work-search .global-search-results button small, .work-search .global-search-empty { color: var(--color-text-muted); font-size: var(--text-sm); }
.work-search .global-search-results button strong { font-size: var(--text-base); }
.work-topbar__end { flex: 0 0 auto; flex-wrap: nowrap; gap: var(--space-2); min-width: 0; }
.work-topbar__end .finance-language-slot { display: inline-flex; }
.work-user-menu { position: relative; }
.work-user-menu .ds-user-menu__button { max-width: 17rem; }
.work-user-menu .ds-user-menu__button svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.work-user-menu .account-menu-name { min-width: 0; overflow-wrap: anywhere; text-align: left; line-height: var(--leading-tight); }
.work-user-menu__panel { width: min(22rem, 100vw - 2rem); max-width: none; max-height: calc(100dvh - var(--topbar-h) - var(--space-4)); overflow: auto; }
.work-user-menu__panel:not(.is-open) { display: none; }
.work-user-menu__who { display: grid; gap: var(--space-1); margin: 0 0 var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); }
.work-user-menu__who strong { font-size: var(--text-base); }
.work-user-menu__role { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.work-user-menu__role > span + span::before { content: "·" / ""; margin-inline-end: var(--space-2); }
.work-user-menu__who span, .work-user-menu__who p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.work-user-menu .context-field { display: grid; gap: var(--space-1); padding: var(--space-1) var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.work-user-menu .context-field select { width: 100%; }
.work-user-menu__about { margin: var(--space-1) var(--space-3) 0; }
.work-user-menu__about:has([data-app-version]:empty) { display: none; }
.work-logout { white-space: nowrap; }

/* Sidebar: groups as disclosures; the group holding the current page is open and marked. */
.ds-sidebar.sidebar { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-3) var(--space-5); }
.sidebar .nav-list { display: grid; flex: 1 0 auto; align-content: start; gap: var(--space-1); padding: 0; }
.sidebar .nav-section { display: grid; gap: 2px; margin: 0; }
.sidebar .nav-section + .nav-section { margin-top: 0; }
.sidebar .nav-toggle {
  min-height: var(--target-min); padding: 0 var(--space-3); color: var(--color-text-secondary);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0;
}
.sidebar .nav-toggle svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--motion-fast) var(--ease); }
.sidebar .nav-section:has(.nav-item.is-active) > .nav-toggle { color: var(--color-selected-text); }
.sidebar .nav-section:not([open]):has(.nav-item.is-active) > .nav-toggle { box-shadow: inset var(--indicator-w) 0 0 var(--color-selected-indicator); }
.sidebar .nav-item { min-height: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--color-text-tertiary); font-size: var(--text-base); line-height: var(--leading-snug); text-align: left; }
/* break-word + hyphens: a long German compound ("Dokumentenmanagement") is hyphenated at a syllable (lang=de) and
   only broken inside a word when it cannot fit at all, never "Dokumentenmanagemen / t" because of min-content sizing. */
.sidebar .nav-item span { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Two-line labels ("CRM / Kundenverwaltung", "Rechnungen von Lieferanten") wrap neatly: the icon stays on the first
   line instead of floating between the lines; one-line entries stay centred in their 44 px row. */
.sidebar :is(.nav-item, .nav-shortcut) { align-items: flex-start; padding-block: max(var(--space-2), calc((var(--target-min) - 1lh) / 2)); }
.sidebar .nav-item > svg { margin-top: calc((1lh - 1.125rem) / 2); }
.sidebar .nav-shortcut > svg { margin-top: calc((1lh - var(--icon-sm)) / 2); }
.sidebar .nav-item.is-active { color: var(--color-selected-text); }
.sidebar .nav-more { margin: var(--space-1) 0 0; }
.sidebar .nav-more > .nav-toggle { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.sidebar .nav-more > .nav-item { padding-inline-start: var(--space-5); }
.nav-quick { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.nav-quick__title { margin: 0; padding: var(--space-1) var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.nav-quick__list { display: grid; gap: 2px; }
.nav-shortcut {
  --focus-ring-offset: calc(-1 * var(--focus-w));
  --focus-ring-halo: inset 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--color-focus-halo);
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text-secondary);
  font: var(--weight-medium) var(--text-base)/var(--leading-snug) var(--font-sans); text-align: left; cursor: pointer;
}
.nav-shortcut:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-shortcut svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.nav-shortcut span { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sidebar .legal-links { padding: 0 var(--space-3); font-size: var(--text-sm); }
.sidebar .legal-links a { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* ---------------------------------------------------------------- page header
   <header class="ds-page-header page-heading"> title + one line of context, ONE primary action,
   everything else in <details class="ds-menu-button page-more-actions"> "Weitere Aktionen". */
.ds-page-header.page-heading { align-items: flex-end; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-5); }
.ds-page-header.page-heading > .ds-page-header__text { flex: 1 1 20rem; min-width: 0; margin: 0; }
.ds-page-header.page-heading h1 { margin: 0; font-size: var(--text-xl); }
.ds-page-header.page-heading .ds-page-header__desc { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-base); }
.ds-page-header__actions.page-actions { flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.page-more-actions > summary { white-space: nowrap; }
/* Long primary action ("UStVA vorbereiten (Übermittlung über das ELSTER-Portal)") wraps instead of overflowing at 320 px. */
#tax-view .page-actions .primary-button { white-space: normal; text-align: left; }
.tax-taxation-notice { margin: var(--space-2) 0 0; }
.page-more-actions > .ds-menu { width: max-content; min-width: 16rem; max-width: min(24rem, 100vw - 2rem); max-height: min(70vh, 32rem); overflow: auto; }
.page-more-actions .ds-menu__item { min-height: var(--target-min); white-space: normal; }
.page-more-actions .ds-menu__item svg { flex: none; }
/* Data timestamp under the header: one quiet line, left aligned with the content. */
.view-refresh-bar { justify-content: flex-start; margin: calc(-1 * var(--space-3)) 0 var(--space-4); font-size: var(--text-sm); }
@container page (max-width: 40rem) {
  .ds-page-header__actions.page-actions { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------- KPI rows
   Auto-fitting cards (rem based, so they reflow with the text size); amounts wrap, never "…". */
.ds-shell :is(.metric-grid, .crm-metric-grid, .invoice-summary, .planning-kpis, .absence-kpis, .vacation-account-metrics) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3);
}
.ds-shell :is(.metric, .planning-kpi, .crm-metric, .invoice-summary article) strong { overflow: visible; overflow-wrap: normal; word-break: normal; }

/* ---------------------------------------------------------------- wide screens
   The content column fills the area next to the sidebar (no --content-max cap). Pages scale by giving
   their grids more tracks, never by stretching single fields or lines of text. */
/* Action pages: the form grows to 90rem and lays its fields out in as many columns as fit;
   free text, line items and grouped fields take the whole row. */
.workspace-page > .action-modal { max-width: min(100%, 90rem); }
.workspace-page > .action-modal > .action-fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.workspace-page > .action-modal > .action-fields > :is(.action-field:has(textarea), .action-field--wide, fieldset, table, .table-wrap, .action-lines, [data-line-items]) { grid-column: 1 / -1; }
/* Single-form sub-pages: fluid with an internal field grid. */
.crm-workflow-form { max-width: min(100%, 90rem); margin: var(--space-4) 0; }
.crm-workflow-form .action-fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.crm-workflow-form .action-fields > :is(label:has(textarea), .action-field:has(textarea), fieldset) { grid-column: 1 / -1; }
:is(.invoice-import-page, .invoice-batch-page, .vacation-accounts-page, .dms-upload-page) { width: 100%; max-width: none; margin: 0; }
:is(.invoice-import-fields, .vacation-account-fields, .dms-upload-fields) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
/* Two-column card grids become as many columns as fit. */
:is(.settings-profile-grid, .changelog-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.crm-analytics-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
/* Dashboard "Mein Arbeitstag": on wide screens the work items sit two per row, so the open button stays
   near its title. */
#work-home [data-work-results]:has(> .work-home-item + .work-home-item) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 40rem), 1fr)); column-gap: var(--space-6); align-items: start; }
/* KPI rows of eight: one row where eight fit, otherwise two balanced rows of four (never seven plus one). */
.ds-shell :is(.metric-grid, .crm-metric-grid):has(> :nth-child(8):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, (100% - 3 * var(--space-3)) / 4)), 1fr)); }
@container page (min-width: 134rem) { .ds-shell :is(.metric-grid, .crm-metric-grid):has(> :nth-child(8):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Three KPIs share one row down to 9rem per card (2 + 1 would orphan one); six analytics figures sit 3 + 3
   until all six fit in one row. */
.ds-shell :is(.metric-grid, .crm-metric-grid, .invoice-summary, .planning-kpis, .absence-kpis, .vacation-account-metrics):has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, (100% - 2 * var(--space-3)) / 3)), 1fr)); }
.crm-analytics-kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, (100% - 2 * 0.75rem) / 3)), 1fr)); }
@container page (min-width: 134rem) { .crm-analytics-kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); } }
/* Phones: KPI cards two per row; an odd last card spans the row instead of standing alone. */
@container page (max-width: 30rem) {
  .ds-shell :is(.metric-grid, .invoice-summary), .ds-shell .metric-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-shell :is(.metric-grid, .invoice-summary) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Sticky first column of scrolling tables (design-system.css): the header cell sticks with it. */
@container table (min-width: 40.0625rem) {
  .ds-shell .ds-table th:first-child:not([colspan]) { position: sticky; left: 0; z-index: 2; }
}
/* Search fields keep a usable length instead of spanning a wide screen. */
#work-home .work-home-toolbar > label, .invoice-toolbar > [data-invoice-search] { max-inline-size: 48rem; }
/* Training: no empty lesson column while no lesson is open; the lesson cards form a grid. */
.training-layout:has(> [data-training-lesson][hidden]) { grid-template-columns: minmax(0, 1fr); }
.training-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
/* Assurance: forms as card-width panels, lists and details take the rest of the row. */
.ds-shell #assurance-view .assurance-layout { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
.ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) { grid-template-columns: minmax(0, 1fr); }
.ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child {
  display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-5); align-items: start;
}
.ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child > * { min-width: 0; }
.ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child > [data-privacy-create] { grid-row: 1 / span 2; }
.ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child > :not([data-privacy-create]) { grid-column: 2; }
.ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child > h2 { margin-top: var(--space-4); }
.ds-shell #assurance-view [data-operations-records] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
@container page (max-width: 75rem) {
  .ds-shell #assurance-view .assurance-layout,
  .ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child { grid-template-columns: minmax(0, 1fr); }
  .ds-shell #assurance-view .assurance-layout:has(> [data-privacy-detail]:is([hidden], :empty)) > div:first-child > * { grid-column: auto; grid-row: auto; }
}

/* ---------------------------------------------------------------- tables
   applyTableLabels (app.js) turns every .table-wrap table into .ds-table.ds-table--stack inside a
   .ds-table-wrap: below 40rem of table width (phones, half-width panels, large text) the rows become
   labelled cards (data-label), the column headers stay available to screen readers. */
.ds-shell .ds-table-wrap.table-wrap { border: 0; border-radius: var(--radius); background: transparent; }
.ds-shell .panel > .ds-table-wrap.table-wrap { border-radius: 0; }
.ds-shell .ds-table th { position: static; background: var(--color-surface); white-space: normal; }
.ds-shell .ds-table td { color: var(--color-text-secondary); vertical-align: middle; }
@container table (max-width: 40rem) {
  .ds-shell .ds-table.ds-table--stack { min-width: 0; }
  .ds-shell .ds-table--stack tbody { padding: var(--space-3) 0; }
  .ds-shell .panel > .table-wrap .ds-table--stack tbody { padding-inline: var(--space-3); }
  .ds-shell .ds-table--stack td { height: auto; padding: var(--space-2) var(--space-3); color: var(--color-text); text-align: left; white-space: normal; }
  .ds-shell .ds-table--stack td:empty { display: none; }
  .ds-shell .ds-table--stack tr:has(.ui-empty-state) { border: 0; background: none; }
  .ds-shell .ds-table--stack td:has(.ui-empty-state) { display: block; padding: 0; }
  .ds-shell .ds-table--stack td[colspan] { display: block; }
  .ds-shell .ds-table--stack td[colspan]::before { content: none; }
}

/* ---------------------------------------------------------------- charts (liquidity.js, cost-center-report.js)
   Classes instead of inline styles; colours from the chart tokens, so every display mode reaches them. */
.liq-grid { stroke: var(--color-border); stroke-width: 1; }
.liq-baseline { stroke: var(--color-border-control); stroke-width: 1; }
.liq-axis { fill: var(--color-text-muted); font-size: 0.75rem; font-family: var(--font-sans); }
.liq-hit { fill: transparent; }
.liq-line { fill: none; stroke: var(--color-chart-1); stroke-width: 2; }
.liq-point { fill: var(--color-chart-1); stroke: var(--color-surface); stroke-width: 2; }
.liq-point.is-negative { fill: var(--color-danger-text); }
.liq-zero { stroke: var(--color-danger-text); stroke-dasharray: 4 3; }
.liq-in { fill: var(--color-chart-income); }
.liq-out { fill: var(--color-chart-expense); }
.liq-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; margin-inline-end: var(--space-2); border-radius: var(--radius-sm); vertical-align: middle; }
.liq-swatch--balance { background: var(--color-chart-1); }
.liq-swatch--in { background: var(--color-chart-income); }
.liq-swatch--out { background: var(--color-chart-expense); }
/* Over budget: colour plus a glyph that screen readers announce as "über Plan". */
.is-over-budget { color: var(--color-danger-text); font-weight: var(--weight-semibold); }
.is-over-budget::before { content: "▲ " / "über Plan "; }

/* ---------------------------------------------------------------- reflow fixes (200 % / 390 px) */
/* The cash-flow chart squeezes its month columns instead of scrolling sideways. */
.ds-shell .chart:not(:has(> .ui-empty-state)) { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; overflow-x: visible; }
.ds-shell :is(.metric, .planning-kpi, .crm-metric, .invoice-summary article) > :is(span, small, .delta) { min-width: 0; overflow-wrap: anywhere; }
.ds-shell #assurance-view :is(.assurance-layout, .assurance-layout > *, form, fieldset, article) { min-width: 0; max-width: 100%; }
.ds-shell #assurance-view :is(p, label, dd, dt, li) { overflow-wrap: anywhere; }
.ds-shell .crm-panel.is-active { grid-template-columns: minmax(0, 1fr); }
.ds-shell .crm-process-guide label, .ds-shell .crm-process-guide select { min-width: 0; max-width: 100%; }
.ds-shell .crm-process-guide select { width: 100%; }
@container page (max-width: 68.75rem) {
  .ds-shell .crm-process-guide { grid-template-columns: minmax(0, 1fr); }
  .ds-shell .crm-process-guide > * { min-width: 0; }
}

/* Page headers scroll with the page (a sticky header covered panels, menus and enlarged text). */
.workspace > .view > :is(.page-heading, .crm-page-heading):first-child { position: static; margin-top: 0; padding-block: 0; background: none; }
@container page (max-width: 60rem) {
  .ds-shell.app-shell { grid-template-columns: minmax(0, 1fr); background: var(--color-canvas); }
  .ds-shell > .workspace { padding: var(--space-4) var(--space-3) var(--space-6); }
  .work-topbar { padding-inline: var(--space-3); }
  /* Narrow: menu, company and account in the first row; history and language; then the search.
     The bar scrolls away with the page (a sticky three-row bar would cover content at 200 %). */
  .ds-topbar.work-topbar { position: static; }
  .work-brand { order: 1; flex: 1 1 10rem; min-width: 10rem; max-width: none; }
  .work-brand__text strong { overflow-wrap: break-word; }
  .work-topbar__end { display: contents; }
  .work-user-menu, .work-logout { order: 2; }
  .work-topbar .navigation-history { order: 3; }
  .work-topbar__end :is(.ds-demo-slot, .finance-language-slot) { order: 4; }
  .work-topbar__end .finance-language-slot { margin-inline-start: auto; }
  .work-search { order: 5; flex: 1 1 100%; max-width: none; }
  .work-user-menu .account-menu-name { display: none; }
  .work-user-menu .ds-user-menu__button { padding-inline-end: var(--space-2); }
}
@container page (max-width: 30rem) {
  .work-brand__text span, .work-brand .brand-mark { display: none; }
  .work-logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .work-logout { min-width: var(--target-min); padding-inline: var(--space-2); }
}
}