/* ============================================================
   PAPO Partnerportal — base.css
   Design tokens (v1.1, from Design/variables.css) + component
   and page styles for the frontend. Single stylesheet, no build
   step — loaded once from index.html.
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/vendor/fonts/fira-code-symbols2.woff2') format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/vendor/fonts/fira-code-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/vendor/fonts/fira-code-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ─── Color: Primary Green — company context ─── */
  --color-primary-50:  #f0f7f1;
  --color-primary-100: #d8eedb;
  --color-primary-200: #b4dbb8;
  --color-primary-300: #8dc492;
  --color-primary-400: #78b07e;
  --color-primary-500: #689c6d;
  --color-primary-600: #578462;
  --color-primary-700: #456851;
  --color-primary-800: #344e3d;
  --color-primary-900: #223529;
  --color-primary-950: #111a14;

  /* ─── Color: Secondary Teal — supporting elements ─── */
  --color-secondary-50:  #f0f5f5;
  --color-secondary-100: #d8eae8;
  --color-secondary-300: #abc7c4;
  --color-secondary-600: #598c89;
  --color-secondary-700: #456f6d;
  --color-secondary-800: #34524f; /* public pages: hover of the petrol brand accent */

  /* ─── Color: Accent Blue-green — partner context ─── */
  --color-accent-50:  #eff5f6;
  --color-accent-100: #d4e8eb;
  --color-accent-200: #b4d4da;
  --color-accent-300: #9ac2c9;
  --color-accent-400: #8cacb3;
  --color-accent-500: #7597a0;
  --color-accent-600: #5e838d;
  --color-accent-700: #4a6870;
  --color-accent-800: #374e54;
  --color-accent-900: #243438;

  /* ─── Color: Neutral (green-tinted slate) ─── */
  --color-neutral-50:  #f6f9f7;
  --color-neutral-100: #edf2ee;
  --color-neutral-200: #d6e1d8;
  --color-neutral-300: #b5c8b9;
  --color-neutral-400: #8ca594;
  --color-neutral-500: #69836f;
  --color-neutral-600: #52675a;
  --color-neutral-700: #3d4f43;
  --color-neutral-800: #2a362e;
  --color-neutral-900: #182019;
  --color-neutral-950: #0b110c;

  /* ─── Semantic status colors ─── */
  --color-success-50: #ecfdf4; --color-success-100: #d0fae5; --color-success-600: #16a34a; --color-success-700: #15803d; --color-success-800: #166534;
  --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-600: #d97706; --color-warning-800: #92400e;
  --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-500: #ef4444; --color-error-600: #dc2626; --color-error-700: #b91c1c; --color-error-800: #991b1b;
  --color-info-100: #d4e8eb; --color-info-800: #374e54;

  --color-white: #ffffff;

  /* ─── Semantic: backgrounds / borders / text ─── */
  --bg-page:    var(--color-neutral-50);
  --bg-surface: var(--color-white);
  --bg-subtle:  var(--color-neutral-100);
  --bg-overlay: rgba(11, 17, 12, 0.50);

  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);

  --text-primary:   var(--color-neutral-950);
  --text-secondary: var(--color-neutral-600);
  --text-disabled:  var(--color-neutral-400);
  --text-inverse:   var(--color-white);

  /* ─── Semantic: status badges ─── */
  --status-submitted-bg: var(--color-warning-100); --status-submitted-text: var(--color-warning-800);
  --status-reviewed-bg:  var(--color-info-100);    --status-reviewed-text:  var(--color-info-800);
  --status-fulfilled-bg: var(--color-success-100); --status-fulfilled-text: var(--color-success-800);
  --status-active-bg:    var(--color-success-50);  --status-active-text:    var(--color-success-700);
  --status-inactive-bg:  var(--color-neutral-100); --status-inactive-text:  var(--color-neutral-600);

  /* ─── Typography ─── */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;

  --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;

  --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem;

  --line-height-tight: 1.2; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.6;
  --letter-spacing-tight: -0.025em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em;

  /* ─── Spacing (0.25rem base) ─── */
  --spacing-0: 0; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem;
  --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-7: 1.75rem; --spacing-8: 2rem; --spacing-10: 2.5rem;
  --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; --spacing-20: 5rem;

  /* ─── Radius ─── */
  --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 624.9375rem;

  /* ─── Shadows (green-tinted) ─── */
  --shadow-sm: 0 0.0625rem 0.1875rem 0 rgba(11, 17, 12, 0.09), 0 0.0625rem 0.125rem -0.0625rem rgba(11, 17, 12, 0.09);
  --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(11, 17, 12, 0.09), 0 0.125rem 0.25rem -0.125rem rgba(11, 17, 12, 0.09);
  --shadow-xl: 0 1.25rem 1.5625rem -0.3125rem rgba(11, 17, 12, 0.09), 0 0.5rem 0.625rem -0.375rem rgba(11, 17, 12, 0.09);
  --shadow-focus-ring:         0 0 0 0.1875rem rgba(104, 156, 109, 0.35);

  /* ─── Motion ─── */
  --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 250ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ─── Layout ─── */
  --sidebar-width: 15rem;
  --sidebar-width-collapsed: 4rem;
  --topbar-height: 4rem;
  --content-max-width: 80rem;
  --content-padding: 2rem;

  font-family: var(--font-sans);
}

/* ─── Role context: Company (primary green) — also the default (login) ───
   --color-accent-strong (step 700) is for every fill behind white text: the
   core steps fail WCAG AA with white (company 500 = 3.2:1, partner 600 = 4.1:1). */
:root, .context-company, .area--company {
  --color-accent:              var(--color-primary-500);
  --color-accent-hover:        var(--color-primary-600);
  --color-accent-light:        var(--color-primary-50);
  --color-accent-medium:       var(--color-primary-100);
  --color-accent-strong:       var(--color-primary-700);
  --color-accent-strong-hover: var(--color-primary-800);
  --border-focus:              var(--color-primary-500);
  --shadow-focus-ring:         0 0 0 0.1875rem rgba(104, 156, 109, 0.35);
  --text-brand:                var(--color-primary-700);
}

/* ─── Role context: Partner (accent blue-green) ─── */
.context-partner, .area--partner {
  --color-accent:              var(--color-accent-600);
  --color-accent-hover:        var(--color-accent-700);
  --color-accent-light:        var(--color-accent-50);
  --color-accent-medium:       var(--color-accent-100);
  --color-accent-strong:       var(--color-accent-700);
  --color-accent-strong-hover: var(--color-accent-800);
  --border-focus:              var(--color-accent-600);
  --shadow-focus-ring:         0 0 0 0.1875rem rgba(140, 172, 179, 0.40);
  --text-brand:                var(--color-accent-700);
}

/* ─── Back-compat aliases (old token names used throughout base.css) ─── */
:root {
  --color-bg: var(--bg-page);
  --color-surface: var(--bg-surface);
  --color-border: var(--border-default);
  --color-text: var(--text-primary);
  --color-error: var(--color-error-700);
  --radius: var(--radius-md);
}

* {
  box-sizing: border-box;
}

/* Native controls (checkboxes, radios, date picker) otherwise default to the
   browser's system blue regardless of role — tie them to the active
   role accent (company-green / partner-teal) instead. */
input[type="checkbox"],
input[type="radio"],
input[type="date"] {
  accent-color: var(--color-accent);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

/* A solid 2px outline in the strong accent stays visible on white, tints and
   accent fills alike (the 35% ring alone is below 3:1 against white). */
:focus-visible {
  outline: 0.125rem solid var(--color-accent-strong);
  outline-offset: 0.125rem;
}

/* ============================================================
   App shell — sidebar navigation + slim topbar
   ============================================================ */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
}

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 0.0625rem solid var(--border-default);
}

.app-sidebar__brand {
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
  border-bottom: 0.0625rem solid var(--border-default);
}

.app-sidebar__wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
  line-height: 1;
}

.app-sidebar__role {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--text-brand);
}

.portal-label-retry {
  display: block;
  margin-top: var(--spacing-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.app-sidebar__nav {
  flex: 1;
  padding: var(--spacing-3);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
}

.app-sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  height: 2.75rem;
  padding: 0 var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}

.app-sidebar__nav a svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  stroke-width: 0.0938rem;
}

.app-sidebar__nav a:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.app-sidebar__nav a.is-active {
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* iOS-style unread-count pill on the "Bestellungen" nav item (order-notifications
   spec) — pushed to the row's trailing edge, hidden entirely when count is 0. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  padding: 0 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-error-600);
  color: var(--text-inverse);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--content-padding);
  background: var(--bg-surface);
  border-bottom: 0.0625rem solid var(--border-default);
}

.app-root {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-8) var(--content-padding);
  width: 100%;
}

/* Role areas no longer draw a decorative left stripe (per DS: no colored
   accent borders on containers) — the role context still switches the
   --color-accent/--text-brand tokens used below. */
.area--company,
.area--partner {
  padding-left: 0;
  border-left: none;
}

/* ─── Profile menu (topbar, top-right) ─── */

.profile-menu {
  position: relative;
}

.profile-menu__button {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}

.profile-menu__button:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.profile-menu__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
}

.profile-menu__caret {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

.profile-menu__panel {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  min-width: 13.75rem;
  padding: var(--spacing-2);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 200;
}

.profile-menu__panel[hidden],
.profile-menu__panel.is-closed { display: none; }

.profile-menu__identity {
  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
  margin-bottom: var(--spacing-1);
  border-bottom: 0.0625rem solid var(--border-default);
}

.profile-menu__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.profile-menu__role {
  margin-top: 0.125rem;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.profile-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.profile-menu__item svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-secondary);
}

.profile-menu__item:hover { background: var(--bg-subtle); }

.profile-menu__item--danger { color: var(--color-error-700); }
.profile-menu__item--danger svg { color: var(--color-error-600); }
.profile-menu__item--danger:hover { background: var(--color-error-50); }

/* ============================================================
   Dashboard visuals — bar chart & status donut
   ============================================================ */

.chart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-10);
}

.chart-row > .chart-card {
  flex: 2 1 26.25rem;
  min-width: 0;
}

.chart-row > .chart-card + .chart-card {
  flex: 1 1 18.75rem;
}

.chart-card {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  min-width: 0;
}

.chart-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-5) 0;
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.bar-chart__row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 9.25rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-3);
}

.bar-chart__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-success-600);
}

.bar-chart__rank svg {
  width: 1rem;
  height: 1rem;
}

.bar-chart__label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-chart__track {
  display: block;
  width: 100%;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  overflow: hidden;
}

.bar-chart__fill {
  display: block;
  height: 100%;
  min-width: 0.1875rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-out);
}

.bar-chart__value {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-align: right;
  min-width: 4.75rem;
}

.bar-chart__row--leader .bar-chart__fill {
  background: var(--color-success-600);
}

.bar-chart__row--leader .bar-chart__value {
  color: var(--color-success-700);
}

.status-donut {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-5);
}

.status-donut__headline {
  margin: -0.5rem 0 var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-700);
}

.status-donut__circle {
  width: 6.75rem;
  height: 6.75rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-donut__legend {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex: 1 1 auto;
  min-width: 0;
}

.status-donut__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.status-donut__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-donut__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* Single-metric ring (e.g. "Provisionsquote") — percentage via conic-gradient,
   the --pct custom property is set inline per instance from live data. */
.donut-ring {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--color-success-600) calc(var(--pct, 0) * 1%), var(--bg-subtle) 0);
}

.donut-ring::after {
  content: "";
  position: absolute;
  inset: 0.9375rem;
  background: var(--bg-surface);
  border-radius: 50%;
}

.donut-ring__label {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-success-700);
}

.donut-ring__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2);
}

.donut-ring__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-5);
}

.donut-ring__figure {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.donut-ring__caption {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ============================================================
   Page heading rhythm (page title → section heading → body)
   ============================================================ */

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.dashboard-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.dashboard-header__actions .button-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.page-heading h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
  margin: 0.125rem 0 0 0;
}

.page-heading__greeting {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.app-root h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-6) 0;
}

.app-root h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--spacing-4) 0;
}

.app-root > h2,
.app-root > section + h2 {
  margin-top: var(--spacing-10);
}

/* ============================================================
   Dashboard — stat cards
   ============================================================ */

/* Exactly 3 columns: 4 metric-cards + 1 double-wide chart card = 6 thirds =
   row 1 "1/3 1/3 1/3", row 2 "1/3 2/3" (chart spans 2 columns). Grid instead
   of flex-basis math so the break is exact, not a width-dependent wrap. */
.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-10);
}

/* Partner dashboard: "Letzte Bestellungen" sits above the metric row. */
data-table + .metric-row {
  margin-top: var(--spacing-10);
}

.metric-row > metric-card {
  display: block;
  min-width: 0;
  height: auto;
}

.metric-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 100%;
  padding: var(--spacing-6);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.metric-card--ring-full {
  align-items: stretch;
  gap: var(--spacing-5);
}

.metric-card__watermark {
  position: absolute;
  right: -0.875rem;
  bottom: -1rem;
  width: 5.75rem;
  height: 5.75rem;
  color: var(--text-brand);
  opacity: 0.07;
  pointer-events: none;
}

.metric-card--positive .metric-card__watermark {
  color: var(--color-success-600);
}

.metric-card__watermark svg {
  width: 100%;
  height: 100%;
  stroke-width: 0.0781rem;
}

.metric-card__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--text-brand);
}

.metric-card--positive .metric-card__icon {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.metric-card .metric-card__icon--up {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.metric-card .metric-card__icon--down {
  background: var(--color-error-50);
  color: var(--color-error-700);
}

.metric-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 0.1094rem;
}

.metric-card__icon--up svg,
.metric-card__icon--down svg {
  transform: translate(0.0625rem, -0.0625rem);
}

.metric-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-2);
  min-width: 0;
}

.metric-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  order: 1;
}

.metric-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-brand);
  line-height: var(--line-height-tight);
  order: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.metric-card__value--brand {
  color: var(--text-brand);
}

.metric-card__value--positive {
  color: var(--color-success-700);
}

.metric-card__trend {
  order: 2;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.metric-card__trend--up {
  color: var(--color-success-700);
}

.metric-card__trend--neutral {
  color: var(--text-secondary);
}

.metric-card__trend--down {
  color: var(--color-error-700);
}

.metric-card__sparkline {
  display: flex;
  align-items: flex-end;
  gap: 0.1875rem;
  height: 2.5rem;
}

.metric-card__sparkline span {
  flex: 1;
  min-width: 0.1875rem;
  max-width: 0.5rem;
  border-radius: 0.125rem 0.125rem 0 0;
  background: var(--color-accent);
  opacity: 0.35;
}

.metric-card__sparkline span.is-current {
  opacity: 0.9;
}

.metric-card--positive .metric-card__sparkline span {
  background: var(--color-success-600);
  opacity: 0.35;
}

.metric-card--positive .metric-card__sparkline span.is-current {
  opacity: 0.9;
}

.metric-card__aside {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  margin-left: auto;
  padding-left: var(--spacing-4);
  flex-shrink: 0;
  max-width: 6.875rem;
  text-align: center;
}

.metric-card__ring {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--pct, 0) * 1%), var(--bg-subtle) 0);
}

.metric-card__ring::after {
  content: "";
  position: absolute;
  inset: 0.375rem;
  background: var(--bg-surface);
  border-radius: 50%;
}

.metric-card__ring-caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: var(--line-height-snug);
}

.metric-card__ring-full-wrap {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.metric-card__ring-full {
  position: relative;
  aspect-ratio: 1 / 1;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--color-accent) calc(var(--pct, 0) * 1%), var(--bg-subtle) 0);
}

.metric-card__ring-full::after {
  content: "";
  position: absolute;
  inset: 14%;
  background: var(--bg-surface);
  border-radius: 50%;
}

.metric-card__ring-full-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-brand);
  font-variant-numeric: tabular-nums;
}

.metric-card__ring-caption--full {
  order: 2;
}

/* Lead metric (decision 3C): whole row on the accent tint; the chart then also
   takes a full row so the grid below stays without holes. */
.metric-row > metric-card[lead],
.metric-row:has(> metric-card[lead]) > .month-chart-card {
  grid-column: 1 / -1;
}

.metric-card--lead {
  background: var(--color-accent-light);
  border-color: transparent;
  box-shadow: none;
}

.metric-card--lead .metric-card__icon {
  background: var(--bg-surface);
}

.metric-card--lead .metric-card__value {
  font-size: var(--font-size-3xl);
}

.metric-row > .month-chart-card {
  grid-column: span 2;
  min-width: 0;
  height: auto;
}

.metric-card--chart {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-2);
}

.metric-card__chart-label {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.month-chart {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: max-content minmax(10rem, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--spacing-3);
  row-gap: var(--spacing-2);
  height: 4.5rem;
  padding-right: 4.75rem;
}

.month-chart__bars {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3);
  min-width: 0;
  border-left: 0.0625rem solid var(--border-default);
  border-bottom: 0.0625rem solid var(--border-default);
  padding: 0 var(--spacing-2) 0 var(--spacing-3);
}

.month-chart__bar-wrap {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 0;
}

.month-chart__bar {
  width: 100%;
  max-width: 1.875rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-accent);
  opacity: 0.35;
  transition: opacity var(--motion-fast, 150ms) ease-out;
}

.month-chart__bar--current {
  opacity: 1;
}

.month-chart__xaxis {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: var(--spacing-3);
  padding: 0 var(--spacing-2) 0 var(--spacing-3);
}

.month-chart__xlabel {
  flex: 1 1 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.month-chart__yaxis {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

.month-chart__yaxis span:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* ============================================================
   Data table — search toolbar, header, rows, pager, empty state
   ============================================================ */

data-table {
  display: block;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Table itself scrolls horizontally inside its rounded/clipped host, instead
   of the host clipping wide tables (many order/settlement columns) on narrow
   viewports. */
.data-table__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table__search {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin: var(--spacing-4) var(--spacing-4) 0;
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-page);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

.data-table__search::placeholder { color: var(--text-secondary); }
.data-table__search:hover { border-color: var(--color-neutral-400); }
.data-table__search:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
  background: var(--bg-surface);
}

/* Search + optional filter controls (data-table.js .filters) share one row,
   wrapping onto multiple lines on narrow viewports. */
.data-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
  margin: var(--spacing-4) var(--spacing-4) 0;
}

.data-table__toolbar .data-table__search {
  margin: 0;
}

.data-table__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.data-table__filter {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.data-table__filter-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.data-table__filter select,
.data-table__filter input[type="date"],
.data-table__filter input[type="text"] {
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-page);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

.data-table__filter input[type="text"] {
  width: 10rem;
}

.data-table__filter select:hover,
.data-table__filter input[type="date"]:hover,
.data-table__filter input[type="text"]:hover {
  border-color: var(--color-neutral-400);
}

.data-table__filter select:focus,
.data-table__filter input[type="date"]:focus,
.data-table__filter input[type="text"]:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
  background: var(--bg-surface);
}

/* Phones: each row becomes a compact two-line card (decision 5C) — same cells,
   placed by their column's mobile slot; other cells follow as labelled lines. */
@media (max-width: 39.9375em) {
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody { display: block; }
  .data-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row dense;
    align-items: center;
    gap: var(--spacing-1) var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 0.0625rem solid var(--border-default);
  }
  .data-table tbody td {
    display: flex;
    gap: var(--spacing-3);
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
    order: 4;
    padding: 0;
    border: 0;
    min-width: 0;
    font-size: var(--font-size-sm);
  }
  .data-table td[data-label]:not([data-mobile])::before {
    content: attr(data-label);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
  }
  .data-table td[data-mobile="title"] { grid-column: 1; order: 0; font-weight: var(--font-weight-semibold); }
  .data-table td[data-mobile="amount"] { grid-column: 2; order: 1; justify-self: end; justify-content: flex-end; gap: 0.25em; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
  .data-table td[data-mobile="meta"] { grid-column: 1; order: 2; color: var(--text-secondary); font-size: var(--font-size-xs); }
  .data-table td[data-mobile="status"] { grid-column: 2; order: 3; justify-self: end; }
  .data-table td[data-mobile="hide"] { display: none; }
}

/* Desktop: same emphasis as the phone cards — calm header, bold main field,
   right-aligned bold amount with unit, muted date. */
.data-table td[data-unit]::after { content: " " attr(data-unit); }


/* spacing between the toolbar and the table below it */
.data-table__toolbar + .data-table__scroll {
  margin-top: var(--spacing-4);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}



.data-table th {
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  border-bottom: 0.0625rem solid var(--border-default);
  white-space: nowrap;
}

.data-table td {
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--text-primary);
  border-bottom: 0.0625rem solid var(--border-default);
  vertical-align: middle;
}

@media (min-width: 40em) {
  .data-table th {
    padding: var(--spacing-3) var(--spacing-5);
    border-bottom-color: var(--border-strong);
  }
  .data-table td { padding: var(--spacing-4) var(--spacing-5); }
  .data-table tbody tr:last-child td { border-bottom: 0; }
  .data-table td[data-mobile="title"] { font-weight: var(--font-weight-semibold); }
  .data-table :is(th, td)[data-mobile="amount"] { text-align: right; }
  .data-table td[data-mobile="amount"] {
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .data-table td[data-mobile="meta"] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }
}

.data-table__thumb {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.data-table__thumb--empty {
  background: var(--color-neutral-100);
  border: 1px solid var(--border-default);
}

.data-table tbody tr {
  transition: background var(--duration-fast) var(--ease-in-out);
}

.data-table tbody tr:hover {
  background: var(--color-accent-light);
}

.data-table__row--clickable {
  cursor: pointer;
}

/* Unseen company order (order-notifications spec) - subtle tint + bolder date
   cell, cleared once the row's details overlay has been opened. A distinct
   color from the plain :hover tint (--color-accent-light) so the two never
   read as the same state. */
.data-table__row--unseen {
  background: var(--color-warning-50);
  font-weight: var(--font-weight-semibold);
}

.data-table__row--unseen:hover {
  background: var(--color-warning-100);
}

/* Dormant Endkunde (add-dormant-kunde-visibility) - same neutral tint/text as
   .status-badge--inactive, so "inactive" reads consistently across the app. */
.data-table__row--dormant {
  background: var(--status-inactive-bg);
}

.data-table__row--dormant:hover {
  background: var(--color-neutral-200);
}

.dormant-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-2);
  padding: 0.125rem var(--spacing-3);
  border-radius: var(--radius-full);
  background: var(--color-neutral-200);
  color: var(--status-inactive-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* Origin of an order or Endkunde (add-shop-guest-checkout): only shop records are marked.
   Calm teal is the supporting ramp valid in both areas, so it never reads as a status. */
.origin-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-2);
  padding: 0.0625rem var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-secondary-100);
  color: var(--color-secondary-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  vertical-align: middle;
}

.badge-new {
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-2);
  padding: 0.0625rem var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-error-500);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 0.0625rem solid var(--border-default);
  background: var(--bg-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.data-table__pager button {
  padding: var(--spacing-1) var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.data-table__pager button:hover:not(:disabled) {
  background: var(--bg-page);
}

.data-table__pager button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Empty state — the <data-table> host still provides the card chrome
   (border/radius/shadow) around this single message. */
/* Shared loading / empty / error block (lib/states.js, decision 6C). */
.state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 10rem;
  padding: var(--spacing-10) var(--spacing-6);
  text-align: center;
}

.state-block > svg {
  width: 2rem;
  height: 2rem;
  color: var(--color-neutral-400);
  stroke-width: 0.09375rem;
}

.state-block--error > svg { color: var(--color-error-700); }

.state-block--loading > svg { animation: state-spin 1s linear infinite; }

@keyframes state-spin { to { transform: rotate(360deg); } }

.state-block__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.state-block__hint {
  margin: 0;
  max-width: 36ch;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.state-block .button-primary,
.state-block .button-secondary {
  margin-top: var(--spacing-2);
}

/* ============================================================
   Status badge
   ============================================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
}

.status-badge--submitted { background: var(--status-submitted-bg); color: var(--status-submitted-text); }
.status-badge--reviewed  { background: var(--status-reviewed-bg);  color: var(--status-reviewed-text); }
.status-badge--fulfilled { background: var(--status-fulfilled-bg); color: var(--status-fulfilled-text); }
.status-badge--active    { background: var(--status-active-bg);    color: var(--status-active-text); }
.status-badge--inactive  { background: var(--status-inactive-bg);  color: var(--status-inactive-text); }

/* Company order-table status control — same color language as .status-badge,
   but an actual <select> so the company can change status inline. */
.status-select {
  padding: 0.125rem var(--spacing-6) 0.125rem var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  appearance: none;
  -webkit-appearance: none;
}

.status-select:focus {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.status-select--submitted { background-color: var(--status-submitted-bg); color: var(--status-submitted-text); }
.status-select--reviewed  { background-color: var(--status-reviewed-bg);  color: var(--status-reviewed-text); }
.status-select--fulfilled { background-color: var(--status-fulfilled-bg); color: var(--status-fulfilled-text); }

/* ============================================================
   Login form
   ============================================================ */

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 21.25rem;
  margin: 4rem auto;
  padding: var(--spacing-8);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.login-form input {
  padding: var(--spacing-2) var(--spacing-3);
  height: 2.5rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

.login-form input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
}

.login-form__error {
  color: var(--color-error-700);
  font-size: var(--font-size-sm);
}

.login-form button {
  padding: var(--spacing-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.login-form button:hover { background: var(--color-accent-strong-hover); }

/* ============================================================
   Shared form field component
   ============================================================ */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
}

.form-field__label { font-weight: var(--font-weight-semibold); color: var(--color-neutral-700); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  padding: var(--spacing-2) var(--spacing-3);
  height: 2.5rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}

.form-field textarea { height: auto; min-height: 5rem; resize: vertical; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
}

.form-field__control--invalid { border-color: var(--color-error-500) !important; }

.form-field__error {
  color: var(--color-error-600);
  font-size: var(--font-size-xs);
}

/* image-chooser.js: upload / gallery-pick / external-URL control for a product image. */
.image-chooser {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
}

.image-chooser__body {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
}

.image-chooser__preview {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}

.image-chooser__controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.image-chooser__tabs {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.image-chooser__tab {
  padding: var(--spacing-1) var(--spacing-3);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}

.image-chooser__tab:hover { background: var(--bg-subtle); }

.image-chooser__tab--active {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--text-inverse);
}

.image-chooser__panel input[type="file"],
.image-chooser__panel input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: var(--spacing-2) var(--spacing-3);
  height: 2.5rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.image-chooser__hint {
  margin: var(--spacing-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.image-chooser__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: var(--spacing-2);
  max-height: 12rem;
  overflow-y: auto;
}

.image-chooser__gallery-item {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-100);
  cursor: pointer;
  overflow: hidden;
}

.image-chooser__gallery-item:hover { border-color: var(--border-focus); }

.image-chooser__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Modal dialog
   ============================================================ */

/* Background scroll lock while any modal-dialog is open (toggled in
   modal-dialog.js open()/close()). position:fixed (not just overflow:hidden)
   so the page doesn't snap to the top when opened mid-scroll — JS sets
   `top` to the negative scroll offset and restores it on close. */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

modal-dialog[hidden] { display: none; }

.modal-dialog__backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}

/* Roomy by default (user pref: fine to take up a lot of the screen) so a
   modal's own content decides whether it scrolls, not a cramped fixed box.
   max-height/-width still cap it on small viewports - overflow:auto is the
   fallback there, not the default experience. */
.modal-dialog__panel {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 42.5rem;
  min-width: 20rem;
  max-width: 94vw;
  max-height: 96vh;
  overflow: auto;
}

#partner-modal .modal-dialog__body,
#product-modal .modal-dialog__body,
#order-modal .modal-dialog__body {
  padding: var(--spacing-4) var(--spacing-6);
}

#partner-modal .modal-dialog__header,
#product-modal .modal-dialog__header,
#order-modal .modal-dialog__header {
  padding: var(--spacing-3) var(--spacing-6);
}

.order-confirmation--modal {
  max-width: none;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.modal-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 0.0625rem solid var(--border-default);
  font-weight: var(--font-weight-semibold);
}

.modal-dialog__close {
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}

.modal-dialog__close:hover { color: var(--text-primary); }

.modal-dialog__body {
  padding: var(--spacing-6);
}

/* ============================================================
   Buttons, forms, misc (functional screens)
   ============================================================ */

/* Button system: primary / secondary / ghost / danger share size, radius and
   focus; colour comes only from the role tokens (DESIGN.md "Strong Accent"). */
.button-primary,
.button-ghost,
.button-danger,
.entity-form__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-4);
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}

.button-primary:hover,
.entity-form__actions button:hover {
  background: var(--color-accent-strong-hover);
}

.button-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.button-ghost:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.button-danger {
  background: var(--color-error-700);
}

.button-danger:hover {
  background: var(--color-error-800);
}

:is(.button-primary, .button-secondary, .button-ghost, .button-danger, .entity-form__actions button):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Primary page action (partner dashboard "Neue Bestellung"). */
.button-primary--hero {
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
}

.button-primary--hero svg {
  width: 1.125rem;
  height: 1.125rem;
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-4);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}

.button-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--color-neutral-400);
}

/* ============================================================
   Period picker ("Abrechnungszeitraum")
   ============================================================ */

.period-picker {
  position: relative;
  flex-shrink: 0;
}

.period-picker__button {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}

.period-picker__button:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.period-picker__button svg:first-child {
  width: 1rem;
  height: 1rem;
  color: var(--text-brand);
}

.period-picker__button .period-picker__caret {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--text-secondary);
}

.period-picker__panel {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  width: 16.25rem;
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 150;
}

.period-picker__panel.is-closed { display: none; }

.period-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.period-picker__presets button {
  padding: var(--spacing-1) var(--spacing-3);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
}

.period-picker__presets button:hover { background: var(--bg-subtle); }

.period-picker__presets button[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--text-brand);
}

.period-picker__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.period-picker__field label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.period-picker__field input[type="date"] {
  height: 2.25rem;
  padding: 0 var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

.period-picker__field input[type="date"]:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
}

.period-picker__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-1);
}

.period-picker__reset {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
}

.period-picker__reset:hover { color: var(--text-primary); }

.period-picker__apply {
  padding: var(--spacing-2) var(--spacing-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.period-picker__apply:hover { background: var(--color-accent-strong-hover); }



.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

/* Row actions stay quiet (outline, small) so the page keeps one main action. */
table button[data-edit-id],
.row-actions__secondary {
  min-height: 2rem;
  padding: var(--spacing-1) var(--spacing-3);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}

:is(table, li) .button-danger {
  min-height: 2rem;
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
}

table button[data-edit-id]:hover,
.row-actions__secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--color-neutral-400);
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
}

.list-header h1 {
  margin: 0;
}

.list-header button,
.list-header a {
  flex-shrink: 0;
  white-space: nowrap;
}

.list-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.customer-create-dialog {
  box-sizing: border-box;
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: auto;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  color: var(--text-primary);
  background: var(--surface-primary);
}

.customer-create-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.customer-create-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  margin-bottom: var(--spacing-4);
}

.customer-create-dialog__header h2 { margin: 0; }

form-field {
  display: block;
  min-width: 0;
}

.customer-create-dialog__header button {
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  line-height: 1;
}

.customer-create-status {
  margin-bottom: var(--spacing-4);
}

.entity-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 26.25rem;
  margin-top: var(--spacing-4);
}

/* Same room requirement inside the manual-order modal, which stacks the form and
   summary (the shared 42.5rem modal panel isn't wide enough for a side-by-side
   layout) - bounded by the modal panel's own width, not unbounded like above. */
#manual-order-form {
  max-width: none;
}

/* Same reasoning as #manual-order-form above: the wizard's "Neuer Endkunde"
   step has the full wizard-step width to work with, not the narrow single-column
   default .entity-form assumes elsewhere (e.g. the partner's own profile-edit form). */
#neuer-kunde-form {
  max-width: none;
}

.entity-form--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--spacing-3) var(--spacing-5);
  max-width: none;
  margin-top: 0;
}

.entity-form--grid .form-field--wide,
.entity-form--grid .checkbox-field,
.entity-form--grid .entity-form__actions,
.entity-form--grid .address-fields,
.entity-form--grid .partner-form__hint {
  grid-column: 1 / -1;
}

.partner-form__hint {
  margin: calc(-1 * var(--spacing-2)) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

/* Address sub-form (address-fields.js): 4 narrow fields (Hausnummer/PLZ/Ort/Land)
   fit on one row instead of two, so the address block - and forms built around
   it, like the partner edit overlay - need less vertical space overall. Spans
   the full row (above) so its own 4 columns divide the whole form width, not
   just one column of the outer 2-col grid - otherwise its min-content forces
   that outer column far wider than its 1fr sibling (classic nested-grid
   blowout: 1fr's implicit min-width is auto, i.e. the widest child min-content). */
.address-fields.entity-form--grid {
  grid-template-columns: repeat(4, 1fr);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.profile-readonly {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-2) var(--spacing-6);
  margin: var(--spacing-6) 0;
  font-size: var(--font-size-sm);
}

.profile-readonly dt {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.profile-readonly dd { margin: 0; }

.trade-proof-card {
  max-width: 52rem;
  margin-top: var(--spacing-8);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
}

.trade-proof-card h2 { margin-top: 0; }
.trade-proof-card__status { font-weight: var(--font-weight-semibold); }
.trade-proof-card__error { color: var(--color-error-700); }
#proof-review-form[hidden] { display: none !important; }

/* Company profile: shop legal texts (add-shop-legal-consent). */
.legal-texts {
  max-width: 52rem;
  margin-top: var(--spacing-8);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
}
.legal-texts h2 { margin-top: 0; }
.legal-texts__summary { margin: 0 0 var(--spacing-3); font-weight: var(--font-weight-semibold); }
.legal-texts__summary--missing { color: var(--color-warning-800); }
.legal-texts__summary--ok { color: var(--color-success-700); }
.legal-texts__format { margin-bottom: var(--spacing-2); color: var(--text-secondary); font-size: var(--font-size-sm); }
.legal-texts__format summary { cursor: pointer; font-weight: var(--font-weight-semibold); color: var(--text-label); min-height: 2.75rem; display: flex; align-items: center; }
.legal-texts__format ul { margin: 0 0 var(--spacing-2); padding-left: var(--spacing-5); }
.legal-texts__format code { font-family: var(--font-mono); font-size: 0.8125rem; }
.legal-texts__form { max-width: none; gap: var(--spacing-6); }
.legal-texts__field { gap: var(--spacing-1); }
.legal-texts__label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.legal-texts__hint { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); }
.legal-texts__field textarea { min-height: 10rem; font-size: var(--font-size-sm); line-height: 1.55; }
.legal-texts__count { justify-self: end; align-self: flex-end; color: var(--text-secondary); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.legal-texts__count--near { color: var(--color-warning-800); font-weight: var(--font-weight-semibold); }
.legal-texts__state {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.legal-texts__state:empty { display: none; }
.legal-texts__state--missing { background: var(--color-warning-100); color: var(--color-warning-800); }
.legal-texts__state--ok { background: var(--color-success-50); color: var(--color-success-700); }

/* Webshop status (partner "Mein Webshop", company "Webshop" dialog, partner table). */
.shop-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 0.125rem var(--spacing-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.shop-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
/* Signal colours, matching the order status badges: green = online, amber = deliberately not
   online (not released yet), red = unintentionally offline (company takedown, inactive
   partner, no available articles). */
/* Same green as the order status "Abgeschlossen". */
.shop-signal--online  { background: var(--status-fulfilled-bg); color: var(--status-fulfilled-text); }
/* No red order status exists; same light-fill/dark-text pattern in the error palette. */
.shop-signal--offline { background: var(--color-error-100); color: var(--color-error-800); }
/* Same yellow as the order status "Eingereicht". */
.shop-signal--warning { background: var(--status-submitted-bg); color: var(--status-submitted-text); }
/* Status could not be loaded: neutral, like the secondary row buttons. */
.shop-signal--unknown { background: var(--bg-surface); color: var(--text-primary); box-shadow: inset 0 0 0 0.0625rem var(--border-strong); }

/* Partner table row action "Webshop": same size as the neighbouring row buttons. */
.shop-action {
  padding: var(--spacing-1) var(--spacing-3);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-in-out);
}
.shop-action:hover { filter: brightness(0.9); }

.shop-panel {
  max-width: 52rem;
  margin-top: var(--spacing-6);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
}
.shop-panel--dialog {
  margin: 0;
  padding: 0;
  border: none;
}
.shop-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}
.shop-panel__head h2,
.shop-panel__head h3 { margin: 0; }
.shop-panel__head .shop-badge { font-size: var(--font-size-sm); padding: var(--spacing-1) var(--spacing-4); }
.shop-panel__hint { margin: var(--spacing-3) 0 0; color: var(--text-secondary); }
.shop-panel__env {
  margin: var(--spacing-3) 0 0;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--status-submitted-bg);
  color: var(--status-submitted-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.shop-panel__reason {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-left: 0.25rem solid var(--color-error-700);
  border-radius: var(--radius-md);
  background: var(--color-error-50);
  overflow-wrap: anywhere;
}
.shop-panel__details { margin: var(--spacing-4) 0 0; }
.shop-panel__details dd { overflow-wrap: anywhere; }
.shop-panel__section {
  margin-top: var(--spacing-5);
  padding-top: var(--spacing-4);
  border-top: 0.0625rem solid var(--border-default);
}
.shop-panel__section h4 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shop-panel__legal {
  margin: var(--spacing-3) 0 0;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-50);
  color: var(--color-warning-800);
  font-size: var(--font-size-sm);
}
.shop-panel__legal a { color: inherit; font-weight: var(--font-weight-semibold); }

.shop-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
}
.shop-panel__actions button:not(.row-actions__secondary),
.shop-panel__kennung button {
  padding: var(--spacing-2) var(--spacing-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.shop-panel__actions button:not(.row-actions__secondary):hover,
.shop-panel__kennung button:hover { background: var(--color-accent-strong-hover); }
.shop-panel__actions button.button-danger { background: var(--color-error-600); }
.shop-panel__actions button.button-danger:hover { background: var(--color-error-700); }
.shop-panel__actions .row-actions__secondary { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-sm); }
#shop-takedown-form { margin-top: var(--spacing-3); }
.shop-panel__kennung {
  display: flex;
  gap: var(--spacing-2);
}
.shop-panel__kennung input {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}
.shop-panel__kennung input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
}
.shop-panel__kennung + .partner-form__hint { margin-top: var(--spacing-2); }
.shop-panel__warning {
  margin: var(--spacing-2) 0 0;
  color: var(--color-warning-800);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.shop-panel [hidden],
#shop-takedown-form[hidden] { display: none !important; }

/* ============================================================
   Shop inquiries (partner inbox "Anfragen", shop-inquiries spec)
   ============================================================ */

/* Sub-item of "Mein Webshop" in the sidebar: indented under its parent, smaller icon. */
.app-sidebar__nav a.nav-sub {
  height: 2.5rem;
  padding-left: calc(var(--spacing-3) + 1.75rem);
}
.app-sidebar__nav a.nav-sub svg { width: 1rem; height: 1rem; }

.inquiry-views,
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin: var(--spacing-5) 0 var(--spacing-4);
  padding: 0.1875rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.inquiry-views__button,
.segmented__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: 2.25rem;
  padding: 0 var(--spacing-4);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: background var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out);
}
.inquiry-views__button:hover,
.segmented__button:hover { background: var(--bg-subtle); color: var(--text-primary); }
.inquiry-views__button[aria-pressed="true"],
.segmented__button[aria-pressed="true"] {
  background: var(--color-accent-light);
  color: var(--text-brand);
  box-shadow: inset 0 0 0 0.0625rem var(--color-accent);
}
.inquiry-views__button:focus-visible,
.segmented__button:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.inquiry-views__count { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); opacity: 0.85; }

.inquiry-list {
  max-width: 60rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.inquiry + .inquiry { border-top: 0.0625rem solid var(--border-default); }
.inquiry-list [hidden] { display: none !important; }

.inquiry__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--spacing-4);
  row-gap: 0.125rem;
  width: 100%;
  padding: var(--spacing-4) var(--spacing-5);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  text-align: left;
  transition: background var(--duration-fast) var(--ease-in-out);
}
.inquiry__summary:hover { background: var(--bg-subtle); }
.inquiry__summary:focus-visible { outline: none; box-shadow: inset 0 0 0 0.1875rem var(--border-focus); }
.inquiry--unread .inquiry__summary { background: var(--color-warning-50); }
.inquiry--unread .inquiry__summary:hover { background: var(--color-warning-100); }

.inquiry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1) var(--spacing-2);
  min-width: 0;
}
.inquiry__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}
.inquiry--unread .inquiry__name { font-weight: var(--font-weight-bold); }
.inquiry--done .inquiry__name { color: var(--text-secondary); }
.inquiry__date {
  margin-left: auto;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inquiry__preview {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inquiry__summary[aria-expanded="true"] .inquiry__preview { display: none; }
.inquiry__article { color: var(--color-neutral-700); font-weight: var(--font-weight-semibold); }
.inquiry__chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-secondary);
  transition: transform var(--duration-slow) var(--ease-out);
}
.inquiry__summary[aria-expanded="true"] .inquiry__chevron { transform: rotate(180deg); }

.inquiry__detail {
  padding: var(--spacing-1) var(--spacing-5) var(--spacing-5);
  animation: inquiry-open var(--duration-slow) var(--ease-out);
}
.inquiry__message {
  max-width: 70ch;
  margin: 0 0 var(--spacing-4);
  font-size: var(--font-size-base);
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.inquiry__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--spacing-1) var(--spacing-4);
  margin: 0 0 var(--spacing-5);
  font-size: var(--font-size-sm);
}
.inquiry__meta dt { color: var(--text-secondary); }
.inquiry__meta dd { margin: 0; overflow-wrap: anywhere; }
.inquiry__meta a { color: var(--text-brand); font-weight: var(--font-weight-semibold); }

.inquiry__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.inquiry__actions svg { width: 1rem; height: 1rem; }
.inquiry__delete { color: var(--color-error-700); }
.inquiry__delete:hover { background: var(--color-error-50); color: var(--color-error-800); }

.inquiry__confirm {
  padding: var(--spacing-3) var(--spacing-4);
  border: 0.0625rem solid var(--color-error-100);
  border-radius: var(--radius-md);
  background: var(--color-error-50);
}
.inquiry__confirm .button-danger {
  min-height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}
.inquiry__confirm p {
  margin: 0 0 var(--spacing-3);
  color: var(--color-error-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

@keyframes inquiry-open { from { opacity: 0; transform: translateY(-0.25rem); } }

@media (max-width: 40em) {
  .inquiry-views { display: flex; }
  .inquiry-views__button { flex: 1 1 0; justify-content: center; min-height: 2.75rem; padding: 0 var(--spacing-2); }
  .inquiry__summary { padding: var(--spacing-3) var(--spacing-4); }
  .inquiry__detail { padding: var(--spacing-1) var(--spacing-4) var(--spacing-4); }
  .inquiry__meta { grid-template-columns: 1fr; gap: 0; }
  .inquiry__meta dd + dt { margin-top: var(--spacing-2); }
  .inquiry__actions > * { flex: 1 1 auto; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .inquiry__detail { animation: none; }
  .inquiry__chevron { transition: none; }
}

/* ============================================================
   Toasts
   ============================================================ */

#toast-root {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  z-index: 500;
}

.toast-notice {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-md);
}

.toast-notice--info { background: var(--color-neutral-700); }
.toast-notice--success { background: var(--color-success-700); }
.toast-notice--error { background: var(--color-error-700); }

/* ============================================================
   Additions — functional screens not covered by the dashboard
   redesign (partner/product/order/import pages, login hint).
   Same token system as above, extended for parity.
   ============================================================ */

.app-shell--bare .app-sidebar,
.app-shell--bare .app-topbar {
  display: none;
}

.app-shell--bare .app-main {
  width: 100%;
}

.app-shell--bare .app-root {
  padding-top: var(--spacing-8);
}

.login-form h1 { margin-bottom: 0; }

.login-form__intro {
  margin: calc(var(--spacing-2) * -1) 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

/* Dismissible bookmark hint below the submit button (add-public-landing-page). */
.login-form__bookmark {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-3) var(--spacing-2) var(--spacing-3) var(--spacing-3);
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.login-form__bookmark[hidden] { display: none; }

.login-form__bookmark strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.login-form .login-form__bookmark-close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: -0.25rem 0 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}

.login-form .login-form__bookmark-close:hover {
  background: var(--color-accent-medium);
  color: var(--text-primary);
}

.login-form__bookmark-close svg { width: 1rem; height: 1rem; }

@media (pointer: coarse) {
  /* 44px touch target without enlarging the visual chip. */
  .login-form .login-form__bookmark-close { position: relative; }
  .login-form .login-form__bookmark-close::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
  }
}

.login-form__about {
  align-self: center;
  padding: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-brand);
  text-underline-offset: 0.2em;
}

fieldset {
  margin: 0 0 var(--spacing-6) 0;
  padding: var(--spacing-5);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

legend {
  padding: 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.radio-field {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.import-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-5);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-6);
}

.import-controls label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.import-controls select,
.import-controls input[type="file"] {
  height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.import-field-row {
  padding: var(--spacing-2) 0;
  border-bottom: 0.0625rem solid var(--border-default);
}

.import-field-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.import-field-row select {
  min-width: 12.5rem;
  height: 2.25rem;
  padding: 0 var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

/* Setting that belongs to the mapping row above it (price column: net or gross). */
.import-field-row--sub {
  padding-left: var(--spacing-5);
}

.import-field-row__hint {
  margin: var(--spacing-1) 0 0;
  max-width: 65ch;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.order-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.product-combobox {
  position: relative;
  flex: 1;
  min-width: 0;
}

.product-combobox__input {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.product-combobox__input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
}

.product-combobox__listbox {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--spacing-1));
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--spacing-1);
  list-style: none;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.product-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.product-combobox__option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-combobox__option-category {
  padding: 0.0625rem var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.product-combobox__option-price {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap;
}

.product-combobox__option-unavailable {
  color: var(--color-error-700);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.product-combobox__option:hover,
.product-combobox__option--active {
  background: var(--color-accent-light);
}

.product-combobox__option--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.product-combobox__option--disabled:hover {
  background: none;
}

.product-combobox__empty,
.product-combobox__hint {
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.order-line__unit-price,
.order-line__total {
  min-width: 5rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}

.order-line__total {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.order-lines-total {
  margin: var(--spacing-2) 0 0;
  padding-top: var(--spacing-2);
  border-top: 0.0625rem solid var(--border-default);
  text-align: right;
  font-family: var(--font-mono);
}

.order-summary {
  position: sticky;
  top: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.order-summary--empty {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.order-summary__total {
  margin-top: var(--spacing-3);
  font-family: var(--font-mono);
}

.order-summary__commission {
  margin-top: var(--spacing-1);
  color: var(--text-brand);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.order-summary__estimate-hint {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
}

/* ---- Gross/net prices (add-article-tax-rate) ----
   Gross is the price that counts and keeps the surrounding emphasis; the net value
   sits directly below in small, regular, muted type. One pattern everywhere:
   catalog, cart, lists, order details and the printed document. */
.price-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  line-height: 1.25;
  /* Money in tabular figures of the UI font (The Tabular Money Rule); mono stays for IDs. */
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.price-stack__gross {
  white-space: nowrap;
}

.price-stack__net,
.price-stack__tax {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.product-card__price .price-stack {
  align-items: flex-start;
}

.product-card__price .price-stack__gross {
  font-weight: var(--font-weight-semibold);
}

/* Item tables: price columns read right-aligned like every amount column. */
.order-items-table :is(th, td):nth-child(n + 3) {
  text-align: right;
}

/* Phones: item rows become stacked cards, so prices start at the left edge like the text above. */
@media (max-width: 39.9375em) {
  .order-items-table .price-stack { align-items: flex-start; }
}

/* Totals under item lists: gross line first and strongest, net and USt below it. */
.price-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-1) var(--spacing-6);
  max-width: 22rem;
  margin: var(--spacing-4) 0 var(--spacing-4) auto;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.price-totals dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.price-totals__label,
.price-totals__gross {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.price-totals__label .price-stack__tax {
  margin-left: var(--spacing-1);
}

.price-totals + .order-summary__commission {
  margin-top: var(--spacing-2);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Live net/USt split under the gross price input of the article form. */
.price-preview {
  display: block;
  margin-top: calc(-1 * var(--spacing-2));
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* ---- Product catalog + cart (partner-order-cart) ---- */

.back-link {
  display: inline-block;
  margin-bottom: var(--spacing-4);
  color: var(--text-brand);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.catalog__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.catalog__search {
  flex: 1;
  min-width: 12rem;
  height: 2.5rem;
  padding: 0 var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.catalog__category-filter {
  height: 2.5rem;
  padding: 0 var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

/* Horizontally-scrolling single row rather than a wrapping grid: with the
   "Übersicht"/cart-preview panel now owning its own column (article-step-layout
   below), a wrapping multi-row grid would fight that column for height. A
   fixed card width (.product-card) lets the row scroll instead. */
.catalog__grid {
  display: flex;
  gap: var(--spacing-4);
  overflow-x: auto;
  /* No padding-bottom reserved for the scrollbar here on purpose - that space
     is invisible (nothing draws a border there) but still counts as real
     height, so the catalog panel (and via grid stretch, the Warenkorb box
     beside it) ended up a few pixels taller than where the cards visibly end. */
}

.catalog__empty {
  flex: 1 1 auto;
  padding: var(--spacing-4) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.catalog__hint {
  flex: 0 0 auto;
  align-self: center;
  padding: var(--spacing-4);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.product-card {
  flex: 0 0 13rem;
  width: 13rem;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.product-card--disabled {
  opacity: 0.6;
}

/* A fixed height (not aspect-ratio, which made this 13rem tall at the card's
   own 13rem width) - a tall thumbnail is what forced the whole row (and thus
   article-step-layout's overflow:hidden fallback) to clip the add-to-cart
   button. A shorter, width-independent thumb keeps a full card comfortably
   inside the calculated row height instead of relying on clipping at all. */
.product-card__thumb {
  display: block;
  width: 100%;
  height: 7rem;
  /* contain, not cover: these product images are (roughly square) product
     shots/icons - cover scales a square image up to fill a much-wider-than-
     tall 7rem box, cropping off a large chunk of it (icons ending up
     cut-off/off-center). contain shows the whole image, letterboxed on the
     sides against the thumb's own background instead. */
  object-fit: contain;
  background: var(--color-neutral-100);
}

.product-card__thumb--empty {
  height: 7rem;
  background: var(--color-neutral-100);
}

.product-card__body {
  /* flex:1 so the body (not the button) absorbs the height difference between
   cards whose name/category text wraps to different line counts - keeps the
   add-to-cart button's own bottom edge aligned across every card in the row,
   instead of it drifting up/down depending on that card's own text length. */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-3);
}

/* Always exactly 2 lines tall, regardless of the actual name length - a short
   name leaves the second line blank, a long one is clamped with an ellipsis.
   Keeps every card's name block the same height (on top of .product-card__body's
   flex:1 fix above) instead of varying 1-2 lines by name length. */
.product-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.product-card__category {
  align-self: flex-start;
  padding: 0.0625rem var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}

.product-card__price {
  font-family: var(--font-mono);
  color: var(--text-brand);
}

/* Stacked, not side-by-side: at the card's own width, a side-by-side qty input
   left the button too little room for its own text ("In den Warenkorb"),
   overflowing it. Stacking removes the width contest entirely - both children
   fill the row's full width (column-flex default: align-items stretch). */
.product-card__add-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0 var(--spacing-3) var(--spacing-3);
}

.product-card__qty {
  height: 2.25rem;
  padding: 0 var(--spacing-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

.product-card__add-row .product-card__add-btn {
  margin: 0;
}

.product-card__add-btn {
  margin: 0 var(--spacing-3) var(--spacing-3);
}

.product-card__add-btn:disabled {
  background: var(--color-neutral-300);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.cart {
  position: sticky;
  top: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cart__empty {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.cart-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: 0.0625rem solid var(--border-default);
}

.cart-line:last-child {
  border-bottom: none;
}

.cart-line__thumb {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cart-line__thumb--empty {
  background: var(--color-neutral-100);
  border: 0.0625rem solid var(--border-default);
}

.cart-line__name {
  flex: 1;
  min-width: 8rem;
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

.cart-line__unit-price {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.cart-line__quantity {
  width: 3.5rem;
  flex-shrink: 0;
  height: 2rem;
  padding: 0 var(--spacing-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

.cart-line__total {
  flex-shrink: 0;
  min-width: 4rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: right;
  white-space: nowrap;
}

.cart-line__remove {
  flex-shrink: 0;
  padding: var(--spacing-1) var(--spacing-2);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--color-error-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

/* Read-only equivalent of .cart-line (Übersicht step - no quantity input,
   no remove button, see cartSummaryHtml). */
.cart-summary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: 0.0625rem solid var(--border-default);
}

.cart-summary-line:last-child {
  border-bottom: none;
}

.cart-summary-line__thumb {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cart-summary-line__thumb--empty {
  background: var(--color-neutral-100);
  border: 0.0625rem solid var(--border-default);
}

.cart-summary-line__name {
  flex: 1;
  min-width: 8rem;
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

.cart-summary-line__qty {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.cart-summary-line__total {
  flex-shrink: 0;
  min-width: 4rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: right;
  white-space: nowrap;
}

.kunde-details {
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.kunde-details__heading {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.kunde-details__name {
  margin: 0;
  font-weight: var(--font-weight-medium);
}

.kunde-details__address,
.kunde-details__contact {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.cart__totals {
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-2);
  border-top: 0.0625rem solid var(--border-default);
}

.cart__submit-btn {
  width: 100%;
  margin-top: var(--spacing-4);
  padding: var(--spacing-3);
}

/* ---- Order wizard: checkpoint bar, step transitions, confetti (partner-order-wizard) ---- */

.wizard-progress {
  margin: 0 0 var(--spacing-6);
}

.wizard-progress__text {
  margin: var(--spacing-2) 0 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.wizard-progress__text strong {
  color: var(--text-primary);
}

.wizard-checkpoints {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-2);
}

.wizard-checkpoint {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Connector line leading into this checkpoint, spanning from the previous
   marker's center to this one's (both centered in their equal-width flex
   items) — 1.375rem = spacing-2 padding-top + half the 1.75rem marker.
   The grey line is the track; the accent line on top animates in (scaleX)
   once this checkpoint is reached. */
.wizard-checkpoint:not(:first-child)::before,
.wizard-checkpoint:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 1.375rem;
  left: -50%;
  width: 100%;
  height: 0.125rem;
}

.wizard-checkpoint:not(:first-child)::before {
  /* Deliberately a plain, desaturated grey rather than var(--border-strong) —
     this app's whole neutral scale is green-tinted (brand consistency), which
     reads as "too green" right next to the solid accent-green fill on top. */
  background: #c7c7c7;
}

.wizard-checkpoint:not(:first-child)::after {
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.wizard-checkpoint--current:not(:first-child)::after,
.wizard-checkpoint--done:not(:first-child)::after {
  transform: scaleX(1);
}

/* A CSS `transition` never plays here — the checkpoint bar is fully replaced
   (innerHTML) on every step change, so an already-"done" segment is inserted
   pre-filled with no prior frame to transition from. A keyframe animation runs
   regardless of that (it animates a freshly-inserted element's own timeline),
   so the fill-in plays only once, for the segment that *just* became done. */
.wizard-checkpoint--just-done:not(:first-child)::after {
  /* Noticeably slower than --duration-slow (250ms, tuned for ordinary hover/
     focus transitions) - a "please notice this" completion cue needs to be
     visible, not just technically present. */
  animation: wizard-line-fill 700ms var(--ease-out) both;
}

@keyframes wizard-line-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.wizard-checkpoint__btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-1);
  border: none;
  background: none;
  font-family: var(--font-sans);
  cursor: default;
}

.wizard-checkpoint--done .wizard-checkpoint__btn {
  cursor: pointer;
}

.wizard-checkpoint__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 0.125rem solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  transition: background var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out);
}

.wizard-checkpoint__label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Done = filled strong accent with ✓; current = white circle, strong border and
   soft ring (decision 4B) - the two never look alike. */
.wizard-checkpoint--done .wizard-checkpoint__marker {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
  color: var(--text-inverse);
}

.wizard-checkpoint--current .wizard-checkpoint__marker {
  border-color: var(--color-accent-strong);
  background: var(--bg-surface);
  color: var(--color-accent-strong);
  box-shadow: 0 0 0 0.25rem var(--color-accent-light);
}


.wizard-checkpoint--current .wizard-checkpoint__label,
.wizard-checkpoint--done .wizard-checkpoint__label {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.wizard-checkpoint--current .wizard-checkpoint__label {
  font-weight: var(--font-weight-bold);
}

/* Solid muted colors, not opacity: the marker's circle must stay fully opaque
   (opacity would make its solid --bg-surface background translucent, letting
   the connector line underneath show through it - the "line shines through
   the pill" bug). Scoped to marker+label only, so the connector-line track
   itself stays the same color everywhere, regardless of checkpoint state. */
.wizard-checkpoint--unused .wizard-checkpoint__marker,
.wizard-checkpoint--unused .wizard-checkpoint__label {
  color: var(--text-disabled);
}

.wizard-checkpoint--unused .wizard-checkpoint__marker {
  border-color: var(--border-default);
}

.wizard-checkpoint--just-done .wizard-checkpoint__marker {
  /* See the connector-line animation above for why this needs a longer,
     dedicated duration instead of --duration-slow. */
  animation: wizard-checkmark-pop 700ms var(--ease-out);
}

@keyframes wizard-checkmark-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.wizard-step {
  animation: wizard-step-in var(--duration-slow) var(--ease-out);
}

@keyframes wizard-step-in {
  from { opacity: 0; transform: translateX(0.75rem); }
  to { opacity: 1; transform: translateX(0); }
}

.wizard-step__description {
  margin: 0 0 var(--spacing-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.wizard-step__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
}

/* "Endkunde wählen" step: click-to-select list of own Endkunden, filtered by
   the search field above it. Scrolls internally so a long customer list
   doesn't push the step's action buttons off-screen. */
.kunde-list-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-top: var(--spacing-3);
}

.kunde-list-field__label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-neutral-700);
}

.kunde-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-1);
  max-height: 16rem;
  overflow-y: auto;
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

.kunde-list__row {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.kunde-list__row:hover { background: var(--color-neutral-100); }

.kunde-list__row:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.kunde-list__row.is-selected {
  background: var(--color-accent-light);
  color: var(--text-brand);
  font-weight: var(--font-weight-semibold);
}

/* "Artikel wählen" step: catalog (left, fixed width) + cart preview (right,
   remaining width). minmax(0, 1fr) is required, not just 1fr - it's what lets
   .catalog__grid's overflow-x:auto actually clip/scroll instead of the grid
   track growing to fit its content and blowing out the column.
   Deliberately NO explicit height here (an earlier version guessed a fixed/
   calc'd value - it went out of sync with the catalog's real height the
   moment that height changed, e.g. when the card thumbnail size changed,
   making the two columns visibly mismatched again). Leaving the row "auto"
   makes the catalog's own natural content (toolbar + one card row) the actual
   source of truth - align-items: stretch (the grid default) then stretches
   .cart--preview to match THAT, so the two columns can't go out of sync no
   matter what changes the catalog's height later. */
.produkte-step-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--spacing-5);
}

/* Header (heading) and footer (totals) stay fixed; only the lines in between
   scroll - so the box always matches the catalog's height instead of growing
   with the cart, and "Gesamtwert" never scrolls out of view. */
.cart--preview {
  /* Overrides .cart's position:sticky - height already matches the catalog
     column exactly (see article-step-layout above), so there's no extra
     scroll room within the row for "stick while scrolling" to make sense. */
  position: static;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Grid items default to min-height:auto (their own content's natural
     minimum), which wins over an explicit height whenever the container is
     shorter than that - the row then renders at the *content* height instead
     of the requested one, .cart--preview's height:100% resolves against the
     (too-small) requested height instead of what actually got rendered, and
     the mismatch reads as the box overflowing past its own bottom edge into
     whatever sits below it. min-height:0 removes that floor so shrinking the
     row (article-step-layout's calc() above) actually shrinks this box too. */
  min-height: 0;
  overflow: hidden;
}

/* Same min-height:0 reasoning as .cart--preview - without it, a full card row
   forces article-step-layout's row back up to its own natural height on a
   short viewport regardless of the calc() above, which is what desynced
   .cart--preview's height:100% from the row's actual rendered size. overflow:
   hidden is the fallback for the (much rarer) case where even one card row
   still doesn't fit - clips it rather than letting it spill into the buttons below. */
.produkte-catalog-panel {
  min-height: 0;
  overflow: hidden;
}

.cart-preview__heading {
  flex: 0 0 auto;
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.cart--preview .cart-step-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cart--preview .cart__lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cart--preview .cart__totals {
  flex: 0 0 auto;
}

/* "Übersicht" step: Endkunde details (left) + cart summary (right), side by
   side - align-items: start (not stretch, unlike article-step-layout above)
   since there's no shared reference height to match here; each box just sizes
   itself, and .cart--summary below caps/scrolls independently so a long cart
   doesn't grow the page instead of the box. */
.uebersicht-layout {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-5);
}

.cart--summary {
  display: flex;
  flex-direction: column;
  /* Same reasoning as .article-step-layout above, chrome total ≈ 27.5rem here
     (this step's two-line description is a bit taller). */
  max-height: min(24rem, calc(100vh - 27.5rem));
}

.cart--summary .cart-summary__lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cart--summary .cart__totals {
  flex: 0 0 auto;
}

.confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1000;
}

/* Per-piece width/height/--confetti-drift/animation-delay/animation-duration
   come from inline style (randomized in JS) - only the shared timing curve and
   fall distance live here. 115vh (not a fixed rem distance) guarantees every
   piece falls past the bottom of the viewport regardless of screen height. */
.confetti-piece {
  position: absolute;
  top: -5%;
  border-radius: var(--radius-sm);
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

.confetti-piece--0 { background: var(--color-primary-500); }
.confetti-piece--1 { background: var(--color-accent-600); }
.confetti-piece--2 { background: var(--color-warning-600); }
.confetti-piece--3 { background: var(--color-secondary-600); }
.confetti-piece--4 { background: var(--color-error-500); }

@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--confetti-drift, 0), 115vh) rotate(720deg); opacity: 0; }
}

/* Respect the OS/browser motion preference across the whole app — the wizard's
   step-transition/checkmark/confetti animations above, plus every existing
   duration/easing-variable-based transition (sidebar drawer, buttons, inputs, ...). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.order-line input[type="number"] {
  width: 5rem;
  height: 2.5rem;
  padding: 0 var(--spacing-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
}

.order-line .remove-line-btn {
  padding: var(--spacing-2) var(--spacing-3);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--color-error-700);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

#add-line-btn {
  align-self: flex-start;
  padding: var(--spacing-2) var(--spacing-4);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.order-confirmation {
  max-width: 40rem;
  padding: var(--spacing-6);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Scoped to the "Erfolg" step only (not the company's use of the same card in
   a modal, nor its markup in order-form.js, which stays untouched).
   max-width: none - full step width, same as every other step's layout.
   A grid (not flex) so the print button can be explicitly placed directly
   under .print-document specifically - it can't actually become a DOM child
   of .print-document (router.js's print handler reads
   `printButton.previousElementSibling` and requires that to BE
   .print-document, not an ancestor several levels up), so this is a CSS-only
   "looks like one box" trick: zero row-gap between print-document and the
   button (own margin-top below cancels the grid gap) plus matching
   borders/radius on touching edges, while column 2 (.simulated-email) stays a
   fully separate box. max-height/overflow-y stays - the bill + e-mail
   together can still be taller than the viewport once the checkpoint bar/
   description/actions are also on screen. */
.wizard-step--erfolg .order-confirmation {
  max-width: none;
  max-height: 60vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-5);
  /* The outer card chrome (padding/border/shadow) is reset here - .print-document
     and .simulated-email below are the two visible boxes now, laid directly in
     the step like every other step's sibling boxes; an outer card around both
     would just nest a box inside a box. */
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.wizard-step--erfolg .order-confirmation > h2 {
  grid-column: 1 / -1;
  margin: 0;
}

/* .print-document has no box styling of its own elsewhere (it's just the
   printable region, per the print-root cloning note below) - added here only,
   so it reads as its own box. Flat bottom (no border/radius there) since the
   print button attaches flush underneath it, below. */
.wizard-step--erfolg .order-confirmation .print-document {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sm);
}

/* Styled as the bill box's own footer bar: same column, next row, negative
   margin-top cancels the grid's row-gap so it sits flush against
   .print-document's (border-less) bottom edge instead of floating separately. */
.wizard-step--erfolg .order-confirmation .print-button {
  grid-column: 1;
  grid-row: 3;
  margin-top: calc(-1 * var(--spacing-5));
  padding: var(--spacing-3) var(--spacing-5);
  width: 100%;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
  border: 0.0625rem solid var(--border-default);
  border-top: 0.0625rem dashed var(--border-strong);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-fast) var(--ease-in-out);
}

.wizard-step--erfolg .order-confirmation .print-button:hover {
  background: var(--color-neutral-200);
}

.wizard-step--erfolg .order-confirmation .simulated-email {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-top: 0;
}

.simulated-email {
  margin-top: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-5);
  background: var(--bg-subtle);
  border: 0.0625rem dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.simulated-email p {
  margin: var(--spacing-1) 0;
  font-size: var(--font-size-sm);
}

#order-content #new-order-btn {
  margin-top: var(--spacing-5);
}

/* ============================================================
   Responsive — off-canvas sidebar (tablet/mobile) + fluid layout
   All breakpoints in em (not px/rem) so they track the browser's
   own text-zoom setting, not just the root font-size token.
   ============================================================ */

.app-topbar__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: auto;
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
}

.app-topbar__menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.app-shell__backdrop {
  display: none;
}

@media (max-width: 61.9375em) {
  /* Sidebar becomes an off-canvas drawer instead of a fixed flex column —
     .app-main can then take the full viewport width on tablet/mobile. */
  .app-shell {
    position: relative;
    overflow-x: hidden;
  }

  .app-sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 500;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-in-out);
    box-shadow: var(--shadow-xl);
  }

  .app-shell.nav-open .app-sidebar {
    transform: translateX(0);
  }

  .app-shell__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-in-out);
  }

  .app-shell.nav-open .app-shell__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .app-topbar__menu-toggle {
    display: inline-flex;
  }

  :root {
    --content-padding: 1rem;
  }
}

@media (max-width: 47.9375em) {
  /* Date range filter wraps instead of pushing past the viewport. */
  .data-table__filter--daterange { flex-wrap: wrap; }
  .data-table__filter--daterange input { flex: 1 1 8rem; min-width: 0; }

  /* Touch targets: at least 44px on phones. */
  .button-primary,
  .button-secondary,
  .button-ghost,
  .button-danger,
  .entity-form__actions button,
  .row-actions__secondary,
  table button[data-edit-id],
  .form-field input,
  .form-field select,
  .data-table__search,
  .data-table__filter select,
  .period-picker__button {
    min-height: 2.75rem;
  }

  /* Two-column entity forms and the wide month-chart card both assume room
     a phone viewport doesn't have — collapse to a single column so nothing
     forces horizontal overflow of .app-root. */
  .entity-form--grid {
    grid-template-columns: 1fr;
  }

  .metric-row {
    grid-template-columns: 1fr;
  }

  .metric-row > .month-chart-card {
    grid-column: 1;
  }

  .order-line {
    flex-wrap: wrap;
  }

  .order-summary {
    position: static;
  }

  .cart {
    position: static;
  }

  .produkte-step-layout {
    grid-template-columns: 1fr;
  }

  .uebersicht-layout {
    grid-template-columns: 1fr;
  }

  .product-card {
    flex-basis: 10.5rem;
    width: 10.5rem;
  }

  .wizard-checkpoint__label {
    display: none;
  }

  .wizard-checkpoints {
    gap: var(--spacing-1);
  }

  .app-root h1 {
    font-size: var(--font-size-2xl);
  }
}

/* Print: order document (Auftragsbeleg, add-order-document-print).
   .print-document wraps the printable part of a confirmation/details view,
   often nested inside a modal-dialog. A naive "hide everything else, promote
   .print-document via position:absolute" does not work reliably for long
   documents: pagination is computed from the (still in-flow, merely
   invisible) surrounding page, not from the absolutely-positioned overlay,
   silently truncating anything past that unrelated page's height. Instead,
   router.js clones .print-document's content into a fresh #print-root
   (a plain top-level sibling of #app-shell, appended on `beforeprint` and
   removed on `afterprint`) so the printed content is a normal, unconstrained
   flow with correct multi-page pagination regardless of length or DOM depth.
   .print-only elements (letterhead, the confirmation's commission line) stay
   hidden on screen and are revealed only inside the print clone. */
.print-only {
  display: none;
}

#print-root {
  display: none;
}

@media print {
  /* A modal is very often still "open" (in JS state) while printing from it -
     body.modal-open's position:fixed + overflow:hidden (scroll-lock, see its
     own comment above) would otherwise cap the printable area to one
     viewport-sized page regardless of #print-root's real height. */
  body.modal-open {
    position: static;
    overflow: visible;
  }

  body > *:not(#print-root) {
    display: none !important;
  }

  #print-root {
    display: block !important;
  }

  .print-only {
    display: block;
  }

  .print-letterhead {
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 0.125rem solid var(--text-primary);
  }

  .print-letterhead__brand {
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: var(--letter-spacing-tight);
  }

  .print-letterhead__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-1);
  }

  .print-letterhead__meta {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
  }

  .print-letterhead__order-no {
    font-family: var(--font-mono);
  }

  @page {
    margin: 18mm;
  }

  table {
    break-inside: auto;
  }

  tr {
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }
}

/* Partner login bindings dialog (bind-partner-login-to-oidc-subject) */
.login-list {
  list-style: none;
  margin: var(--spacing-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.login-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.login-list__item code {
  overflow-wrap: anywhere;
}

.login-list__item--revoked {
  color: var(--text-secondary);
  text-decoration: line-through;
}

/* ============================================================
   Shop builder ("Mein Webshop", add-shop-builder-editor)
   Desktop and tablet only (>= 768 px); below that a hint.
   ============================================================ */

/* Full-screen routes (router "fullscreen"): no portal sidebar/topbar, full width. */
.app-shell--fullscreen .app-sidebar,
.app-shell--fullscreen .app-topbar { display: none; }
.app-shell--fullscreen .app-root { max-width: none; padding: 0; }

shop-builder {
  --builder-canvas: color-mix(in srgb, var(--color-neutral-300) 55%, var(--color-neutral-100));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-surface);
}
shop-builder [hidden] { display: none !important; }

.builder-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--bg-surface);
  border-bottom: 0.0625rem solid var(--border-default);
}
.builder-header__spacer { flex: 1; }
.builder-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 2.25rem;
  padding: 0 var(--spacing-3);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.builder-back:hover { background: var(--bg-subtle); }
.builder-back svg { width: 1rem; height: 1rem; }
shop-builder .builder-header__title { margin: 0; font-size: var(--font-size-lg); line-height: 1.3; }

.builder {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.builder-small {
  margin: var(--spacing-6) var(--spacing-4);
  max-width: 52rem;
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
}
.builder-small a { overflow-wrap: anywhere; }

/* Editor tabs as a segmented control in the header row. */
.builder-tabs {
  display: flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.builder-tabs button {
  height: 1.875rem;
  padding: 0 var(--spacing-4);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.builder-tabs button:hover { color: var(--text-primary); }
.builder-tabs button[aria-selected="true"] {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.builder-pagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2) var(--spacing-3);
  padding: 0.375rem var(--spacing-4);
  border-bottom: 0.0625rem solid var(--border-default);
  background: var(--bg-surface);
}
.builder-pagebar .button-primary,
.builder-pagebar .button-secondary { height: 2rem; padding-top: 0; padding-bottom: 0; }
.builder-pagebar select { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
.builder-pagebar__select {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
}
.builder-pagebar select,
.builder-props select,
.builder-props input[type="text"],
.builder-props input[type="email"],
.builder-props input[type="tel"],
.builder-props textarea {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
}
.builder-pagebar select { width: auto; min-width: 12rem; }
.builder-pagebar__state { color: var(--text-secondary); font-size: var(--font-size-sm); }
.builder-pagebar__spacer { flex: 1; }
.builder-save { font-size: var(--font-size-sm); color: var(--text-secondary); }
.builder-save[data-status="error"],
.builder-save[data-status="conflict"] { color: var(--color-error-600); font-weight: var(--font-weight-semibold); }
.builder[data-tab="pages"] .builder-pagebar,
.builder[data-tab="images"] .builder-pagebar,
.builder[data-tab="design"] .builder-pagebar { display: none; }

.builder-icon {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--spacing-2);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
}
.builder-icon:hover:not(:disabled) { background: var(--bg-subtle); }
.builder-icon:disabled { opacity: 0.4; cursor: default; }

.builder-device { display: inline-flex; border: 0.0625rem solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.builder-device button {
  height: 2rem;
  padding: 0 var(--spacing-3);
  border: none;
  background: var(--bg-surface);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
}
.builder-device button[aria-pressed="true"] { background: var(--color-accent-strong); color: var(--text-inverse); }

.builder-body {
  --left-col: minmax(15rem, 19rem);
  --right-col: minmax(16rem, 20rem);
  flex: 1;
  display: grid;
  grid-template-columns: var(--left-col) minmax(0, 1fr) var(--right-col);
  min-height: 36rem;
}
.builder[data-left-collapsed] .builder-body { --left-col: 2.5rem; }
.builder[data-right-collapsed] .builder-body { --right-col: 2.5rem; }
.builder[data-tab="design"] .builder-body { grid-template-columns: var(--left-col) minmax(0, 1fr); }
.builder[data-tab="design"] .builder-right,
.builder[data-tab="pages"] .builder-right,
.builder[data-tab="images"] .builder-right,
.builder[data-tab="pages"] .builder-preview,
.builder[data-tab="images"] .builder-preview { display: none; }
.builder[data-tab="pages"] .builder-body,
.builder[data-tab="images"] .builder-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }

/* Tablet: properties move below the preview. */
@media (max-width: 1199px) {
  .builder-body { grid-template-columns: var(--left-col) minmax(0, 1fr); }
  .builder-right { grid-column: 1 / -1; }
}

.builder-left,
.builder-right { min-width: 0; }
/* Sidebars are white panels next to the tinted canvas in the middle. */
.builder-left,
.builder-right {
  padding: var(--spacing-4);
  background: var(--bg-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.builder-left { border-right: 0.0625rem solid var(--border-default); }
.builder-right { border-left: 0.0625rem solid var(--border-default); }
.builder[data-left-collapsed] .builder-left,
.builder[data-right-collapsed] .builder-right { padding: var(--spacing-2) var(--spacing-1); }
.builder[data-tab="pages"] .builder-left,
.builder[data-tab="images"] .builder-left { border-right: 0; max-width: 64rem; }

/* Desktop: the editor fills the window exactly; panels and preview scroll on their own. */
@media (min-width: 1200px) {
  shop-builder { height: 100vh; min-height: 0; overflow: hidden; }
  .builder { min-height: 0; }
  .builder-body { flex: 1; min-height: 0; }
  .builder-left,
  .builder-right,
  .builder-preview { min-height: 0; height: 100%; }
}
@media (max-width: 1199px) {
  .builder-right { border-left: 0; border-top: 0.0625rem solid var(--border-default); }
}

.builder-panel__title { margin: var(--spacing-3) 0 var(--spacing-2); font-size: var(--font-size-base); }
.builder-panel__title:first-child { margin-top: 0; }
.builder-hint { margin: var(--spacing-1) 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.builder-empty { color: var(--text-secondary); font-size: var(--font-size-sm); }
.builder-error { color: var(--color-error-600); }
.builder-required { color: var(--text-secondary); font-weight: normal; font-size: var(--font-size-xs); }
.builder-counter { color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: normal; }

/* Collapsible sidebars: the toggle stays visible as a narrow strip. */
.builder-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--spacing-2);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.builder-collapse:hover { background: var(--bg-subtle); color: var(--text-primary); }
.builder-collapse svg { width: 1rem; height: 1rem; }
.builder-right .builder-collapse { float: right; margin-left: var(--spacing-2); }
/* The toggle stays reachable while the sidebar content scrolls. */
.builder-left .builder-collapse,
.builder-right .builder-collapse { position: sticky; top: 0; z-index: 1; }
.builder[data-left-collapsed] .builder-left > :not(.builder-collapse),
.builder[data-right-collapsed] .builder-right > :not(.builder-collapse) { display: none; }
.builder[data-left-collapsed] .builder-left,
.builder[data-right-collapsed] .builder-right { overflow: visible; padding: 0; }
.builder[data-right-collapsed] .builder-right .builder-collapse { float: none; margin-left: 0; }

.side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-1);
  padding: 0.1875rem;
  margin-bottom: var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.side-tabs button {
  padding: var(--spacing-2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.side-tabs button[aria-selected="true"] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.side-tabs__count { color: var(--text-secondary); font-weight: normal; }

.builder-palette { list-style: none; margin: var(--spacing-2) 0 0; padding: 0; display: grid; gap: var(--spacing-2); }
.palette-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: grab;
  text-align: left;
  font: inherit;
}
.palette-item:hover,
.palette-item:focus-visible { border-color: var(--color-accent); background: var(--color-accent-light); }
.palette-item__text { flex: 1; min-width: 0; display: grid; gap: 0.125rem; }
.palette-item__label { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.palette-item__desc { color: var(--text-secondary); font-size: var(--font-size-xs); }
.palette-item__add {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--color-accent-medium);
  color: var(--text-brand);
}
.palette-item:hover .palette-item__add { background: var(--color-accent-strong); color: var(--text-inverse); }
.palette-item__add svg { width: 1rem; height: 1rem; }

/* Hover preview of a palette entry: the block rendered by the shop at 30 %. */
.palette-preview {
  position: fixed;
  z-index: 50;
  width: calc(1280px * 0.3 + 2 * var(--spacing-2));
  padding: var(--spacing-2);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xl);
  pointer-events: none;
}
.palette-preview[hidden] { display: none; }
/* Invisible until drawn and measured; then it fades in once at its final size. */
.palette-preview:not(.is-ready) { visibility: hidden; }
.palette-preview.is-ready { animation: palette-preview-in var(--duration-fast, 150ms) ease-out; }
@keyframes palette-preview-in { from { opacity: 0; } to { opacity: 1; } }
.palette-preview__title { margin: 0 0 var(--spacing-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.palette-preview__viewport { width: calc(1280px * 0.3); height: 7.5rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.palette-preview__viewport iframe { width: 1280px; height: 400px; border: 0; transform: scale(0.3); transform-origin: 0 0; }

/* Drop target while a palette entry is dragged over the preview. */
.builder-drop-layer { position: absolute; inset: 0; z-index: 2; border: 0.125rem dashed var(--color-accent); }
/* Insertion marker: thick bar with white halo and a label, visible on any shop colour. */
.builder-drop-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.375rem;
  margin-top: -0.1875rem;
  background: var(--color-accent-strong);
  box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.95), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.builder-drop-line::after {
  content: "Hier einfügen";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-accent-strong);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.95);
}
.builder-drop-layer[hidden],
.builder-drop-line[hidden] { display: none; }

.block-list,
.page-manager__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-2); }
.block-row,
.page-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.block-row.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 0.125rem var(--color-accent-medium); }
.block-row.is-dragging,
.page-row.is-dragging { opacity: 0.5; }
.block-row.is-drop-target,
.page-row.is-drop-target { border-color: var(--color-accent); border-style: dashed; }
.block-row { flex-wrap: wrap; }
.block-row__select {
  flex: 1 1 9rem;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--spacing-2);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  padding: 0;
}
.block-row__handle,
.page-row__handle { color: var(--text-secondary); cursor: grab; grid-row: span 2; align-self: center; }
.block-row__label { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.block-row__summary { color: var(--text-secondary); font-size: var(--font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-row__actions,
.page-row__actions { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-1); justify-content: flex-end; }

/* Canvas: the preview floats as a browser window on a tinted, dotted surface. */
.builder-preview {
  min-width: 0;
  display: flex;
  padding: var(--spacing-3);
  background-color: var(--builder-canvas);
  background-image: radial-gradient(color-mix(in srgb, var(--color-neutral-500) 35%, transparent) 0.0625rem, transparent 0.0625rem);
  background-size: 1.25rem 1.25rem;
  box-shadow: inset 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06);
}
.builder-frame {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  min-height: 30rem;
  border-radius: 0.625rem;
  background: white;
  box-shadow: 0 0 0 0.0625rem rgba(15, 23, 20, 0.08), 0 1.25rem 3rem -0.75rem rgba(15, 23, 20, 0.35);
  overflow: hidden;
  transition: max-width var(--duration-fast) var(--ease-in-out);
}
/* Phone: real proportions (390 x 844); on a short canvas it shrinks, keeping the ratio. */
.builder-frame[data-device="mobile"] {
  align-self: center;
  width: auto;
  height: min(100%, 52.75rem);
  max-width: 24.375rem;
  min-height: 0;
  aspect-ratio: 390 / 844;
  border-radius: 2.25rem;
  border: 0.5rem solid #1f2328;
  box-shadow: 0 0 0 0.0625rem #3d434a, 0 1.5rem 3rem -0.75rem rgba(15, 23, 20, 0.45);
}
.builder-frame[data-device="mobile"] .builder-frame__bar { display: none; }
.builder-frame[data-device="mobile"] .builder-frame__screen { border-radius: 1.75rem; overflow: hidden; }
.builder-frame__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: #eef1f3;
  border-bottom: 0.0625rem solid #dde2e6;
}
.builder-frame__dots { display: inline-flex; gap: 0.375rem; }
.builder-frame__dots i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: #c9cfd5; }
.builder-frame__dots i:nth-child(1) { background: #ff6159; }
.builder-frame__dots i:nth-child(2) { background: #ffbd2e; }
.builder-frame__dots i:nth-child(3) { background: #28c941; }
.builder-frame__url {
  flex: 1;
  min-width: 0;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0.25rem var(--spacing-3);
  border-radius: 999px;
  background: white;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-frame__screen { position: relative; flex: 1; min-height: 0; display: flex; }
.builder-frame iframe {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 30rem;
  border: 0;
  background: white;
}
@media (min-width: 1200px) {
  .builder-frame iframe { min-height: 0; }
}

.builder-props { display: grid; gap: var(--spacing-3); }
.builder-props__group { margin: var(--spacing-3) 0 0; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.builder-field { display: grid; gap: var(--spacing-1); }
.builder-field label { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.builder-field--check { grid-template-columns: auto 1fr; align-items: center; }
.builder-field .builder-counter { justify-self: end; }
.builder-image { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
.builder-image__thumb { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius-sm); border: 0.0625rem solid var(--border-default); }
.builder-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-1); }
.builder-articles li { display: flex; align-items: center; gap: var(--spacing-1); font-size: var(--font-size-sm); }
.builder-articles li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.builder-color {
  display: grid;
  grid-template-columns: 1fr 2.5rem 6rem;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}
.builder-color label { font-weight: var(--font-weight-semibold); }
.builder-color input[type="color"] { width: 2.5rem; height: 2rem; padding: 0; border: 0.0625rem solid var(--border-strong); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.builder-color input[type="text"] { font-family: var(--font-mono, monospace); text-transform: uppercase; padding: var(--spacing-1) var(--spacing-2); }
.builder-color .builder-hint { grid-column: 1 / -1; margin: 0; font-size: var(--font-size-xs); }
.builder-color:not(.is-overridden) input { opacity: 0.7; }
.builder-props__reset { justify-self: start; }

.design-publish {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 0.0625rem solid var(--border-default);
  display: grid;
  gap: var(--spacing-2);
}
.design-publish__state { margin: 0; font-size: var(--font-size-sm); }
.design-publish .button-primary:disabled,
.builder-pagebar .button-primary:disabled { opacity: 0.5; cursor: default; }

.page-manager__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.page-manager__limits { margin: 0; }
.page-manager__list { margin-top: var(--spacing-3); }
.page-row { padding: var(--spacing-3); cursor: grab; }
.page-row__main { flex: 1; min-width: 0; display: grid; gap: 0.125rem; }
.page-row__name { font-weight: var(--font-weight-semibold); }
.page-row__meta { color: var(--text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.page-row__state { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.page-state { font-size: var(--font-size-xs); padding: 0.125rem var(--spacing-2); border-radius: var(--radius-sm); background: var(--color-warning-50); }
.page-state--online { background: var(--color-success-50); }
.page-state--draft { background: var(--bg-subtle); }
.page-manager__templates { display: flex; flex-direction: column; gap: var(--spacing-3); border: none; padding: 0; margin: 0; }
.page-manager__templates label { display: flex; align-items: flex-start; gap: var(--spacing-2); cursor: pointer; }
.page-manager__templates input { width: auto; margin: 0.1875rem 0 0; }
.page-manager__template-text { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); }
.page-manager__templates legend { padding: 0; font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); }
#page-new-templates { display: contents; }

/* Template picker (shop-templates): thumbnail cards; the native radio stays visible so the
   choice is never shown by colour alone. */
.template-picker { display: flex; flex-direction: column; gap: var(--spacing-4); }
.setup-dialog__intro { margin: 0; }
.template-picker__choices { border: none; margin: 0; padding: 0; min-width: 0; }
.template-picker__choices legend { padding: 0; margin-bottom: var(--spacing-3); }
.template-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--spacing-3);
}
.template-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  transition: border-color var(--duration-fast) var(--ease-in-out), background var(--duration-fast) var(--ease-in-out);
}
.template-card:hover { border-color: var(--border-strong); }
.template-card:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 0.0625rem var(--color-accent);
  background: var(--color-accent-light);
}
.template-card:has(input:focus-visible) { box-shadow: var(--shadow-focus-ring); }
.template-card__choice {
  display: grid;
  flex: 1;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: start;
  gap: var(--spacing-2);
  cursor: pointer;
}
.template-card__demo { align-self: flex-start; }
.template-card__image {
  grid-column: 1 / -1;
  order: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.template-card__choice input { width: 1.125rem; height: 1.125rem; margin: 0; }
.template-card__name { font-weight: var(--font-weight-semibold); }
.template-card__text { grid-column: 1 / -1; font-size: var(--font-size-sm); color: var(--text-secondary); }
/* Demo shop viewer (shop-templates): full-screen layer above the template dialogs. */
shop-demo-viewer[hidden] { display: none; }
.demo-viewer {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
}
.demo-viewer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3) var(--spacing-6);
  padding: var(--spacing-3) var(--spacing-6);
  background: var(--bg-surface);
  border-bottom: 0.0625rem solid var(--border-default);
}
.demo-viewer__text { flex: 1; min-width: 16rem; }
.demo-viewer__title { margin: 0; font-size: var(--font-size-lg); }
.demo-viewer__hint { margin: var(--spacing-1) 0 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.demo-viewer__actions { display: flex; gap: var(--spacing-2); }
.demo-viewer__stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: var(--spacing-4); }
.demo-viewer__frame {
  width: 100%;
  height: 100%;
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.demo-viewer__frame[data-device="mobile"] { width: 24.375rem; max-width: 100%; }
.template-picker__theme {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.template-picker__theme[hidden] { display: none; }
.template-picker__theme input { width: 1.125rem; height: 1.125rem; margin: 0.125rem 0 0; flex-shrink: 0; }
.template-picker__theme .builder-hint { display: block; margin: var(--spacing-1) 0 0; }
.template-picker__notice {
  margin: 0;
  padding: var(--spacing-3);
  border: 0.0625rem solid var(--color-warning-100);
  border-radius: var(--radius-md);
  background: var(--color-warning-50);
  color: var(--color-warning-800);
  font-size: var(--font-size-sm);
}

.seo-explainer {
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  font-size: var(--font-size-sm);
}
.seo-explainer h4 { margin: 0 0 var(--spacing-1); }
.seo-explainer p { margin: var(--spacing-1) 0 0; }

.entity-form__actions .button-secondary,
.area--partner .entity-form__actions .button-secondary { background: var(--bg-surface); color: var(--text-primary); border: 0.0625rem solid var(--border-strong); }
.entity-form__actions .button-secondary:hover,
.area--partner .entity-form__actions .button-secondary:hover { background: var(--bg-subtle); }
.entity-form__actions .button-danger,
.area--partner .entity-form__actions .button-danger,
.area--partner .entity-form__actions .button-danger:hover { background: var(--color-error-600); }

.asset-library { display: grid; gap: var(--spacing-4); }
.asset-library__quota-text { font-size: var(--font-size-sm); margin-bottom: var(--spacing-1); }
.asset-library__bar { height: 0.5rem; border-radius: 999px; background: var(--bg-subtle); overflow: hidden; }
.asset-library__bar span { display: block; height: 100%; background: var(--color-accent); }
.asset-library__bar span.is-full { background: var(--color-error-600); }
.asset-library__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  border: 0.0625rem dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.asset-library__file { display: grid; gap: var(--spacing-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.asset-library__rights { display: inline-flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); }
.asset-library__upload .button-primary:disabled { opacity: 0.5; cursor: default; }
.asset-library__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--spacing-3); }
.asset-card { display: grid; gap: var(--spacing-1); padding: var(--spacing-2); border: 0.0625rem solid var(--border-default); border-radius: var(--radius-md); }
.asset-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.asset-card__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card__meta { font-size: var(--font-size-xs); color: var(--text-secondary); }
.asset-card__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-1); }
#builder-image-dialog .modal-dialog__panel { width: min(56rem, calc(100vw - 2rem)); }

/* "Mein Webshop": miniatures of the shop's pages (shop.html?preview scaled down). */
.shop-pages-overview {
  max-width: 52rem;
  margin-top: var(--spacing-6);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
}
.shop-pages-overview__head h2 { margin: 0; }
.page-thumbs {
  list-style: none;
  margin: var(--spacing-4) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 15rem);
  gap: var(--spacing-4);
}
.page-thumb__link { display: grid; gap: var(--spacing-2); color: inherit; text-decoration: none; }
/* 1280 x 960 px page scaled to 15rem (240 px) wide. */
.page-thumb__viewport {
  display: block;
  width: 15rem;
  height: 11.25rem;
  overflow: hidden;
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}
.page-thumb__viewport iframe {
  width: 1280px;
  height: 960px;
  border: 0;
  transform: scale(0.1875);
  transform-origin: 0 0;
  pointer-events: none;
}
.page-thumb__link:hover .page-thumb__viewport,
.page-thumb__link:focus-visible .page-thumb__viewport { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.page-thumb__caption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-2); }
.page-thumb__name { font-weight: var(--font-weight-semibold); }
.page-thumb__state { font-size: var(--font-size-xs); color: var(--text-secondary); }
.page-thumb__state.is-online { color: var(--color-success-700); }
.shop-pages-overview__edit { display: inline-flex; align-items: center; gap: var(--spacing-2); text-decoration: none; }
.shop-pages-overview__edit svg { width: 1rem; height: 1rem; }
@media (max-width: 767px) {
  .page-thumbs { grid-template-columns: 1fr 1fr; }
  .page-thumb__viewport { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .page-thumb__viewport iframe { transform: scale(0.12); }
}
/* Tablet: the canvas has no fixed height, so the phone frame is sized by its width. */
@media (max-width: 1199px) {
  .builder-frame[data-device="mobile"] { width: 24.375rem; max-width: 100%; height: auto; }
}

/* ============================================================
   Design assistant in the shop builder (add-shop-design-assistant)
   Severity always as icon plus word: Blocker (error), Warnung (warning), Tipp (info).
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Status in the page bar: what the assistant currently says about the page. */
.assistant-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 2rem;
  padding: 0 var(--spacing-3);
  border: 0.0625rem solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-in-out), transform 100ms ease-out;
}
.assistant-status:hover { background: var(--bg-subtle); }
.assistant-status:active { transform: scale(0.97); }
.assistant-status svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.assistant-status[data-severity="none"] svg { color: var(--color-success-700); }
.assistant-status[data-severity="tip"] svg { color: var(--color-info-800); }
.assistant-status[data-severity="warning"] { border-color: var(--color-warning-100); background: var(--color-warning-50); color: var(--color-warning-800); }
.assistant-status[data-severity="blocker"] { border-color: var(--color-error-100); background: var(--color-error-50); color: var(--color-error-700); }
.assistant-status[data-severity="warning"]:hover { background: var(--color-warning-100); }
.assistant-status[data-severity="blocker"]:hover { background: var(--color-error-100); }

.assistant-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}
.assistant-badge svg { width: 0.875rem; height: 0.875rem; }
.assistant-badge--blocker { background: var(--color-error-100); color: var(--color-error-700); }
.assistant-badge--warning { background: var(--color-warning-100); color: var(--color-warning-800); }
.assistant-badge--tip { background: var(--color-info-100); color: var(--color-info-800); }

.assistant-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-1);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.assistant-summary svg { width: 1.125rem; height: 1.125rem; color: var(--color-success-700); }

/* Findings separate by hairlines, not cards: the inspector is already a panel. */
.assistant-list { list-style: none; margin: var(--spacing-3) 0 0; padding: 0; }
.assistant-item {
  display: grid;
  gap: var(--spacing-1);
  padding: var(--spacing-3) 0;
  border-top: 0.0625rem solid var(--border-default);
  font-size: var(--font-size-sm);
}
.assistant-item:first-child { border-top: 0; padding-top: 0; }
/* Missing alt text: the emphasised Warnung (spec "Alt-text rule"). */
.assistant-item.is-emphasis {
  padding: var(--spacing-3);
  border: 0.0625rem solid var(--color-warning-100);
  border-radius: var(--radius-md);
  background: var(--color-warning-50);
}
.assistant-item.is-emphasis + .assistant-item { border-top: 0; }
.assistant-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
.assistant-item__place { color: var(--text-secondary); font-size: var(--font-size-xs); }
.assistant-item__title { margin: var(--spacing-1) 0 0; font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.assistant-item__why,
.assistant-item__fix { margin: 0; line-height: 1.5; }
.assistant-item__why { color: var(--text-secondary); }
.assistant-item__fix { color: var(--text-primary); }
.assistant-item__jump {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-1);
  padding: var(--spacing-1) 0;
  border: 0;
  background: none;
  color: var(--text-brand);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-in-out);
}
.assistant-item__jump:hover { text-decoration-color: currentColor; }
.assistant-item__jump svg { width: 0.875rem; height: 0.875rem; transition: transform var(--duration-fast) var(--ease-in-out); }
.assistant-item__jump:hover svg { transform: translateX(0.125rem); }
.assistant-item__jump:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }

.assistant-tips { margin-top: var(--spacing-3); border-top: 0.0625rem solid var(--border-default); padding-top: var(--spacing-3); }
.assistant-tips:first-child { margin-top: var(--spacing-2); border-top: 0; padding-top: 0; }
.assistant-tips > summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-label);
  list-style: none;
}
.assistant-tips > summary::-webkit-details-marker { display: none; }
.assistant-tips > summary svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-info-800); }
.assistant-tips > summary::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: auto;
  border-right: 0.125rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  transform: rotate(45deg) translate(-0.125rem, -0.125rem);
  transition: transform var(--duration-fast) var(--ease-in-out);
}
.assistant-tips[open] > summary::after { transform: rotate(225deg) translate(-0.0625rem, -0.0625rem); }
.assistant-tips > summary:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }

/* Block inspector and Design tab: the block's or the design's own findings above the fields. */
.assistant-inline { margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-3); border-bottom: 0.0625rem solid var(--border-default); }
.assistant-inline .assistant-list { margin-top: 0; }
shop-design-panel .assistant-inline { margin: var(--spacing-1) 0 0; padding: var(--spacing-3); border: 0.0625rem solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-subtle); }
.assistant-select-hint { margin-top: var(--spacing-4); }

/* Inline markers at fields, colours and block rows. */
.builder-field[data-flag="warning"] :is(input, textarea, select) { border-color: var(--color-warning-600); }
.builder-field[data-flag="blocker"] :is(input, textarea, select) { border-color: var(--color-error-600); }
.builder-field[data-flag="warning"] > label::after,
.builder-field[data-flag="blocker"] > label::after {
  content: " · Hinweis";
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
}
.builder-field[data-flag="warning"] > label::after { color: var(--color-warning-800); }
.builder-field[data-flag="blocker"] > label::after { content: " · muss ausgefüllt sein"; color: var(--color-error-700); }
.builder-color[data-flag="warning"] input[type="text"] { border-color: var(--color-warning-600); }
.builder-color[data-flag="blocker"] input[type="text"] { border-color: var(--color-error-600); }
.block-row__flag { display: inline-flex; vertical-align: -0.125rem; margin-left: var(--spacing-1); }
.block-row__flag svg { width: 0.875rem; height: 0.875rem; }
.block-row__flag--warning { color: var(--color-warning-800); }
.block-row__flag--blocker { color: var(--color-error-700); }

/* Publish dialog: the list scrolls, the decision stays in view. */
.publish-check > p:first-child { margin-top: 0; }
.publish-check .assistant-list { max-height: min(50vh, 26rem); overflow-y: auto; padding-right: var(--spacing-1); }

@media (prefers-reduced-motion: reduce) {
  .assistant-status,
  .assistant-item__jump svg,
  .assistant-tips > summary::after { transition: none; }
}

/* ============================================================
   Webshop-Statistik (add-shop-statistics)
   One KPI strip with hairline cells instead of six cards, a day/month bar chart, and plain
   ranked lists. Change is always arrow + text, never colour alone. The strip and grid follow
   the content width (container queries), since the sidebar takes part of the viewport.
   ============================================================ */
.stat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3) var(--spacing-5);
  margin: var(--spacing-5) 0 var(--spacing-6);
}
.stat-toolbar .segmented { margin: 0; }
.stat-toolbar__range {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.stat-notice,
.stat-consent-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  max-width: 60rem;
  margin: 0 0 var(--spacing-6);
  font-size: var(--font-size-sm);
}
.stat-notice {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--color-info-100);
  color: var(--color-info-800);
}
.stat-consent-note { color: var(--text-secondary); margin-top: var(--spacing-2); }
.stat-notice svg,
.stat-consent-note svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.0625rem; }

.stat-body { container-type: inline-size; }
.stat-body > * { transition: opacity var(--duration-normal) var(--ease-out); }
.stat-body[aria-busy="true"] > * { opacity: 0.55; }

.stat-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.0625rem;
  margin: 0 0 var(--spacing-6);
  overflow: hidden;
  background: var(--border-default);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@container (min-width: 34rem) { .stat-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 66rem) { .stat-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat-body .stat-kpis--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-4);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.stat-kpis--pair .stat-kpi { padding: 0; }

.stat-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
  background: var(--bg-surface);
}
.stat-kpi dd { margin: 0; }
.stat-kpi__label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.stat-kpi__value {
  color: var(--text-brand);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.stat-kpi__delta svg { width: 0.875rem; height: 0.875rem; }
.stat-kpi__delta--up { color: var(--color-success-700); }
.stat-kpi__delta--down { color: var(--color-error-700); }

.stat-body > .chart-card,
.stat-grid { margin-bottom: var(--spacing-6); }

.stat-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2) var(--spacing-5);
  margin-bottom: var(--spacing-5);
}
.stat-chart__head .chart-card__title { margin: 0; }
.stat-chart__legend {
  display: flex;
  gap: var(--spacing-4);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.stat-chart__legend > span { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.stat-chart__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.125rem;
  background: var(--color-accent);
}

.stat-chart__plot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.125rem, 0.6cqi, 0.5rem);
  height: 13rem;
  padding: var(--spacing-5) 0 1.5rem;
  border-top: 0.0625rem dashed var(--border-default);
}
.stat-chart__max {
  position: absolute;
  top: 0.25rem;
  right: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}
.stat-chart__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  border-bottom: 0.0625rem solid var(--border-strong);
}
.stat-chart__bar {
  position: relative;
  width: 100%;
  max-width: 2.5rem;
  height: var(--h);
  margin: 0 auto;
  border-radius: 0.1875rem 0.1875rem 0 0;
  background: var(--color-accent);
  transform-origin: bottom;
  animation: stat-rise var(--duration-slow) var(--ease-out) both;
  transition: background var(--duration-fast) var(--ease-in-out);
}
.stat-chart__col--current .stat-chart__bar { background: var(--color-accent-strong); }
.stat-chart__col:hover .stat-chart__bar { background: var(--color-accent-strong-hover); }
.stat-chart__order {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-success-600);
  box-shadow: 0 0 0 0.125rem var(--bg-surface);
}
.stat-chart__order--legend { position: static; margin: 0; box-shadow: none; }
.stat-chart__x {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@keyframes stat-rise {
  from { transform: scaleY(0.6); opacity: 0.4; }
}

.stat-grid {
  display: grid;
  gap: var(--spacing-5);
  align-items: start;
}
@container (min-width: 52rem) { .stat-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.stat-grid__side { display: grid; gap: var(--spacing-5); }

.stat-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.stat-table th,
.stat-table td { padding: var(--spacing-3) 0; border-bottom: 0.0625rem solid var(--border-default); text-align: right; }
.stat-table thead th {
  padding-top: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom-color: var(--border-strong);
}
.stat-table th:first-child { text-align: left; }
.stat-table td,
.stat-table thead th + th { padding-left: var(--spacing-4); }
.stat-table tbody tr:last-child > * { border-bottom: 0; }
.stat-table tbody th { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.stat-table tbody th { width: 100%; }
.stat-table__cell { display: flex; align-items: center; gap: var(--spacing-3); }
.stat-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-table__rank {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}
.stat-table__name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

.stat-shares { display: grid; gap: var(--spacing-4); margin: 0; padding: 0; list-style: none; }
.stat-shares__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}
.stat-shares__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.stat-shares__value { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.stat-shares__pct { color: var(--text-secondary); font-weight: var(--font-weight-regular); }
.stat-shares__track {
  grid-column: 1 / -1;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  overflow: hidden;
}
.stat-shares__track > span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.stat-empty { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }

.stat-visitors { max-width: 40rem; }
.stat-visitors__note { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }

@media (max-width: 39.9375em) {
  .segmented { display: flex; width: 100%; }
  .segmented__button { flex: 1; justify-content: center; min-height: 2.75rem; padding: 0 var(--spacing-2); }
  .stat-kpi { padding: var(--spacing-3) var(--spacing-4) var(--spacing-4); }
  .stat-kpi__value { font-size: var(--font-size-xl); }
  .stat-chart__plot { height: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-chart__bar { animation: none; }
  .stat-body > * { transition: none; }
}