/* ==========================================================================
   S&S Herrenausstatter — Designsystem „Atelier One"
   Hyper-clean, minimalistisch, futuristisch. Siehe STYLEGUIDE.md.
   Warmes Hellgrau als Bühne, weiße Karten mit großen Radien, #222 als Anker,
   Gelb als einziger Akzent. Keine Rahmen, kaum Schatten.
   ========================================================================== */

:root {
  /* Flächen & Linien */
  --bg: #f0eff2;
  --surface: #fcfcfd;
  --surface-2: #f4f3f6;
  --surface-3: #eae9ee;
  /* Eine Staerke fuer alle Trennlinien — die Quelle ist --ui-line in
     design-tokens.css. --line-soft bleibt als Name bestehen, zeigt aber auf
     denselben Wert; soll es wieder eine feinere zweite Stufe geben, bekommt es
     hier einen eigenen Wert. */
  --line: var(--ui-line);
  --line-soft: var(--ui-line);

  /* Ink — die drei Schriftfarben stehen in design-tokens.css:
     --text, --text-muted und --text-inverse. */

  /* Akzent Gelb — eine einzige Quelle: das Gelb der Umsatzbalken (#f7e6a6).
     Die weiche Flaeche ist dieselbe Farbe, nur mit Weiss aufgehellt. */
  --yellow: var(--ui-yellow);
  --yellow-soft: color-mix(in srgb, var(--yellow) 52%, #ffffff);
  --accent: #222222;               /* interaktiver Anker (dunkle Pille)   */
  --accent-hover: #000000;
  --accent-soft: var(--yellow-soft);

  /* Semantik */
  /* Akzent Gruen — eine einzige Quelle: das Gruen der frueheren Monatsbalken
     (#bee6cb). Weiche Flaeche aufgehellt, Schriftvariante abgedunkelt — sonst
     waere Gruen auf hellem Grund nicht lesbar (1,3:1). */
  --green: var(--ui-green);
  --green-ink: color-mix(in srgb, var(--green) 30%, #0f5132);
  --green-soft: color-mix(in srgb, var(--green) 45%, #ffffff);
  --amber: #b07a18;
  --amber-soft: #f8eed8;
  --red: #e4574b;
  --red-soft: #fce9e7;

  /* Geometrie & Tiefe */
  --r-xl: 24px;
  --r-l: 16px;
  --r-m: 12px;
  --radius-s: var(--r-m);
  --radius-m: var(--r-l);
  --radius-l: var(--r-xl);
  --shadow-card: 0 1px 2px rgba(34, 34, 34, 0.04);
  --shadow-pop: 0 24px 64px rgba(34, 34, 34, 0.18);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--ui-yellow) 72%, transparent);

  /* Typo */
  --font: var(--font-ui);
}

/* Ruhige Profilansicht und reduzierte Formularfelder in Overlays */
.modal-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-head-actions .secondary svg,
.section-head .secondary svg {
  width: 15px;
  height: 15px;
}
.profile-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 6px 0;
}
.employee-profile-view {
  padding: 24px 30px 30px;
  overflow-y: auto;
}
.profile-detail {
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(34,34,34,.075);
}
.profile-detail:nth-child(odd) { padding-right: 20px; }
.profile-detail:nth-child(even) { padding-left: 20px; }
.profile-detail-wide {
  grid-column: 1 / -1;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.profile-detail small,
.profile-identity small {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.profile-detail strong {
  display: block;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.profile-identity {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 0 20px;
  border-bottom: 1px solid rgba(34,34,34,.075);
}
.profile-identity > div > strong {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fs-title);
  font-weight: 550;
}
.profile-identity small {
  margin: 0;
  text-transform: none;
  letter-spacing: var(--ls-normal);
}
.profile-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--text);
  background: var(--yellow);
  font-size: var(--fs-base);
  font-weight: 600;
}
.profile-edit-form[hidden],
.profile-view[hidden],
#employee-form[hidden] { display: none !important; }
.inline-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal :where(.form-step, .inline-form) label,
.drawer :where(.form-step, .inline-form) label {
  gap: 7px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-soft);
}
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  outline: none;
  color: var(--text);
  background: rgba(240,239,242,.62);
  box-shadow: none;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover,
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover {
  background: rgba(240,239,242,.86);
}
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  border-color: rgba(34,34,34,.18);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34,34,34,.045);
}
.modal textarea,
.drawer textarea {
  min-height: 104px;
  resize: vertical;
}
@media (max-width: 600px) {
  .profile-view { grid-template-columns: 1fr; }
  .profile-detail,
  .profile-detail:nth-child(odd),
  .profile-detail:nth-child(even) { padding-left: 0; padding-right: 0; }
  .profile-detail-wide { grid-column: auto; }
}

/* --- Reset & Basis ------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; min-height: 100vh; font-size: var(--fs-base); line-height: 1.5; letter-spacing: var(--ls-normal); }
button, input, select, textarea { font: inherit; color: inherit; }
:where(select) {
  color-scheme: light;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background-color: var(--surface-2);
  color: var(--text);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
:where(select):hover { background-color: var(--surface-3); }
:where(select):focus {
  outline: none;
  background-color: #fff;
  border-color: var(--text);
  box-shadow: var(--focus-ring);
}
:where(select) option { background: #fff; color: var(--text); font-size: var(--fs-base); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: color-mix(in srgb, var(--yellow) 70%, transparent); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(34, 34, 34, 0.14); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* --- Layout-Shell ---------------------------------------------------------
   Topbar-Layout im Finora-Stil: Marke · Pill-Nav · Aktionen, darunter
   eine Kontextzeile. Keine Sidebar mehr — .sidebar ist jetzt die Nav
   (Klasse bleibt, weil app.js sie für das Mobilmenü togglet). */
.shell { display: block; min-height: 100vh; }
main { min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(240, 239, 242, 0.86);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  display: flex; align-items: center; gap: 20px;
  height: 76px; padding: 0 clamp(20px, 3vw, 48px);
  max-width: 1680px; margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  background: var(--yellow); color: var(--text);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 600; letter-spacing: var(--ls-display); /* Markenbuchstabe, kein Fliesstext */
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--ls-tight); white-space: nowrap; }
.brand span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 1px; white-space: nowrap; }

/* Pill-Navigation */
nav.sidebar {
  --nav-glide-x: 4px;
  --nav-glide-width: 0px;
  position: relative;
  display: flex; align-items: center; gap: 2px;
  margin: 0 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding: 4px;
}
nav.sidebar::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 4px;
  width: var(--nav-glide-width);
  height: 42px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 7px 18px rgba(34,34,34,.16);
  transform: translate3d(var(--nav-glide-x), 0, 0);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), width 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, width;
}
nav.sidebar::-webkit-scrollbar { display: none; }
.nav-label { display: none; }
.nav-item {
  position: relative; z-index: 1;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 42px; border-radius: 999px; padding: 0 15px;
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-normal);
  white-space: nowrap;
  transition: background 0.2s, color 0.32s ease, transform 0.32s cubic-bezier(.22, 1, .36, 1);
}
.nav-item:hover { background: rgba(34, 34, 34, 0.05); color: var(--text); }
.nav-item.active { background: transparent; color: var(--text-inverse); font-weight: 600; }
.nav-item:active { transform: scale(.97); }
.nav-item svg { width: 16px; flex: none; display: none; }
.nav-item.active svg { display: block; stroke-width: 1.8; }
.nav-item b {
  min-width: 16px; text-align: center;
  background: var(--yellow); border-radius: 999px; padding: 1px 5px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-normal); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.nav-item.active b { background: var(--yellow); color: var(--text); }
/* Mail-Zähler zählt historischen Altbestand über alle Postfächer, nicht tagesaktuelle
   Arbeit wie bei Anfragen — bewusst zurückhaltend statt im Alarm-Gelb, damit er die
   echten Anfragen nicht optisch erschlägt. */
#nav-mail-count { background: var(--surface-3); color: var(--text-muted); }
.nav-item.active #nav-mail-count { background: var(--surface-3); color: var(--text-muted); }
.nav-settings span { display: none; }
.nav-settings svg { display: block; }
.nav-settings { width: 42px; padding: 0; justify-content: center; }

.sidebar-bottom { display: none; }

.top-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--yellow); color: var(--text);
  display: grid; place-items: center; font-size: var(--fs-base); font-weight: 600;
}
.profile { display: flex; align-items: center; gap: 10px; }
.profile strong, .profile span { display: block; }
.profile strong { font-size: var(--fs-base); font-weight: 600; }
.profile span { font-size: var(--fs-small); color: var(--text-muted); }

/* Kontextzeile unter der Hauptnavigation */
.contextbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1680px; margin: 0 auto;
  padding: 10px clamp(20px, 3vw, 48px) 14px;
}
.context { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: var(--fs-base); min-width: 0; }
.context > span { white-space: nowrap; }
.context-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.branch-toggle {
  --branch-glide-x: 4px;
  --branch-glide-width: 0px;
  position: relative;
  display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px;
  background: rgba(34, 34, 34, 0.045);
}
.branch-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 4px;
  width: var(--branch-glide-width);
  height: 34px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transform: translate3d(var(--branch-glide-x), 0, 0);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), width 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, width;
}
.branch-toggle button {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 15px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-size: var(--fs-base); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.branch-toggle button:hover { color: var(--text); }
.branch-toggle button.active { background: transparent; color: var(--text); box-shadow: none; font-weight: 600; }

.context select, .toolbar select, .top-actions select, .mail-toolbar select, .panel-head select {
  border: 1px solid transparent; background-color: var(--surface);
  border-radius: 999px; padding: 9px 34px 9px 16px; min-height: 40px;
  font-size: var(--fs-base); font-weight: 500; color: var(--text);
  appearance: none; box-shadow: var(--shadow-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23222222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.icon-button, .round-button {
  border: 0; background: var(--surface);
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer; color: var(--text-muted); position: relative;
  box-shadow: var(--shadow-card);
  transition: background 0.15s, color 0.15s;
}
.icon-button:hover, .round-button:hover { background: var(--surface-2); color: var(--text); }
.icon-button svg { width: 16px; }
.mobile-menu { display: none; }

/* --- Buttons -------------------------------------------------------------- */
.primary, .secondary {
  border: 0; border-radius: 999px; min-height: 40px; padding: 9px 20px;
  font-weight: 500; font-size: var(--fs-base); letter-spacing: var(--ls-normal); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s, transform 0.1s, color 0.15s;
}
.primary { background: var(--text); color: var(--text-inverse); }
.primary:hover { background: var(--accent-hover); }
.primary:active { transform: scale(0.98); }
.primary svg { width: 15px; }
.primary:disabled { opacity: 0.55; cursor: default; }
.secondary { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.secondary:hover { background: var(--surface-2); }
.secondary.compact { min-height: 32px; padding: 6px 13px; font-size: var(--fs-small); }
.secondary.compact:disabled { opacity: .45; cursor: not-allowed; }
.text-button {
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-base); font-weight: 500; display: flex; align-items: center; gap: 4px; padding: 4px 0;
  transition: color 0.15s;
}
.text-button:hover { color: var(--text); }
.text-button svg, .round-button svg { width: 14px; }
.action-pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 38px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,1); background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; white-space: nowrap;
  cursor: pointer; box-shadow: var(--shadow-card);
  transition: background 0.15s, color 0.15s;
}
.action-pill:hover { background: var(--surface-2); color: var(--text); }
.action-pill .icon-diag { width: 14px; }
.action-pill.icon-only { width: 38px; padding: 0; justify-content: center; }
.small-button { min-height: 33px; padding: 6px 13px; font-size: var(--fs-base); }
.small-button svg { width: 13px; }
.danger { color: var(--red); background: var(--red-soft); box-shadow: none; }
.danger:hover { background: #f9dcd8; }
.danger svg { width: 16px; }
.danger:disabled { opacity: 0.55; cursor: wait; }
.text-button.danger { background: none; color: var(--red); }

/* --- Views & Seitenköpfe --------------------------------------------------- */
.view { display: none; padding: 26px clamp(20px, 3vw, 48px) 72px; max-width: 1680px; margin: 0 auto; }
.view.active { display: block; }
.page-head { margin-bottom: 30px; }
.page-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.eyebrow { font-size: var(--fs-small); letter-spacing: var(--ls-wider); color: var(--text-muted); font-weight: 600; margin: 0 0 8px; text-transform: uppercase; }
.page-head h1 { font-size: var(--fs-figure); line-height: 1.1; letter-spacing: var(--ls-display); font-weight: 500; margin: 0; }
.page-head > div > p:last-child { font-size: var(--fs-base); color: var(--text-muted); margin: 8px 0 0; font-weight: 400; }
.head-actions { display: flex; gap: 9px; flex: none; }

/* --- Kennzahlen: Trend-Karten ------------------------------------------------ */
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.trend-card { background: var(--surface); border-radius: var(--r-xl); padding: 50px; box-shadow: var(--shadow-card); }
.trend-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.trend-card-head h3 { margin: 0; font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--ls-tight); }
.trend-card-head p { margin: 4px 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.trend-card-head .round-button { flex: none; }
.icon-diag { transform: rotate(-45deg); }

.trend-stats { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; gap: 10px; }
.trend-stat { text-align: left; min-width: 0; }
.trend-stat small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); margin-bottom: 6px; white-space: nowrap; }
.trend-stat span { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.trend-stat-main { text-align: center; flex: none; }
.trend-stats .trend-stat:last-child { text-align: right; }
.trend-stat-main strong { display: block; font-size: var(--fs-figure); font-weight: 600; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }

.trend-label { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: var(--fs-small); color: var(--text-muted); font-weight: 500; }
.trend-label i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.trend-chart { margin-top: 10px; }
.trend-chart-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 128px; padding: 24px 2px 0;
  border-bottom: 1px solid var(--line);
}
.pbar {
  flex: 1; min-height: 2px; border-radius: 6px 6px 0 0;
  background: var(--surface-2);
  position: relative;
  transition: background 0.15s;
}
.pbar.has-value { background: var(--bar-color, var(--yellow)); }
/* Hover dunkelt dieselbe Farbe ab, statt einen zweiten Gelbton einzufuehren. */
.pbar.has-value:hover { background: color-mix(in srgb, var(--bar-color, var(--yellow)) 82%, #222222); }
.pbar.is-ghost {
  background: repeating-linear-gradient(135deg, #f2f1f4, #f2f1f4 3px, #ebeaee 3px, #ebeaee 10px);
}
.pbar-value {
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.trend-chart-axis {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px;
  margin-top: 8px; padding: 0 2px;
  font-size: var(--fs-xs); color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums;
}

.trend-branches { margin-top: 20px; }
.trend-branches-caption { font-size: var(--fs-small); line-height: 16px; color: var(--text-muted); font-weight: 500; margin-bottom: 11px; }
.branch-bar-rows { display: flex; flex-direction: column; gap: 9px; }
.branch-bar-row { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; }
/* Feste, gerade Zeilenhoehe: ohne sie ist die Zeile 14,4px hoch, die drei Balken
   landen auf unterschiedlichen Halb-Pixeln und werden verschieden stark gerendert. */
.branch-bar-label { font-size: var(--fs-small); line-height: 16px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.branch-bar-track-wrap { position: relative; }
.branch-bar-track {
  height: 4px; border-radius: 0px; overflow: hidden;
}
.branch-bar-fill {
  height: 100%; border-radius: 20px; transition: width 0.3s ease;
  background: #222222;
}
.branch-bar-value {
  position: absolute; top: 50%; transform: translateY(-50%); margin-left: 10px;
  font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}


/* --- Panels ----------------------------------------------------------------- */
/* Einzige Liste direkt im Panel — eigener .calendar-events-Hintergrund würde wie eine
   verschachtelte zweite Karte aussehen. In "Termine diese Woche" bleibt er bewusst an,
   dort trennt er mehrere Tagesgruppen voneinander. */
#today-appointments.calendar-events { background: none; box-shadow: none; padding: 0; }
/* Etwas mehr Luft zwischen Streifen und Uhrzeit als in der Kalenderansicht:
   die Streifenspalte ist breiter als der 4px-Streifen selbst. */
/* Breitere Zeitspalte als in der Kalenderansicht: sie nimmt „11:00 Uhr" auf und
   schafft zugleich den Abstand zum Kundennamen (Spaltenbreite minus Textbreite
   plus 10px Rasterabstand). */
#today-appointments .dashboard-calendar-event { grid-template-columns: 12px 125px minmax(80px, 0.6fr) minmax(0, 1.2fr) 1fr 0.5fr; }
.appointment-branch { font-size: var(--fs-base); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event .appointment-kind { font-weight: 400; }
/* Laufender Termin: derselbe pulsierende Ring wie der Punkt bei neuen Anfragen,
   damit „laeuft gerade" ueberall gleich aussieht. */
#today-appointments .calendar-event.is-running i {
  --dot-ring: color-mix(in srgb, var(--event-color) 75%, transparent);
  animation: live-pulse 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { #today-appointments .calendar-event.is-running i { animation: none; } }
.sick-note-panel { margin-bottom: 10px; }
.sick-note-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.sick-note-row:last-child { border-bottom: 0; }
.sick-note-row:first-child { padding-top: 0; }
.sick-note-main { flex: 1; min-width: 0; }
.sick-note-branch { font-size: var(--fs-small); color: var(--text-muted); font-weight: 400; }
.sick-note-subject { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sick-note-warning { font-size: var(--fs-small); color: var(--amber); margin-top: 3px; font-weight: 500; }
.sick-note-range { display: flex; align-items: center; gap: 8px; flex: none; }
.sick-note-range input[type="date"] {
  border: 1.5px solid transparent; background: var(--surface-2); border-radius: var(--r-m);
  padding: 8px 10px; font-size: var(--fs-base); color: var(--text); outline: none; font-family: inherit;
}
.sick-note-range span { color: var(--text-muted); font-size: var(--fs-base); }
.sick-note-actions { display: flex; gap: 8px; flex: none; }
.sick-note-accept:hover { color: var(--green-ink); border-color: var(--green); }
.sick-note-dismiss:hover { color: var(--red); border-color: var(--red); }
.pickup-ready-panel { margin-bottom: 8px; }
.table-header.pickup-columns, .table-row.pickup-columns { grid-template-columns: repeat(4, minmax(0, 1fr)) 48px; }
.pickup-columns .amount { text-align: left; }
.pickup-wait { display: inline-block; margin-top: 4px; font-size: var(--fs-small); font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); }
.pickup-columns .round-button { justify-self: end; width: 36px; height: 36px; margin-right: 6px; }
.pickup-columns .round-button:hover { color: var(--green-ink); border-color: var(--green); }
.calendar-event.is-done strong, .calendar-event.is-done span { color: var(--text-muted); text-decoration: line-through; }
.round-button.today-done-button { width: 36px; height: 36px; margin-right: 6px; }
.today-done-button:hover { color: var(--green-ink); border-color: var(--green); }
.today-done-button.is-active { background: var(--green-ink); border-color: var(--green-ink); color: var(--text-inverse); }
.today-done-button.is-active:hover { background: var(--red); border-color: var(--red); }
/* Feste Reihenfolge Termine Heute → Neue Anfragen → Urlaub/Krankmeldungen → Notizen,
   aber als zwei unabhängige Flex-Spalten statt starrer Grid-Zeilen: ein kürzeres Panel
   (z.B. "Neue Anfragen") lässt dadurch keine Lücke, weil sein Spalten-Nachbar direkt
   darunter weiterrutscht, statt auf die Zeilenhöhe des Nachbar-Panels zu warten. */
.dashboard-masonry { display: flex; gap: 8px; align-items: flex-start; }
.masonry-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.dashboard-notes-panel { padding-bottom: 18px; }
.dashboard-notes-panel .panel-head { margin-bottom: 18px; }
.notes-input-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.notes-input-row input {
  flex: 1; border: 1.5px solid transparent; background: var(--surface-2);
  border-radius: var(--r-m); padding: 11px 14px; outline: none;
  color: var(--text); font-size: var(--fs-base);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.notes-input-row input:focus { background: #fff; border-color: var(--text); box-shadow: none; }
.notes-input-row .icon-button { flex: none; }
.notes-list { display: grid; gap: 10px; margin-top: 14px; overflow: visible; }
.notes-list .empty { padding: 16px 0; text-align: left; }
.note-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.note-item span { flex: 1; min-width: 0; }
.note-delete { flex: none; opacity: 0; color: var(--text-muted); transition: opacity 0.15s, color 0.15s; }
.note-item:hover .note-delete, .note-delete:focus-visible { opacity: 1; }
.note-delete:hover { color: var(--red); }
.note-check {
  width: 20px; height: 20px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.note-check:hover { border-color: var(--text-muted); }
.note-item.is-done .note-check { background: var(--green); border-color: var(--green); }
.note-item span { font-size: var(--fs-base); line-height: 1.45; }
.note-item.is-done span { color: var(--text-muted); text-decoration: line-through; }
.panel {
  background: var(--surface); border-radius: var(--r-xl); padding: 24px; min-width: 0;
  box-shadow: var(--shadow-card);
}
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 10px; }
.panel h2 { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--ls-tight); margin: 0 0 3px; }
.panel-head p { display: none; }
.panel-head h2 { margin-bottom: 0; }
.panel-head-actions { display: flex; align-items: center; gap: 9px; }

.count-pill {
  min-width: 26px; height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--yellow); color: var(--text);
  display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Karten-Header mit Icon-Tile — Abstand/Panel-Innenraum wie beim einfachen
   .panel-head auf dem Dashboard (kein eigener Rahmen, keine Full-Bleed-Zeile). */
.orders-sections { display: grid; gap: 8px; }
.orders-panel-head { align-items: center; }
.panel-title { display: flex; align-items: center; gap: 13px; min-width: 0; }
/* .count-pill wird weiterhin in den Auftrags- und Kundenansichten verwendet. */
.panel-icon { width: 40px; height: 40px; border-radius: var(--r-m); background: var(--yellow-soft); color: var(--text); display: grid; place-items: center; flex: none; }
.panel-icon svg { width: 17px; stroke-width: 1.8; }
.panel-icon.tone-green { background: var(--green-soft); color: var(--green-ink); }
.panel-icon.tone-amber { background: var(--amber-soft); color: var(--amber); }
/* Auftrags-Icons und das Anfragen-Icon im Dashboard bekommen dieselben Akzentfarben wie
   die Umsatz-Woche/-Monat-Graphen (statt der gedämpften panel-icon-Standardtöne), mit
   schwarzem statt eingefärbtem Icon. */
#view-orders .panel-icon, .inquiry-panel .panel-icon { background: var(--yellow); color: var(--text); }
#view-orders .panel-icon.tone-green { background: var(--green); color: var(--text); }
#view-orders .panel-icon.tone-amber { background: var(--amber); color: var(--text); }
.orders-sections .table-panel { overflow: hidden; }

/* --- Auftragslisten ----------------------------------------------------------- */
.order-icon { width: 38px; height: 38px; border-radius: var(--r-m); background: var(--surface-2); display: grid; place-items: center; color: var(--text-muted); }
.order-icon svg { width: 16px; }
.amount > strong, .amount > small { display: block; }
.amount { text-align: right; font-variant-numeric: tabular-nums; }
.amount strong { font-size: var(--fs-base); font-weight: 600; }
.amount small { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }
.orders-sections .amount,
#recent-orders .amount { text-align: left; }
/* Zahlungsstand kennt nur zwei Zustaende: offen (rot) oder bezahlt (gruen).
   Angezahlt gilt als offen — der Restbetrag steht ohnehin daneben. */
.pay-status-full { color: var(--green-ink) !important; font-weight: 600; }
.pay-status-partial,
.pay-status-open { color: var(--red) !important; font-weight: 600; }

/* Status-Chips */
.status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: var(--fs-small); font-weight: 500; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.status[data-tone="blue"] { background: var(--yellow-soft); color: var(--text); }
.status[data-tone="blue"]::before { background: var(--yellow); }
.status[data-tone="green"] { background: var(--green-soft); color: var(--green-ink); }
.status[data-tone="green"]::before { background: var(--green); }
.status[data-tone="amber"] { background: var(--amber-soft); color: var(--amber); }
.status[data-tone="amber"]::before { background: var(--amber); }

.status-select {
  appearance: none; border: 0; cursor: pointer; max-width: 100%;
  font-size: var(--fs-small); font-weight: 500; padding: 8px 26px 8px 12px; border-radius: 999px;
  background-color: var(--surface-2); color: var(--text-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%236f6e76' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: background-color 0.15s;
}
.status-select:hover { background-color: var(--surface-3); }
.status-select[data-tone="blue"] { background-color: var(--yellow-soft); color: var(--text); }
.status-select[data-tone="green"] { background-color: var(--green-soft); color: var(--green-ink); }
.status-select[data-tone="amber"] { background-color: var(--amber-soft); color: var(--amber); }
/* Auftragsstatus: je Phase eine eigene Farbe (Pille + Punkt), siehe tone() in app.js */
.status[data-tone="gray"] { background: #ececef; color: #5d5c64; }
.status[data-tone="gray"]::before { background: #9b9aa3; }
.status[data-tone="sky"] { background: #dfeaf8; color: #2c5a8c; }
.status[data-tone="sky"]::before { background: #6b98d6; }
.status[data-tone="teal"] { background: #d6f0ee; color: #1d6360; }
.status[data-tone="teal"]::before { background: #3fb0a4; }
.status[data-tone="violet"] { background: #ebe2f7; color: #5e3a8c; }
.status[data-tone="violet"]::before { background: #9a6fd1; }
.status[data-tone="rose"] { background: #fbe3ea; color: #9a2d4f; }
.status[data-tone="rose"]::before { background: #e0607f; }
.status[data-tone="orange"] { background: #fde6d0; color: #9a5410; }
.status[data-tone="orange"]::before { background: #eb8f3d; }
.status[data-tone="done"] { background: #e6e6ea; color: #3f3e46; }
.status[data-tone="done"]::before { background: #3f3e46; }
.status-select[data-tone="gray"] { background-color: #ececef; color: #5d5c64; }
.status-select[data-tone="sky"] { background-color: #dfeaf8; color: #2c5a8c; }
.status-select[data-tone="teal"] { background-color: #d6f0ee; color: #1d6360; }
.status-select[data-tone="violet"] { background-color: #ebe2f7; color: #5e3a8c; }
.status-select[data-tone="rose"] { background-color: #fbe3ea; color: #9a2d4f; }
.status-select[data-tone="orange"] { background-color: #fde6d0; color: #9a5410; }
.status-select[data-tone="done"] { background-color: #e6e6ea; color: #3f3e46; }

/* --- Timeline / Termine im Dashboard -------------------------------------------- */
.timeline-item { display: grid; grid-template-columns: 44px 3px 1fr; gap: 10px; min-height: 70px; }
.timeline-time { font-size: var(--fs-base); font-weight: 600; padding-top: 2px; font-variant-numeric: tabular-nums; }
.timeline-line { background: var(--surface-3); position: relative; border-radius: 2px; }
.timeline-line::before {
  content: ""; position: absolute; top: 4px; left: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--dot, var(--text-muted)); border: 2px solid var(--surface);
}
.timeline-copy strong, .timeline-copy span { display: block; }
.timeline-copy strong { font-size: var(--fs-base); font-weight: 500; }
.timeline-copy span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px; }
.day-divider { font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; margin: 6px 0 10px 59px; text-transform: uppercase; letter-spacing: var(--ls-wide); }

.dashboard-calendar-days .calendar-event .calendar-end { justify-content: flex-end; }
.dashboard-calendar-days .calendar-event .calendar-end svg { width: 15px; color: var(--text-muted); flex: none; }

/* --- Hinweise / Alerts ------------------------------------------------------------------ */
.alerts { display: grid; gap: 10px; }
.alert-panel.span-2 .alerts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .alert-panel.span-2 .alerts { grid-template-columns: 1fr; } }
.alert { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border-radius: var(--r-l); padding: 12px 14px; }
.alert-icon { width: 34px; height: 34px; flex: none; border-radius: var(--r-m); background: var(--red-soft); color: var(--red); display: grid; place-items: center; font-size: var(--fs-base); font-weight: 600; }
.alert strong, .alert span { display: block; }
.alert strong { font-size: var(--fs-base); font-weight: 500; }
.alert span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }

/* --- Toolbar & Suche ------------------------------------------------------------------------ */
.toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.search {
  height: 44px; max-width: 430px; min-width: 280px; flex: 1;
  background: var(--surface); border-radius: 999px;
  display: flex; align-items: center; padding: 0 18px; gap: 10px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s;
}
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--text), var(--focus-ring); }
.search svg { width: 15px; color: var(--text-muted); flex: none; }
.search input { border: 0; outline: 0; width: 100%; font-size: var(--fs-base); background: transparent; }
.search input::placeholder { color: var(--text-muted); }

/* --- Tabellen --------------------------------------------------------------------------------- */
.table-panel { padding: 4px 24px; overflow: hidden; }
.table-header, .table-row { display: grid; grid-template-columns: 1.05fr 1.4fr 1fr 1fr 0.9fr 0.7fr 24px; gap: 10px; align-items: center; }
.inventory-columns { grid-template-columns: 1fr 1.5fr 0.8fr 0.7fr 0.7fr 0.8fr 24px; }
.table-header { height: 50px; color: var(--text-muted); font-size: var(--fs-small); letter-spacing: var(--ls-normal); font-weight: 400; border-bottom: 1px solid var(--line); }
.table-row { min-height: 74px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-base); cursor: pointer; transition: background 0.12s; }
.table-row:last-child { border-bottom: 0; }
.table-row:hover { background: var(--surface-2); }
.table-row > svg { color: var(--text-muted); }
.table-row strong, .table-row small { display: block; }
.table-row strong { font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-tight); }
.table-row small { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
.table-row.static { cursor: default; }
.table-row.static:hover { background: transparent; }
.available { font-weight: 600; font-variant-numeric: tabular-nums; }
.available.low { color: var(--red); }
.customer-columns { grid-template-columns: minmax(145px, 1fr) minmax(180px, 1.25fr) minmax(125px, 0.85fr) minmax(115px, 0.8fr) minmax(100px, 0.7fr) 24px; }
/* Filiale und Auftragszahl stehen bewusst im normalen Schnitt, nicht halbfett. */
.customer-columns .cell-plain { font-weight: 400; }
/* E-Mail-Adressen koennen laenger sein als ihre Spalte. */
.customer-columns > div > strong, .customer-columns > div > .cell-plain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Spalten dürfen schrumpfen und halten Abstand zur nächsten Spalte, damit E-Mail und Telefon nicht ineinanderlaufen. */
.customer-columns > div { min-width: 0; padding-right: 16px; }
.customer-columns .amount { text-align: left; }
/* Tabellenkoepfe laufen auf der kleinen Stufe (fs-small/13px), wie die Basisregel
   .table-header oben schon vorsieht — vorher gab es hier eine kleinere Sonderstufe. */
/* Erste Spalte: schmaler Platz fuer den Statuspunkt bei abholbereiten Auftraegen. */
.order-columns { grid-template-columns: repeat(5, minmax(0, 1fr)) 24px; }
.order-status-progress { display: flex; align-items: center; min-width: 0; }
.order-status-progress .status-select { min-width: 0; width: 100%; max-width: 180px; }

/* --- Kalender --------------------------------------------------------------------------------------- */
.calendar-days { display: grid; gap: 10px; }
/* Terminliste als Tabelle im Stil der Kundenliste. */
#calendar-tables { margin-top: 24px; }
.appointment-columns { grid-template-columns: minmax(200px, 1.2fr) minmax(190px, 1.2fr) minmax(160px, 1.2fr) minmax(120px, 0.9fr) 44px; }
.appointment-columns .cell-plain { font-weight: 400; }
.appointment-columns .appointment-day { display: inline; font-weight: 600; }
.appointment-columns > div > strong, .appointment-columns > div > .cell-plain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-columns > div { min-width: 0; padding-right: 16px; }
.appointment-columns.is-past { color: var(--text-muted); }
.appointment-columns.is-cancelled strong { text-decoration: line-through; }
.appointment-delete { display: flex; justify-content: flex-end; padding-right: 0 !important; }
#view-calendar > .calendar-days { margin-top: 24px; }
.calendar-day { display: grid; grid-template-columns: 124px 1fr; gap: 10px; }
.calendar-date { padding: 16px; }
.calendar-date strong, .calendar-date span { display: block; }
.calendar-date strong { font-size: var(--fs-figure); font-weight: 500; letter-spacing: var(--ls-display); }
.calendar-date span { font-size: var(--fs-base); color: var(--text-muted); margin-top: 5px; }
.calendar-events { background: var(--surface); border-radius: var(--r-xl); padding: 6px 22px; box-shadow: var(--shadow-card); }
.calendar-event {
  display: grid; grid-template-columns: 5px 80px 1.2fr 1fr 0.7fr; gap: 10px; align-items: center;
  min-height: 70px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-base); position: relative;
}
.calendar-event:last-child { border: 0; }
.calendar-event i { width: 4px; height: 32px; border-radius: 4px; background: var(--event-color); order: -1; }
.calendar-event strong, .calendar-event span { display: block; }
.calendar-event strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.calendar-event span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }
.calendar-event.is-cancelled { color: var(--text-muted); background: var(--surface-2); }
.calendar-event.is-cancelled::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 1.5px; background: rgba(111, 110, 118, .55); pointer-events: none; }
.cancelled-label { color: var(--red) !important; font-weight: 600 !important; text-decoration: none !important; }
.calendar-event[data-appointment] { cursor: pointer; }
.calendar-event[data-appointment]:hover { background: var(--surface-2); }
.calendar-event.is-past { color: var(--text-muted); opacity: .48; text-decoration: none; }
.calendar-event.is-past:hover { background: transparent; }
.calendar-event.is-past .branch-chip { --branch: #98989d !important; }
.calendar-end { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-calendar-event .calendar-end { justify-content: flex-end; }
.calendar-end .icon-button { opacity: 0; transition: opacity 0.15s; }
.calendar-event:hover .calendar-end .icon-button { opacity: 1; }
.calendar-end .icon-button:focus-visible { opacity: 1; }

/* --- Termine: Wochenplaner -------------------------------------------------------------------------- */
.planner-section { margin-top: 34px; }
.planner-panel { padding: 0 24px 32px; overflow-x: auto; }
.planner {
  min-width: 920px; overflow: visible; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
/* Sechs Spalten (Mo–Sa), passend zu den Tagen in renderPlanner (app.js). */
.planner-row { display: grid; grid-template-columns: 64px repeat(6, minmax(0, 1fr)); gap: 0; }
.planner-head { position: relative; min-height: 62px; border-bottom: 0; align-items: stretch; background: transparent; }
.planner-head::after {
  content: ""; position: absolute; z-index: 2; right: var(--r-m); bottom: 0;
  left: calc(64px + var(--r-m)); height: 1px; background: var(--line); pointer-events: none;
}
.planner-head > div:first-child { border: 0; }
.planner-head .roster-day-head { display: grid; place-content: center; border: 0; }
.planner-head .roster-day-head span { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); }
.planner-head .roster-day-head strong { display: block; width: auto; height: auto; margin: 3px auto 0; font-size: var(--fs-base); }
.planner-head .roster-day-head.is-today { background: transparent; }
.planner-head .roster-day-head.is-today strong { background: transparent; }
.planner-head .roster-day-head.is-today::after { display: block; }
.planner-body {
  position: relative; background-color: var(--surface);
}
.planner-body::before {
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 1px; left: 64px; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--hour-h) - 1px),
    rgba(34,34,34,.075) calc(var(--hour-h) - 1px),
    rgba(34,34,34,.075) var(--hour-h)
  );
}
.planner-body::after {
  content: ""; position: absolute; z-index: 3; right: var(--r-m); bottom: 0;
  left: calc(64px + var(--r-m)); height: 1px; background: var(--line); pointer-events: none;
}
.planner-body > * { position: relative; z-index: 1; }
.planner-times { display: grid; align-content: start; border: 0; background: transparent; }
.planner-hour { padding-right: 11px; text-align: right; font-size: var(--fs-small); line-height: 1; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.planner-hour span { display: block; transform: translateY(-50%); }
.planner-hour-end { height: 0; }
.planner-day {
  position: relative; cursor: crosshair; overflow: hidden; touch-action: none; user-select: none;
  border: 0; border-radius: 0; background: transparent;
}
.planner-day:hover { background: transparent; }
.planner-day.is-selecting { cursor: ns-resize; }
.planner-day.is-today { background: transparent; box-shadow: none; }
.planner-day.is-today:hover { background: transparent; }
.planner-slot {
  position: absolute; left: 8px; right: 8px; z-index: 0; border: 1.5px dashed transparent;
  border-radius: 8px; color: transparent; transition: border-color .14s, background .14s, color .14s;
}
.planner-slot::after {
  content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  color: inherit; font-size: var(--fs-base); font-weight: 400;
}
.planner-slot:hover {
  border-color: var(--yellow); background: color-mix(in srgb, var(--yellow-soft) 72%, transparent);
  color: var(--text);
}
.planner-day.is-selecting .planner-slot,
.planner-day.is-selecting .planner-slot:hover {
  border-color: transparent; background: transparent; color: transparent;
}
.planner-closed {
  position: absolute; left: 0; right: 0; z-index: auto; cursor: default;
  background: transparent; display: grid; place-items: center; border-radius: 0;
}
.planner-closed-pattern {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.planner-closed-pattern rect { stroke: none; }
.planner-closed-pattern pattern path { stroke: rgba(232,231,235,.72); }
.planner-closed span { position: relative; z-index: 3; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.planner-event {
  appearance: none; position: absolute; z-index: 2; border: 0; cursor: pointer;
  width: 100%; text-align: left; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  border-radius: 10px; padding: 6px 10px;
  background: color-mix(in srgb, var(--event-color) 16%, #fff);
  color: color-mix(in srgb, var(--event-color) 76%, #111);
  box-shadow: none; transition: filter .14s, transform .1s;
}
.planner-event:hover { filter: brightness(.96); }
.planner-event:active { transform: scale(.98); }
.planner-event > strong {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0;
  text-align: left; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.planner-event .event-time, .planner-event .event-separator { flex: none; }
.planner-event .event-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.planner-event > .event-customer { display: block; width: 100%; text-align: left; font-size: var(--fs-small); margin-top: 2px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-event.is-cancelled { background: var(--surface-2); color: var(--text-muted); box-shadow: none; }
.planner-event.is-cancelled::after { display: none; }
.planner-event.is-past { color: var(--text-muted); opacity: .48; filter: none; text-decoration: none; }
.planner-selection {
  position: absolute; left: 8px; right: 8px; z-index: 4; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  border: 0; border-radius: 10px; padding: 6px 10px;
  background: var(--yellow-soft); box-shadow: none; color: var(--text);
}
.planner-selection strong { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.planner-selection span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-size: var(--fs-small); color: inherit; opacity: .75; white-space: nowrap; }

/* --- Einkauf ------------------------------------------------------------------------------------------- */
.purchase-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 10px; }
.purchase-row { padding: 15px 0; border-top: 1px solid var(--line-soft); }
.purchase-row:first-child { border: 0; }
.purchase-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.purchase-row strong { font-size: var(--fs-base); font-weight: 500; }
.purchase-row p { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); margin: 6px 0 0; }
.purchase-actions { display: flex; align-items: center; gap: 9px; }
.purchase-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-small); color: var(--text-muted); }
.pill { font-size: var(--fs-small); font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }

/* --- Modals ---------------------------------------------------------------------------------- */
.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; background: rgba(34, 34, 34, 0.4); backdrop-filter: blur(5px); z-index: 50; }
.modal-backdrop { opacity: 0; transition: opacity 0.38s ease; }
.modal-backdrop.open { opacity: 1; }
.modal {
  width: min(680px, calc(100vw - 30px)); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); border-radius: var(--r-xl);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -48%) scale(0.96); opacity: 0;
  transition: transform 0.42s cubic-bezier(.22, 1, .36, 1), opacity 0.34s ease;
  box-shadow: var(--shadow-pop);
}
.modal-backdrop.open .modal { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.modal-small { width: min(560px, calc(100vw - 30px)); }
.modal-head { padding: 26px 28px 18px; display: flex; justify-content: space-between; align-items: flex-start; }
.modal-head h2 { font-size: var(--fs-head); letter-spacing: var(--ls-display); font-weight: 500; margin: 0; }
.modal-head .eyebrow { color: var(--text); }

/* Umbruch statt seitlichem Scrollen: bei vielen Schritten (z. B. mehrere
   Kleidungsstuecke) wandern ueberzaehlige Tabs in eine zweite Zeile. Buttons
   schrumpfen dabei nicht (flex: none) und ihr Text bricht nicht intern um
   ("Weitere Artikel" bleibt in einer Zeile) — nur der ganze Button faellt um. */
.step-tabs { display: flex; flex-wrap: wrap; padding: 10px 28px 0; border-bottom: 1px solid var(--line); gap: 4px 26px; }
.step-tabs button {
  border: 0; background: none; padding: 11px 0 15px; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-base); font-weight: 500;
  display: flex; gap: 8px; align-items: center; position: relative;
  flex: none; white-space: nowrap;
}
.step-tabs button:disabled { cursor: default; opacity: .6; }
.step-tabs button b { width: 21px; height: 21px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; }
.step-tabs button.active { color: var(--text); font-weight: 500; }
.step-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); border-radius: 2px 2px 0 0; }
.step-tabs button.active b { background: var(--yellow); color: var(--text); }

/* --- Formularfelder: grau eingebettet, Fokus mit gelbem Halo -------------------- */
.form-step { display: none; padding: 26px 28px 12px; }
.form-step.active { display: block; }
.form-step label { font-size: var(--fs-small); font-weight: 500; color: var(--text); display: grid; gap: 10px; margin-bottom: 16px; }
.form-step input, .form-step select, .form-step textarea, .summary-item-field {
  width: 100%; border: 1.5px solid transparent; background: rgba(255, 255, 255, .6);
  border-radius: var(--r-m); padding: 11px 14px; outline: none;
  color: var(--text); font-size: var(--fs-base);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-step input:not([type="checkbox"]):not([type="radio"]):focus, .form-step select:focus, .form-step textarea:focus {
  background: #fff; border-color: var(--text); box-shadow: var(--focus-ring); outline: none;
}
.form-step input::placeholder, .form-step textarea::placeholder { color: var(--text-muted); }
.form-step textarea { resize: vertical; min-height: 76px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.three-col { display: grid; grid-template-columns: 0.7fr 1.2fr 0.7fr; gap: 10px; }
.new-customer-fields.hidden { display: none; }
.modal-footer { padding: 18px 28px 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.modal-footer > div { display: flex; gap: 8px; }

/* --- Detail-Dialog (Auftrag / Mail / Termin) -------------------------------------------- */
.drawer {
  position: fixed; z-index: 60; left: 50%; top: 50%;
  width: min(760px, calc(100vw - 34px)); max-height: calc(100vh - 44px); overflow: auto;
  background: var(--surface); border-radius: var(--r-xl);
  transform: translate(-50%, -48.5%) scale(0.97); opacity: 0; pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
  box-shadow: var(--shadow-pop);
}
.drawer-backdrop:not([hidden]) { animation: fade-in 0.28s ease; }
@keyframes fade-in { from { opacity: 0; } }
.drawer.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.drawer.appointment-mode { width: min(560px, calc(100vw - 30px)); }
.drawer-appointment-modal { overflow: hidden; border-radius: var(--r-xl); background: var(--ui-canvas); }
.drawer-appointment-modal .modal-head { background: var(--ui-canvas); }
.drawer-appointment-modal .form-step.active { display: block; overflow: visible; }
.drawer-appointment-modal .modal-footer { position: sticky; bottom: 0; z-index: 2; background: var(--ui-canvas); }
.drawer-head { padding: 24px 30px 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface); position: sticky; top: 0; z-index: 2; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.drawer-head-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drawer-head h2 { font-size: 19px; letter-spacing: var(--ls-tight); font-weight: 600; margin: 0; }
.drawer-head p { font-size: var(--fs-small); color: var(--text-muted); margin: 0; letter-spacing: var(--ls-normal); }
.drawer-head-actions { display: flex; align-items: center; gap: 8px; }
/* Kundenprofil im Lesemodus: sieht aus wie das Bearbeitungsformular, nur ohne Eingabe. */
.profile-readonly input[readonly], .profile-readonly textarea[readonly] { cursor: default; }
.profile-readonly select:disabled { cursor: default; opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); }
/* Felder im Lesemodus (Kunde, Anfrage): exakt wie "Kundennachricht" in der Antwort-Maske.
   Ohne Rahmen, ohne Hover und ohne Fokus-Kontur. !important, weil die Eingabe-Regeln in Dialogen sonst gewinnen. */
.inquiry-reply-view input[readonly], .inquiry-reply-view input[readonly]:hover, .inquiry-reply-view input[readonly]:focus, .inquiry-reply-view input[readonly]:focus-visible,
.profile-readonly input[readonly], .profile-readonly textarea[readonly],
.profile-readonly input[readonly]:hover, .profile-readonly textarea[readonly]:hover,
.profile-readonly input[readonly]:focus, .profile-readonly textarea[readonly]:focus,
.profile-readonly input[readonly]:focus-visible, .profile-readonly textarea[readonly]:focus-visible {
  background: rgba(255, 255, 255, .6) !important; border: 0 !important; border-radius: var(--r-m) !important; box-shadow: none !important; outline: none !important;
  font-family: inherit; font-size: var(--fs-base); font-weight: 500; line-height: 21px; letter-spacing: normal; color: var(--text); cursor: default;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.profile-readonly textarea[readonly] { min-height: 0 !important; field-sizing: content; resize: none; }
/* Mailfenster nach dem Termin: Felder mit derselben Schrift wie in "Anfrage beantworten".
   Das Absender-Feld "Von" bekommt denselben Look wie dort (ohne Rahmen, Hover oder Fokus-Kontur). */
.appointment-compose-modal .compose-field input, .appointment-compose-modal .compose-field textarea, .appointment-compose-modal .compose-field select {
  font-weight: 500; letter-spacing: normal; line-height: 21px;
}
.appointment-compose-modal input[readonly],
.appointment-compose-modal input[readonly]:hover,
.appointment-compose-modal input[readonly]:focus,
.appointment-compose-modal input[readonly]:focus-visible {
  background: rgba(255, 255, 255, .6) !important; border: 0 !important; border-radius: var(--r-m) !important; box-shadow: none !important; outline: none !important;
  font-size: var(--fs-base); color: var(--text); cursor: default;
}
/* Nachricht direkt unter dem Betreff: nur der Abstand des Betreff-Feldes (14px), kein zusätzlicher Rand. */
.appointment-compose-modal .compose-message { margin: 0; }
/* Kopfzeile Auftrag: Kunde | Auftragsnummer links, Aktionen rechts auf gleicher Höhe. */
.drawer-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-head-title h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 600; }
.drawer-head-sep { flex: none; width: 2px; height: 20px; background: var(--line); }
.drawer-head-title > span:last-child { flex: none; font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: var(--ls-tight); }
/* Farbige Tags im Kopf der Popups entfallen; der Status bleibt im Fuß des Auftrags einstellbar. */
.drawer-head .status, .drawer-head .branch-chip { display: none; }
.drawer-section { padding: 22px 30px; border-bottom: 1px solid var(--line-soft); }
.drawer-section h3 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-muted); font-weight: 600; margin: 0 0 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 4px; }
.detail-grid strong { font-size: var(--fs-base); font-weight: 500; }
.detail-grid a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(34,34,34,.25); text-underline-offset: 3px; }
.detail-grid a:hover { text-decoration-color: var(--text); }
.item-card { background: var(--surface-2); border-radius: var(--r-l); padding: 14px 16px; margin-top: 9px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.item-card strong, .item-card span { display: block; font-size: var(--fs-base); }
.item-card strong { font-weight: 500; }
.item-card span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }
.drawer-actions {
  display: flex; gap: 9px; padding: 18px 30px; position: sticky; bottom: 0; z-index: 2;
  background: rgba(252, 252, 253, 0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.drawer-actions select { flex: 1; border: 0; border-radius: var(--r-m); padding: 9px 14px; font-size: var(--fs-base); background: rgba(255, 255, 255, .6); }
.drawer-note { font-size: var(--fs-base); color: var(--text-muted); margin: 0; }
.detail-notes { margin-top: 18px; }
.detail-notes small { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 4px; }
.detail-notes p { font-size: var(--fs-base); line-height: 1.55; margin: 0 0 14px; }
.detail-notes p:last-child { margin-bottom: 0; }
.detail-note { margin-top: 14px; padding: 13px 15px; border-radius: var(--r-m); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-base); line-height: 1.55; white-space: pre-wrap; }

.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.section-head h3 { margin: 0; }
.section-sum { font-size: var(--fs-base); font-weight: 600; }

.item-end { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-button.small { width: 30px; height: 30px; box-shadow: none; background: transparent; }
.icon-button.small svg { width: 14px; }
.icon-button.small:hover { color: var(--red); background: var(--red-soft); }

/* Änderungen abhaken */
.check-line { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-base); }
.check-line input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--text); cursor: pointer; flex: none; }
.check-line span strong { display: block; font-size: var(--fs-base); font-weight: 500; }
.check-line span em { display: block; font-style: normal; font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }

/* Inline-Formulare in Dialogen */
.inline-form label { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); display: grid; gap: 10px; margin-bottom: 18px; }
.inline-form input, .inline-form select, .inline-form textarea {
  width: 100%; border: 1.5px solid transparent; background: var(--surface-2);
  border-radius: var(--r-m); padding: 10px 13px; outline: none;
  color: var(--text); font-size: var(--fs-base);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus {
  background: #fff; border-color: var(--text); box-shadow: var(--focus-ring);
}
.inline-form textarea { resize: vertical; min-height: 66px; }
.inline-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.inline-form .two-col, .inline-form .three-col { gap: 10px; }
.inline-form.add-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.inline-form.add-row .primary { min-height: 36px; font-size: var(--fs-base); padding: 7px 14px; }
.inline-form .check-line { margin-bottom: 14px; }
.inline-form .check-line span { font-size: var(--fs-base); color: var(--text); font-weight: 400; }

/* --- Toast & Zustände ------------------------------------------------------------------------------------------- */
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--text); color: var(--text-inverse); border-radius: 999px;
  padding: 13px 22px; font-size: var(--fs-base); font-weight: 500;
  opacity: 0; pointer-events: none; transition: 0.22s;
  box-shadow: 0 10px 30px rgba(34, 34, 34, 0.22);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { padding: 38px; text-align: center; color: var(--text-muted); font-size: var(--fs-base); }
.loading { height: 50px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-m); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* --- Mail-Center --------------------------------------------------------------------------------------------------- */
.mail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mailbox-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mailbox-tab {
  border: 0; background: var(--surface); border-radius: 999px;
  min-height: 38px; padding: 8px 15px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: var(--fs-base); font-weight: 500;
  box-shadow: var(--shadow-card);
  transition: background 0.15s, color 0.15s;
}
.mailbox-tab:hover { background: var(--surface-2); }
.mailbox-tab b { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; }
.mailbox-tab.active { background: var(--text); color: var(--text-inverse); }
.mailbox-tab.active b { background: var(--yellow); color: var(--text); }
.mail-storage-summary { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: -5px 2px 12px; color: var(--text-muted); font-size: var(--fs-small); }
.mail-storage-summary svg { width: 13px; }
.mail-storage-summary span { font-weight: 500; }
.mail-storage-summary strong { color: var(--text-muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.mail-storage-summary small { padding-left: 2px; color: var(--text-muted); }

.mail-panel { padding: 4px 24px; }
.mail-list { min-height: 280px; }
.mail-row {
  appearance: none; width: 100%; background: transparent; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 42px minmax(150px, 0.75fr) minmax(300px, 1.8fr) 128px 72px;
  gap: 10px; align-items: center; min-height: 78px; padding: 13px 4px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  transition: background 0.12s;
}
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { background: var(--surface-2); }
.mail-row.unread { position: relative; }
.mail-row.unread::before { content: ""; position: absolute; left: -14px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 45%, transparent); }
.mail-row.unread .mail-content strong, .mail-row.unread .mail-sender strong { font-weight: 600; }
.mail-quick-actions { display: flex; gap: 5px; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.mail-row:hover .mail-quick-actions, .mail-row:focus-within .mail-quick-actions { opacity: 1; }
.mail-quick-actions .icon-button { width: 32px; height: 32px; background: var(--surface); box-shadow: 0 1px 4px rgba(34, 34, 34, .1); }
.mail-quick-actions .quick-spam:hover { color: var(--amber); background: var(--amber-soft); }
.mail-quick-actions .quick-trash:hover { color: var(--red); background: var(--red-soft); }
.mail-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.mail-sender strong, .mail-sender span { display: block; }
.mail-sender strong { font-size: var(--fs-base); font-weight: 500; }
.mail-sender span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-content > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail-content strong { font-size: var(--fs-base); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-content p { font-size: var(--fs-base); line-height: 1.42; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px 0 0; }
.attachment { flex: none; font-size: var(--fs-small); font-weight: 500; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.mail-meta { text-align: right; }
.mail-meta span, .mail-meta b { display: block; }
.mail-meta span { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mail-meta b { font-size: var(--fs-small); font-weight: 500; margin-top: 6px; color: var(--text-muted); }
.mail-empty { min-height: 340px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 44px; }
.mail-empty-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--yellow-soft); color: var(--text); display: grid; place-items: center; margin-bottom: 18px; }
.mail-empty h2 { font-size: var(--fs-title); font-weight: 600; margin: 0 0 6px; }
.mail-empty p { font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 20px; max-width: 340px; }
.syncing svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mail-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.mail-pagination span { font-size: var(--fs-base); color: var(--text-muted); }

.mail-detail-head h2 { font-size: var(--fs-head); line-height: 1.2; }
.mail-addresses { display: grid; gap: 10px; }
.mail-addresses small, .mail-addresses strong { display: block; }
.mail-addresses small { font-size: var(--fs-small); letter-spacing: var(--ls-wide); color: var(--text-muted); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; }
.mail-addresses strong { font-size: var(--fs-base); font-weight: 500; overflow-wrap: anywhere; }
.mail-body > div { font-size: var(--fs-base); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.mail-html-frame { display: block; width: 100%; height: 600px; border: 0; border-radius: 14px; background: #fff; }
.mail-actions { justify-content: flex-end; }
.audit-line { padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-m); color: var(--text-muted); }
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* --- Einstellungen ---------------------------------------------------------------------------------------------------- */
.settings-intro {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  background: var(--surface); border-radius: var(--r-xl);
  padding: 22px 24px; margin-bottom: 10px; box-shadow: var(--shadow-card);
}
.settings-intro-icon { width: 46px; height: 46px; border-radius: var(--r-m); background: var(--yellow-soft); color: var(--text); display: grid; place-items: center; }
.settings-intro h2 { font-size: var(--fs-title); font-weight: 600; margin: 0 0 4px; }
.settings-intro p { font-size: var(--fs-base); line-height: 1.45; color: var(--text-muted); margin: 0; }
.security-pill { font-size: var(--fs-small); font-weight: 500; color: var(--green-ink); background: var(--green-soft); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }

.auto-sync-card {
  display: grid; grid-template-columns: 1fr 220px; gap: 10px; align-items: center;
  background: var(--surface); border-radius: var(--r-xl);
  padding: 22px 24px; margin-bottom: 10px; box-shadow: var(--shadow-card);
}
.auto-sync-card h3 { font-size: var(--fs-base); font-weight: 600; margin: 0 0 4px; }
.auto-sync-card p { font-size: var(--fs-base); line-height: 1.45; color: var(--text-muted); margin: 0; }
.auto-sync-card label { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); display: grid; gap: 10px; }
.auto-sync-card select, .auto-sync-card input { width: 100%; border: 1.5px solid transparent; background: var(--surface-2); border-radius: var(--r-m); padding: 11px 14px; font-size: var(--fs-base); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.auto-sync-card select:focus, .auto-sync-card input:focus { background: #fff; border-color: var(--text); box-shadow: var(--focus-ring); }

.email-footer-card { display: grid; grid-template-columns: 1fr minmax(320px, .8fr); gap: 10px; align-items: start; margin: 14px 0; padding: 22px 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.email-footer-card h3 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 600; }
.email-footer-card p { margin: 0; color: var(--text-muted); font-size: var(--fs-base); }
.email-footer-card label { display: grid; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.email-footer-card textarea { width: 100%; resize: vertical; border: 1.5px solid transparent; border-radius: var(--r-m); padding: 11px 14px; background: var(--surface-2); font-size: var(--fs-base); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.email-footer-card textarea:focus { background: #fff; border-color: var(--text); box-shadow: var(--focus-ring); }

.email-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.email-account-card { background: var(--surface); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-card); }
.email-account-head { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.mail-slot { width: 40px; height: 40px; border-radius: var(--r-m); background: var(--surface-2); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
.email-account-head h3 { font-size: var(--fs-base); font-weight: 600; margin: 0; }
.email-account-head p { font-size: var(--fs-small); color: var(--text-muted); margin: 3px 0 0; }

.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(34, 34, 34, 0.16); cursor: pointer; transition: 0.2s; }
.switch span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(34, 34, 34, 0.25); transition: 0.2s; }
.switch input:checked + span { background: var(--text); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--yellow); }

.account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.account-fields label, .server-fields label { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); display: grid; gap: 10px; }
.account-fields label:last-child { grid-column: 1 / -1; }
.account-fields input, .server-fields input {
  width: 100%; border: 1.5px solid transparent; background: var(--surface-2);
  border-radius: var(--r-m); padding: 11px 14px; font-size: var(--fs-base); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.account-fields input:focus, .server-fields input:focus { background: #fff; border-color: var(--text); box-shadow: var(--focus-ring); }
.email-account-card details { margin-top: 14px; }
.email-account-card summary { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); cursor: pointer; list-style: none; }
.email-account-card summary:hover { color: var(--text); }
.server-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.account-state { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: var(--fs-small); color: var(--text-muted); }
.account-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.account-state.ok i { background: var(--green); }
.account-state.error { color: var(--red); }
.account-state.error i { background: var(--red); }
.password-warning { font-size: var(--fs-small); line-height: 1.35; color: var(--red); font-weight: 500; }
.account-password.needs-update { background: var(--red-soft); }
.account-actions { display: flex; gap: 9px; margin-top: 12px; }
.account-actions .secondary { flex: 1; }
.account-actions .secondary svg { width: 15px; }

.settings-actions {
  position: sticky; bottom: 16px; margin-top: 18px;
  background: rgba(252, 252, 253, 0.9); backdrop-filter: blur(16px);
  border-radius: 999px; padding: 12px 14px 12px 24px;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  box-shadow: 0 10px 35px rgba(34, 34, 34, 0.1);
}
.settings-actions span { font-size: var(--fs-base); color: var(--text-muted); }

.opening-hours-panel { margin-top: 20px; padding: 24px; }
.opening-hours-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opening-branch { border-radius: var(--r-l); padding: 18px; background: var(--surface-2); }
.opening-branch-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.opening-branch-head i { width: 9px; height: 9px; border-radius: 50%; }
.opening-branch-head h3 { font-size: var(--fs-base); margin: 0; font-weight: 600; }
.opening-day { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.opening-day > strong { font-size: var(--fs-base); font-weight: 500; }
.opening-day > small { grid-column: 1; color: var(--text-muted); font-size: var(--fs-small); }
.opening-time { grid-column: 1/-1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.opening-time input { min-width: 0; border: 1.5px solid transparent; background: #fff; border-radius: 10px; padding: 8px 10px; font-size: var(--fs-base); outline: none; transition: border-color .15s, box-shadow .15s; }
.opening-time input:focus { border-color: var(--text); box-shadow: var(--focus-ring); }
.opening-time span { font-size: var(--fs-small); color: var(--text-muted); }
.opening-day.closed .opening-time { opacity: .45; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.settings-section { padding: 24px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.setting-row div { display: flex; flex-direction: column; }
.setting-row small { color: var(--text-muted); margin-top: 3px; }
.setting-user-actions { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.restore-control { display: grid; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); margin: 6px 0 14px; }
.restore-control input { font-size: var(--fs-base); }

.spam-rules-panel { margin: 18px 0; padding: 24px; }
.spam-rule-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.spam-rule-row { display: grid; grid-template-columns: 90px 1fr 36px; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.spam-rule-row strong { font-size: var(--fs-base); font-weight: 500; }
.spam-rule-row .icon-button { width: 32px; height: 32px; }

/* --- Kundenanfragen ------------------------------------------- */
.inquiry-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.inquiry-list { display: block; }
.inquiry-list .empty { padding: 30px; }
.inquiry-card {
  appearance: none; width: 100%; text-align: left; cursor: pointer; display: block;
  background: transparent; border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 22px 6px;
  position: relative; overflow: visible;
  transition: background 0.14s;
}
.panel .inquiry-card { background: transparent; }
.inquiry-card:last-child { border-bottom: 0; }
/* Der obere Rand des Panels liefert schon genug Abstand (margin-bottom am
   panel-head) — ohne diese Korrektur addiert sich das eigene padding-top der
   ersten Karte noch oben drauf, und der Abstand zur Ueberschrift wirkt doppelt
   so gross wie bei anderen Listen (z. B. Abholbereite Auftraege). */
.inquiry-card:first-child { padding-top: 0; }
/* Text und Datum beginnen immer dort, wo der Name beginnt — also eingerueckt um
   das Rueckruf-Symbol (50px), wenn eines davorsteht. */
.inquiry-card.has-icon .inquiry-preview,
.inquiry-card.has-icon .inquiry-meta-line { margin-left: 50px; }
.inquiry-card:hover { background: color-mix(in srgb, var(--surface-3) 72%, transparent); }
.inquiry-card:active { transform: none; }
.inquiry-card:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.inquiry-type-icon { width: 38px; height: 38px; border-radius: 99px; flex: none; display: grid; place-items: center; }
.inquiry-type-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.inquiry-type-icon.type-message { background: var(--yellow-soft); color: var(--text); }
/* Nachrichten tragen kein Symbol mehr — der Name steht direkt am Kartenrand. */
.inquiry-type-icon.type-callback { background: var(--green-soft); color: var(--green-ink); }
.inquiry-card-top { display: flex; align-items: flex-start; gap: 12px; }
.inquiry-card-tags { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: none; margin-left: auto; }
.inquiry-card-tags .status { background: none; padding: 0; gap: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.inquiry-card-tags .status::before { display: none; }
.inquiry-card-tags .status .live-dot { width: 6px; height: 6px; margin-right: 6px; }
.inquiry-card-tags .icon-button { width: 36px; height: 36px; }
.inquiry-card-tags .icon-button.small { background: var(--surface); box-shadow: var(--shadow-card); }
.inquiry-card-tags .icon-button.has-label { display: inline-flex; align-items: center; width: auto; border-radius: var(--radius-pill); padding: 0 16px 0 12px; gap: 7px; }
.inquiry-card-tags .icon-button.has-label span { font-size: var(--fs-small); font-weight: 500; }
.inquiry-answered-text { color: var(--green-ink); }
.inquiry-who { min-width: 0; padding-top: 1px; }
.inquiry-who strong { display: block; font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--ls-tight); color: var(--text); }
/* Filiale steht hinter dem Namen, in derselben Schrift. Der Trenner ist ein
   gezeichneter Strich statt des Zeichens "|" — nur so sitzt er mittig zur Zeile
   und nicht auf der Grundlinie. */
.inquiry-branch::before {
  content: ""; display: inline-block;
  width: 1px; height: 12px; margin: 0 10px;
  vertical-align: middle;
  background: var(--line);
}
/* Pulsierender Punkt — Form und Takt aus dem Arbitrage-Programm
   (.toggle-btn.is-on .dot): 8px, Ring 1,6s. Die Farbe ist das Akzentgruen,
   mit einem tiefen Gruen leicht abgedunkelt — mit neutralem Ink abgedunkelt
   wuerde daraus ein Graugruen. */
.live-dot {
  --dot: color-mix(in srgb, var(--green) 85%, #0f5132);
  --dot-ring: color-mix(in srgb, var(--dot) 75%, transparent);
  display: inline-block; width: 8px; height: 8px; margin-right: 12px;
  border-radius: 50%; background: var(--dot); vertical-align: 1px;
  animation: live-pulse 1.6s ease-out infinite;
}
/* In der Auftragstabelle steht der Punkt allein in seiner Spalte, dort entfaellt
   der Abstand zum Text. */
.live-dot.is-bare { margin-right: 0; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--dot-ring); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.inquiry-meta-line { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 12px 0 0; }
.inquiry-meta-line .inquiry-date-text { flex: none; font-size: var(--fs-small); font-weight: 500; }
.inquiry-who-inline { display: flex !important; flex-direction: row !important; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.inquiry-who-inline i { font-style: normal; color: var(--text-muted); }
.inquiry-who-inline span { font-size: var(--fs-base); }
.inquiry-tags { display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.branch-chip {
  font-size: var(--fs-small); font-weight: 500; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--branch) 14%, #fff); color: var(--branch);
}
.calendar-event .branch-chip {
  display: inline-block;
  width: fit-content;
  margin-top: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--branch);
}
.inquiry-preview {
  max-width: 550px; font-size: var(--fs-base); line-height: 1.65; font-weight: 500; color: var(--text-muted); letter-spacing: var(--ls-soft);; margin: 12px 0 0;
  padding: 0; border-radius: 0; background: transparent;
  display: block; white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible;
}
.inquiry-date-text { color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; line-height: 1.2; }
.inquiry-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }

.meta-separator {
  display: inline-block !important;
  flex: none;
  margin: 0 6px !important;
  color: var(--text-muted);
  font: inherit;
  overflow: visible !important;
  vertical-align: baseline;
}

.inquiry-message {
  font-size: var(--fs-base); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface-2); border-radius: var(--r-l); padding: 16px 18px;
}
.inquiry-known {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  background: var(--green-soft); border-radius: var(--r-l); padding: 12px 14px; font-size: var(--fs-base); color: var(--green-ink);
}
.inquiry-known svg { width: 16px; flex: none; }
.inquiry-known span { flex: 1; }
.inquiry-known .text-button { flex: none; }
.inquiry-known.is-unknown { background: var(--amber-soft); color: var(--amber); }
.inquiry-reply-sent { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-l); background: var(--green-soft); border-left: 3px solid var(--green); }
.inquiry-reply-sent small { color: var(--green-ink); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-normal); font-size: var(--fs-xs); }
.inquiry-reply-sent p { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }

.status-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  border: 0; background: var(--surface-2); cursor: pointer;
  border-radius: 999px; padding: 9px 16px; font-size: var(--fs-base); font-weight: 500; color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.chip:hover { background: var(--surface-3); color: var(--text); }
.chip.active { background: var(--text); color: var(--text-inverse); }
.kind-chips { display: flex; gap: 7px; flex-wrap: wrap; }
/* Art im Eintrag: Beschriftung wie die Felder darüber, Optionen als Kästchen. */
.kind-field { display: grid; gap: 10px; margin-bottom: 18px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.kind-field > span { padding-left: 2px; }
.kind-chips .chip { padding: 8px 14px; font-size: var(--fs-base); }
.chip-work.active { background: var(--text); }
.chip-vacation.active { background: var(--green); color: var(--text); }
.chip-sick.active { background: var(--red); }
.chip-off.active { background: var(--text-muted); }

.inquiry-note-label { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); display: grid; gap: 10px; margin-bottom: 10px; }
.inquiry-note-label textarea {
  width: 100%; border: 1.5px solid transparent; background: rgba(255, 255, 255, .6); border-radius: var(--r-m);
  padding: 11px 14px; font-size: var(--fs-base); outline: none; resize: vertical; min-height: 66px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.inquiry-note-label textarea:focus { background: #fff; border-color: var(--text); box-shadow: var(--focus-ring); }
.inquiry-actions { justify-content: flex-end; }
.inquiry-actions .secondary {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border-radius: 999px; min-height: 40px; padding: 9px 18px; font-size: var(--fs-base); font-weight: 500;
}
.inquiry-actions .secondary svg { width: 15px; }

/* --- Mitarbeiter & Arbeitszeiten ------------------------------------------------ */
.staff-today { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.today-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: var(--r-xl); padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.today-icon { width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center; flex: none; }
.today-icon svg { width: 18px; }
.today-card strong { display: block; font-size: var(--fs-head); line-height: 1; font-weight: 500; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.today-card span { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-top: 6px; }
.tone-work .today-icon { background: var(--yellow-soft); color: var(--text); }
.tone-vacation .today-icon { background: var(--green-soft); color: var(--green-ink); }
.tone-sick .today-icon { background: var(--red-soft); color: var(--red); }
.tone-team .today-icon { background: var(--surface-2); color: var(--text-muted); }

.week-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.week-nav { display: flex; align-items: center; gap: 12px; }
.week-nav strong { min-width: 230px; text-align: center; font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--ls-tight); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--text-muted); }
.legend-item i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dot-work { background: var(--yellow); }
.dot-vacation { background: var(--green); }
.dot-sick { background: var(--red); }
.dot-off { background: var(--text-muted); }

.roster-panel { padding: 6px 22px; overflow-x: auto; margin-bottom: 10px; }
.roster { min-width: 900px; }
.roster-row {
  display: grid; grid-template-columns: 200px repeat(7, minmax(96px, 1fr)) 92px;
  gap: 10px; align-items: stretch; border-bottom: 1px solid var(--line-soft); padding: 8px 0;
}
.roster-row:last-child { border-bottom: 0; }
.roster-head { border-bottom: 1px solid var(--line); padding: 12px 0 10px; align-items: center; }
.roster-day-head { text-align: center; }
.roster-day-head span { display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); font-weight: 600; }
.roster-day-head strong { display: block; font-size: var(--fs-base); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.roster-day-head.is-today { position: relative; }
.roster-day-head.is-today strong { color: var(--text); }
.roster-day-head.is-today::after { content: ""; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--yellow); margin: 4px auto 0; }
.roster-day-head.is-holiday { background: var(--amber-soft); color: var(--amber); border-radius: var(--r-m); }
.roster-day-head small { font-size: var(--fs-xs); line-height: 1.1; max-width: 72px; }
.roster-day-head.is-closed { background: var(--surface-2); border-radius: var(--r-m); }
.roster-day-head.is-closed span { color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: var(--ls-soft); }

.roster-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.roster-name strong { display: block; font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-name span { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: var(--fs-small); font-weight: 600;
  background: color-mix(in srgb, var(--branch) 16%, #fff); color: var(--branch);
}
.presence-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; }
.presence-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: inherit; opacity: .22; animation: presencePulse 1.8s ease-out infinite; }
.presence-vacation { background: var(--green); }
.presence-sick { background: var(--red); }
@keyframes presencePulse { 0% { transform: scale(.55); opacity: .4; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

.roster-cell { display: grid; gap: 10px; align-content: start; min-height: 54px; border-radius: var(--r-m); padding: 2px; }
.roster-cell.is-today { background: color-mix(in srgb, var(--yellow) 28%, transparent); }
.roster-cell.is-closed { background: repeating-linear-gradient(135deg, #f2f1f4, #f2f1f4 6px, #ebeaee 6px, #ebeaee 12px); padding: 5px; }
.roster-closed { display: flex; min-height: 44px; align-items: center; justify-content: center; flex-direction: column; color: var(--text-muted); border-radius: 8px; }
.roster-closed strong { font-size: var(--fs-small); }
.roster-closed span, .closed-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.closed-note { display: block; text-align: center; }
.shift {
  appearance: none; border: 0; cursor: pointer; width: 100%; text-align: left;
  border-radius: 10px; padding: 14px 11px; transition: filter 0.14s, transform 0.1s;
}
.shift:hover { filter: brightness(0.96); }
.shift:active { transform: scale(0.98); }
.shift strong { display: block; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.shift span { display: block; font-size: var(--fs-small); margin-top: 2px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-work { background: var(--yellow-soft); color: var(--text); }
.shift-vacation { background: var(--green-soft); color: var(--green-ink); }
.shift-sick { background: var(--red-soft); color: var(--red); }
.shift-off { background: var(--surface-2); color: var(--text-muted); }
.shift-add {
  border: 1.5px dashed var(--line); background: transparent; cursor: pointer;
  border-radius: 10px; min-height: 50px; width: 100%; color: var(--text-muted); font-size: var(--fs-title);
  opacity: 0; transition: opacity 0.14s, border-color 0.14s, color 0.14s, background 0.14s;
}
.roster-row:hover .shift-add { opacity: 1; }
.shift-add:hover { border-color: var(--yellow); color: var(--text); background: var(--yellow-soft); }
.shift-add:focus-visible { opacity: 1; }

.roster-sum { text-align: right; align-self: center; font-variant-numeric: tabular-nums; }
.roster-sum strong { display: block; font-size: var(--fs-base); font-weight: 600; }
.roster-sum span { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }
.roster-sum small { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.roster-sum.over strong { color: var(--amber); }
.roster-head .roster-sum { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); font-weight: 600; }
/* Schichtplan in der Typografie der Mitarbeitertabelle: Kopfzeilen ohne Großbuchstaben und ohne Sperrung,
   Namen halbfett, Zweitzeile mit dem Abstand der Tabelle. */
.roster .roster-day-head span,
.roster .roster-head .roster-sum { text-transform: none; letter-spacing: var(--ls-normal); }
.roster .roster-name strong { font-weight: 600; }
.roster .roster-name span { margin-top: 2px; }

/* Mitarbeiter-Tabelle im Stil der Kundenliste: Spalten schrumpfen, Texte werden abgeschnitten, Pfeil rechts. */
.staff-columns { grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(110px, 0.8fr) 24px; }
.staff-columns .cell-plain { font-weight: 400; }
.staff-columns > div > strong, .staff-columns > div > .cell-plain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-columns > div { min-width: 0; padding-right: 16px; }
.staff-columns .staff-remaining { display: inline; font-weight: 600; }
.staff-panel-tools { display: flex; align-items: center; gap: 12px; }
.staff-panel-tools select { width: auto; min-width: 110px; }

/* Übersicht: aktueller Teamstatus */
.current-team { display: grid; gap: 10px; }
.current-team-row { display: grid; grid-template-columns: 9px 92px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: var(--r-l); background: var(--surface-2); }
.current-team-row > i { width: 8px; height: 8px; border-radius: 50%; }
.current-team-row strong { font-size: var(--fs-title); font-weight: 600; margin-right: 6px; }
.current-team-row span { font-size: var(--fs-base); color: var(--text-muted); }
.current-team-row small { text-align: right; font-size: var(--fs-small); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-team-row.tone-work > i { background: var(--yellow); }
.current-team-row.tone-vacation > i { background: var(--green); }
.current-team-row.tone-sick > i { background: var(--red); }

.vacation-announcement { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); min-height: 70px; }
.vacation-announcement:first-child { border-top: 0; }
.vacation-announcement .today-icon { width: 36px; height: 36px; border-radius: var(--r-m); flex: none; }
.vacation-announcement > div:last-child { display: flex; flex-direction: column; }
.vacation-announcement strong { font-size: var(--fs-base); font-weight: 500; letter-spacing: var(--ls-tight); }
.vacation-announcement span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }
.vacation-announcement small { font-size: var(--fs-small); color: var(--text-muted); margin-top: 3px; }

/* --- Filial-Termine auf der Übersicht --------------------------------------- */
.branch-appointment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.branch-appointment { border-radius: var(--r-l); padding: 16px; background: var(--surface-2); }
.branch-appointment-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.branch-appointment-head > i { width: 9px; height: 9px; border-radius: 50%; }
.branch-appointment-head div { display: flex; flex-direction: column; }
.branch-appointment-head span { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
.branch-appointment .timeline { padding-top: 8px; }
.branch-appointment .timeline-time { display: flex; flex-direction: column; min-width: 58px; }
.branch-appointment .timeline-time small { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }

.feature-bar, .mail-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.feature-bar label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); }
.segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-pagination { justify-content: center; margin-top: 16px; }

/* --- Mail verfassen / antworten ------------------------------------------------------------ */
.compose-modal { width: min(760px, calc(100vw - 32px)); max-width: none; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.appointment-compose-modal { width: min(760px, calc(100vw - 32px)); max-width: none; }
.appointment-compose-modal form { padding: 22px 28px 0; }
.compose-head { display: grid; grid-template-columns: 44px 1fr 38px; align-items: start; gap: 10px; padding: 25px 28px 21px; border-bottom: 1px solid var(--line-soft); }
.compose-head-icon { width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; color: var(--text); background: var(--yellow); }
.compose-head-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.compose-head .eyebrow { margin: 0 0 3px; color: var(--text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wider); }
.compose-head h2 { margin: 0; font-size: var(--fs-head); font-weight: 500; letter-spacing: var(--ls-display); }
.compose-subtitle { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.compose-modal form { padding: 22px 28px 0; }
.compose-address-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.compose-field { display: grid; gap: 10px; margin-bottom: 18px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; }
.compose-field > span { padding-left: 2px; }
.compose-field small { font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); }
.compose-field input, .compose-field select, .compose-field textarea { width: 100%; border: 1.5px solid transparent; border-radius: var(--r-m); background: rgba(255, 255, 255, .6); padding: 11px 14px; outline: none; color: var(--text); font-size: var(--fs-base); font-weight: 400; transition: border-color .16s, box-shadow .16s, background .16s; }
.compose-field input, .compose-field select { height: 43px; }
.compose-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23222222' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }
.compose-field input:focus, .compose-field select:focus, .compose-field textarea:focus { background: #fff; border-color: var(--text); box-shadow: var(--focus-ring); }
.compose-subject { padding-bottom: 14px; margin-bottom: 0; border-bottom: 0; }
.compose-message { margin: 14px 0 0; }
.compose-field textarea { min-height: 190px; max-height: 38vh; resize: vertical; line-height: 1.55; }
.compose-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 -28px; padding: 16px 28px 20px; border-top: 1px solid var(--line-soft); }
.compose-actions { display: flex; gap: 9px; }
.compose-actions .primary { min-width: 142px; }
.compose-attachment { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 14px; border-radius: 999px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.compose-attachment:hover { background: var(--surface-2); color: var(--text); }
.compose-attachment input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compose-attachment svg { width: 16px; }
.inquiry-reply-view { overflow: hidden; border-radius: var(--r-xl); }
.inquiry-reply-view .compose-head { grid-template-columns: 38px 1fr 38px; }
.inquiry-reply-view #back-to-inquiry svg { transform: rotate(180deg); }
/* Felder im Antwortfenster wie im Anfrage-Popup: gleiche Schriftstärke und Zeilenabstand. */
.inquiry-reply-view .compose-field input, .inquiry-reply-view .compose-field textarea { font-weight: 500; letter-spacing: normal; line-height: 21px; }
.inquiry-reply-view .inquiry-message { font-weight: 500; letter-spacing: normal; line-height: 21px; }
.inquiry-reply-view .compose-field select { font-weight: 500; letter-spacing: normal; line-height: 21px; }
/* Icons im Kopf des Antwortfensters ganz nach rechts. */
.inquiry-reply-view .compose-head { justify-content: space-between; }
.inquiry-reply-view .compose-head .drawer-head-actions { margin-left: auto; }

/* Eingabefelder überall: 60px hoch, Innenabstand 16px oben/unten und 14px links/rechts.
   Auswahlfelder behalten ihren Platz für den Pfeil rechts. Textfelder (textarea) bleiben mehrzeilig. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
textarea { padding: 16px 14px !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) { min-height: 60px !important; }
select { padding-top: 16px !important; padding-bottom: 16px !important; padding-left: 14px !important; min-height: 60px !important; }
.inquiry-reply-view form { padding: 22px 28px 0; }
.inquiry-reply-view .compose-footer { margin-left: -28px; margin-right: -28px; }

/* --- Kunde anlegen ----------------------------------------------------------- */
.customer-create-modal { width: min(720px, calc(100vw - 32px)); border-radius: var(--r-xl); }
/* "Neuer Auftrag" auf dieselbe Breite wie "Neuen Kunden anlegen" — war bisher
   schmaler (680px aus der allgemeinen .modal-Regel). Als Klasse (nicht ueber
   #order-modal) angelegt, damit die Spezifitaet wie bei .customer-create-modal
   bleibt — sonst wuerde das auf schmalen Bildschirmen die volle Breite aus der
   Mobil-Regel weiter unten (".modal { width: 100% }") ungewollt aushebeln. */
.order-create-modal { width: min(720px, calc(100vw - 32px)); }
/* Dialog "Auftrag erfassen": Die Linie unter den Schritt-Reitern entfaellt, damit unter dem Titel nur eine Linie bleibt. */
.order-create-modal .step-tabs { border-bottom: 0; }
/* Alle Popups: Trennlinie unter dem Kopf und ueber dem Fuss nur zwischen den Innenabstaenden,
   nicht durchgezogen (wie bei den Auftragsdaten). */
:is(.modal, .drawer) .modal-head, :is(.modal, .drawer) .compose-head, :is(.modal, .drawer) .customer-create-head,
:is(.modal, .drawer) .modal-footer, :is(.modal, .drawer) .compose-footer { position: relative; border: 0; }
:is(.modal, .drawer) .modal-head::after, :is(.modal, .drawer) .compose-head::after, :is(.modal, .drawer) .customer-create-head::after,
:is(.modal, .drawer) .modal-footer::after, :is(.modal, .drawer) .compose-footer::after {
  content: ""; position: absolute; left: 30px; right: 30px; height: 1px;
  background: rgba(34,34,34,.075);
}
:is(.modal, .drawer) .modal-head::after, :is(.modal, .drawer) .compose-head::after, :is(.modal, .drawer) .customer-create-head::after { bottom: 0; }
:is(.modal, .drawer) .modal-footer::after, :is(.modal, .drawer) .compose-footer::after { top: 0; }
.customer-create-head { display: block; padding: 24px 30px 20px; border-bottom: 1px solid var(--line-soft); background: var(--ui-canvas); }
.customer-create-icon { width: 46px; height: 46px; border-radius: var(--r-m); background: var(--yellow); color: var(--text); display: grid; place-items: center; }
.customer-create-icon svg { width: 21px; height: 21px; }
.customer-create-head .eyebrow { margin: 0 0 3px; color: var(--text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wider); }
.customer-create-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: var(--ls-tight); }
.customer-create-head p:last-child { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
.customer-create-modal .form-step { padding-top: 21px; }
.form-section-label { margin: 12px 0 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wide); color: var(--text-muted); text-transform: uppercase; }

/* --- Termin-Detail ------------------------------------------------------------ */
.customer-meta-grid { margin-bottom: 10px; }
.appointment-detail-section .section-head { align-items: center; margin-bottom: 10px; }
.appointment-head-actions { display: flex; align-items: center; gap: 8px; }
.appointment-head-actions .secondary.compact svg { width: 14px; }
.appointment-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appointment-summary > div, .appointment-summary > label { padding: 14px 15px; border-radius: var(--r-l); background: var(--surface-2); margin: 0; border: 0; }
.appointment-summary small { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.appointment-summary strong { display: none; }
.appointment-summary input, .appointment-summary select, .appointment-summary textarea { width: 100%; border: 1.5px solid transparent; border-radius: 10px; background: #fff; padding: 9px 11px; font-size: var(--fs-base); outline: none; transition: border-color .15s, box-shadow .15s; }
.appointment-summary select { padding-right: 30px; }
.appointment-summary input:disabled, .appointment-summary select:disabled, .appointment-summary textarea:disabled { opacity: 1; color: var(--text); background: transparent; -webkit-text-fill-color: var(--text); cursor: default; padding-left: 0; }
.appointment-summary-form.is-readonly select { appearance: none; background-image: none !important; padding-right: 10px; }
.appointment-summary-form.is-editing select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23222222' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; }
.appointment-summary input:focus, .appointment-summary select:focus, .appointment-summary textarea:focus { border-color: var(--text); box-shadow: var(--focus-ring); }
.appointment-summary-form.is-readonly .appointment-edit-actions { display: none !important; }
.appointment-summary-form.is-editing .appointment-edit-actions { display: flex !important; }
/* Lesemodus des Termins: deaktivierte Felder sehen aus wie die Lesefelder im Kundenprofil. */
#appointment-edit-form.profile-readonly :is(input, select, textarea):disabled {
  background: rgba(255, 255, 255, .6) !important; border: 0 !important; border-radius: var(--r-m) !important; box-shadow: none !important; outline: none !important;
  appearance: none; background-image: none !important; font-family: inherit; font-size: var(--fs-base); font-weight: 500; line-height: 21px; letter-spacing: normal;
  color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; cursor: default; min-height: 0 !important;
}
#appointment-edit-form.profile-readonly textarea:disabled { field-sizing: content; resize: none; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Fußzeile des Termins: bündig mit den Abschnitten des Popups (30px Innenabstand). */
.compose-footer.appointment-footer { margin: 0; padding: 16px 30px 20px; }
.appointment-note-field { grid-column: 1/-1; }
.appointment-edit-actions { grid-column: 1/-1; justify-content: flex-end; background: transparent !important; border: 0 !important; padding: 4px 0 0 !important; }

/* --- Druck: Maßblatt / Auftragsbeleg ------------------------------------------ */
.print-sheet { display: none; }
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block; padding: 10mm 6mm; color: var(--text); font-size: var(--fs-base); }
  .print-sheet header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 18px; }
  .print-sheet h1 { font-size: var(--fs-head); margin: 0 0 2px; letter-spacing: var(--ls-display); }
  .print-sheet header p { margin: 0; color: var(--text-muted); }
  .print-meta { text-align: right; }
  .print-meta strong { display: block; font-size: var(--fs-title); }
  .print-meta span { color: var(--text-muted); }
  .print-sheet section { margin-bottom: 16px; }
  .print-sheet h2 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin: 0 0 7px; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .print-sheet th { color: var(--text-muted); font-weight: 600; width: 18%; white-space: nowrap; }
  .print-sheet td.num { text-align: right; white-space: nowrap; }
  .print-sheet p { margin: 0; line-height: 1.55; }
  .print-sheet footer { margin-top: 28px; padding-top: 14px; border-top: 1px solid #999; color: var(--text); }
}

/* --- Responsive: Tablet ------------------------------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .brand span { display: none; }
  .brand strong { max-width: 130px; white-space: normal; line-height: 1.2; font-size: var(--fs-base); }
}
@media (max-width: 1100px) {
  .dashboard-masonry { flex-direction: column; }
  .purchase-grid { grid-template-columns: 1fr; }
  .mail-row { grid-template-columns: 42px minmax(130px, 0.75fr) minmax(220px, 1.5fr) 100px 70px; }
  .email-account-grid { grid-template-columns: 1fr; }
  .inquiry-columns { grid-template-columns: 1fr; }
  .staff-today { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* --- Responsive: Mobil --------------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .topbar-inner { height: 64px; gap: 12px; }
  .mobile-menu {
    display: grid; place-items: center; border: 0; background: var(--surface);
    width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; /* Menuezeichen */
    box-shadow: var(--shadow-card); flex: none;
  }
  /* Nav wird zum Dropdown-Panel (app.js togglet .open auf .sidebar) */
  nav.sidebar {
    position: fixed; top: 64px; left: 12px; right: 12px; z-index: 40;
    display: none; margin: 0;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--shadow-pop); padding: 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  nav.sidebar.open { display: flex; }
  nav.sidebar .nav-label {
    display: block; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide);
    color: var(--text-muted); font-weight: 600; padding: 14px 14px 6px;
  }
  nav.sidebar .nav-label:first-child { padding-top: 6px; }
  .nav-item { height: 44px; border-radius: var(--r-m); justify-content: flex-start; }
  .nav-item svg { display: block; }
  .nav-item b { margin-left: auto; }
  .nav-settings { width: auto; padding: 0 15px; justify-content: flex-start; }
  .nav-settings span { display: block; }
  .brand strong { display: none; }
  .brand span { display: none; }
  .top-actions select { max-width: 150px; }
}

@media (max-width: 1400px) and (min-width: 901px) {
  .brand span { display: none; }
  .nav-item { padding-inline: 8px; font-size: var(--fs-base); gap: 5px; }
  .topbar-inner { gap: 12px; padding-inline: 24px; }
  .top-actions select { width: 174px; padding-left: 12px; padding-right: 26px; }
  .contextbar { padding-inline: 24px; }
}

@media (max-width: 760px) {
  .settings-grid, .branch-appointment-grid, .opening-hours-grid, .garment-alteration-rows, .checkbox-list { grid-template-columns: 1fr; }
  .feature-bar { align-items: flex-start; flex-direction: column; }
  .contextbar { flex-wrap: wrap; padding-bottom: 12px; }
  .context { min-width: 0; flex: 1; }
  .context > span { display: none; }
  .branch-toggle { width: 100%; overflow-x: auto; }
  .branch-toggle button { min-height: 32px; padding: 0 11px; font-size: var(--fs-small); }
  .top-actions .primary { font-size: var(--fs-base); padding: 9px 13px; }

  .view { padding: 22px 16px 52px; }
  .page-head { margin-bottom: 30px; }
  .page-head.split { align-items: flex-start; flex-direction: column; }
  .page-head h1 { font-size: var(--fs-head); }
  .page-head > div > p:last-child { font-size: var(--fs-base); }
  .head-actions { width: 100%; }
  .head-actions .primary, .head-actions .secondary { flex: 1; }

  .metric-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .trend-card { padding: 20px; border-radius: var(--r-l); }
  .trend-stat-main strong { font-size: var(--fs-head); }
  .panel { padding: 18px; border-radius: var(--r-l); }

  .toolbar { flex-direction: column; }
  .search { min-width: 0; max-width: none; width: 100%; }
  .table-panel { overflow-x: auto; padding: 4px 18px; }
  .data-table { min-width: 730px; }

  .calendar-day { grid-template-columns: 1fr; gap: 10px; }
  .calendar-date { padding: 0 4px; display: flex; align-items: baseline; gap: 10px; }
  .calendar-event { grid-template-columns: 5px 60px 1fr 0.8fr; }
  #today-appointments .dashboard-calendar-event { grid-template-columns: 12px 92px 1fr 0.8fr; }
  .appointment-branch { display: none; }
  .calendar-event > div:last-child { display: none; }

  .modal { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .modal-head { padding: 22px 20px 16px; }
  .modal-head h2 { font-size: var(--fs-head); }
  .step-tabs { padding: 0 20px; gap: 20px; }
  .form-step { padding: 22px 20px 10px; }
  .modal-footer { padding: 16px 20px 22px; }

  .drawer { width: calc(100vw - 22px); max-height: calc(100vh - 22px); }
  .drawer-head { padding: 24px 22px 20px; }
  .drawer-head h2 { font-size: var(--fs-head); }
  .drawer-section { padding: 20px 22px; }
  .drawer-actions { padding: 16px 22px; }
  .drawer-head-actions { gap: 6px; }

  .mail-toolbar { align-items: stretch; flex-direction: column; }
  .mailbox-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .mailbox-tab { white-space: nowrap; }
  .mail-panel { padding: 3px 16px; }
  .mail-row { grid-template-columns: 40px minmax(0, 1fr) 70px 70px; gap: 10px; min-height: 74px; }
  .mail-sender { display: none; }
  .mail-content p { max-width: 210px; }
  .mail-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mail-quick-actions { opacity: 1; }

  .settings-intro { grid-template-columns: 44px 1fr; padding: 18px; }
  .security-pill { grid-column: 1 / -1; width: max-content; }
  .auto-sync-card { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .email-account-card { padding: 18px; }
  .account-fields { grid-template-columns: 1fr; }
  .settings-actions { bottom: 9px; }
  .settings-actions span { margin-right: auto; }
  .email-footer-card { grid-template-columns: 1fr; }
  .compose-head { padding: 20px; }
  .compose-modal form { padding: 18px 20px 0; }
  .compose-address-grid { grid-template-columns: 1fr; }
  .compose-footer { margin: 0 -20px; padding: 14px 20px 18px; align-items: stretch; flex-direction: column; }
  .compose-actions { justify-content: flex-end; }

  .purchase-row-head { flex-wrap: wrap; }
  .inquiry-card-top { flex-direction: row; gap: 8px; }
  .inquiry-actions { flex-direction: column-reverse; }
  .inquiry-actions .secondary, .inquiry-actions .primary { width: 100%; justify-content: center; }

  .today-card { padding: 15px 16px; border-radius: var(--r-l); }
  .today-card strong { font-size: var(--fs-head); }
  .week-bar { gap: 10px; }
  .week-nav { width: 100%; justify-content: space-between; }
  .week-nav strong { min-width: 0; font-size: var(--fs-base); }
  .legend { width: 100%; }
  .roster-panel { padding: 6px 14px; }
  .shift-add { opacity: 1; }
}

/* ========================================================================== 
   UI System 2026 — finale visuelle Ebene
   Diese Regeln bilden die verbindliche Oberfläche aller Ansichten und Dialoge.
   ========================================================================== */

html { background: var(--ui-canvas); }
body {
  background:
    radial-gradient(circle at 97% 97%, rgba(123, 213, 151, .10), transparent 32rem),
    var(--ui-canvas);
  background-attachment: fixed, fixed;
  color: var(--text);
  font-family: var(--font-ui);
}

/* Schwebende App-Navigation */
.topbar {
  top: 14px;
  width: min(calc(100% - 28px), 1680px);
  margin: 14px auto 0;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 28px;
  background: rgba(247,247,248,.5);
  box-shadow: 0 10px 42px rgba(34,34,34,.07);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  overflow: clip;
}
.topbar-inner { height: 72px; padding-inline: clamp(18px, 2.7vw, 42px); }
.contextbar {
  padding: 9px clamp(18px, 2.7vw, 42px) 13px;
  border-top: 1px solid rgba(34,34,34,.045);
}
.brand-mark {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(34,34,34,.05);
}
.brand strong { font-size: var(--fs-base); }
.brand span { font-size: var(--fs-small); }
nav.sidebar { background: rgba(34,34,34,.035); border-radius: var(--radius-pill); }
.nav-item { min-height: 42px; }
.nav-item.active { box-shadow: none; }
.top-actions select { min-height: 44px; }
.avatar { width: 44px; height: 44px; box-shadow: inset 0 0 0 1px rgba(34,34,34,.06); }

/* Seitenrhythmus */
.view {
  max-width: 1680px;
  padding: 56px clamp(24px, 3.4vw, 58px) 96px;
}
.page-head { margin-bottom: 30px; }
.page-head h1 {
  font-size: var(--type-heading);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: var(--ls-display);
}
.eyebrow { font-size: var(--fs-small); letter-spacing: var(--ls-wider); }
.page-head > div > p:last-child { font-size: var(--fs-base); }

/* Karten und Kennzahlen */
.metric-grid { gap: 10px; }
.trend-card,
.panel,
.today-card,
.auto-sync-card,
.email-footer-card,
.email-account-card,
.settings-intro {
  border: 1px solid rgba(255,255,255,1);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.5);
  box-shadow: 0 1px 2px rgba(34,34,34,.035), 0 16px 45px rgba(34,34,34,.035);
}

/* Weißer Glass-Rand auch auf den übrigen weißen/hellen Bedienelementen */
.icon-button,
.round-button,
.context select,
.toolbar select,
.top-actions select,
.mail-toolbar select,
.panel-head select,
.search,
.mailbox-tab,
.mobile-menu,
.secondary {
  border: 1px solid rgba(255,255,255,.78);
}
.branch-toggle::before {
  border: 1px solid rgba(255,255,255,.78);
}
.panel { padding: 50px; }
.panel h2 { font-size: var(--fs-title); font-weight: 600; }
.panel-head p { font-size: var(--fs-base); }
.table-row strong,
.today-card strong,
.vacation-announcement strong,
.alert strong,
.mail-sender,
.customer-name { font-weight: 600; }
.eyebrow,
.table-header { font-weight: 600; }
#view-dashboard .text-button {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.view.active { animation: view-enter 220ms var(--ease-clean) both; }

/* Einheitliche Controls */
.primary,
.secondary {
  min-height: 44px;
  padding-inline: 20px;
  border-radius: var(--radius-pill);
  transition: transform var(--motion-fast) var(--ease-clean), background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.primary { box-shadow: 0 8px 20px rgba(34,34,34,.13); }
.primary:hover { transform: translateY(-1px); box-shadow: 0 11px 24px rgba(34,34,34,.18); }
.secondary { box-shadow: inset 0 0 0 1px var(--ui-line); }
.secondary:hover { transform: translateY(-1px); }
.icon-button,
.round-button { width: 44px; height: 44px; }
.toolbar {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.toolbar .search { max-width: 500px; }
.search { min-height: 48px; border-radius: var(--radius-control); }
.search input { font-size: var(--fs-base); }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-radius: var(--radius-control);
}
.form-step input,
.form-step select,
.compose-field input,
.compose-field select,
.summary-item-field { min-height: 60px; }
.form-step textarea,
.compose-field textarea { min-height: 132px; }
.form-step label,
.compose-field { font-size: var(--fs-small); letter-spacing: var(--ls-soft); }

/* Datentabellen */
.table-panel { border-radius: var(--radius-card); }
.table-header { color: var(--text-muted); }
.table-row { transition: background var(--motion-fast), transform var(--motion-fast); }
.table-row:hover { background: rgba(240,239,242,.62); }
.status,
.branch-chip,
.count-pill,
.pill { border-radius: var(--radius-pill); }

/* Liquid-Glass-System für alle Overlays */
.modal-backdrop,
.drawer-backdrop {
  background: rgba(34,34,34,.24);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.modal-backdrop {
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal,
.compose-modal,
.customer-create-modal,
.drawer {
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--radius-modal);
  /* Dieselbe Flaeche wie die Dashboard-Buehne; die Eingabefelder sitzen als
     weisse Elemente darauf, genau wie die Karten auf dem Dashboard. */
  background: var(--ui-canvas);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.modal {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  overflow: hidden;
  transform: translateY(10px) scale(.98);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal > .modal-head,
.modal > .compose-head,
.modal > .customer-create-head { flex: none; }
.modal:not(.compose-modal) > form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.modal:not(.compose-modal) .step-tabs { flex: none; }
.modal:not(.compose-modal) .form-step.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.modal:not(.compose-modal) .modal-footer {
  position: relative;
  z-index: 2;
  flex: none;
  background: var(--ui-canvas);
}
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  background-color: rgba(255,255,255,.96);
}
.modal-head,
/* Alle Popup-Köpfe wie der Kopf von Kunde und Bestellung: Titel links, Aktionen rechts auf einer Linie.
   Untertitel, Kürzel und Symbole entfallen. */
.compose-head {
  display: flex; align-items: center; gap: 12px;
  min-height: 0;
  padding: 24px 30px 20px;
  background: var(--ui-canvas);
  border-bottom: 1px solid var(--ui-line);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; padding: 24px 30px 20px; background: var(--ui-canvas); border-bottom: 1px solid var(--ui-line); }
.modal-head > div:first-child, .compose-head > div:not(.compose-head-icon) { flex: 1; min-width: 0; }
.modal-head .eyebrow, .modal-head p, .compose-head .eyebrow, .compose-head p, .compose-head-icon { display: none; }
.modal-head h2,
.compose-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: var(--ls-tight); }
.compose-head-icon,
.customer-create-icon { border-radius: 50%; background: var(--yellow); }
.step-tabs { padding: 18px 30px 0; }
.step-tabs button { min-height: 44px; }
.step-tabs button b { width: 28px; height: 28px; }
.step-tabs button.active b { background: var(--ui-ink); color: var(--text-inverse); }
.form-step { padding: 28px 30px 14px; }
.modal-footer,
.compose-footer {
  min-height: 78px;
  padding: 16px 30px 22px;
  border-top: 1px solid var(--ui-line);
}
.drawer {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  transform: translate(-50%, -48%) scale(.98);
}
.drawer.open { transform: translate(-50%, -50%) scale(1); }
.toast {
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(34,34,34,.86) !important;
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Bewegungsdisziplin */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 900px) {
  .topbar {
    top: 8px;
    width: calc(100% - 16px);
    margin-top: 8px;
    border-radius: 22px;
    overflow: visible;
    background: rgba(247,247,248,.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar-inner { height: 66px; }
  nav.sidebar {
    background: rgba(240,239,242,.94);
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 24px;
    box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
  nav.sidebar::before { display: none; }
  .nav-item.active { background: var(--text); }
}

@media (max-width: 760px) {
  .view { padding: 34px 16px 64px; }
  .trend-card, .panel { border-radius: 20px; }
  .modal-backdrop { padding: 0; }
  .modal, .compose-modal, .customer-create-modal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .modal-head, .compose-head { padding: 22px 20px 18px; }
  .form-step { padding: 22px 20px 10px; }
  .modal-footer, .compose-footer { padding: 14px 20px 20px; }
}

/* Finale Feldoberfläche: bewusst nach den allgemeinen Overlay-Regeln.
   Auf der hellgrauen Overlay-Flaeche liegen die Felder als halbtransparentes
   Weiss (60 %) — dieselbe Umkehrung wie auf dem Dashboard, wo die Karten mit
   derselben Deckkraft auf der Buehne liegen. Beim Fokus werden sie voll deckend. */
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  outline: none;
  color: var(--text);
  background-color: rgba(255, 255, 255, .6);
  box-shadow: none;
}
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover,
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):hover {
  border-color: rgba(34,34,34,.10);
}
.modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
.drawer :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  border-color: rgba(34,34,34,.18);
  background-color: var(--ui-surface);
  box-shadow: 0 0 0 3px rgba(34,34,34,.045);
}
.modal .form-step :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select),
.drawer .inline-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  min-height: 60px;
  padding: 11px 13px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .6);
}
.modal .form-step textarea,
.drawer .inline-form textarea {
  min-height: 104px;
  padding: 11px 13px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .6);
}
/* Gleiche Spezifitaet wie die beiden Regeln darueber, sonst setzt sich deren
   halbtransparentes Weiss auch im Fokus durch. */
.modal .form-step :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
.drawer .inline-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  background-color: var(--ui-surface);
}

/* ==========================================================================
   Tages-Umsatzkarte: dieselbe Trendkarte wie „Umsatz Woche", nur ueber alle
   Kalendertage des Monats — enger gesetzte Balken, jeder Tag beschriftet.
   ========================================================================== */
.metric-grid-wide { margin-bottom: 8px; }

/* Zeitraum-Umschalter im Kopf der Umsatzkarte */
.trend-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* Gleiche Optik wie der Filialfilter (.branch-toggle): heller Trog, der aktive
   Eintrag als weisse Pille. Ohne dessen gleitende Markierung — die braucht eine
   JS-gefuehrte Position und bringt hier bei drei festen Eintraegen nichts. */
.range-switch {
  --range-glide-x: 4px;
  --range-glide-width: 0px;
  position: relative;
  display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px;
  background: rgba(34, 34, 34, 0.045);
}
/* Gleitende Markierung wie im Filialfilter: die Pille wandert zum aktiven
   Eintrag, statt an der neuen Stelle aufzutauchen. Position setzt syncRangeIndicator(). */
.range-switch::before {
  content: "";
  position: absolute; z-index: 0; left: 0; top: 4px;
  width: var(--range-glide-width); height: 34px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transform: translate3d(var(--range-glide-x), 0, 0);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), width 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, width;
}
.range-tab {
  position: relative; z-index: 1;
  min-height: 34px; padding: 0 15px;
  border: 0; border-radius: 999px;
  background: transparent;
  font: inherit; font-size: var(--fs-base); font-weight: 500; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s;
}
.range-tab:hover { color: var(--text); }
.range-tab.is-active { background: transparent; color: var(--text); font-weight: 600; box-shadow: none; }
.range-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Lange Achsenbeschriftungen (ausgeschriebene Monate) nicht ueberlaufen lassen */
.trend-chart-axis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .trend-card-head { flex-wrap: wrap; }
  .trend-head-actions { width: 100%; justify-content: space-between; }
  .range-tab { flex: 1; padding: 0 10px; font-size: var(--fs-small); }
  .trend-chart-axis { font-size: var(--fs-xs); }
}
.trend-chart-bars.is-dense { gap: 4px; }
/* Ohne Filial-Aufschluesselung ist Platz fuer eine deutlich hoehere Balkenleiste. */
.trend-chart-bars.is-tall { height: 224px; }
.trend-chart-bars.is-dense .pbar { border-radius: 6px 6px 0 0; }
.trend-chart-bars.is-dense .pbar-value { font-size: var(--fs-xs); }
.trend-chart-bars.is-dense + .trend-chart-axis { gap: 2px; font-size: var(--fs-xs); }

@media (max-width: 760px) {
  .trend-chart-bars.is-dense { gap: 1px; }
  .trend-chart-bars.is-tall { height: 180px; }
  .trend-chart-bars.is-dense .pbar-value { display: none; }
  .trend-chart-bars.is-dense + .trend-chart-axis { gap: 1px; font-size: var(--fs-xs); }
  /* Zu schmal fuer 31 Zahlen: nur noch jeden zweiten Tag beschriften */
  .trend-chart-bars.is-dense + .trend-chart-axis span:nth-child(even) { visibility: hidden; }
}

/* ==========================================================================
   Overlays: Feinschliff
   ========================================================================== */

/* Fokus in Popups und Schublade: nur eine schwarze Kontur, kein gelber Ring.
   Die Selektoren liegen bewusst spaet und ausreichend spezifisch, sonst greifen
   die allgemeinen .form-step- und .compose-field-Regeln mit var(--focus-ring). */
.modal-backdrop .modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus,
.drawer :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
  border-color: var(--text);
  box-shadow: none;
}

/* Schrittzahlen der inaktiven Reiter tragen dieselbe Flaeche wie die Eingabefelder. */
.modal-backdrop .modal .step-tabs button b { background: rgba(255, 255, 255, .6); }
.modal-backdrop .modal .step-tabs button.active b { background: var(--text); color: var(--text-inverse); }

/* Hoehenwechsel zwischen den Schritten laeuft weich (Hoehe setzt animateModalHeight).
   Waehrenddessen ist das Fenster kurz niedriger als sein schon umgeschalteter
   Inhalt — ohne overflow:hidden blitzt dabei ein Rollbalken auf. Bewusst spuerbar
   langsamer als die uebrigen UI-Uebergaenge — das Popup ist das Herzstueck der
   Auftragserfassung und soll sich nie abrupt anfuehlen. */
.modal.is-resizing { transition: height 460ms cubic-bezier(.22, 1, .36, 1); overflow: hidden; }
.modal.is-resizing .form-step.active { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .modal.is-resizing { transition: none; }
}

/* ==========================================================================
   Dubletten im Kundentab
   ========================================================================== */
.dedupe-panel { margin-bottom: 10px; }
.dedupe-group { padding: 18px 0; border-top: 1px solid var(--line); }
.dedupe-group:first-child { border-top: 0; padding-top: 4px; }
.dedupe-reasons { margin: 0 0 12px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.dedupe-rows { display: grid; gap: 8px; }
.dedupe-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--r-l);
  background: rgba(255, 255, 255, .6); cursor: pointer;
  border: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-clean);
}
.dedupe-row:hover { border-color: rgba(34, 34, 34, .10); }
.dedupe-row input { width: 16px; height: 16px; accent-color: var(--text); margin: 0; }
.dedupe-row input:checked ~ .dedupe-choice strong { font-weight: 600; }
.dedupe-choice { display: grid; gap: 2px; min-width: 0; }
.dedupe-choice strong { font-size: var(--fs-base); font-weight: 500; }
.dedupe-choice small { font-size: var(--fs-small); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dedupe-meta { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.dedupe-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.dedupe-actions span { font-size: var(--fs-small); color: var(--text-muted); }

@media (max-width: 760px) {
  .dedupe-row { grid-template-columns: 20px minmax(0, 1fr); }
  .dedupe-meta { grid-column: 2; }
  .dedupe-actions { flex-direction: column; align-items: stretch; }
}

/* --- Anfertigungsart & Artikel-Schnellauswahl im Auftragsformular --------------
   Checkboxen/Radios als eigenes Feld im selben Stil wie Textfelder/Selects
   (.form-step input), nicht als Pille — heller Kasten, der sich beim Ankreuzen
   wie ein fokussiertes Eingabefeld hervorhebt (gleiche Farben/Schatten). */
.field-label { margin-bottom: 8px !important; }
.field-label-small {
  display: block; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted);
  margin: 2px 0 8px;
}
.production-type-choice { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.checkbox-grid {
  display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
  gap: 10px 10px; margin-bottom: 18px; justify-content: start;
}
/* Je 2 Auswahlmoeglichkeiten nebeneinander statt alle untereinander (z. B. die
   Kleidungsstueck-Auswahl und die Aenderungsoptionen im Auftragsformular). */
.checkbox-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; margin-bottom: 18px;
}
.checkbox-list > .field-check, .checkbox-list > .garment-row { width: 100%; }
/* Kleidungsstueck-Checkbox + Bearbeiten-Button (gleicher Stil wie der Antworten-
   Button bei "Neue Anfragen") nebeneinander. Der Button bleibt ausserhalb des
   <label>, sonst wuerde ein Klick auf ihn auch die Checkbox umschalten. */
.garment-row { display: flex; align-items: center; gap: 8px; }
.garment-row .field-check { flex: 1 1 auto; min-width: 0; }
.garment-row .garment-edit { flex: none; }
/* Sobald fuer das Kleidungsstueck etwas eingetragen wurde, wird aus dem Stift ein
   Haken mit gruenem Rand — bleibt klickbar, oeffnet weiterhin den Editor. */
.garment-edit.is-filled { box-shadow: 0 0 0 1px var(--green-ink); color: var(--green-ink); }
.garment-edit.is-filled:hover { background: var(--green-soft); }
/* "Sakko und Weste gehoeren zu einem Outfit" (Weste-Massblatt bei NewMen) —
   .kleidung-editor-item als Praefix, sonst gewinnt die spaeter definierte, gleich
   spezifische Regel "label.field-check { font-weight: 500 }". */
.kleidung-editor-item label.outfit-check { display: flex; width: 100%; font-weight: 600; }
/* Alle Mass-/Eingaberaster in den Kleidungsstueck-Editoren gleich breit statt der
   sonst ueblichen 0.7fr 1.2fr 0.7fr-Aufteilung (fuer Groesse/Stoff/Preis anderswo
   gedacht, hier aber lauter gleichartige Felder). */
.kleidung-editor-item .three-col { grid-template-columns: 1fr 1fr 1fr; }
.kleidung-editor-item .measure-wide { grid-column: span 2; }
/* Raster mit mehr Feldern als Spalten (z. B. 7 Massfelder im 3-spaltigen Raster)
   brechen intern in mehrere Zeilen um. Jedes Feld ist ein <label> mit eigenem
   margin-bottom (.form-step label, 16px) fuer den Abstand NACH dem ganzen Raster —
   addiert sich das mit dem 10px Grid-Gap (.two-col/.three-col), bekommt die 2.
   Zeile 26px Abstand zur 1. statt der ueberall sonst ueblichen 16px. Darum hier
   den Zeilenabstand im Grid selbst auf 0, der Abstand kommt dann einheitlich nur
   noch vom Label-margin — bei einzeiligen Rastern (Spaltenabstand bleibt 10px)
   ohnehin ohne Wirkung. */
.kleidung-editor-item .two-col, .kleidung-editor-item .three-col { row-gap: 0; }
/* Verschluss/Doppelreiher bei Sakko (Jerome Clothier): genau 4 Optionen, alle in
   einer Zeile statt der sonst ueblichen 2 Spalten von .checkbox-list — die
   Mindestbreite pro Pille (label.field-check) muss dafuer mit herunter, sonst
   brechen 4 Pillen in der vollen Editor-Breite trotzdem um. */
.kleidung-editor-item .checkbox-list-4col { grid-template-columns: repeat(4, 1fr); }
.kleidung-editor-item .checkbox-list-4col .field-check { min-width: 0; padding-inline: 10px; }
/* Gesaesstasche bei Hose: genau 3 Checkboxen, darum eigene Spaltenzahl statt der
   sonst ueblichen 2 Spalten von .checkbox-list. */
.kleidung-editor-item [data-single-group="pocket"] { grid-template-columns: 1fr 1fr 1fr; }
/* Mindestbreite pro Pille (label.field-check) bei Gesaesstasche/Galon (Hose)
   herunter, kompakter als die sonst ueberall geltenden 160px. */
.kleidung-editor-item [data-single-group="pocket"] .field-check,
.kleidung-editor-item [data-single-group="galon"] .field-check {
  min-width: 0; padding-inline: 10px;
}
.alt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt-price { flex: none; font-size: var(--fs-small); font-weight: 600; color: var(--text); margin-left: auto; }
/* Eingabefeld einer angehakten Aenderungsoption: reiht sich in .alteration-fields
   einfach unter den anderen Eingabefeldern ein (eine Zeile pro Option, Titel +
   Preis in einer Kopfzeile dank .alt-field-head als Flex-Container — .alt-label/
   .alt-price sind sonst fuer die Checkbox daneben gedacht, hier aber identisch
   wiederverwendet). */
.alt-field-head { display: flex; align-items: baseline; gap: 8px; }
/* .alteration-fields ist EIN Grid fuer alle Zeilen (anders als die uebrigen Felder,
   die je 2 pro .two-col-Div stehen) und braucht darum ausnahmsweise den Zeilenabstand
   wieder im Grid selbst statt vom Label-margin (das ist hier ja genullt) — mit
   ".kleidung-editor-item" davor, damit das spezifischer ist als die pauschale
   "row-gap: 0"-Regel fuer .two-col/.three-col oben und nicht von ihr verdeckt wird. */
.kleidung-editor-item .alteration-fields { row-gap: 16px; }
.alteration-fields .alt-stacked-field { margin-bottom: 0; }
/* "Sonstiges" hat keinen festen Preis wie die uebrigen Optionen, darum eine volle
   Zeile mit frei editierbarer Bezeichnung (links) und Preis (rechts) statt Titel +
   Preis + optionaler Anmerkung. */
.alteration-fields .alt-sonstiges-field { grid-column: 1 / -1; }

/* Artikel-Bloecke im gemeinsamen Schritt "Weitere Artikel" (Kategorien ohne
   Anpassungsoptionen) — mit Trennlinie zwischen mehreren Bloecken. */
.simple-item-block + .simple-item-block { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }

/* Raster fuer Detailangaben in Popups (Kunde, Auftrag) — gleicher Look wie die
   Auftragsdaten in der Zusammenfassung: Beschriftung klein und gedaempft, Wert darunter,
   Trennlinie zwischen den Zellen, letzte Zeile ohne Linie und ohne Abstand nach unten. */
.detail-grid-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-cell { min-width: 0; padding: 16px 0; border-bottom: 1px solid rgba(34,34,34,.075); }
.detail-cell.left { padding-right: 20px; }
.detail-cell.right { padding-left: 20px; }
.detail-cell.wide { grid-column: 1 / -1; }
.detail-cell.is-last { border-bottom: 0; padding-bottom: 0; }
.detail-cell small { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 400; }
.detail-cell strong { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
/* Mehrzeiliger Text (Nachricht, Antwort) behält seine Zeilenumbrüche. */
.detail-cell .pre-line { display: block; font-weight: 400; white-space: pre-wrap; }
/* Links in den Angaben wie im Kundenprofil: Textfarbe, dezente Unterstreichung. */
.detail-cell a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(34,34,34,.25); text-underline-offset: 3px; }
.detail-cell a:hover { text-decoration-color: var(--text); }

/* Alle Seitenpanels: Linie unter dem Kopf und ueber den Buttons nur zwischen den Innenabstaenden
   (30px), nicht durchgezogen. Kopf und Button-Bereich haben dieselbe Flaeche wie der Inhalt. */
.drawer .drawer-head,
.drawer .drawer-actions { position: relative; border-bottom: 0; border-top: 0; background: var(--ui-canvas); backdrop-filter: none; }
/* Nachricht und Antwort wie ein weißes Eingabefeld (gleicher Look wie die Felder im Auftrag). */
.inquiry-detail .inquiry-field + .inquiry-field { margin-top: 16px; }
.inquiry-detail .inquiry-field small { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 400; }
.inquiry-detail .inquiry-message {
  background: rgba(255, 255, 255, .6); border-radius: 10px; padding: 11px 13px;
  font-size: var(--fs-base); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text);
}
.drawer .drawer-head::after,
.drawer .drawer-actions::before {
  content: ""; position: absolute; left: 30px; right: 30px; height: 1px;
  background: rgba(34,34,34,.075);
}
.drawer .drawer-head::after { bottom: 0; }
.drawer .drawer-actions::before { top: 0; }
/* Mitarbeiter-Popup und Eintrag anlegen wie das Kundenprofil: gleiche Breite, gleicher Kopf (Hintergrund und Linie), gleiche Innenabstaende. */
#employee-modal .modal, #shift-modal .modal { width: min(760px, calc(100vw - 32px)); }
#employee-modal .drawer-head, #shift-modal .drawer-head { position: relative; border-bottom: 0; border-top: 0; background: var(--ui-canvas); }
#employee-modal .drawer-head::after, #shift-modal .drawer-head::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: rgba(34,34,34,.075); }
/* .profile-view ist ein Zweispalten-Raster; das Lesefeld liegt aber als ein Block darin und muss die volle Breite nehmen. */
#employee-modal .employee-profile-view { display: block; padding: 22px 30px; }
#employee-modal .form-step, #shift-modal .form-step { padding-top: 22px; }
@media (max-width: 600px) {
  .detail-grid-list { grid-template-columns: 1fr; }
  .detail-cell.left, .detail-cell.right { padding-left: 0; padding-right: 0; }
}

/* Zusammenfassung vor dem Anlegen — reine Kontrollanzeige. Auftragsdaten im
   Raster des Kundenprofils (.profile-view, Trennlinien; letzte Zeile ohne Linie,
   s. .profile-detail-last), Artikel in der boxigen Feld-Optik
   (.summary-item-field, gleiche Hoehe/Hintergrund wie ein Eingabefeld, s. o.) —
   nur Zahlung nutzt die schlichte Listen-Darstellung (.detail-list/.detail-row).
   Keine eigenen Section-Titel mehr. Je 30px Platz vor UND nach der Trennlinie
   zwischen den Bereichen; die letzte Sektion (Zahlung) bekommt keine eigene
   Trennlinie mehr, sonst haenge da eine Linie ins Leere. Nur das horizontale
   Padding wird auf 0 gesetzt — der Schritt selbst (.form-step) bringt schon
   30px mit, addiert haette es doppelt eingerueckt gewirkt. */
#order-summary .summary-section { padding: 0 0 30px; margin-bottom: 30px; }
#order-summary .summary-section:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
#order-summary .profile-view { padding: 0; }
#order-summary .profile-detail-last { border-bottom: 0; padding-bottom: 0px;}
#order-summary .profile-detail:last-child { padding-bottom: 0; }
/* Beschriftungen wie im Schritt davor (.detail-grid small): normale Schrift, kein Großbuchstaben-Stil */
#order-summary .profile-detail small {
  font-size: var(--fs-small); font-weight: 400; letter-spacing: normal;
  text-transform: none; margin-bottom: 4px;
}
/* Gesamtbetrag-Aufschluesselung bei Zahlung: Label links (klein, gedaempft),
   Betrag rechts etwas kraeftiger, einzeilig untereinander. */
.detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.detail-row small { font-size: var(--fs-small); color: var(--text-muted); }
.detail-row strong { font-size: var(--fs-base); font-weight: 500; font-variant-numeric: tabular-nums; flex: none; }
.detail-list { display: flex; flex-direction: column; gap: 14px; }
/* Jede Artikelzeile: Padding/Hintergrund/Radius/Hoehe kommen direkt aus
   denselben Regeln wie bei den readonly-Inputs (.form-step input, s. o., plus
   deren min-height:60px weiter oben in der Datei) — .summary-item-field ist
   dort jeweils als zusaetzlicher Selektor eingetragen, nicht separat
   nachgebaut. Hier nur noch die Flex-Anordnung fuer Kategorie/Marke/Farbe/
   Groesse links und Preis rechts — der Inhalt bleibt einzeilig (Ellipsis statt
   Umbruch), sonst waeren Zeilen mit mehr Angaben hoeher als kurze. */
.summary-item-field { display: flex; align-items: center; gap: 14px; }
.summary-item-field span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nicht ":last-child" ergaenzen, um den Abstand nach der letzten Zeile zu
   entfernen — bei einem Artikel mit Aenderungen ist die letzte Aenderungszeile
   "letztes Kind" ihres eigenen .summary-children-Wrappers, nicht der tatsaechlich
   letzte Artikel insgesamt. Das hat sonst genau den Abstand zum naechsten
   Kleidungsstueck (z. B. Hose nach Westes Aenderungen) verschluckt — derselbe
   Fehlertyp wie vorher schon bei "label:last-child". */
.summary-item-row { margin-bottom: 16px; }
/* Angehakte Aenderungen eines Artikels: eingerueckt, mit Baum-Linie verbunden —
   ein durchgehender senkrechter Strich bis zur Mitte des letzten Kindes. Die
   Hoehe wird nach dem Rendern per JS aus den tatsaechlichen Zeilenpositionen
   gemessen statt aus einer angenommenen Px-Zeilenhoehe geraten — bleibt so auch
   korrekt, wenn sich Schriftgroesse/Abstand hier noch einmal aendern. An jedem
   Kind zweigt eine kurze waagerechte Linie ab, die VOR dem Eingabefeld endet
   statt es zu beruehren. */
.summary-children { position: relative; margin-left: 22px; }
.summary-children-trunk { position: absolute; left: 0; top: 0; width: 0; border-left: 1.5px solid var(--line); }
.summary-item-child { position: relative; padding-left: 30px; }
.summary-item-child::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px;
  border-top: 1.5px solid var(--line);
}
.summary-section .three-col { margin-top: 18px; }
/* Vor "Anzahlung"/"Offener Restbetrag" (payment-breakdown-gap) eine duenne
   Linie, um die reine Auftragssumme von der Zahlungslage abzusetzen. */
.payment-breakdown { margin-top: 22px; }
.payment-breakdown-gap { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* --- Kleidungskategorien (Einstellungen) ------------------------------------- */
.garment-category-card { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.garment-category-card:first-child { border-top: 0; padding-top: 0; }
.garment-category-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.garment-category-name { flex: 1 1 auto; font-weight: 600; }
.garment-category-group { flex: 0 0 150px; }
/* Je 2 Anpassungsoptionen nebeneinander statt alle untereinander. */
.garment-alteration-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 12px; }
.garment-alteration-rows .drawer-note { grid-column: 1 / -1; }
.garment-alteration-row { display: grid; grid-template-columns: 1fr 100px 36px; align-items: center; gap: 8px; }
.garment-category-name, .garment-category-group, .garment-alt-label, .garment-alt-price, #new-garment-category {
  border: 1.5px solid transparent; background: var(--surface-2); border-radius: var(--r-m);
  padding: 11px 14px; font-size: var(--fs-base); outline: none; min-height: 60px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.garment-category-name:focus, .garment-category-group:focus, .garment-alt-label:focus, .garment-alt-price:focus, #new-garment-category:focus {
  background: #fff; border-color: var(--text); box-shadow: var(--focus-ring);
}

/* .form-step label ist display:grid mit hoeherer Spezifitaet (Klasse+Element) als ein
   einfaches .field-check — darum hier als label.field-check qualifiziert, sonst bleiben
   Kaestchen und Text im Grid uebereinander statt nebeneinander im Feld. */
label.field-radio, label.field-check {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
  border-radius: var(--r-m); padding: 18px 18px; min-height: 60px; box-sizing: border-box;
  font-size: var(--fs-base); font-weight: 500;
  background: rgba(255, 255, 255, .6); color: var(--text); border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
  margin-bottom: 0; min-width: 160px;
}
.field-radio:hover, .field-check:hover { background: var(--surface-3); }
.field-radio:has(:checked), .field-check:has(input:checked) {
  background: #fff; border-color: var(--text);
}

/* Native Checkbox/Radio komplett neu gezeichnet — das Standard-Browser-Kaestchen
   passt farblich und groessenmaessig nicht zum restlichen Formular. Auswahlkarten
   (.field-check) bleiben optisch Kaestchen, auch wenn sie als Radio angelegt sind
   (Auftragsart, Lieferant — dort darf nur eine Option gewaehlt sein). */
.field-radio input[type="radio"], .field-check input[type="checkbox"], .field-check input[type="radio"] {
  appearance: none; margin: 0; padding: 0; flex: none; cursor: pointer; position: relative;
  width: 19px; height: 19px; min-width: 19px; min-height: 0; max-height: 19px;
  border: 1.5px solid var(--text-muted);
  background: #fff; transition: border-color .15s, background .15s;
}
.field-radio input[type="radio"] { border-radius: 50%; }
.field-check input[type="checkbox"], .field-check input[type="radio"] { border-radius: 6px; }
.field-radio input[type="radio"]:checked, .field-check input:checked {
  border-color: var(--text) !important; background: var(--text) !important;
}
.field-check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--text-inverse); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.field-radio input[type="radio"]:checked::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--text-inverse); transform: translate(-50%, -50%);
}
.field-radio input[type="radio"]:focus-visible, .field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px;
}

/* --- Artikel im Auftragsformular ---------------------------------------------- */
.order-total-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.order-total small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); margin-bottom: 10px; }
.order-total strong { display: block; font-size: var(--fs-head); font-weight: 600; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }
.order-total-row label { margin-bottom: 0; }

/* Abschnittskopf ohne Ueberschrift: nur die Aktion (Bearbeiten, Summe) steht rechts. */
.drawer .section-head.section-head-actions { justify-content: flex-end; }

/* Eingabefelder in allen Popups: dieselben Innenabstaende und Masse wie bei "Auftrag erfassen"
   (Felder 60px hoch, 11px/13px Innenabstand, 10px Ecken; Textfelder mind. 104px). */
:is(.modal, .drawer) :is(input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="time"], input[type="password"], input[type="search"], input[type="url"], select) {
  min-height: 60px; padding: 11px 13px; border-radius: 10px;
}
:is(.modal, .drawer) textarea { min-height: 104px; padding: 11px 13px; border-radius: 10px; }
/* Feste Hoehe der Mail-Felder aufheben, damit die Mindesthoehe gilt; Platz fuer den Auswahlpfeil bleibt. */
:is(.modal, .drawer) .compose-field :is(input, select) { height: auto; }
:is(.modal, .drawer) .compose-field select { padding-right: 40px; }

/* Trennlinien in Popups: gestrichelt statt durchgezogen (wie die Linie ueber den Auftrags-Artikelfeldern),
   bzw. ganz weg, wo es laut Vorgabe keine gibt. */
.detail-cell.is-dashed { border-bottom: 1px dashed var(--line); }
/* Anfrage: keine Linie über "Nachricht" und keine unter "Notiz speichern". */
.inquiry-detail > .drawer-section:nth-of-type(1),
.inquiry-detail > .drawer-section:nth-of-type(3) { border-bottom: 0; }
/* Keine Trennlinien zwischen Daten, Nachricht und Interner Notiz. */
.inquiry-detail .drawer-section + .drawer-section::before { display: none; }
/* Ohne Linie nur den Abstand des Abschnitts oben weglassen, damit der Abstand wie vorher bleibt. */
.inquiry-detail .drawer-section + .drawer-section { padding-top: 0; }
/* Nachricht und Interne Notiz im selben Abstand wie die Felder darüber (gemessen: 13px). */
.inquiry-detail > .drawer-section:nth-of-type(1) { padding-bottom: 0; }
/* Klickbare Auftragskarten im Kundenpopup: Optik und Abstaende wie die Artikelzeilen
   der Zusammenfassung (.summary-item-field / .summary-item-row). Letzte Karte ohne
   Abstand nach unten, damit der Abschnitt nicht zusaetzlich aufgeht. */
.summary-item-field.clickable { cursor: pointer; transition: background 0.12s; }
.summary-item-field.clickable:hover { background: var(--yellow-soft); }
.drawer .summary-item-row:last-child { margin-bottom: 0; }

/* Trennlinien zwischen den Abschnitten in Popups: nicht ueber die volle Breite, sondern wie die
   Linien in den Auftragsdaten (30px Abstand links/rechts). Gestrichelt, wo der Abschnitt davor es vorgibt. */
.drawer .drawer-section { position: relative; border-bottom: 0; }
.drawer .drawer-section + .drawer-section::before {
  content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 1px;
  background: var(--line-soft);
}
.drawer .drawer-section.linie-gestrichelt + .drawer-section::before {
  height: 0; background: none; border-top: 1px dashed var(--line);
}

/* NewMen-Aufpreise: Gesamtsumme unter den Optionen, rechts ausgerichtet. */
.newmen-aufpreise { margin-top: 18px; }
.newmen-aufpreis-summe { margin: 10px 0 0; text-align: right; font-size: var(--fs-small); color: var(--text-muted); }
.newmen-aufpreis-summe strong { color: var(--text); font-weight: 500; font-size: var(--fs-base); }

/* Antwort-Maske: Kundennachricht oberhalb des Antworttextes, gleicher Look wie im Anfrage-Popup. */
/* Kundennachricht wie die Felder darüber: gleicher Abstand, Beschriftung und Innenabstand. */
.inquiry-reply-view .inquiry-field { margin: 0 0 18px; }
.inquiry-reply-view .inquiry-field small { display: block; margin-bottom: 10px; padding-left: 2px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; }
.inquiry-reply-view .inquiry-message {
  background: rgba(255, 255, 255, .6); border-radius: var(--r-m); padding: 16px 14px;
  font-size: var(--fs-base); font-weight: 500; line-height: 21px; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text);
}

/* Dropdown-Pfeil: weiter nach innen, mit Abstand zum Rand. Der Text endet vor dem Pfeil. */
select { background-position: right 16px center !important; }
:is(.modal, .drawer) select:not([multiple]) { padding-right: 40px !important; }
.status-select { padding-right: 34px; }

/* Dropdowns in Dialogen und Panels: eigener Pfeil statt des Browser-Pfeils, der am Rand klebt.
   Der Pfeil sitzt 16px vom rechten Rand, der Text endet davor (40px Innenabstand). */
:is(.modal, .drawer) select:not([multiple]) {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%23222222' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
}

/* Termin anlegen: gleiche Breite wie "Auftrag erfassen". */
#appointment-modal .modal { width: min(720px, calc(100vw - 32px)); }

/* Zusammenfassung Artikel: Strich zwischen dem fetten Namen und dem Zusatztext, nur wenn Text folgt
   (gleicher Strich wie bei .inquiry-branch). */
.summary-item-field .item-detail::before {
  content: ""; display: inline-block;
  width: 1px; height: 12px; margin: 0 10px;
  vertical-align: middle;
  background: var(--line);
}
/* Angehakte Änderung im Auftrags-Popup: Checkbox links, Zeile wie eine Artikelzeile der Zusammenfassung.
   Erledigte Änderung durchgestrichen (wie vorher .item-card.alteration.done). */
.summary-item-field.alteration { cursor: pointer; }
.summary-item-field input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--text); cursor: pointer; }
.summary-item-field.alteration.done strong { text-decoration: line-through; color: var(--text-muted); }
.summary-item-field .item-detail.is-overdue { color: var(--red); font-weight: 500; }
/* Angehakte Anpassungen unter ihrem Kleidungsstück (wie in „Auftrag erfassen“), eingerückt mit Linie. */
.drawer .order-item-children { margin: -4px 0 16px 22px; padding-left: 14px; border-left: 1px solid var(--line); display: grid; gap: 8px; }
.drawer .order-item-children .summary-item-row { margin-bottom: 0; }
/* --- Anmeldung -------------------------------------------------------------------- */
.current-user-label { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
body.logged-out .shell { display: none; }
.login-screen { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: var(--ui-canvas, #f0eff2); }
.login-screen[hidden] { display: none; }
.login-card { width: min(380px, 100%); background: var(--surface, #fff); border-radius: var(--r-xl, 24px); box-shadow: var(--shadow-pop); padding: 32px 28px 26px; display: grid; gap: 14px; }
.login-card .brand-mark { margin-bottom: 4px; }
.login-card h1 { margin: 0; font-size: var(--fs-head); font-weight: 500; letter-spacing: var(--ls-display); }
.login-sub { margin: -8px 0 6px; font-size: var(--fs-small); color: var(--text-muted); }
.login-card label { display: grid; gap: 8px; font-size: var(--fs-small); font-weight: 500; }
.login-card select, .login-card input { width: 100%; min-height: 48px; border: 1.5px solid transparent; background-color: rgba(255, 255, 255, .6); border-radius: var(--r-m); padding: 11px 14px; font-size: var(--fs-base); color: var(--text); outline: none; }
.login-card input:focus, .login-card select:focus { background-color: #fff; border-color: var(--text); box-shadow: var(--focus-ring); }
.login-error { margin: 0; color: var(--red); font-size: var(--fs-small); }
.login-submit { width: 100%; justify-content: center; }

/* --- Chat ------------------------------------------------------------------------- */
/* Schwebendes Chat-Icon unten rechts und das Fenster darüber (liegt unter Dialogen, z-index 50). */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--text); color: var(--text-inverse); box-shadow: var(--shadow-pop); }
.chat-fab:hover { transform: translateY(-1px); }
.chat-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chat-fab b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; display: grid; place-items: center; }
.chat-fab b[hidden] { display: none; }
.chat-widget { position: fixed; right: 24px; bottom: 92px; z-index: 45; width: min(880px, calc(100vw - 32px)); height: min(640px, calc(100vh - 130px)); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); overflow: hidden; }
.chat-widget[hidden] { display: none; }
.chat-widget-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.chat-widget-head > strong { font-size: var(--fs-title); font-weight: 600; }
.chat-widget-actions { display: flex; align-items: center; gap: 8px; }
.chat-widget-actions svg { width: 14px; height: 14px; }
.chat-widget-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
.chat-list-panel { display: flex; flex-direction: column; overflow: hidden; padding: 8px 8px 0; min-height: 0; border-right: 1px solid var(--line-soft); }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 4px; align-content: start; }
.chat-list-footer { flex: none; padding: 8px 4px 10px; border-top: 1px solid var(--line-soft); }
.chat-group-button { width: 100%; justify-content: center; }
.chat-group-button svg { width: 14px; height: 14px; }
.chat-create-modal { width: min(520px, calc(100vw - 32px)); }
.chat-create-body { padding: 18px 28px 8px; display: grid; gap: 14px; }
.chat-group-field { display: grid; gap: 8px; font-size: var(--fs-small); font-weight: 500; }
.chat-group-field input { border: 1.5px solid transparent; background-color: rgba(255, 255, 255, .6); border-radius: var(--r-m); padding: 11px 14px; font-size: var(--fs-base); outline: none; }
.chat-group-field input:focus { background-color: #fff; border-color: transparent; box-shadow: none; }
.chat-user-options { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.chat-user-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--surface-2); cursor: pointer; }
.chat-user-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--text); }
.chat-user-option span { display: grid; }
.chat-user-option small { color: var(--text-muted); font-size: var(--fs-small); }
.chat-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--r-m); padding: 10px 12px; cursor: pointer; color: var(--text); font: inherit; }
.chat-item:hover { background: rgba(255, 255, 255, .6); }
.chat-item.active { background: var(--yellow-soft); }
.chat-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: var(--fs-small); font-weight: 600; }
.chat-avatar[data-kind="group"] { background: var(--yellow-soft); }
.chat-item-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chat-item-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status-Punkt vor dem Namen: grün = online, grau = offline. */
.chat-status-dot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: #c4c4cc; }
.chat-status-dot.online { background: var(--green); }
.chat-status-dot.is-spacer { background: transparent; }
.chat-item-text small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); }
.chat-item-meta { flex: none; display: grid; justify-items: end; gap: 4px; }
.chat-item-meta small { color: var(--text-muted); font-size: var(--fs-small); }
.chat-thread-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.chat-empty { margin: auto; color: var(--text-muted); padding: 24px; text-align: center; }
.chat-empty[hidden] { display: none; }
.chat-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-thread[hidden] { display: none; }
.chat-thread-head { display: grid; gap: 2px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.chat-thread-head small { color: var(--text-muted); font-size: var(--fs-small); }
/* Name im Chatkopf im Stil von .panel-head h2. */
.chat-thread-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--ls-tight); color: var(--text); }

/* --- Animationen im Chat: kurz und weich. Bei reduzierter Bewegung aus. ---------- */
.chat-widget { opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right; transition: opacity .24s ease, transform .34s cubic-bezier(.32,.72,0,1); }
.chat-widget.is-open { opacity: 1; transform: none; }
.chat-fab { transition: transform .22s cubic-bezier(.32,.72,0,1), box-shadow .22s ease; }
.chat-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px rgba(34, 34, 34, .22); }
.chat-fab:active { transform: scale(.94); }
.chat-fab svg { transition: transform .3s cubic-bezier(.32,.72,0,1); }
.chat-fab[aria-expanded="true"] svg { transform: rotate(-12deg) scale(.92); }
.chat-item { transition: background-color .18s ease, transform .18s ease; }
.chat-item:active { transform: scale(.985); }
.chat-group-button { transition: background-color .18s ease, transform .18s ease; }
.chat-group-button:active { transform: scale(.97); }
.chat-load-more { transition: background-color .18s ease, transform .18s ease; }
.chat-load-more:hover { background: var(--surface-3, #e6e6ea); }
.chat-load-more:active { transform: scale(.97); }
#chat-input { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.chat-messages.is-switching { animation: chat-fade-in .28s ease both; }
.chat-row.is-new .chat-bubble { animation: chat-bubble-in .34s cubic-bezier(.2,.8,.2,1) both; }
.chat-chip { animation: chat-fade-in .2s ease both; }
.chat-empty { animation: chat-fade-in .3s ease both; }
@keyframes chat-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Drei-Punkte-Knopf an eigenen Nachrichten: erscheint beim Drüberfahren. */
.chat-msg-more { align-self: center; flex: none; width: 28px; height: 28px; margin-right: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .16s ease, transform .16s ease, background-color .16s ease; }
.chat-msg-more svg { width: 16px; height: 16px; fill: currentColor; }
.chat-msg-more:hover { background: var(--surface-2); }
.chat-row.mine:hover .chat-msg-more, .chat-msg-more:focus-visible { opacity: 1; transform: none; }
/* Rechtsklick-Menü auf eigenen Nachrichten. */
.chat-context-menu { position: fixed; z-index: 70; min-width: 190px; padding: 6px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-pop); opacity: 0; transform: scale(.96); transform-origin: top left; transition: opacity .14s ease, transform .18s cubic-bezier(.32,.72,0,1); }
.chat-context-menu:not([hidden]).is-open { opacity: 1; transform: none; }
.chat-context-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: var(--fs-base); color: var(--red); text-align: left; cursor: pointer; transition: background-color .15s ease; }
.chat-context-menu button:hover { background: var(--surface-2); }
@keyframes chat-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chat-widget, .chat-fab, .chat-fab svg, .chat-item, .chat-group-button, .chat-load-more, #chat-input,
  .chat-messages.is-switching, .chat-row.is-new .chat-bubble, .chat-chip, .chat-empty { transition: none; animation: none; }
}
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 6px; }
.chat-load-more { align-self: center; border: 0; background: var(--surface-2); border-radius: 999px; padding: 6px 14px; font-size: var(--fs-small); cursor: pointer; color: var(--text); }
.chat-day { align-self: center; margin: 10px 0 4px; }
.chat-day span { font-size: var(--fs-small); color: var(--text-muted); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 4px 12px; }
.chat-row { display: flex; justify-content: flex-start; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble { max-width: min(560px, 78%); background: var(--surface-2); border-radius: 18px 18px 18px 6px; padding: 8px 12px 6px; display: grid; gap: 4px; }
.chat-row.mine .chat-bubble { background: var(--yellow-soft); border-radius: 18px 18px 6px 18px; }
.chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-base); line-height: 1.45; }
.chat-bubble time { justify-self: end; font-size: 11px; color: var(--text-muted); }
.chat-sender { font-weight: 600; color: var(--text-muted); font-size: var(--fs-small); }
.chat-image img { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; }
.chat-file { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; background: rgba(255, 255, 255, .7); border-radius: 12px; padding: 8px 10px; }
.chat-file svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chat-file span { display: grid; min-width: 0; }
.chat-file strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); }
.chat-file small { color: var(--text-muted); font-size: 11px; }
.chat-composer { border-top: 1px solid var(--line-soft); padding: 12px 16px 14px; display: grid; gap: 8px; }
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-pending:empty { display: none; }
.chat-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: var(--fs-small); }
.chat-chip small { color: var(--text-muted); font-size: 11px; }
.chat-chip button { border: 0; background: transparent; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--text-muted); }
.chat-composer-row { display: flex; align-items: flex-end; gap: 10px; }
.chat-attach { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--surface-2); color: var(--text); }
.chat-attach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#chat-input { flex: 1; min-width: 0; max-height: 140px; resize: none; border: 1.5px solid transparent; background-color: rgba(255, 255, 255, .6); border-radius: var(--r-m); padding: 11px 14px; font: inherit; font-size: var(--fs-base); color: var(--text); outline: none; }
#chat-input:focus { background-color: #fff; border-color: transparent; box-shadow: none; }
.chat-avatar.is-online { position: relative; }
.chat-avatar.is-online::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--surface); }
.chat-status { color: var(--text-muted); }
.chat-status.online { color: var(--green-ink); }
/* Überschriften der Liste im Stil von .table-header. Zwischen den Abschnitten ein durchgehender Strich. */
.chat-section-label { display: flex; align-items: center; height: 50px; margin: 0; padding: 0 6px; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-normal); }
.chat-section-label:not(:first-child) { margin-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .chat-fab { right: 16px; bottom: 16px; }
  .chat-widget { right: 16px; left: 16px; bottom: 84px; width: auto; height: calc(100vh - 110px); }
  .chat-widget-body { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 32%) minmax(0, 1fr); }
  .chat-list-panel { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .chat-bubble { max-width: 88%; }
}

/* Kategorie (z. B. Maß/Bestellanzug) in der Zusammenfassung: nicht fett. */
.summary-item-field .item-category { font-weight: 600; }
/* Maß-Kategorien bleiben in der Zusammenfassung nicht fett. */
.summary-item-field .item-category.is-plain { font-weight: 400; }
/* Mittelpunkte "·" innerhalb der Zeile (Auftragsnummer/-art, Filiale/Datum, Marke/Stoff/Groesse)
   werden von replaceMetaSeparators() in app.js erzeugt. Hier als gleicher Strich mit gleichem
   Abstand wie oben dargestellt; der Text "·" wird ausgeblendet. */
.summary-item-field .meta-separator {
  display: inline-block !important;
  width: 1px !important; height: 12px !important; margin: 0 10px !important;
  font-size: 0; color: transparent; vertical-align: middle;
  background: var(--line);
  overflow: hidden !important;
}


/* Taschen öffnen: gleicher Abstand nach unten wie die Checkbox-Listen (18px), damit die nächste Überschrift nicht klebt. */
.two-col.pocket-block { margin-bottom: 18px; }

/* Kunden-Popup und "Auftrag erfassen": Fettschrift (Standard 700) auf 600.
   :where() setzt die Spezifitaet auf null, damit alle Regeln mit eigenem Schriftgewicht
   (500/600) unveraendert bleiben und nur die Standard-Fettschrift von strong/b/Ueberschriften/th wechselt. */
:where(.drawer:has(#customer-profile-view), .drawer:has(#order-items), #order-modal .modal) :where(strong, b, h1, h2, h3, h4, h5, h6, th) {
  font-weight: 600;
}

/* Alle Popups: Feldbeschriftungen einheitlich in #222. */
:is(.modal, .drawer) label,
:is(.modal, .drawer) .compose-field,
:is(.modal, .drawer) .kind-field { color: #222; }

/* Alle Popups gleich breit wie "Neue Anfrage" (760px), unabhängig von der Klasse (modal-small, compose-modal, appointment-mode usw.). */
:is(.modal, .compose-modal, .customer-create-modal, .drawer) { width: min(760px, calc(100vw - 32px)) !important; max-width: none !important; }

/* Status-Auswahl in den Auftragstabellen: Pille mit Punkt in der Phasenfarbe (currentColor), Pfeil dezent. */
.order-status-progress .status-select {
  font-weight: 500; letter-spacing: var(--ls-tight);
  padding: 7px 30px 7px 28px; box-shadow: none;
  background-image: radial-gradient(circle at 13px center, currentColor 3px, transparent 3.5px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='currentColor' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat; background-position: 0 0, right 11px center; background-size: 100% 100%, 8px 5px;
}
.order-status-progress .status-select:hover { box-shadow: none; }

/* Neue Nachricht wie "Anfrage beantworten": gleicher Innenabstand, gleiche Schrift in den Feldern und gleicher Abstand zum Betreff. */
.compose-modal form { padding: 22px 28px 0; }
.compose-modal .compose-field input, .compose-modal .compose-field textarea, .compose-modal .compose-field select { font-weight: 500; letter-spacing: normal; line-height: 21px; }
.compose-modal .compose-message { margin: 0; }
/* Absender "Von" im Mailfenster: festes Feld ohne Rahmen, Hover oder Fokus-Kontur wie bei "Anfrage beantworten". */
.compose-modal input[readonly], .compose-modal input[readonly]:hover, .compose-modal input[readonly]:focus, .compose-modal input[readonly]:focus-visible {
  background: rgba(255, 255, 255, .6) !important; border: 0 !important; box-shadow: none !important; outline: none !important; cursor: default;
}
/* Absender "Von" im Mailfenster: festes Feld ohne Rahmen, Hover oder Fokus-Kontur wie bei "Anfrage beantworten". */
.compose-modal input[readonly], .compose-modal input[readonly]:hover, .compose-modal input[readonly]:focus, .compose-modal input[readonly]:focus-visible {
  background: rgba(255, 255, 255, .6) !important; border: 0 !important; box-shadow: none !important; outline: none !important; cursor: default;
}

/* Terminart braucht eine ganze Zeile im Formular, nicht die halbe Breite neben einem anderen Feld. */
.two-col > .kind-field { grid-column: 1 / -1; }

/* Termin-Formulare: Datum, Uhrzeit und Dauer gleich breit; die drei Terminarten nehmen die ganze Zeile. */
#appointment-modal .three-col, .appointment-detail-section .three-col, #inquiry-inline-appointment-form .three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kind-field .checkbox-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kind-field .checkbox-list > .field-check { width: 100%; }

/* Terminart: der Abstand nach unten kommt nur vom Feldabstand, nicht doppelt von der Kästchenliste. */
.kind-field .checkbox-list { margin-bottom: 0; }

/* Abholbereite Aufträge im Dashboard: Summe linksbündig wie im Tab Aufträge. */
#pickup-ready-orders .amount { text-align: left; }

/* Tabellen: Zeileninhalte nie leichter als 500 (Namen und Werte in strong bleiben bei 600, Kopfzeilen bei 600). */
.data-table .table-row :where(div, span, small, em, p, a, button) { font-weight: 500; }

/* Kundenspalte in den Auftragslisten und Terminlisten sowie Uhrzeit in den Terminlisten: Schrift 500. */
.order-columns > div:nth-child(2) strong,
.appointment-columns > div:nth-child(2) strong,
.appointment-columns > div:nth-child(3) strong { font-weight: 500; }

/* Bilder zum Auftrag: Vorschau im Raster. */
.order-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.order-photo-grid img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 10px; }
.order-photos-section { margin: 4px 0 18px; }

/* Dokumente und Bilder beim Kunden: Upload-Feld und Dateiliste im Stil der Item-Cards. */
.customer-files-upload { margin: 4px 0 18px; }
/* Als label, damit Schrift, Farbe und Abstand von den Feldbezeichnungen übernommen werden. */
label.customer-group-label { display: block; margin: 0 0 10px; }
/* Berufsgruppe und Wiederkehrender Kunde: Karte unten an der Eingabe ausrichten, damit beide Kanten bündig sind. */
.customer-occupation-row { margin-bottom: 16px; }
.customer-occupation-row > label { margin-bottom: 0; }
.customer-occupation-row > label.field-check { align-self: end; }
.customer-file-picker { position: relative; }
.customer-file-picker svg { width: 19px; height: 19px; flex: none; }
.customer-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.customer-file-picker.is-selected { background: #fff; border-color: var(--text); }
.customer-files-upload small { display: block; margin-top: 8px; padding-left: 4px; font-size: var(--fs-small); color: var(--text-muted); }
.customer-file-list { display: grid; gap: 9px; }
.order-photo-grid + .customer-file-list { margin-top: 12px; }
.customer-file-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border-radius: var(--r-l); background: var(--surface-2); color: inherit; text-decoration: none; transition: background .15s; }
.customer-file-link:hover { background: var(--surface-3); }
.customer-file-badge { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-m); background: var(--surface); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wide); }
.customer-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); }
.customer-file-link small { flex: none; font-size: var(--fs-small); color: var(--text-muted); }