@layer reset, legacy, features, ds, overrides;
@layer features {
/* ===== Record detail base layout (moved from styles.css) ===== */
.crm-record-page {
  margin: 0 auto;
}

.crm-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.125rem;
  margin-bottom: 0.4375rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-detail-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-weight: 600;
}

.crm-detail-breadcrumb svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.crm-detail-breadcrumb strong {
  max-width: 23.75rem;
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.crm-detail-header h1,
.crm-detail-header p {
  margin: 0;
}

.crm-detail-header p {
  margin-top: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-detail-title-line {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.crm-detail-title-line h1 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.1;
}

.crm-detail-entity-icon {
  display: grid;
  width: 2.375rem;
  height: 2.375rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.625rem;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.crm-detail-entity-icon svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.crm-detail-tabs {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 1.125rem;
  padding: 0 0.75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
}

.crm-detail-tabs button {
  min-height: 2.6875rem;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
/* Hover and selected states come from the shared selection block in design-system.css. */

.crm-detail-panel {
  display: none;
}

.crm-detail-panel.is-active {
  display: block;
}

.crm-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18.125rem, 22.5rem);
  align-items: start;
  gap: 1.125rem;
}

.crm-detail-main,
.crm-detail-rail {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.crm-detail-card {
  min-width: 0;
  padding: 1.0625rem;
}

.crm-detail-card > h2, .crm-detail-card-header h2 {
  margin: 0;
}

.crm-detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 0.9375rem;
}

.crm-detail-card-header > span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-detail-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.crm-detail-field-grid > div {
  min-width: 0;
}

.crm-detail-field-grid > .is-wide {
  grid-column: 1 / -1;
}

.crm-detail-field-grid dt {
  margin-bottom: 0.3125rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-detail-field-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  font-weight: 600;
}

.crm-detail-empty {
  place-items: center;
  align-content: center;
  border-radius: 0.5625rem;
}

.crm-detail-empty svg {
  width: 1.125rem;
  height: 1.125rem;
}

.crm-detail-relation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--color-border);
}

.crm-detail-card-header + .crm-detail-relation-row {
  border-top: 0;
}

.crm-detail-relation-row strong,
.crm-detail-relation-row small {
  display: block;
}

.crm-detail-relation-row small {
  margin-top: 0.1875rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.crm-detail-note {
  min-height: 4rem;
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

.crm-detail-timeline {
  display: grid;
  gap: 0.875rem;
  margin-top: 1rem;
}

.crm-detail-timeline article {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: 0.75rem;
}

.crm-detail-timeline article > span {
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.1875rem;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-surface);
}

.crm-detail-timeline strong,
.crm-detail-timeline small {
  display: block;
}

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

@container page (max-width: 47.5rem) {
  .crm-detail-layout, .crm-detail-field-grid {
    grid-template-columns: 1fr;
  }

  .crm-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

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

/* ===== Record detail ===== */
/* CRM record detail (Chance, Angebot, Aktivität, Kunde, Auftrag, Vertrag, Kontakt, Supportfall).
   Layer "features"; rules that must beat the design system sit in the "overrides" layer below. */
.crm-record-page {
  --crm-tone: var(--color-accent-text);
  --crm-tone-soft: var(--color-accent-soft);
  width: 100%;
  color: var(--color-text);
}
.crm-record-page [data-tone="indigo"] { --crm-tone: var(--color-tag-indigo-text); --crm-tone-soft: var(--color-tag-indigo-bg); }
.crm-record-page [data-tone="violet"] { --crm-tone: var(--color-tag-violet-text); --crm-tone-soft: var(--color-tag-violet-bg); }
.crm-record-page [data-tone="amber"] { --crm-tone: var(--color-warning-text); --crm-tone-soft: var(--color-warning-bg); }
.crm-record-page [data-tone="teal"] { --crm-tone: var(--color-tag-teal-text); --crm-tone-soft: var(--color-tag-teal-bg); }
.crm-record-page [data-tone="green"] { --crm-tone: var(--color-success-text); --crm-tone-soft: var(--color-success-bg); }
.crm-record-page [data-tone="sky"] { --crm-tone: var(--color-tag-sky-text); --crm-tone-soft: var(--color-tag-sky-bg); }
.crm-record-page [data-tone="rose"] { --crm-tone: var(--color-tag-rose-text); --crm-tone-soft: var(--color-tag-rose-bg); }
.crm-record-page [data-tone="slate"] { --crm-tone: var(--color-text-tertiary); --crm-tone-soft: var(--color-surface-sunken); }

.crm-record-page .crm-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.crm-record-page .crm-detail-breadcrumb { min-height: 1.75rem; margin-bottom: 0.625rem; font-size: var(--text-sm); }
.crm-record-page .crm-detail-breadcrumb strong { font-weight: 600; }

/* Header card: identity, key facts, actions and the section tabs. */
.crm-detail-hero {
  margin-bottom: 1.25rem;
  border: 1px solid var(--crm-line);
  background: var(--color-surface);
}
.crm-record-page .crm-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 1.25rem 1.5rem 1.125rem;
}
.crm-detail-identity { display: flex; gap: 0.875rem; min-width: 0; flex: 1 1 26.25rem; }
.crm-detail-heading { display: grid; gap: 0.25rem; min-width: 0; }
.crm-record-page .crm-detail-entity-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--crm-tone-soft);
  color: var(--crm-tone);
}
.crm-record-page .crm-type-icon {
  width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.crm-record-page .crm-detail-header p.crm-detail-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--crm-tone);
  font-size: var(--text-xs);
}
.crm-detail-number {
  font-variant-numeric: tabular-nums;
}
.crm-record-page .crm-detail-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; min-width: 0; }
.crm-record-page .crm-detail-title-line h1 {
  margin: 0; min-width: 0; font-size: var(--text-xl); line-height: 1.25; font-weight: 600; overflow-wrap: anywhere;
}
.crm-record-page .crm-detail-header { flex-wrap: wrap; }
.crm-detail-facts {
  display: flex; flex-wrap: wrap; flex: 1 1 100%; gap: 0.5rem 2rem; margin: 0; padding-left: 3.625rem;
}
.crm-detail-facts > div { display: grid; gap: 1px; min-width: 0; }
.crm-detail-facts dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-detail-facts dd { margin: 0; font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.crm-detail-facts dd.is-number { font-variant-numeric: tabular-nums; }
.crm-fact-link {
  padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 600;
  text-align: left; cursor: pointer;
}
.crm-fact-link:hover { text-decoration: underline; }
.crm-record-page .crm-detail-actions svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* Single overflow menu for secondary actions. */
.crm-record-page .crm-detail-menu { position: relative; }
.crm-record-page .crm-detail-menu > summary::-webkit-details-marker { display: none; }
.crm-record-page .crm-detail-menu > summary svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
/* The same chevron as every "Weitere Aktionen" menu (design-system.css .ds-menu-button > summary::after). */
.crm-record-page .crm-detail-menu > summary svg.crm-detail-menu__chevron { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-fast) var(--ease); }
.crm-record-page .crm-detail-menu[open] > summary svg.crm-detail-menu__chevron { transform: rotate(180deg); }

/* Tabs: sections with entries first; empty sections stay reachable but quiet. */
.crm-record-page .crm-detail-tabs {
  display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0.5rem 1rem;
  border-top: 1px solid var(--crm-line); border-bottom: 0;
  /* Wide screens: the tabs wrap onto a second row instead of being cut off; narrow screens scroll (below). */
  flex-wrap: wrap; overflow-x: visible;
}
.crm-record-page .crm-detail-tabs button {
  display: inline-flex; align-items: center; gap: 0.375rem; flex: 0 0 auto;
  min-height: 2.25rem; padding: 0 0.625rem; border: 0;
  background: transparent; color: var(--crm-text-2); font-size: var(--text-base); font-weight: 500; white-space: nowrap;
}

.crm-record-page .crm-detail-tabs button.is-empty { color: var(--color-text-disabled); font-size: var(--text-sm); font-weight: 500; padding: 0 0.4375rem; }
.crm-tab-count {
  min-width: 1.25rem; padding: 0 0.375rem; border-radius: 62.4375rem; background: var(--color-surface-sunken);
  color: var(--crm-text-2); font-size: var(--text-xs); font-weight: 600; line-height: 1.25rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.is-active > .crm-tab-count { background: var(--color-surface); color: var(--color-selected-text); }
.crm-tabs-divider { flex: 0 0 1px; height: 1.25rem; margin: 0 0.5rem; background: var(--crm-line); }
.crm-tabs-empty-label { flex: 0 0 auto; color: var(--color-text-disabled); font-size: var(--text-xs); white-space: nowrap; }

/* Two-column body. */
.crm-record-page .crm-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); gap: 1.25rem;
}
.crm-record-page .crm-detail-main,
.crm-record-page .crm-detail-rail { gap: 1rem; }
.crm-record-page .crm-detail-card { padding: 1.125rem 1.25rem; }
.crm-record-page .crm-detail-card > h2,
.crm-record-page .crm-detail-card-header h2 { font-size: var(--text-md); font-weight: 600; }
.crm-record-page .crm-detail-card > h2 { margin-bottom: 0.75rem; }
.crm-record-page .crm-detail-card > h3 { margin: 1.125rem 0 0.5rem; font-size: var(--text-sm); color: var(--crm-text-2); }
.crm-record-page .crm-detail-card-header { margin-bottom: 0.75rem; min-height: 1.75rem; }
.crm-record-page .crm-detail-card-header > span { font-size: var(--text-xs); }
.crm-inline-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.crm-record-page .compact-button svg { width: 0.875rem; height: 0.875rem; }
/* Two field columns on a laptop, up to four on a wide screen; long values span the row. */
.crm-record-page .crm-detail-field-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(12rem, (100% - 3 * 1.75rem) / 4)), 1fr)); gap: 0.875rem 1.75rem; }
.crm-record-page .crm-detail-field-grid dt { margin-bottom: 2px; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.crm-record-page .crm-detail-field-grid dd { font-size: var(--text-base); font-weight: 500; overflow-wrap: anywhere; }
.crm-record-page .crm-detail-field-grid .is-wide dd { white-space: pre-wrap; font-weight: 400; line-height: 1.55; }
.crm-muted-line { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); }
.crm-record-page .crm-detail-empty {
  flex-wrap: wrap;
  align-items: center;
}
.crm-record-page .crm-detail-empty button { min-height: var(--control-h); }

/* Line items (offer positions, products) with right-aligned tabular amounts. */
.crm-lines { max-width: 100%; overflow-x: auto; border: 1px solid var(--crm-line); border-radius: 0.625rem; }
.crm-lines:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.crm-record-page .crm-lines-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: var(--text-base); }
.crm-record-page .crm-lines-table th {
  padding: 0.5625rem 0.75rem; border-bottom: 1px solid var(--crm-line); background: var(--crm-soft);
  color: var(--crm-text-2); font-size: var(--text-xs); font-weight: 600; text-align: left; white-space: nowrap;
}
.crm-record-page .crm-lines-table td { padding: 0.6875rem 0.75rem; border-bottom: 1px solid var(--crm-line); vertical-align: top; font-size: var(--text-base); }
.crm-lines-table tbody tr:last-child td { border-bottom: 0; }
.crm-record-page .crm-lines-table .is-number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.crm-lines-table .crm-lines-pos { width: 2.75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.crm-lines-description { min-width: 10rem; }
.crm-lines-description strong { display: block; font-weight: 600; overflow-wrap: break-word; }
.crm-lines-description small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-lines-sum { font-weight: 600; }
.crm-lines-totals {
  display: grid; gap: 0.375rem; width: min(21.25rem, 100%); margin: 0.875rem 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.crm-lines-totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.crm-lines-totals dt { color: var(--crm-text-2); }
.crm-lines-totals dd { margin: 0; text-align: right; white-space: nowrap; }
.crm-lines-totals .is-total { padding-top: 0.5rem; border-top: 1px solid var(--color-text); font-size: var(--text-md); font-weight: 600; }
.crm-lines-totals .is-total dt { color: var(--color-text); }
.crm-offer-terms { margin-top: 1rem; padding: 0.75rem 0.875rem; }
.crm-offer-terms > span, .crm-offer-contract span { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-offer-terms p { margin: 2px 0 0; font-size: var(--text-base); }
.crm-offer-terms .crm-configurator-totals { flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.625rem; }
.crm-offer-contract {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--crm-line);
}
.crm-offer-contract strong { font-size: var(--text-base); }
.crm-offer-contract small { display: block; color: var(--color-warning-text); }

/* Deal phase stepper and next step. */
.crm-deal-progress { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.crm-deal-progress li {
  position: relative; flex: 1 1 0; min-width: 0; padding: 0.4375rem 0.5rem 0.4375rem 0.75rem;
  background: var(--color-surface-sunken); color: var(--crm-text-2); font-size: var(--text-sm); font-weight: 600; text-align: center;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.crm-deal-progress li:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 0.375rem 0 0 0.375rem; }
.crm-deal-progress li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-deal-progress li.is-done { background: var(--color-accent-soft); color: var(--color-accent-text); }
.crm-deal-progress li.is-current { background: var(--color-accent); color: var(--color-on-accent); }
.crm-deal-lost { margin: 0; color: var(--color-danger-text); }
.crm-next-step {
  display: grid; gap: 2px; margin-top: 0.875rem; padding: 0.625rem 0.875rem;
  border-left: 3px solid var(--color-accent); border-radius: 0 0.5rem 0.5rem 0; background: var(--color-accent-soft);
}
.crm-next-step > span { color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-next-step strong { font-size: var(--text-md); }
.crm-next-step small { color: var(--crm-text-2); font-size: var(--text-sm); }
.crm-next-step.is-overdue { border-left-color: var(--color-danger-text); background: var(--color-danger-bg); }
.crm-next-step.is-overdue small { color: var(--color-danger-text); font-weight: 600; }

/* Recent history on the overview. */
.crm-recent-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.crm-recent-list li { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--crm-line); }
.crm-recent-list li:first-child { border-top: 0; padding-top: 2px; }
.crm-recent-type {
  align-self: start; justify-self: start; padding: 1px 0.5rem; border-radius: 62.4375rem;
  background: var(--crm-soft); color: var(--crm-text-2); font-size: var(--text-xs); font-weight: 600;
}
.crm-recent-list strong { display: block; font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.crm-recent-list p { margin: 2px 0 0; color: var(--crm-text-2); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-recent-list small { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-xs); }

/* Related rail: counts and links, empty relations as one muted line. */
.crm-rail-card .crm-detail-card-header { margin-bottom: 0.5rem; }
.crm-next-item {
  display: grid; gap: 2px; width: 100%; padding: 0.5625rem 0.75rem; border: 1px solid var(--crm-line);
  border-left: 3px solid var(--color-warning-fill); border-radius: 0.5rem; background: var(--color-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.crm-next-item:hover { background: var(--crm-soft); }
.crm-next-item strong { font-size: var(--text-base); overflow-wrap: anywhere; }
.crm-next-item small { color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-next-item.is-overdue { border-left-color: var(--color-danger-text); }
.crm-next-item.is-overdue small { color: var(--color-danger-text); }
.crm-rel-list { margin: 0; padding: 0; list-style: none; }
.crm-rel-row { padding: 0.5rem 0; border-top: 1px solid var(--crm-line); font-size: var(--text-base); }
.crm-rel-row:first-child { border-top: 0; padding-top: 2px; }
.crm-rel-row.is-empty, .crm-rel-row.is-single { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0.5rem; }
.crm-rel-row.is-empty { flex-wrap: nowrap; }
.crm-rel-row.is-empty > span:first-child { min-width: 0; overflow: hidden; color: var(--crm-text-2); text-overflow: ellipsis; white-space: nowrap; }
.crm-rel-row.is-empty > :not(:first-child) { flex: 0 0 auto; }
.crm-rel-row.is-single > span:first-child { flex: 0 0 4.5rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.crm-rel-row.is-single .crm-rel-items { flex: 1 1 0; min-width: 0; margin: 0; }
.crm-rel-none { color: var(--color-text-disabled); font-size: var(--text-sm); }
.crm-rel-add {
  display: inline-flex; align-items: center; gap: 0.1875rem; margin-left: auto; padding: 2px 0.375rem; border: 0; border-radius: 0.375rem;
  background: none; color: var(--color-accent); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.crm-rel-add:hover { background: var(--color-accent-soft); }
.crm-rel-add svg { width: 0.8125rem; height: 0.8125rem; }
.crm-rel-head {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 2px 0; border: 0;
  background: none; color: var(--color-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.crm-rel-head > span:first-child { flex: 1 1 auto; }
.crm-rel-head svg { width: 0.9375rem; height: 0.9375rem; color: var(--color-text-muted); }
.crm-rel-head:hover > span:first-child { color: var(--color-accent); }
.crm-rel-count {
  min-width: 1.375rem; padding: 0 0.4375rem; border-radius: 62.4375rem; background: var(--color-surface-sunken); color: var(--crm-text-2);
  font-size: var(--text-xs); line-height: 1.25rem; text-align: center; font-variant-numeric: tabular-nums;
}
.crm-rel-items { display: grid; gap: 1px; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.crm-record-page .crm-rel-items .crm-relation-open {
  display: grid; gap: 0; width: 100%; padding: 0.25rem 0.375rem; border-radius: 0.375rem;
}
.crm-record-page .crm-rel-items .crm-relation-open:hover { background: var(--crm-soft); }
.crm-record-page .crm-rel-items .crm-relation-open strong { font-size: var(--text-base); font-weight: 600; }
.crm-record-page .crm-rel-items .crm-relation-open small { font-size: var(--text-xs); }
.crm-rel-more { padding: 0.1875rem 0.375rem; border: 0; background: none; color: var(--color-accent); font: inherit; font-size: var(--text-sm); cursor: pointer; }

/* Relation lists inside tabs. */
.crm-record-page .crm-detail-relation-row { padding: 0.625rem 0; border-top: 1px solid var(--crm-line); }
.crm-record-page .crm-detail-card-header + .crm-detail-relation-row,
.crm-record-page .crm-detail-card > h2 + .crm-detail-relation-row { border-top: 0; }

/* Compact bar for small screens, shown once the header scrolled away. */
.crm-detail-sticky { display: none; }

@container page (max-width: 68.75rem) {
  .crm-record-page .crm-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .crm-record-page .crm-detail-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  .crm-detail-facts { order: 1; }
}

@container page (max-width: 53.75rem) {
  .crm-record-page .crm-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .crm-record-page .crm-detail-rail { grid-template-columns: minmax(0, 1fr); }
  .crm-record-page .crm-detail-header { padding: 1rem; gap: 0.875rem; }
  .crm-detail-identity { flex-basis: 100%; gap: 0.75rem; }
  .crm-record-page .crm-detail-entity-icon { width: 2.375rem; height: 2.375rem; }
  .crm-record-page .crm-detail-title-line h1 { font-size: var(--text-lg); }
  .crm-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; }

  .crm-record-page .crm-detail-actions > .secondary-button span { overflow: hidden; text-overflow: ellipsis; }
  .crm-record-page .crm-detail-actions > .crm-icon-button,
  .crm-record-page .crm-detail-actions > .crm-detail-menu { flex: 0 0 2.625rem; }

  .crm-detail-facts { padding-left: 0; order: 1; }

  .crm-record-page .crm-detail-menu { position: static; }

  .crm-record-page .crm-detail-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; padding: 0.5rem; }
  .crm-record-page .crm-detail-card { padding: 1rem; }
  .crm-record-page .crm-detail-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
  .crm-recent-list li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .crm-detail-sticky {
    position: fixed; top: 3.75rem; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--crm-line); background: color-mix(in srgb, var(--color-surface) 97%, transparent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-140%); visibility: hidden; transition: transform .16s ease, visibility .16s;
  }
  .crm-detail-sticky.is-shown { transform: none; visibility: visible; }

  .crm-detail-sticky .crm-detail-entity-icon { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; }
  .crm-detail-sticky .crm-type-icon { width: 1.0625rem; height: 1.0625rem; }
  .crm-detail-sticky strong { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: var(--text-md); text-overflow: ellipsis; white-space: nowrap; }
}

@container page (max-width: 35rem) {
  .crm-record-page .crm-detail-field-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-deal-progress li { padding: 0.375rem 0.25rem 0.375rem 0.75rem; font-size: var(--text-xs); }
  .crm-deal-progress li:not(.is-current) span { visibility: hidden; }
  .crm-deal-progress li.is-current { flex: 2.4 1 0; }
  .crm-lines { border: 0; border-radius: 0; overflow: visible; }
  .crm-lines-table, .crm-lines-table tbody { display: block; }
  .crm-lines-table thead { display: none; }
  .crm-lines-table tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 0.625rem;
    padding: 0.625rem 0; border-bottom: 1px solid var(--crm-line);
  }
  .crm-lines-table tbody tr:last-child { border-bottom: 0; }
  .crm-record-page .crm-lines-table td { display: block; padding: 0; border: 0; }
  .crm-record-page .crm-lines-table td.crm-lines-pos { display: none; }
  .crm-record-page .crm-lines-table .crm-lines-description { grid-column: 1 / -1; margin-bottom: 0.25rem; }
  .crm-record-page .crm-lines-table td.is-number { text-align: left; font-size: var(--text-sm); }
  .crm-record-page .crm-lines-table td.is-number::before { content: attr(data-label); display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
  .crm-record-page .crm-lines-table td.crm-lines-sum { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 0.25rem; font-size: var(--text-base); }
  .crm-record-page .crm-lines-table td.crm-lines-sum::before { display: inline; font-size: var(--text-sm); }
  .crm-record-page .crm-lines-table.is-products tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-lines-totals { width: 100%; }
}
}
@layer overrides {
/* ===== Record detail ===== */
.crm-record-page .crm-detail-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem;
  flex: 0 1 auto;
}
.crm-record-page .crm-detail-actions > :is(.primary-button, .secondary-button) {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.375rem; padding: 0 0.875rem;
  white-space: nowrap; text-decoration: none;
}
.crm-record-page .crm-detail-actions > .crm-icon-button { width: 2.375rem; padding: 0; justify-content: center; }
.crm-record-page .crm-detail-menu > summary {
  display: grid; place-items: center; width: 2.375rem; height: 2.375rem; padding: 0;
  border: 1px solid var(--color-border-control); border-radius: 0.5rem; background: var(--color-surface); color: var(--color-text-tertiary);
  list-style: none; cursor: pointer;
}
.crm-record-page .crm-detail-menu > summary:hover, .crm-record-page .crm-detail-menu[open] > summary { background: var(--color-surface-sunken); border-color: var(--color-text-disabled); }
.crm-record-page .crm-detail-menu > .crm-detail-menu-list {
  position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 40;
  display: grid; gap: 2px; min-width: 15rem; padding: 0.375rem;
  border: 1px solid var(--crm-line); border-radius: 0.625rem; background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}
.crm-record-page .crm-menu-item {
  display: flex; align-items: center; min-height: 2.25rem; padding: 0.4375rem 0.625rem; border: 0; border-radius: 0.375rem;
  background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-base); text-align: left; cursor: pointer;
}
.crm-record-page .crm-menu-item:hover, .crm-record-page .crm-menu-item:focus-visible { background: var(--color-accent-soft); outline-offset: -2px; }
.crm-record-page .crm-menu-item[data-crm-transition="Verloren"] { color: var(--color-danger-text); }
.crm-inline-actions .compact-button { white-space: nowrap; }
@container page (max-width: 68.75rem) {
  .crm-record-page .crm-detail-actions { justify-content: flex-start; order: 2; flex-basis: 100%; padding-left: 3.625rem; }
}
@container page (max-width: 53.75rem) {
  .crm-record-page .crm-detail-actions { width: 100%; justify-content: stretch; padding-left: 0; }
  .crm-record-page .crm-detail-actions > .primary-button { flex: 1 1 100%; order: -1; justify-content: center; min-height: 2.75rem; white-space: normal; text-align: center; }
  .crm-record-page .crm-detail-actions > .secondary-button:not(.crm-icon-button) { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 2.625rem; padding: 0 0.625rem; }

  .crm-record-page .crm-detail-actions > .crm-icon-button,
  .crm-record-page .crm-detail-menu > summary { width: 2.625rem; height: 2.625rem; min-height: 2.625rem; }

  .crm-record-page .crm-detail-actions { order: 2; }
  .crm-record-page .crm-detail-actions { position: relative; }

  .crm-record-page .crm-detail-menu > .crm-detail-menu-list { left: 0; right: 0; min-width: 0; }

  .crm-detail-sticky .primary-button.compact-button { min-height: var(--control-h); padding: 0 0.625rem; }

  .crm-detail-sticky .primary-button { display: block; flex: 0 1 auto; max-width: 55%; min-height: 2.375rem; padding: 0 0.75rem; overflow: hidden; line-height: 2.375rem; text-overflow: ellipsis; white-space: nowrap; }
}
}
@layer features {
/* ===== Customer analytics (account detail rail + reports ranking) ===== */
.crm-analytics-card { --aging-0: var(--color-success-fill); --aging-1: var(--color-warning-fill); --aging-2: var(--color-warning-fill); --aging-3: var(--color-danger-border); --aging-4: var(--color-danger-text); }
.customer-ranking-panel { --aging-0: var(--color-success-fill); --aging-1: var(--color-warning-fill); --aging-2: var(--color-warning-fill); --aging-3: var(--color-danger-border); --aging-4: var(--color-danger-text); }
.crm-analytics-card .crm-detail-card-header { flex-wrap: wrap; gap: 0.375rem; }
.crm-analytics-periods { display: inline-flex; border: 1px solid var(--crm-line, var(--color-border)); border-radius: 0.375rem; overflow: hidden; }
.crm-analytics-periods button { padding: 2px 0.5rem; border: 0; background: transparent; color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-analytics-periods button[aria-pressed="true"] { background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600; }
.crm-analytics-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; margin: 0 0 0.625rem; }
.crm-analytics-kpis div { min-width: 0; }
.crm-analytics-kpis dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.crm-analytics-kpis dd { margin: 0; color: var(--color-text); font-size: var(--text-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.crm-analytics-kpis dd small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.crm-analytics-subtitle { margin: 0.625rem 0 0.375rem; color: var(--crm-text-2, var(--color-text-muted)); font-size: var(--text-xs); font-weight: 600; }
.crm-abc-badge { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; border-radius: 0.375rem; background: var(--color-surface-sunken); color: var(--color-text); font-size: var(--text-xs); font-weight: 700; }
.crm-abc-badge[data-abc="A"] { background: var(--color-success-bg); color: var(--color-success-text); }
.crm-abc-badge[data-abc="B"] { background: var(--color-accent-soft); color: var(--color-accent-text); }
.crm-aging { display: flex; gap: 2px; height: 0.625rem; margin-bottom: 0.375rem; }
.crm-aging-segment { min-width: 0.25rem; border-radius: 0.1875rem; }
.crm-aging-segment[data-bucket="not_due"], .crm-aging-swatch[data-bucket="not_due"] { background: var(--aging-0); }
.crm-aging-segment[data-bucket="1_30"], .crm-aging-swatch[data-bucket="1_30"] { background: var(--aging-1); }
.crm-aging-segment[data-bucket="31_60"], .crm-aging-swatch[data-bucket="31_60"] { background: var(--aging-2); }
.crm-aging-segment[data-bucket="61_90"], .crm-aging-swatch[data-bucket="61_90"] { background: var(--aging-3); }
.crm-aging-segment[data-bucket="over_90"], .crm-aging-swatch[data-bucket="over_90"] { background: var(--aging-4); }
.crm-aging-legend { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.crm-aging-legend li { display: grid; grid-template-columns: 0.625rem 1fr auto; align-items: center; gap: 0.375rem; color: var(--crm-text-2, var(--color-text)); }
.crm-aging-legend li.is-empty { color: var(--color-text-muted); }
.crm-aging-legend strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-aging-swatch { width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; }
.crm-revenue-bars { display: flex; align-items: flex-end; gap: 2px; height: 4.5rem; margin: 0; padding: 0 0 1rem; list-style: none; }
.crm-revenue-bars li { position: relative; display: flex; flex: 1 1 0; align-items: flex-end; height: 100%; min-width: 0; }
.crm-revenue-bars small { position: absolute; bottom: -1rem; left: 50%; color: var(--color-text-muted); font-size: var(--text-xs); transform: translateX(-50%); white-space: nowrap; }
.crm-revenue-bars li:nth-child(odd) small { visibility: hidden; }
.crm-revenue-bars:has(li:nth-child(-n+6):last-child) li small { visibility: visible; }
.crm-revenue-bars li:hover .crm-revenue-bar { opacity: .75; }
.crm-revenue-bar { width: 100%; border-radius: 0.25rem 0.25rem 0 0; background: var(--color-accent); }
.crm-revenue-bar.is-negative { background: var(--color-danger-text); }
.customer-ranking-panel .panel-header small { color: var(--color-text-muted); }
.customer-ranking-block + .customer-ranking-block { margin-top: 1.125rem; padding-top: 0.875rem; border-top: 1px solid var(--crm-line, var(--color-border)); }
.customer-ranking-block header h3 { margin: 0; font-size: var(--text-md); }
.customer-ranking-block header p { margin: 2px 0 0.5rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.customer-ranking-abc { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0 0 0.5rem; padding: 0; list-style: none; font-size: var(--text-sm); }
.customer-ranking-block .crm-aging-legend { grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); margin-bottom: 0.625rem; }
.customer-ranking-block .is-number { text-align: right; font-variant-numeric: tabular-nums; }
/* Legend in the wide report panels: swatch, label and amount stay together; items are separated by the column gap. */
.customer-ranking-block .crm-aging-legend { column-gap: 1.5rem; }
.customer-ranking-block .crm-aging-legend li { grid-template-columns: 0.625rem auto auto; justify-content: start; }
/* Liquidity forecast: the per-week item list inside the table is plain text lines, not a legend grid. */
.customer-ranking-block td details .crm-aging-legend, .customer-ranking-block td details .crm-aging-legend li { display: block; }
/* "Firmenbriefpapier & Belegdaten": the legal-data fieldset used the browser default groove border (bright in dark mode). */
.legal-letterhead { margin: 0.75rem 0; padding: 0.75rem 1rem 1rem; border: 1px solid var(--color-border); border-radius: 0.5rem; }
.legal-letterhead legend { padding: 0 0.375rem; color: var(--color-text); font-weight: 600; }
/* Offer/order lifecycle and letterhead pages: submit and cancel were glued together (.button-row was not a flex row). */
.crm-workflow-form .button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
}
@layer features {
/* ===== Kundenportal-Link dialog (customer-portal-admin.js) ===== */
.customer-portal-admin { border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-surface); color: var(--color-text); padding: 1.25rem; width: min(35rem, calc(100vw - 2rem)); box-sizing: border-box; }
.customer-portal-admin::backdrop { background: var(--color-overlay); }
.customer-portal-admin form { display: grid; gap: 0.75rem; }
.customer-portal-admin h2 { margin: 0; }
.customer-portal-admin label { display: grid; gap: 0.25rem; font-weight: 500; }
.customer-portal-admin .customer-portal-admin-check { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.customer-portal-admin-status, .customer-portal-admin-hint { color: var(--color-text-muted); margin: 0; }
.customer-portal-admin-result { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--color-warning-border); background: var(--color-warning-bg); border-radius: 0.5rem; }
.customer-portal-admin-once { margin: 0; color: var(--color-warning-text); font-weight: 500; }
.customer-portal-admin-link { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--text-xs); }
.customer-portal-admin-error { color: var(--color-danger-text); margin: 0; }
.customer-portal-admin .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
}