@charset "UTF-8";
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

input, button, select, textarea {
  font: inherit;
}

@media (max-width: 520px) {
  body {
    font-size: 14px;
  }
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons/material-icons.woff2") format("woff2"), url("../fonts/material-icons/material-icons.woff") format("woff");
  font-display: swap;
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

:root {
  --bg: #0b1220;
  --panel: #111b2e;
  --panel-2: #0f1728;
  --text: #e6edf7;
  --muted: #9fb0c7;
  --border: rgba(255, 255, 255, 0.08);
  --primary: #4f8cff;
  --danger: #ff5c77;
  --success: #31c36b;
  --warning: #f5c84b;
  --info: #3b82c4;
  --erimax-pink: #ff3264;
  --erimax-violet: #9c3cff;
  --erimax-blue: #168cff;
  --erimax-cyan: #06bfe7;
  --radius: 12px;
  --radius-sm: 10px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html[data-theme=light] {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-2: #f0f3f8;
  --text: #101828;
  --muted: #475467;
  --border: #e5e5e5;
  --shadow: 4px 6px 6px rgba(16, 24, 40, 0.12);
}

.h1 {
  font-size: clamp(18px, 2.6vw, 22px);
  margin: 0;
}

.h2 {
  font-size: clamp(14px, 2vw, 16px);
  margin: 0;
}

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.app:not(.app--login) .container.page {
  max-width: none;
  width: 100%;
  padding: 20px 32px 32px;
}

.app {
  min-height: 100vh;
  display: flex;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebar {
  width: 232px;
  border-right: 1px solid var(--border);
  background: #fff;
}

html[data-theme=dark] .sidebar {
  background: var(--panel-2);
}

.sidebar__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: var(--space-3);
  overflow: auto;
}

.sidebar__brand {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.appBrandWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 6px 4px 8px;
}

.appBrand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 0;
  text-decoration: none;
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  background-image: linear-gradient(90deg, #e83e7c 0%, #482249 50%, #207dab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.appBrand__meta {
  max-width: 100%;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.appBrand__erimax,
.appBrand__dash,
.appBrand__desk {
  font-weight: 800;
  color: inherit;
}

.appBrand__dash {
  margin: 0 1px;
}

.topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8eef6;
  color: #1e3a5f;
  font-size: 12px;
  font-weight: 700;
}

.sidebar__quick {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__quick .sidebar__item {
  position: relative;
}

.sidebar__toolBadge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e86a4a;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.sidebar__sync {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  width: 100%;
  user-select: none;
}

.sidebar__sync .material-icons {
  font-size: 20px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 4px 18px;
}

.sidebar__group.is-open .sidebar__sub,
.sidebar__group:focus-within .sidebar__sub {
  display: flex;
}

.sidebar__subitem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
}

.sidebar__subitem:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.sidebar__subitem.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  font-weight: 400;
}

.sidebar__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

.sidebar__item:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.sidebar__item.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.sidebar__footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.sidebar__user-name {
  font-weight: 700;
}

.sidebar__search-trigger {
  display: none;
}

.sidebar__logout {
  width: 100%;
  justify-content: flex-start;
}

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

.stack > * + * {
  margin-top: var(--space-4);
}

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

.dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width: 860px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px var(--space-4);
  min-height: 40px;
}

.topbar__brand {
  font-weight: 400;
  letter-spacing: 0.2px;
}

.topbar__title {
  font-weight: 400;
  min-width: 0;
  flex: 1 1 auto;
}

.topbar__navCluster {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar__breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.topbar__breadcrumb a,
.topbar__breadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.topbar--noCrumb .topbar__breadcrumb,
.topbar--noCrumb .topbar__back {
  display: none;
}

.topbar .btn.btn--ghost {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 6px;
  min-height: 0;
}

.topbar .btn.btn--ghost:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* hide order meta on desktop by default; shown only on small screens */
.order__title-meta {
  display: none;
}

.topbar__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}

.displayCtl {
  position: relative;
}

.displayCtl__btn {
  width: auto;
  min-width: 32px;
  padding: 4px 8px;
  gap: 4px;
}

.displayCtl__btn.is-on {
  background: color-mix(in srgb, var(--accent, #06bfe7) 16%, transparent);
}

.displayCtl__count {
  min-width: 1.1em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.displayCtl__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, 100vw - 24px);
  z-index: 220;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.displayCtl__body {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.displayCtl__title {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.displayCtl__switch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.displayCtl__switch .material-icons {
  font-size: 20px;
}

.displayCtl__switch span:nth-child(2) {
  flex: 1 1 auto;
}

.displayCtl__switch strong {
  font-size: 12px;
  font-weight: 700;
}

.displayCtl__switch.is-on {
  background: color-mix(in srgb, var(--accent, #06bfe7) 16%, transparent);
}

.displayCtl__viewers {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.topbar__sync {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted, #8a8f98);
  white-space: nowrap;
  user-select: none;
}

.topbar__customerLink .material-icons {
  font-size: 20px;
}

.recentNav {
  position: relative;
}

.recentNav__toggle.topbar__iconBtn {
  width: auto;
  min-width: 32px;
  padding: 4px 8px;
  gap: 4px;
}

.recentNav__toggleText {
  font-size: 13px;
  font-weight: 400;
}

.recentNav__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 100vw - 24px);
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.recentNav__panel.card {
  background: var(--panel);
}

.recentNav__body {
  padding: 10px 12px !important;
  background: var(--panel) !important;
}

.recentNav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.recentNav__title {
  font-weight: 700;
  font-size: 13px;
}

.recentNav__clear {
  font-size: 12px;
  padding: 4px 8px;
}

.recentNav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 360px;
  overflow: auto;
}

.recentNav__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.recentNav__item:hover {
  background: var(--panel-2);
}

.recentNav__icon {
  font-size: 18px !important;
  color: var(--muted);
  margin-top: 2px;
}

.recentNav__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recentNav__label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recentNav__meta {
  font-size: 11px;
}

.recentNav__empty {
  font-size: 13px;
  padding: 8px 0;
}

@media (max-width: 700px) {
  .topbar__breadcrumb,
  .topbar:not(.topbar--kasse) .recentNav {
    display: none;
  }
}
.nav {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.nav__inner {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
}

.nav__item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.auth {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
}

.auth__card {
  width: 100%;
  max-width: 420px;
}

.inline {
  display: inline;
}

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

@media (max-width: 1000px) and (min-width: 701px) {
  .sidebar {
    width: 84px;
  }
  .sidebar__inner {
    padding: var(--space-3) var(--space-2);
    align-items: center;
  }
  .sidebar__brand,
  .sidebar__search,
  .sidebar__user,
  .sidebar__item > span:not(.material-icons):not(.sidebar__toolBadge),
  .sidebar__logout > span:not(.material-icons),
  .sidebar__sync > span:not(.material-icons) {
    display: none;
  }
  .sidebar__quick,
  .sidebar__sync {
    width: 100%;
    align-items: center;
  }
  .sidebar__sync {
    justify-content: center;
    padding: 10px;
  }
  .sidebar__toolBadge {
    top: 2px;
    right: 2px;
  }
  .sidebar__nav,
  .sidebar__footer,
  .inline {
    width: 100%;
  }
  .sidebar__search-trigger {
    display: inline-flex;
  }
  .sidebar__item,
  .sidebar__logout {
    justify-content: center;
    padding: 10px;
  }
  .sidebar__item .material-icons,
  .sidebar__logout .material-icons {
    margin: 0;
  }
  .sidebar__footer {
    justify-items: center;
  }
  .sidebar__logout {
    width: auto;
  }
}
@media (max-width: 700px) {
  .container {
    padding: 0 var(--space-3);
  }
  .page {
    padding: var(--space-4) var(--space-3);
  }
  .app:not(.app--login) .container.page {
    padding: 16px 16px 24px;
  }
  .topbar__inner {
    padding: 4px var(--space-3);
  }
  .topbar__meta {
    gap: var(--space-2);
  }
  .nav__inner {
    padding: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .nav__item {
    padding: 8px 10px;
  }
  .row {
    flex-wrap: wrap;
  }
  .app {
    flex-direction: column;
  }
  /* Mobile: hide sidebar by default and provide an off-canvas menu */
  .sidebar {
    display: none;
  }
  /* show hamburger in topbar */
  .topbar__title #mobileMenuToggle {
    display: inline-flex;
  }
  .sidebar-backdrop {
    display: none;
  }
  .sidebar.is-open {
    display: block !important;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    max-width: 80%;
    z-index: 1200;
    border-right: 1px solid var(--border);
    background: var(--panel-2);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    transform: translateX(0);
  }
  .sidebar.is-open .sidebar__inner {
    position: static;
    height: auto;
    padding: var(--space-3);
    overflow: auto;
  }
  .sidebar__brand,
  .sidebar__search {
    display: block;
  }
  .sidebar__search {
    display: none;
  }
  .sidebar__search-trigger {
    display: inline-flex;
  }
  .sidebar__item > span:not(.material-icons):not(.sidebar__toolBadge),
  .sidebar__logout > span:not(.material-icons),
  .sidebar__sync > span:not(.material-icons) {
    display: inline;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    z-index: 1100;
    display: none;
  }
  .sidebar-backdrop.is-active {
    display: block;
  }
  .table thead th, .table tbody td {
    padding: 8px 8px;
    font-size: 13px;
  }
  /* On mobile always hide sidebar by default (only open via toggle) */
  .sidebar {
    display: none !important;
  }
  .sidebar.is-open {
    display: block !important;
  }
  /* helper: hide certain elements on mobile */
  .hide-mobile {
    display: none !important;
  }
  /* buttons show icon-only on mobile when marked */
  .btn--icon-only-mobile > span:not(.material-icons) {
    display: none;
  }
  .btn--icon-only-mobile {
    padding: 8px;
  }
  /* Order details: purchases table should be compact on mobile */
  .table--purchases thead th.col-pid,
  .table--purchases tbody td.col-pid,
  .table--purchases thead th.col-pship,
  .table--purchases tbody td.col-pship,
  .table--purchases thead th.col-pek,
  .table--purchases tbody td.col-pek {
    display: none;
  }
  .table--purchases thead th.col-pstatus,
  .table--purchases tbody td.col-pstatus {
    width: 44px;
    text-align: center;
    white-space: nowrap;
  }
  .table--purchases .purchaseStatus__dot {
    display: inline-block;
  }
  .table--purchases .purchaseStatus__text {
    display: none;
  }
  /* center the search/filter form on mobile */
  .orders-filter {
    width: 100%;
    justify-content: center;
  }
  .orders-filter .input[type=search] {
    flex: 1 1 auto;
    max-width: 520px;
  }
  .orders-filter .btn--icon-only-mobile {
    margin-left: 6px;
  }
}
@media (max-width: 420px) {
  .topbar__meta {
    gap: var(--space-1);
  }
  .nav__item {
    padding: 7px 9px;
  }
}
.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  z-index: 2000;
}

.loading-overlay.is-active {
  display: flex;
}

.loading-overlay__card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.loading-overlay__spinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  animation: loading-spin 0.9s linear infinite;
}

.loading-overlay__text {
  color: var(--muted);
  font-size: 13px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  z-index: 1300;
  overflow-y: auto;
}

/* Confirm modal must always overlay other modals */
#confirmModalOverlay {
  z-index: 1500;
}

.modal-overlay.is-active {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-4) * 2);
  min-height: 0;
}

/* Ensure nested cards inside modal can shrink so body becomes scrollable */
.modal > .card.modalCard {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Some modals use .modal on the card itself */
.modal.card.modalCard {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.card.modalCard {
  background: var(--panel);
}

.card.modalCard .card__header,
.card.modalCard .card__body {
  background: var(--panel);
  padding: 20px;
}

.modal .card__body {
  overflow-y: auto;
  min-height: 0;
}

.globalMediaPlayerOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  z-index: 1450;
}

.globalMediaPlayerOverlay.is-active {
  display: flex;
}

.globalMediaPlayer {
  width: min(1200px, 96vw);
  height: min(86vh, 920px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.globalMediaPlayer__header,
.globalMediaPlayerFloating__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 90%, var(--bg) 10%);
}

.globalMediaPlayer__title,
.globalMediaPlayerFloating__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.globalMediaPlayer__actions,
.globalMediaPlayerFloating__actions {
  display: inline-flex;
  gap: 6px;
}

.globalMediaPlayer__nav {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.globalMediaPlayer__stage,
.globalMediaPlayerFloating__body {
  flex: 1;
  min-height: 0;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
}

.globalMediaPlayer__stage img,
.globalMediaPlayer__stage video,
.globalMediaPlayerFloating__body img,
.globalMediaPlayerFloating__body video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #020617;
}

.globalMediaPlayer__stage audio,
.globalMediaPlayerFloating__body audio {
  width: min(780px, 94%);
}

.globalMediaPlayerFloating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(420px, 100vw - 32px);
  height: min(260px, 40vh);
  display: none;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 1451;
}

.globalMediaPlayerFloating.is-active {
  display: flex;
}

@media (max-width: 900px) {
  .globalMediaPlayer {
    width: 100%;
    height: calc(100vh - 16px);
  }
}
@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Login screen — isolated from app chrome */
html.is-login {
  --login-bg: #080d18;
  --login-card: rgba(14, 20, 34, 0.92);
  --login-border: rgba(255, 255, 255, 0.08);
  --login-text: #eef3fb;
  --login-muted: #93a4bb;
  --login-input-bg: rgba(6, 10, 18, 0.72);
  --login-input-border: rgba(255, 255, 255, 0.1);
  --erimax-pink: #ff3264;
  --erimax-cyan: #06bfe7;
  --erimax-purple: #9c3cff;
  --erimax-ring: linear-gradient(
    135deg,
    #ff315f,
    #ffb000,
    #9ee833,
    #00d9d0,
    #168cff,
    #9b45ff,
    #ff2ca8
  );
  background: var(--login-bg);
}

html.is-login[data-theme=light] {
  --login-bg: #eef2f8;
  --login-card: rgba(255, 255, 255, 0.94);
  --login-border: rgba(16, 24, 40, 0.08);
  --login-text: #101828;
  --login-muted: #5b6b80;
  --login-input-bg: #f4f6fa;
  --login-input-border: rgba(16, 24, 40, 0.12);
}

html.is-login,
html.is-login body {
  background: var(--login-bg);
  color: var(--login-text);
}

.app--login,
.app--login .main,
.app--login .page,
.app--login .container.page {
  min-height: 100%;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.loginPage {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 32px;
  overflow: hidden;
  background: radial-gradient(circle at 18% 38%, rgba(255, 40, 120, 0.08), transparent 36%), radial-gradient(circle at 82% 68%, rgba(0, 190, 255, 0.08), transparent 36%), radial-gradient(circle at 72% 14%, rgba(155, 69, 255, 0.05), transparent 32%), var(--login-bg);
}

html.is-login[data-theme=light] .loginPage {
  background: radial-gradient(circle at 18% 38%, rgba(255, 40, 120, 0.06), transparent 36%), radial-gradient(circle at 82% 68%, rgba(0, 150, 220, 0.07), transparent 36%), radial-gradient(circle at 72% 14%, rgba(155, 69, 255, 0.04), transparent 32%), var(--login-bg);
}

.loginPage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 82%);
}

html.is-login[data-theme=light] .loginPage::before {
  opacity: 0.22;
  background-image: radial-gradient(rgba(16, 24, 40, 0.14) 1px, transparent 1px);
}

.loginPage__inner {
  position: relative;
  z-index: 1;
  width: min(460px, 100vw - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.loginBrand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: loginIn 0.45s ease both;
}

.loginBrand__name {
  position: relative;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  background: linear-gradient(90deg, #e83e7c 0%, #482249 50%, #207dab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html.is-login[data-theme=light] .loginBrand__name {
  background: linear-gradient(90deg, #e83e7c 0%, #482249 50%, #207dab 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.loginBrand__name::before,
.loginBrand__name::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 1px;
  pointer-events: none;
}

.loginBrand__name::before {
  right: calc(100% + 14px);
  background: linear-gradient(90deg, transparent, rgba(255, 49, 95, 0.55));
}

.loginBrand__name::after {
  left: calc(100% + 14px);
  background: linear-gradient(90deg, rgba(6, 191, 231, 0.55), transparent);
}

.loginBrand__logo {
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.loginBrand__logo svg,
.loginBrand__logo img {
  width: 108px;
  height: 108px;
  display: block;
}

.loginShell {
  position: relative;
  width: 100%;
  padding: 16px;
  animation: loginIn 0.5s ease 0.06s both;
}

.loginShell__aura {
  position: absolute;
  inset: 12px;
  z-index: 0;
  pointer-events: none;
  border-radius: 20px;
  transform: rotate(-1.15deg);
  background: var(--erimax-ring);
  background-size: 180% 180%;
  box-shadow: -16px -12px 36px rgba(255, 49, 95, 0.14), 20px 6px 38px rgba(22, 140, 255, 0.12), 12px 24px 34px rgba(155, 69, 255, 0.1);
  animation: loginAuraShift 22s ease-in-out infinite alternate;
}

.loginShell__aura::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 18.5px;
  background: var(--login-bg);
}

html.is-login[data-theme=light] .loginShell__aura {
  box-shadow: -10px -8px 22px rgba(255, 49, 95, 0.08), 14px 6px 24px rgba(22, 140, 255, 0.08), 8px 16px 20px rgba(155, 69, 255, 0.06);
}

.loginCard {
  position: relative;
  z-index: 1;
  margin: 2px;
  padding: 28px 26px 24px;
  border-radius: 16px;
  background: var(--login-card);
  border: 1px solid var(--login-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  color: var(--login-text);
  transform: none;
}

html.is-login[data-theme=light] .loginCard {
  box-shadow: 0 14px 32px rgba(16, 24, 40, 0.08);
}

.loginCard__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.loginCard__sub {
  margin: 6px 0 0;
  color: var(--login-muted);
  font-size: 14px;
}

.loginBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--login-muted);
  border: 1px solid color-mix(in srgb, var(--erimax-purple) 42%, var(--login-border));
  background: color-mix(in srgb, var(--erimax-purple) 8%, transparent);
}

.loginBadge .material-icons {
  font-size: 16px;
  color: color-mix(in srgb, var(--erimax-purple) 70%, var(--login-text));
}

.loginCard__alert {
  margin-top: 16px;
}

.loginForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  transform: none;
}

.loginField {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.loginField__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--login-text);
}

.loginInput {
  display: flex;
  align-items: stretch;
  height: 56px;
  border-radius: 10px;
  background: var(--login-input-bg);
  border: 1px solid var(--login-input-border);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  transform: none;
}

.loginInput:hover {
  border-color: color-mix(in srgb, var(--erimax-cyan) 28%, var(--login-input-border));
}

.loginInput__icon {
  display: grid;
  place-items: center;
  width: 48px;
  flex: 0 0 48px;
  color: var(--login-muted);
  border-right: 1px solid var(--login-input-border);
  transition: color 0.18s ease;
}

.loginInput__icon .material-icons {
  font-size: 20px;
}

.loginInput__control {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--login-text);
  padding: 0 14px;
  box-shadow: none;
}

.loginInput__control::placeholder {
  color: color-mix(in srgb, var(--login-muted) 80%, transparent);
}

.loginInput__toggle {
  display: grid;
  place-items: center;
  width: 46px;
  flex: 0 0 46px;
  border: 0;
  background: transparent;
  color: var(--login-muted);
  cursor: pointer;
  padding: 0;
}

.loginInput__toggle:hover {
  color: var(--login-text);
}

.loginInput:focus-within {
  border-color: transparent;
  background: linear-gradient(var(--login-input-bg), var(--login-input-bg)) padding-box, linear-gradient(90deg, var(--erimax-cyan), #4f8cff, var(--erimax-pink)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erimax-cyan) 18%, transparent), 0 0 18px rgba(0, 180, 255, 0.1);
}

.loginInput--mail:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erimax-pink) 20%, transparent), 0 0 18px rgba(255, 50, 100, 0.1);
}

.loginInput--lock:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erimax-cyan) 22%, transparent), 0 0 18px rgba(0, 180, 255, 0.12);
}

.loginInput:focus-within .loginInput__icon {
  color: var(--erimax-cyan);
}

.loginInput--mail:focus-within .loginInput__icon {
  color: var(--erimax-pink);
}

.loginSubmit {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 54px;
  margin-top: 4px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, var(--erimax-pink), var(--erimax-purple) 48%, var(--erimax-cyan));
  box-shadow: 0 8px 22px rgba(156, 60, 255, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.loginSubmit .material-icons {
  position: absolute;
  right: 16px;
  font-size: 20px;
}

.loginSubmit:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(156, 60, 255, 0.28);
}

.loginSubmit:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

html.is-login[data-theme=light] .loginSubmit {
  box-shadow: 0 8px 18px rgba(156, 60, 255, 0.16);
}

.loginFoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--login-muted);
  font-size: 12px;
  text-align: center;
  animation: loginIn 0.5s ease 0.12s both;
}

.loginFoot__sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.loginFoot__sub .material-icons {
  font-size: 14px;
}

@keyframes loginIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes loginAuraShift {
  from {
    background-position: 0% 40%;
  }
  to {
    background-position: 80% 60%;
  }
}
@media (max-width: 640px) {
  .loginPage {
    padding: 28px 16px 24px;
    align-items: flex-start;
  }
  .loginPage__inner {
    width: calc(100% - 8px);
    padding-top: 12px;
  }
  .loginBrand__name {
    font-size: 24px;
  }
  .loginBrand__name::before,
  .loginBrand__name::after {
    width: 22px;
  }
  .loginBrand__logo,
  .loginBrand__logo svg,
  .loginBrand__logo img {
    width: 84px;
    height: 84px;
  }
  .loginCard {
    padding: 22px 18px 20px;
  }
  .loginCard__title {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loginBrand,
  .loginShell,
  .loginFoot,
  .loginShell__aura,
  .loginSubmit {
    animation: none;
    transition: none;
  }
}
/* Phase 6 — Prompt cockpit. Light first, login-adjacent language. */
:root {
  --erimax-pink: #ff3264;
  --erimax-cyan: #06bfe7;
  --erimax-purple: #9c3cff;
  --erimax-gold: #e3b341;
  --erimax-ring: linear-gradient(135deg, #ff315f, #ffb000, #9ee833, #00d9d0, #168cff, #9b45ff, #ff2ca8);
}

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

html.is-cockpit {
  --cockpit-bg: #f4f7fb;
  --cockpit-text: #101828;
  --cockpit-muted: #5b6b80;
  --cockpit-surface: #ffffff;
  --cockpit-border: rgba(16, 24, 40, 0.08);
}

html.is-cockpit[data-theme=dark] {
  --cockpit-bg: #080d18;
  --cockpit-text: #eef3fb;
  --cockpit-muted: #93a4bb;
  --cockpit-surface: rgba(14, 20, 34, 0.92);
  --cockpit-border: rgba(255, 255, 255, 0.08);
}

html.is-cockpit,
html.is-cockpit body {
  background: var(--cockpit-bg);
  color: var(--cockpit-text);
}

.app--cockpit .sidebar {
  width: 232px;
  background: #fff;
  border-right-color: rgba(16, 24, 40, 0.06);
  opacity: 1;
}

html.is-cockpit[data-theme=dark] .app--cockpit .sidebar {
  background: #0c1220;
}

.app--cockpit .container.page,
.app--cockpit .page {
  max-width: none;
  padding: 0;
}

.app--cockpit .main {
  background: transparent;
}

.cockpitTop {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}

.cockpitTop__brand {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cockpit {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 56px);
  padding: 20px 24px 40px;
  overflow: hidden;
  color: var(--cockpit-text);
}

.cockpit__glow {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  transition: background 1.1s ease;
}

.cockpit[data-mood=calm] .cockpit__glow {
  background: radial-gradient(circle at 30% 28%, rgba(6, 191, 231, 0.14), transparent 38%), radial-gradient(circle at 76% 70%, rgba(22, 140, 255, 0.1), transparent 40%);
}

.cockpit[data-mood=attention] .cockpit__glow {
  background: radial-gradient(circle at 28% 30%, rgba(227, 179, 65, 0.16), transparent 40%), radial-gradient(circle at 74% 68%, rgba(22, 140, 255, 0.08), transparent 38%);
}

.cockpit[data-mood=busy] .cockpit__glow {
  background: radial-gradient(circle at 26% 32%, rgba(156, 60, 255, 0.14), transparent 40%), radial-gradient(circle at 78% 62%, rgba(255, 50, 168, 0.1), transparent 36%), radial-gradient(circle at 50% 80%, rgba(6, 191, 231, 0.06), transparent 42%);
}

.cockpit[data-mood=critical] .cockpit__glow {
  background: radial-gradient(circle at 30% 34%, rgba(255, 90, 70, 0.12), transparent 38%), radial-gradient(circle at 70% 66%, rgba(227, 179, 65, 0.12), transparent 40%), radial-gradient(circle at 52% 18%, rgba(156, 60, 255, 0.07), transparent 34%);
}

html.is-cockpit[data-theme=dark] .cockpit[data-mood=calm] .cockpit__glow {
  background: radial-gradient(circle at 30% 28%, rgba(6, 191, 231, 0.16), transparent 38%), radial-gradient(circle at 76% 70%, rgba(22, 140, 255, 0.12), transparent 40%);
}

.cockpit__inner,
.cockpitShell {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

.cockpitShell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 26%);
  gap: 24px;
  align-items: start;
}

.cockpitMain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cockpitRail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.cockpitRail__stamp {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--cockpit-muted);
}

.cockpitHead {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 4px;
}

.cockpitHead__hello {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.cockpitHead__mood {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cockpit-muted);
}

.cockpitHead__reasons,
.cockpitHead__stamp {
  margin: 0;
  max-width: 40rem;
  color: var(--cockpit-muted);
  font-size: 13px;
  line-height: 1.45;
}

.cockpitPrompt__hint {
  margin: 8px 0 0;
  color: var(--cockpit-muted);
  font-size: 12px;
}

.cockpitPrompt__hint:empty {
  display: none;
}

.cockpitPrompt__hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--cockpit-border);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.cockpitQuicks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.cockpitQuick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cockpit-border);
  background: #fff;
  color: var(--cockpit-text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.cockpitQuick .material-icons {
  font-size: 16px;
}

.cockpitQuick--warm .material-icons {
  color: #e08a3a;
}

.cockpitQuick--finance .material-icons {
  color: #0f9f6e;
}

.cockpitQuick--blue .material-icons {
  color: var(--erimax-blue);
}

.cockpitQuick--violet .material-icons {
  color: var(--erimax-violet);
}

.cockpitQuick--cyan .material-icons {
  color: var(--erimax-cyan);
}

.cockpitQuick--magenta .material-icons {
  color: var(--erimax-pink);
}

.cockpitQuick:hover {
  border-color: color-mix(in srgb, var(--erimax-cyan) 35%, var(--cockpit-border));
}

.cockpitAnswer {
  width: 100%;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: var(--cockpit-surface);
  border: 1px solid var(--cockpit-border);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
}

.cockpitAnswer__q {
  margin: 0 0 10px;
  color: var(--cockpit-muted);
  font-size: 13px;
}

.cockpitAnswer__summary {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.cockpitAnswer__points {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--cockpit-text);
}

.cockpitAnswer__points li + li {
  margin-top: 6px;
}

.cockpitAnswer__cards {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.cockpitCard {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--cockpit-border);
  background: color-mix(in srgb, var(--cockpit-bg) 55%, var(--cockpit-surface));
  color: inherit;
  text-decoration: none;
}

.cockpitCard__title {
  font-weight: 600;
  font-size: 14px;
}

.cockpitCard__sub,
.cockpitCard__meta {
  color: var(--cockpit-muted);
  font-size: 13px;
  margin-top: 2px;
}

.cockpitAnswer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cockpitAction {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--cockpit-border);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

.cockpitAnswer__gaps {
  margin: 14px 0 0;
  color: var(--cockpit-muted);
  font-size: 12px;
}

.cockpitHistory {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cockpitHistory__item {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cockpit-border);
  color: var(--cockpit-muted);
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  text-align: left;
}

.cockpitHistory__item strong {
  display: block;
  color: var(--cockpit-text);
  font-weight: 600;
  margin-bottom: 2px;
}

@media (max-width: 700px) {
  .cockpit {
    padding: 20px 12px 40px;
    min-height: calc(100dvh - 52px);
  }
  .cockpit__inner,
  .cockpitShell {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .cockpitHead__hello {
    font-size: 24px;
  }
  .cockpitHead__mood {
    font-size: 14px;
  }
  .app--cockpit .cockpitTop {
    display: flex;
  }
}
@media (max-width: 1100px) {
  .cockpitShell {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}
@media (max-width: 980px) {
  .cockpitShell {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cockpit__glow,
  .app--cockpit .sidebar {
    transition: none;
  }
}
/* Global KI prompt — not a regular form field. */
.aiPrompt {
  --ai-bg: color-mix(in srgb, #f4f1ff 42%, #ffffff);
  --ai-text: var(--text);
  --ai-muted: var(--muted);
  --ai-ring: linear-gradient(135deg, rgba(22, 140, 255, 0.72), rgba(6, 191, 231, 0.55), rgba(156, 60, 255, 0.62));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 14px;
  border-radius: 22px;
  background: linear-gradient(var(--ai-bg), var(--ai-bg)) padding-box, var(--ai-ring) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 28px rgba(22, 140, 255, 0.07), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  color: var(--ai-text);
  isolation: isolate;
}

html[data-theme=dark] .aiPrompt {
  --ai-bg: color-mix(in srgb, #24183a 28%, var(--panel));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(156, 60, 255, 0.08);
}

html.is-cockpit .aiPrompt {
  --ai-text: var(--cockpit-text);
  --ai-muted: var(--cockpit-muted);
  --ai-bg: color-mix(in srgb, #f4f1ff 28%, var(--cockpit-surface));
}

html.is-cockpit[data-theme=dark] .aiPrompt {
  --ai-bg: color-mix(in srgb, #24183a 34%, var(--cockpit-surface));
}

.aiPrompt.is-focused {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erimax-cyan) 28%, transparent), 0 12px 32px rgba(156, 60, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.aiPrompt.is-busy {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--erimax-blue) 32%, transparent), 0 12px 28px rgba(22, 140, 255, 0.12);
}

.aiPrompt.is-error {
  background: linear-gradient(var(--ai-bg), var(--ai-bg)) padding-box, linear-gradient(135deg, rgba(255, 92, 119, 0.55), rgba(156, 60, 255, 0.28)) border-box;
}

.aiPrompt__header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.aiPrompt__icon {
  font-size: 18px;
  color: var(--erimax-blue);
  transform-origin: center;
}

.aiPrompt__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ai-text);
}

.aiPrompt__sparkles {
  position: relative;
  width: 18px;
  height: 14px;
  margin-left: auto;
  pointer-events: none;
}

.aiPrompt__sparkles span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--erimax-violet) 70%, #fff);
  opacity: 0.45;
}

.aiPrompt__sparkles span:first-child {
  top: 0;
  right: 0;
}

.aiPrompt__sparkles span:last-child {
  bottom: 0;
  left: 2px;
  width: 4px;
  height: 4px;
  background: color-mix(in srgb, var(--erimax-cyan) 70%, #fff);
}

.aiPrompt.is-focused .aiPrompt__sparkles span,
.aiPrompt.is-busy .aiPrompt__sparkles span {
  animation: aiPromptTwinkle 1.6s ease-in-out infinite;
}

.aiPrompt.is-busy .aiPrompt__icon {
  animation: aiPromptSpinGlow 1.8s ease-in-out infinite;
}

.aiPrompt__input {
  display: block;
  width: 100%;
  min-height: 88px;
  max-height: 220px;
  margin: 0;
  padding: 4px 2px 8px;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ai-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}

.aiPrompt__input::placeholder {
  color: color-mix(in srgb, var(--ai-muted) 88%, transparent);
}

.aiPrompt__input:focus,
.aiPrompt__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.aiPrompt__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.aiPrompt__hint {
  color: var(--ai-muted);
  font-size: 12px;
}

.aiPrompt__hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.aiPrompt__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--erimax-blue);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(22, 140, 255, 0.22);
}

.aiPrompt__submit .material-icons {
  font-size: 18px;
}

.aiPrompt__submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--erimax-blue) 86%, #0b1220);
}

.aiPrompt__submit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--erimax-cyan) 70%, #fff);
  outline-offset: 2px;
}

.aiPrompt__submit:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

.aiPrompt.is-busy .aiPrompt__submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.aiPrompt--compact .aiPrompt__input {
  min-height: 56px;
}

@media (max-width: 640px) {
  .aiPrompt__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .aiPrompt__submit {
    width: 100%;
  }
  .aiPrompt__hint {
    order: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aiPrompt,
  .aiPrompt__submit {
    transition: none;
  }
  .aiPrompt.is-focused .aiPrompt__sparkles span,
  .aiPrompt.is-busy .aiPrompt__sparkles span,
  .aiPrompt.is-busy .aiPrompt__icon {
    animation: none;
  }
}
@keyframes aiPromptTwinkle {
  0%, 100% {
    opacity: 0.28;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
}
@keyframes aiPromptSpinGlow {
  0%, 100% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(16deg);
  }
  70% {
    transform: rotate(-8deg);
  }
}
.card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}

html[data-theme=light] .card {
  box-shadow: var(--shadow);
}

.card__header {
  padding: var(--space-4);
  margin-bottom: 25px;
  border-bottom: 1px solid var(--border);
}

.card__body {
  padding: var(--space-4);
  background: transparent;
  border: none;
  border-radius: 0;
}

.card__header + .card__body {
  padding-top: 0;
}

/* Global confirm modal variants */
.confirmModal {
  overflow: hidden;
}

.confirmModal .card__header {
  margin-bottom: 0;
}

.confirmModal.confirmModal--danger {
  border-color: var(--danger);
}

.confirmModal.confirmModal--danger .card__header {
  border-bottom-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

/* Form sections: make direct child cards look like distinct blocks */
.form > .card,
.form > details.card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Some forms (e.g. orders) should use neutral cards (no blue accent) */
.form.form--neutralCards > .card,
.form.form--neutralCards > details.card {
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  overflow: visible;
}

.form > .card > .card__header,
.form > details.card > summary.card__header {
  background: rgba(255, 255, 255, 0.03);
}

.form.form--neutralCards > .card > .card__header,
.form.form--neutralCards > details.card > summary.card__header {
  background: transparent;
}

.form > .card > .card__body,
.form > details.card > .card__body {
  padding: var(--space-4);
}

/* Search dropdown results (global search + customer searches) */
.searchField {
  position: relative;
}

.searchDropdownCard {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  display: none;
  margin-top: 0 !important;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.searchDropdownCard .card__body {
  background: var(--panel);
}

.searchResultsCount {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  padding: 4px 6px;
  background: var(--panel);
  border-radius: 6px;
}

.searchResultsCount:empty {
  display: none;
}

.searchResults {
  display: grid;
  gap: 3px;
  align-content: start;
  grid-auto-rows: max-content;
  background: var(--panel);
  padding: 4px;
  max-height: 340px;
  overflow-x: hidden;
  overflow-y: auto;
}

.invoiceDetails__top {
  align-items: start;
}

/* Invoice details: cards should be visually separated */
.invoiceDetails .card:not(.modal),
.invoiceDetails details.card {
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.invoiceDetails .card__body {
  border: 0;
}

.invoiceDetails .notice {
  border: 0;
}

.invoiceDetails__meta {
  text-align: right;
}

.invoiceDetails__statusRow {
  justify-content: flex-end;
}

.invoiceDetails__pmForm {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.invoiceDetails__pmRow {
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .invoiceDetails__meta {
    text-align: left;
  }
  .invoiceDetails__statusRow {
    justify-content: flex-start;
  }
  .invoiceDetails__pmRow {
    justify-content: flex-start;
  }
}
.invoiceBookModal {
  max-width: 420px;
}

.invoiceBook {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.invoiceBookCustomer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.invoiceBookCustomer strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoiceBookCustomer__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
}

.invoiceBookCustomer__mark .material-icons {
  font-size: 18px;
}

.invoiceBookCustomer__mark--ok {
  background: var(--success);
}

.invoiceBookCustomer__mark--bad {
  background: var(--danger);
}

.invoiceBookLines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invoiceBookLines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.35;
}

.invoiceBookLines__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoiceBookLines__qty {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.invoiceBookLines__sum {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoiceBookLines__empty {
  color: var(--muted);
}

.invoiceBookTotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.invoiceBookPay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.invoiceBookPay__opt {
  margin: 0;
  cursor: pointer;
}

.invoiceBookPay__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.invoiceBookPay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 8px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}

.invoiceBookPay__card .material-icons {
  font-size: 22px;
}

.invoiceBookPay__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-variant: small-caps;
  line-height: 1;
  color: var(--muted);
}

.invoiceBookPay__opt input:checked + .invoiceBookPay__card {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
}

.invoiceBookPay__opt input:checked + .invoiceBookPay__card .invoiceBookPay__label,
.invoiceBookPay__opt input:focus-visible + .invoiceBookPay__card .invoiceBookPay__label {
  color: var(--text);
}

.invoiceBookPay__opt input:focus-visible + .invoiceBookPay__card {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 1px;
}

.invoiceBook__actions {
  justify-content: flex-end;
  gap: 8px;
}

.searchResults .btn,
.searchResults a.btn,
.searchResults button.btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--panel-2);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: nowrap;
}

.searchResults .btn.searchResultRow,
.searchResults a.btn.searchResultRow,
.searchResults button.btn.searchResultRow {
  display: grid;
  grid-template-columns: minmax(140px, 0.42fr) minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  justify-content: stretch;
  height: auto;
  min-height: 44px;
  flex-shrink: 0;
  align-self: start;
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  flex-wrap: unset;
  box-sizing: border-box;
}

.searchResults .btn.searchResultRow:has(.searchResultRow__source),
.searchResults a.btn.searchResultRow:has(.searchResultRow__source),
.searchResults button.btn.searchResultRow:has(.searchResultRow__source) {
  grid-template-columns: auto minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 6px 10px;
}

/* Im Modal (Neue Rechnung u.a.): Name über Adresse — feste Zeilenhöhe, kein Zusammenschieben */
.modal .searchResults .btn.searchResultRow,
.modal .searchResults a.btn.searchResultRow,
.modal .searchResults button.btn.searchResultRow,
#createInvoiceModal .searchResults .btn.searchResultRow {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 12px;
  align-items: start;
  text-align: left;
  min-height: 52px;
  height: auto;
  flex-shrink: 0;
}

.modal .searchResults .btn.searchResultRow:has(.searchResultRow__source),
.modal .searchResults a.btn.searchResultRow:has(.searchResultRow__source),
.modal .searchResults button.btn.searchResultRow:has(.searchResultRow__source),
#createInvoiceModal .searchResults .btn.searchResultRow:has(.searchResultRow__source) {
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
}

.modal .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source,
.modal .searchResults a.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source,
.modal .searchResults button.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source,
#createInvoiceModal .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source {
  grid-row: 1/span 2;
  align-self: center;
}

.modal .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
.modal .searchResults a.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
.modal .searchResults button.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
#createInvoiceModal .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
.modal .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta,
.modal .searchResults a.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta,
.modal .searchResults button.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta,
#createInvoiceModal .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta {
  grid-column: 2;
}

.searchResultRow__source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 28px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: lowercase;
  border: 1px solid transparent;
  user-select: none;
}

.searchResultRow__source--sev {
  color: #1d4ed8;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

.searchResultRow__source--db {
  color: #166534;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
}

html:not([data-theme=light]) .searchResultRow__source--sev {
  color: #93c5fd;
}

html:not([data-theme=light]) .searchResultRow__source--db {
  color: #86efac;
}

.searchResultRow__name,
.searchResultRow__meta {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  line-height: 1.35;
}

.searchResultRow__name {
  font-weight: 600;
  color: var(--text);
}

.searchResultRow__meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* Notes modal */
.notesModalCard {
  max-width: 980px;
}

.card.modalCard.notesModalCard > .card__header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 92%, #ffffff) 0%, var(--warning) 40%, color-mix(in srgb, var(--warning) 25%, transparent) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.card.modalCard.notesModalCard > .card__header .h2,
.card.modalCard.notesModalCard > .card__header h2 {
  color: #1a1a1a;
}

.card.modalCard.notesModalCard > .card__header .btn--ghost {
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.12);
}

.card.modalCard.notesModalCard > .card__header .btn--ghost:hover {
  background: rgba(0, 0, 0, 0.06);
}

.card.modalCard.notesModalCard > .card__header .badge {
  border-color: rgba(0, 0, 0, 0.14);
}

/* Stronger mode badge colors in notes header */
#notesModeBadge.badge--due {
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 75%, rgba(0, 0, 0, 0.18));
  color: #fff;
}

#notesModeBadge.badge--paid {
  background: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 75%, rgba(0, 0, 0, 0.18));
  color: #fff;
}

.notesEditorGrid {
  grid-template-columns: 1fr;
}

.notesEditorGrid .input,
.notesEditorGrid textarea,
.notesEditorGrid .searchField {
  width: 100%;
  min-width: 0;
}

.notesList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .notesList {
    grid-template-columns: 1fr;
  }
}
.notesCard {
  text-align: left;
  padding: 14px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  cursor: pointer;
}

.notesCard:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.notesCard__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.notesCard__title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notesCard__meta {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.notesCard__sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notesCard__body {
  font-size: 14px;
  color: var(--text);
  opacity: 0.95;
  line-height: 1.35;
}

#notesSaveState.is-error {
  color: var(--danger);
}

@media (max-width: 700px) {
  .searchResults .btn.searchResultRow,
  .searchResults a.btn.searchResultRow,
  .searchResults button.btn.searchResultRow {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .searchResults .btn.searchResultRow:has(.searchResultRow__source),
  .searchResults a.btn.searchResultRow:has(.searchResultRow__source),
  .searchResults button.btn.searchResultRow:has(.searchResultRow__source) {
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
  }
  .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source,
  .searchResults a.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source,
  .searchResults button.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__source {
    grid-row: 1/span 2;
    align-self: center;
  }
  .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
  .searchResults a.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
  .searchResults button.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__name,
  .searchResults .btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta,
  .searchResults a.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta,
  .searchResults button.btn.searchResultRow:has(.searchResultRow__source) .searchResultRow__meta {
    grid-column: 2;
  }
}
.searchResults .btn:hover,
.searchResults a.btn:hover,
.searchResults button.btn:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.searchResults .muted {
  padding: 6px 2px;
}

#createInvoiceModal .createInvoiceContactResults {
  max-height: min(360px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  gap: 4px;
  background: var(--panel);
  align-content: start;
  grid-auto-rows: max-content;
}

#createInvoiceModal .createInvoiceContactResults .searchResultRow {
  min-height: 52px;
  flex-shrink: 0;
  align-self: start;
}

details.card > summary.card__header {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

details.card[open] > summary.card__header {
  margin-bottom: 25px;
}

details.card > summary.card__header::-webkit-details-marker {
  display: none;
}

details.card > summary.card__header::marker {
  content: "";
}

details.card > summary.card__header .details__chevron {
  transition: transform 150ms ease;
}

details.card[open] > summary.card__header .details__chevron {
  transform: rotate(180deg);
}

/* Article specs editor (KV rows) */
.specs-kv-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.specs-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}

.specs-row .specs-key {
  flex: 0 1 160px;
  min-width: 120px;
}

.specs-row .specs-val {
  flex: 2 1 320px;
  min-width: 220px;
}

.specs-row button {
  flex: 0 0 auto;
  padding: 6px;
}

.specs-row button .material-icons {
  font-size: 18px;
  line-height: 1;
}

/* Specs details card: compact + no primary left accent */
.form > details#specsDetails.card {
  border-left: 1px solid var(--border);
}

details#specsDetails.card > summary.card__header,
details#specsDetails.card > .card__body {
  padding: var(--space-3);
}

details#specsDetails.card .input {
  font-size: 13px;
  padding: 5px 10px;
}

@media (max-width: 700px) {
  .specs-row {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .specs-row .specs-key,
  .specs-row .specs-val {
    min-width: 0;
  }
}
.card--link:hover {
  border-color: rgba(79, 140, 255, 0.45);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}

html[data-theme=light] .btn {
  background: #fff;
}

html[data-theme=light] .btn--ghost {
  color: var(--muted);
  border-color: var(--border);
}

html[data-theme=light] .btn--primary {
  background: var(--primary);
  border-color: transparent;
}

html[data-theme=light] .btn--danger {
  background: var(--danger);
  border-color: transparent;
  color: #fff;
}

html[data-theme=light] .btn--danger:hover {
  background: var(--danger);
  filter: brightness(1.05);
}

.btn--warning {
  background: var(--warning);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
  font-weight: 700;
}

.btn--warning:hover {
  background: var(--warning);
  filter: brightness(1.05);
}

html[data-theme=light] .btn--warning {
  background: var(--warning);
  border-color: transparent;
  color: #1a1a1a;
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.04);
}

.btn--danger {
  background: var(--danger);
  color: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

.btn--danger:hover {
  background: var(--danger);
  filter: brightness(1.05);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn--primary {
  background: var(--primary);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--btn-text-on-primary, #ffffff);
  font-weight: 700;
}

.btn--primary:hover:not(:disabled) {
  background: var(--primary);
  color: var(--btn-text-on-primary, #ffffff);
  filter: brightness(1.05);
}

.btn:disabled:hover,
.btn[disabled]:hover {
  background: inherit;
}

.btn--primary:disabled,
.btn--primary[disabled],
.btn--primary:disabled:hover,
.btn--primary[disabled]:hover {
  background: var(--primary);
  color: var(--btn-text-on-primary, #ffffff);
  filter: none;
}

.btn--cancel {
  background: #fff;
  color: var(--danger);
  border-color: var(--danger);
  text-decoration: none;
}

.btn--cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 8%, #fff);
  color: var(--danger);
  filter: none;
  text-decoration: none;
}

.btn--cancel:disabled,
.btn--cancel[disabled],
.btn--cancel:disabled:hover,
.btn--cancel[disabled]:hover {
  background: #fff;
  color: color-mix(in srgb, var(--danger) 55%, var(--muted));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  filter: none;
}

html[data-theme=light] .btn--cancel {
  background: #fff;
  color: var(--danger);
  border-color: var(--danger);
}

.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.03);
}

.btn--ghost:disabled:hover,
.btn--ghost[disabled]:hover {
  background: transparent;
}

.form {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: var(--space-4);
}

.form .field {
  display: grid;
  gap: 6px;
}

.form .field + .field {
  margin-top: 12px;
}

/* Aligned form layout (labels + controls in columns) */
.form--aligned .field {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 12px;
  align-items: center;
}

.form--aligned .field .label {
  margin: 0;
}

.form--aligned .field .input {
  width: 100%;
}

.form--aligned .field--textarea {
  align-items: start;
}

.form--aligned .field--textarea .label {
  padding-top: 10px;
}

@media (max-width: 700px) {
  .form--aligned .field {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
  }
  .form--aligned .field--textarea .label {
    padding-top: 0;
  }
}
.label {
  color: var(--muted);
  font-size: 13px;
}

.input {
  border-radius: 5px;
  border: 1px solid rgba(143, 143, 143, 0.43);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  padding: 6px 12px;
  outline: none;
}

html[data-theme=light] .input {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--border);
}

.input:focus {
  border-color: rgba(79, 140, 255, 0.55);
}

.input--success,
.input--success:focus {
  border-color: color-mix(in srgb, var(--success) 75%, var(--border));
}

html[data-theme=light] .input--success,
html[data-theme=light] .input--success:focus {
  border-color: color-mix(in srgb, var(--success) 75%, var(--border));
}

.alert {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
}

.alert--success {
  border-color: color-mix(in srgb, var(--success) 60%, transparent);
  background: color-mix(in srgb, var(--success) 18%, transparent);
}

.alert--danger {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.notice {
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: var(--muted);
}

.line {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
  }
}
.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* stronger horizontal separator between table rows */
.table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* subtle row backgrounds and interactive states */
.table tbody tr {
  background: transparent;
}

.table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.16);
}

.table tbody tr:nth-child(even) {
  background: transparent;
}

.table tbody tr.is-clickable:hover,
.table tbody tr.is-clickable:focus {
  background: rgba(255, 255, 255, 0.035);
}

/* Shared: pending_review rows (Vorgänge, Bestellungen, künftige KI-Connectoren) */
.table tbody tr.table-row--pending-review,
.table tbody tr.table-row--pending-review:nth-child(odd),
.table tbody tr.table-row--pending-review:nth-child(even) {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--text);
}

.table tbody tr.table-row--pending-review.is-clickable:hover,
.table tbody tr.table-row--pending-review.is-clickable:focus {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

html[data-theme=light] .table tbody tr.table-row--pending-review,
html[data-theme=light] .table tbody tr.table-row--pending-review:nth-child(odd),
html[data-theme=light] .table tbody tr.table-row--pending-review:nth-child(even) {
  background: color-mix(in srgb, var(--danger) 10%, #fff);
}

html[data-theme=light] .table tbody tr.table-row--pending-review.is-clickable:hover,
html[data-theme=light] .table tbody tr.table-row--pending-review.is-clickable:focus {
  background: color-mix(in srgb, var(--danger) 16%, #fff);
}

.table--orders .order__review-badge {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* ID-Spalte: #id + dauerhafte KI-Kennung (dot + „ki“) */
.table--orders .orderIdCell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.15;
  min-width: 0;
}

.table--orders .orderIdCell__id {
  display: block;
  white-space: nowrap;
}

.table--orders .orderIdCell__ki {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--muted);
  user-select: none;
}

.table--orders .orderIdCell__kiDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--primary) 70%, #93c5fd);
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
}

html[data-theme=light] .table--orders .orderIdCell__kiDot {
  background: color-mix(in srgb, var(--primary) 55%, #60a5fa);
}

/* Mobile: ID-Spalte ausgeblendet → KI-Kennung in der Titelzeile */
.table--orders .orderIdCell__ki--inline {
  display: none;
  flex: 0 0 auto;
  align-self: center;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

.table-wrap .table {
  min-width: 720px;
}

.table-wrap .table.table--orders {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

/* Purchases table on order details should be able to shrink on mobile */
.table-wrap .table.table--purchases {
  min-width: 0;
}

.table-wrap--compact .table {
  min-width: 560px;
}

.purchaseStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.purchasePill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  color: #000;
  background: var(--border);
  white-space: nowrap;
}

.purchasePill--ordered {
  background: var(--warning);
}

.purchasePill--shipped {
  background: color-mix(in srgb, var(--primary) 45%, #93c5fd);
}

.purchasePill--delivered {
  background: var(--success);
}

.purchasePill--cancelled {
  background: var(--danger);
}

.purchasePill--overdue {
  background: color-mix(in srgb, var(--primary) 55%, var(--danger));
}

.purchaseStatus__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  background: var(--border);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

/* Bestellung-Detail: status-colored hero + collapsed details */
.purchaseShow__actions {
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.purchaseShow__hero {
  overflow: hidden;
  padding: 0;
}

.purchaseShow__heroBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 16px;
  color: #111;
}

.purchaseShow__article {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  word-break: break-word;
}

.purchaseShow__heroStatus {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.92;
}

.purchaseShow__hero--ordered .purchaseShow__heroBar {
  background: var(--warning);
}

.purchaseShow__hero--shipped .purchaseShow__heroBar {
  background: color-mix(in srgb, var(--primary) 45%, #93c5fd);
}

.purchaseShow__hero--delivered .purchaseShow__heroBar {
  background: var(--success);
}

.purchaseShow__hero--overdue .purchaseShow__heroBar {
  background: color-mix(in srgb, var(--primary) 55%, var(--danger));
  color: #fff;
}

.purchaseShow__hero--cancelled .purchaseShow__heroBar {
  background: var(--danger);
  color: #fff;
}

.purchaseShow__heroBody {
  padding: 10px 14px 10px;
}

.purchaseShow__heroPrimary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 20px;
}

.purchaseShow__heroDates {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.purchaseShow__orderDate {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.purchaseShow__arrival {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
}

.purchaseShow__arrivalLabel {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.purchaseShow__heroTracking {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
  margin-top: 1px;
}

.purchaseShow__supplier {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  word-break: break-word;
  max-width: 50%;
}

.purchaseShow__items {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.purchaseShow__itemsEmpty {
  font-size: 13px;
  line-height: 1.3;
}

.table-wrap .table.table--purchaseShowItems {
  min-width: 0;
  width: 100%;
  border-radius: 6px;
}

.table--purchaseShowItems th,
.table--purchaseShowItems td {
  padding: 5px 8px;
  font-size: 13px;
  line-height: 1.25;
  vertical-align: top;
}

.table--purchaseShowItems th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 4px;
  padding-bottom: 4px;
}

.table--purchaseShowItems__qty {
  width: 56px;
  white-space: nowrap;
}

.table--purchaseShowItems__price {
  width: 72px;
  white-space: nowrap;
}

.purchaseShow__more > .card__body {
  padding-top: 0;
}

.purchaseShow__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.purchaseShow__meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 14px;
}

.purchaseShow__metaItem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.purchaseShow__metaItem--wide {
  grid-column: 1/-1;
}

.purchaseShow__metaItem > .material-icons {
  font-size: 18px;
  color: var(--muted);
  margin-top: 2px;
  flex: 0 0 auto;
}

.purchaseShow__metaLabel {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  margin-bottom: 2px;
}

.purchaseShow__metaValue {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
}

.purchaseShow__trackingLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--link, var(--accent, #2563eb));
  text-decoration: none;
  word-break: break-all;
}
.purchaseShow__trackingLink:hover {
  text-decoration: underline;
}
.purchaseShow__trackingLink > .material-icons {
  font-size: 14px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.purchaseShow__linkEmail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.purchaseShow__linkEmail .input {
  max-width: 140px;
  min-height: 0;
  padding: 4px 8px;
  font-size: 12px;
}

.purchaseShow__assignOrderBody {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.purchaseShow__assignOrderLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}
.purchaseShow__assignOrderLabel > .material-icons {
  font-size: 18px;
  color: var(--muted);
}

.purchaseShow__assignOrderControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 1 1 220px;
  min-width: 0;
}
.purchaseShow__assignOrderControls .input {
  flex: 1 1 260px;
  min-width: 180px;
  max-width: 560px;
}
.purchaseShow__assignOrderControls .input.is-loading {
  opacity: 0.7;
}

.purchaseShow__assignOrderFeedback {
  font-size: 12px;
  min-width: 2.5em;
}
.purchaseShow__assignOrderFeedback--ok {
  color: var(--success);
}
.purchaseShow__assignOrderFeedback--err {
  color: var(--danger);
}

.purchaseShow__assignOrderLink {
  font-size: 13px;
  white-space: nowrap;
}

.purchaseShow__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.purchaseShow__note > .material-icons {
  font-size: 18px;
  color: var(--muted);
  flex: 0 0 auto;
  margin-top: 2px;
}

.purchaseShow__noteText {
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  color: var(--muted);
}

.purchaseShow__protocol {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.purchaseShow__protocolTitle {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.purchaseShow__protocolBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.purchaseShow__protocolRow {
  font-size: 12px;
  line-height: 1.35;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

@media (max-width: 640px) {
  .purchaseShow__supplier {
    max-width: 100%;
    text-align: left;
  }
  .purchaseShow__heroBar {
    padding: 10px 12px;
  }
  .purchaseShow__heroBody {
    padding: 8px 12px 8px;
  }
  .table--purchaseShowItems th,
  .table--purchaseShowItems td {
    padding: 4px 6px;
    font-size: 12px;
  }
}
.table--purchasesList .purchaseStatus {
  width: 100%;
  max-width: 170px;
}

.table--purchasesList .purchaseStatus .purchaseStatusSelect {
  flex: 1 1 auto;
  min-width: 0;
}

.purchaseStatus__dot--ordered {
  background: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 75%, var(--border));
}

.purchaseStatus__dot--shipped {
  background: color-mix(in srgb, var(--primary) 70%, #3b82f6);
  border-color: color-mix(in srgb, var(--primary) 55%, #3b82f6);
}

.purchaseStatus__dot--delivered {
  background: var(--success);
  border-color: color-mix(in srgb, var(--success) 75%, var(--border));
}

.purchaseStatus__dot--overdue {
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 75%, var(--border));
}

.purchaseStatus__dot--cancelled {
  background: color-mix(in srgb, var(--primary) 55%, var(--danger));
  border-color: color-mix(in srgb, var(--primary) 55%, var(--danger));
}

/* Bestellungen-Liste (nicht Auftrag-Detail-Tabelle) */
.table-wrap .table.table--purchasesList {
  min-width: 0;
  width: 100%;
}

.table--purchasesList th,
.table--purchasesList td {
  vertical-align: top;
}

.table--purchasesList .col-pdate {
  width: 108px;
  white-space: nowrap;
}

.table--purchasesList .col-pstatus {
  width: 170px;
}

.table--purchasesList .col-psupplier,
.table--purchasesList .col-pcustomer {
  width: 18%;
}

.purchaseList__date {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
}

.purchaseList__id {
  font-size: 11px;
  margin-top: 2px;
}

.purchaseList__article,
.purchaseList__clamp,
.purchaseList__meta,
.purchaseList__note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.purchaseList__article {
  font-weight: 600;
  line-height: 1.3;
}

.purchaseList__meta {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
}

.purchaseList__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.purchaseList__badges .badge {
  font-size: 11px;
}

.purchaseList__badge--rejected {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}

.purchaseList__mobile-head {
  display: none;
}

.purchaseList__status-pill {
  display: none;
}

.table--purchasesList .purchaseStatusSelect {
  width: 100%;
  max-width: 150px;
  padding: 4px 8px;
  font-size: 12px;
  min-height: 0;
}

.table--purchasesList .purchaseStatus .purchaseStatusSelect {
  max-width: none;
}

/* Unified responsive search/filter bar */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.searchbar .input {
  flex: 1 1 240px;
  min-width: 180px;
}

.searchbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Orders list: compact search + collapsible filters */
.orders-search__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.orders-search__input {
  flex: 1 1 auto;
  min-width: 0;
}

.orders-search__filterToggle.is-active,
.orders-search__filterToggle.is-open {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.orders-search__filterBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.orders-search__filters {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}

.orders-search__filters[hidden] {
  display: none !important;
}

.orders-search__filtersGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.orders-search__filtersActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.orders-statusTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.orders-statusTab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 32px;
}

.orders-statusTab .material-icons {
  font-size: 16px;
  opacity: 0.8;
}

.orders-statusTab:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
}

.orders-statusTab.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 16%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}

.orders-statusTab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  font-size: 11px;
  font-weight: 700;
}

.orders-statusTab.is-active .orders-statusTab__count {
  background: var(--primary);
  color: #fff;
}

.orders-statusTab--urgent .orders-statusTab__count {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: color-mix(in srgb, var(--danger) 85%, var(--text));
}

.orders-statusTab--urgent.is-active {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}

.orders-statusTab--urgent.is-active .orders-statusTab__count {
  background: var(--danger);
  color: #fff;
}

.orders-statusTab--waiting .orders-statusTab__count {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
}

.orders-statusTab--waiting.is-active {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--panel));
}

.table tbody tr.table-row--gutschein,
.table tbody tr.table-row--gutschein:nth-child(odd),
.table tbody tr.table-row--gutschein:nth-child(even) {
  background: color-mix(in srgb, #d97706 12%, transparent);
}

.table tbody tr.table-row--gutschein.is-clickable:hover,
.table tbody tr.table-row--gutschein.is-clickable:focus {
  background: color-mix(in srgb, #d97706 18%, transparent);
}

html[data-theme=light] .table tbody tr.table-row--gutschein,
html[data-theme=light] .table tbody tr.table-row--gutschein:nth-child(odd),
html[data-theme=light] .table tbody tr.table-row--gutschein:nth-child(even) {
  background: color-mix(in srgb, #f59e0b 14%, #fff);
}

html[data-theme=light] .table tbody tr.table-row--gutschein.is-clickable:hover,
html[data-theme=light] .table tbody tr.table-row--gutschein.is-clickable:focus {
  background: color-mix(in srgb, #f59e0b 22%, #fff);
}

.table tbody tr.table-row--pending-review.table-row--gutschein,
.table tbody tr.table-row--pending-review.table-row--gutschein:nth-child(odd),
.table tbody tr.table-row--pending-review.table-row--gutschein:nth-child(even) {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  box-shadow: inset 3px 0 0 #d97706;
}

.table--orders .order__gutschein-badge {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #fbbf24;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .searchbar {
    align-items: stretch;
  }
  .searchbar .input {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .searchbar__actions {
    width: 100%;
    justify-content: flex-end;
  }
  .orders-search__row {
    flex-wrap: wrap;
  }
  .orders-search__input {
    flex: 1 1 calc(100% - 96px);
  }
}
.table--fixed {
  table-layout: fixed;
}

.table--fixed th,
.table--fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table--orders.table--ordersDense {
  font-size: 12.5px;
}

.table--orders.table--ordersDense th,
.table--orders.table--ordersDense td {
  padding: 8px 10px;
  vertical-align: top;
}

.table--orders .col-id {
  width: 78px;
  white-space: nowrap;
  vertical-align: middle;
}

.table--orders .col-id .orderIdCell {
  white-space: normal;
}

.table--orders .orderIdCell__date,
.table--orders .orderIdCell__time {
  display: block;
  font-size: 11px;
  line-height: 1.2;
}

.table--orders .col-customer {
  width: 18%;
}

.table--orders .col-meta {
  width: 18%;
}

.table--orders .col-status {
  width: 156px;
}

.table--orders .col-inv {
  width: 52px;
}

.table--orders .orderList__customer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.table--orders .orderList__icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  margin-top: 2px;
}

.table--orders .orderList__customerBody {
  min-width: 0;
}

.table--orders .orderList__mobileDate {
  display: none;
}

.table--orders .orderList__typeChip {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.table--orders .order__title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}

.table--orders .orderList__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.table--orders .orderList__metaItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--text);
}

.table--orders .orderList__metaItem .material-icons {
  font-size: 15px;
  color: var(--muted);
}

.table--orders .orderList__metaClamp {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table--orders .orderList__status {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.table--orders tbody tr.priority-high {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 80%, transparent);
}

.table--orders tbody tr.priority-urgent {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger) 85%, transparent);
}

/* Priority select tint (list + edit) */
.prioritySelect--none,
.prioritySelect--low {
  color: var(--muted);
}

.prioritySelect--high {
  border-color: color-mix(in srgb, var(--warning) 70%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  font-weight: 650;
}

.prioritySelect--urgent {
  border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  font-weight: 700;
  color: color-mix(in srgb, var(--danger) 85%, var(--text));
}

.priorityChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.priorityChip--none,
.priorityChip--low,
.priorityChip--normal {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.priorityChip--high {
  border-color: color-mix(in srgb, var(--warning) 65%, transparent);
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: color-mix(in srgb, var(--warning) 90%, var(--text));
}

.priorityChip--urgent {
  border-color: color-mix(in srgb, var(--danger) 65%, transparent);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: color-mix(in srgb, var(--danger) 90%, var(--text));
}

.table--orders .orderProcessingSelect.is-hidden,
.table--orders .orderProcessingSelect[hidden],
.table--orders .orderWaitingSelect.is-hidden,
.table--orders .orderWaitingSelect[hidden] {
  display: none !important;
}

.table--orders .orderList__statusFeedback {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
}

.table--orders .orderList__inv {
  display: inline-flex;
  color: var(--text);
}

.table--orders .orderList__inv .material-icons {
  font-size: 18px;
}

.vorgangStatusDisplay {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  max-width: 100%;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.vorgangStatusDisplay:hover,
.vorgangStatusDisplay.is-open {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.vorgangStatusDisplay:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 1px;
}

.vorgangStatusDisplay__main,
.vorgangStatusDisplay__prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.vorgangStatusDisplay__text {
  min-width: 0;
  color: var(--text);
  font-weight: 550;
}

.vorgangStatusDisplay__prio {
  min-width: 0;
  color: var(--muted);
  font-weight: 550;
}

.vorgangStatusDisplay__reason {
  color: var(--muted);
  font-weight: 500;
}

.vorgangStatusDisplay.is-done .vorgangStatusDisplay__text {
  color: color-mix(in srgb, var(--success) 55%, var(--muted));
}

.vorgangStatusDisplay__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.vorgangStatusDisplay__saving {
  width: 10px;
  height: 10px;
  border: 1.5px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: vorgang-status-spin 0.6s linear infinite;
}

@keyframes vorgang-status-spin {
  to {
    transform: rotate(360deg);
  }
}
.vorgangStatusPopover {
  position: fixed;
  z-index: 1400;
  width: min(340px, 100vw - 16px);
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.vorgangStatusPopover[hidden] {
  display: none !important;
}

.vorgangStatusPopover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.vorgangStatusPopover__title {
  font-size: 13px;
  font-weight: 700;
}

.vorgangStatusPopover__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.vorgangStatusPopover__close:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.vorgangStatusPopover__close .material-icons {
  font-size: 18px;
}

.vorgangStatusPopover__section {
  margin-bottom: 10px;
}

.vorgangStatusPopover__label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.vorgangStatusPopover__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vorgangStatusChip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.vorgangStatusChip:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.vorgangStatusChip.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  font-weight: 650;
}

.vorgangStatusPopover__hint {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.vorgangStatusPopover__hint.is-saving {
  color: var(--muted);
}

.vorgangStatusPopover__hint.is-saved {
  color: var(--success);
}

.vorgangStatusPopover__hint.is-error {
  color: var(--danger);
}

.table--orders .col-customer,
.table--orders .col-title {
  min-width: 0;
  overflow: hidden;
}

.table--orders .col-customer .customer__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vorgang-Typ Farbakzent links an der Zeile (Desktop) */
.table--orders tbody tr .col-id {
  box-shadow: inset 4px 0 0 0 var(--vorgang-accent, transparent);
}

/* Titelzeile: kompakter Prüfung-Badge vorn, dann Typ-Icon, Titel ellipsis */
.table--orders .order__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.table--orders .order__type-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 1;
  cursor: help;
}

.table--orders .order__title-main {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table--orders .order__mobile-head {
  display: none;
}

.table--orders .status {
  white-space: nowrap;
}

/* Invoices table: keep action column visible */
.table--invoices {
  font-size: 13px;
}

.table--invoices .col-number {
  width: 110px;
}

.table--invoices .col-status {
  width: 110px;
}

.table--invoices .col-date {
  width: 110px;
}

.table--invoices .col-sum {
  width: 120px;
}

.table--invoices .col-actions {
  width: 110px;
}

.table--invoices .col-number,
.table--invoices .col-status,
.table--invoices .col-date,
.table--invoices .col-sum,
.table--invoices .col-actions {
  white-space: nowrap;
}

/* Invoice create: positions table should be compact */
.table--positions {
  font-size: 13px;
}

.table--positions .col-qty {
  width: 80px;
}

.table--positions .col-price {
  width: 110px;
}

.table--positions .col-sum {
  width: 110px;
}

.table--positions .col-actions {
  width: 58px;
}

/* qty control needs enough space for input + arrows */
.table--positions .col-qty {
  width: 140px;
}

.table--positions .input {
  padding: 7px 8px;
  font-size: 13px;
}

.table--positions td .input {
  width: 100%;
}

.table--positions .qty-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.table--positions .qty-input {
  width: 78px;
  min-width: 78px;
}

/* Hide native number spinners (we provide our own arrows) */
.table--positions input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.table--positions input[type=number]::-webkit-outer-spin-button,
.table--positions input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.table--positions .qty-buttons {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.table--positions .qty-btn {
  padding: 6px 6px;
}

.table--positions .qty-btn .material-icons {
  font-size: 18px;
}

@media (max-width: 700px) {
  .table--positions thead {
    display: none;
  }
  .table--positions,
  .table--positions tbody,
  .table--positions tr,
  .table--positions td {
    display: block;
    width: 100%;
  }
  .table--positions tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
  }
  .table--positions td {
    padding: 8px 0;
    border: none;
  }
  .table--positions td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .table--positions td.right {
    text-align: left;
  }
  .table--positions .qty-control {
    justify-content: flex-start;
  }
}
/* Order edit/create: Positionen — Beschreibung wide, price compact */
.table--orderItems {
  width: 100%;
  table-layout: fixed;
}

.table--orderItems .col-desc {
  width: auto;
}

.table--orderItems .col-qty {
  width: 150px;
}

.table--orderItems .col-price {
  width: 88px;
}

.table--orderItems .col-sum {
  width: 90px;
}

.table--orderItems .col-actions {
  width: 56px;
}

.table--orderItems input[name="item_description[]"] {
  width: 100%;
  box-sizing: border-box;
}

.table--orderItems input[name="item_unit_price[]"] {
  width: 4.75rem;
  max-width: 100%;
  box-sizing: border-box;
  text-align: right;
}

/* Order edit: Positionen-Tabelle vertikal auf Mobile */
@media (max-width: 700px) {
  .table--orderItems thead {
    display: none;
  }
  .table--orderItems .col-desc,
  .table--orderItems .col-qty,
  .table--orderItems .col-price,
  .table--orderItems .col-sum,
  .table--orderItems .col-actions {
    width: auto;
  }
  .table--orderItems,
  .table--orderItems tbody,
  .table--orderItems tr,
  .table--orderItems td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .table--orderItems tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
  }
  /* extra-row (textarea) gehört zur vorherigen Position: visuell anschließen */
  .table--orderItems tr:has(> td[colspan]) {
    margin-top: -10px;
    border-top: 0;
    border-radius: 0 0 10px 10px;
  }
  .table--orderItems tr:has(+ tr > td[colspan]) {
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
  }
  .table--orderItems td {
    padding: 6px 0;
    border: none;
  }
  .table--orderItems td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .table--orderItems td.right {
    text-align: left;
  }
  .table--orderItems .input {
    width: 100% !important;
    box-sizing: border-box;
  }
  .table--orderItems td.td-actions {
    text-align: right;
  }
}
/* Order items: EK from Bestellung → red until user edits → green */
.table--orderItems input.orderItemPrice--fromEk {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 45%, var(--border, #ddd));
  font-weight: 600;
}

.table--orderItems input.orderItemPrice--edited {
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 45%, var(--border, #ddd));
  font-weight: 600;
}

.orderPurchaseLinePicker__list {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.orderPurchaseLinePicker__item {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  width: 100%;
  justify-content: stretch !important;
  text-align: left;
  padding: 8px 10px;
  border-radius: 0;
  border-bottom: 1px solid var(--border, #eee);
}

.orderPurchaseLinePicker__item:last-child {
  border-bottom: 0;
}

.orderPurchaseLinePicker__name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
}

.orderPurchaseLinePicker__meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  color: var(--muted, #666);
}

.orderPurchaseLinePicker__ek {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
  white-space: nowrap;
  font-weight: 700;
  color: #dc2626;
}

/* Invoice create: compact customer block */
.customer-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
}

.customer-info__left {
  min-width: 0;
}

.customer-info__name {
  font-weight: 700;
}

.customer-info__right {
  min-width: 120px;
  text-align: right;
}

.customer-info__line {
  line-height: 1.25;
}

@media (max-width: 700px) {
  .customer-info {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .customer-info__right {
    min-width: 0;
    text-align: left;
  }
}
.table--invoices .col-customer {
  white-space: nowrap;
}

.table th,
.table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.table thead th {
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
}

.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.table--clickable tbody tr.is-clickable {
  cursor: pointer;
}

.table--clickable tbody tr.is-clickable:focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: -2px;
}

.table .right {
  text-align: right;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.cronLog {
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted, #8a8f98);
  background: color-mix(in srgb, var(--panel-2, #1a1d24) 80%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.badge--open {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.badge--paid {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.badge--due {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.badge--invoice {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  font-size: 13px;
}

.badge--invoice:hover {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

.badge--invoice .material-icons {
  font-size: 18px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.status__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.status__dot--open {
  background: color-mix(in srgb, var(--warning) 55%, transparent);
  border-color: color-mix(in srgb, var(--warning) 75%, var(--border));
}

.status__dot--paid {
  background: color-mix(in srgb, var(--success) 55%, transparent);
  border-color: color-mix(in srgb, var(--success) 75%, var(--border));
}

.status__dot--due {
  background: color-mix(in srgb, var(--danger) 55%, transparent);
  border-color: color-mix(in srgb, var(--danger) 75%, var(--border));
}

/* Order status: In Bearbeitung */
.status__dot--in_progress {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary) 75%, var(--border));
}

/* Order status: Archiviert */
.status__dot--archived,
.status__dot--cancelled,
.vorgangStatusDisplay__dot--cancelled {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-color: color-mix(in srgb, var(--muted) 65%, var(--border));
}

.status__dot--new,
.vorgangStatusDisplay__dot--new {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--muted));
}

.status__dot--planned,
.vorgangStatusDisplay__dot--planned {
  background: color-mix(in srgb, var(--warning) 55%, transparent);
  border-color: color-mix(in srgb, var(--warning) 75%, var(--border));
}

.status__dot--waiting,
.vorgangStatusDisplay__dot--waiting {
  background: color-mix(in srgb, var(--danger) 48%, transparent);
  border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
}

.status__dot--finished,
.vorgangStatusDisplay__dot--finished {
  background: color-mix(in srgb, color-mix(in srgb, var(--primary) 60%, var(--success)) 50%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--success));
}

.status__dot--ready_for_pickup,
.status__dot--done,
.vorgangStatusDisplay__dot--ready_for_pickup,
.vorgangStatusDisplay__dot--done {
  background: color-mix(in srgb, var(--success) 55%, transparent);
  border-color: color-mix(in srgb, var(--success) 75%, var(--border));
}

.vorgangStatusDisplay__dot--in_progress {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  border-color: color-mix(in srgb, var(--primary) 75%, var(--border));
}

.vorgangStatusDisplay__dot--prio-none,
.vorgangStatusDisplay__dot--prio-low {
  background: color-mix(in srgb, var(--muted) 28%, transparent);
  border-color: color-mix(in srgb, var(--muted) 45%, var(--border));
}

.vorgangStatusDisplay__dot--prio-normal {
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  border-color: color-mix(in srgb, var(--muted) 60%, var(--border));
}

.vorgangStatusDisplay__dot--prio-high {
  background: color-mix(in srgb, #f59e0b 70%, transparent);
  border-color: color-mix(in srgb, #f59e0b 80%, var(--border));
}

.vorgangStatusDisplay__dot--prio-urgent {
  background: color-mix(in srgb, var(--danger) 70%, transparent);
  border-color: color-mix(in srgb, var(--danger) 80%, var(--border));
}

.status__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Order status select (custom, to support dots in options) */
.orderHeaderTitleStatus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.orderHeaderTitleStatus__title {
  min-width: 0;
  width: 100%;
}

.orderHeaderTitleStatus__status {
  min-width: 0;
  width: 100%;
}

.orderHeaderTitleStatus__status .statusSelect {
  width: 100%;
  min-width: 0;
}

.orderHeaderTitleStatus__status .status {
  min-width: 0;
}

@media (max-width: 720px) {
  .orderHeaderTitleStatus {
    grid-template-columns: 1fr;
  }
  .orderHeaderTitleStatus__status {
    width: 100%;
  }
}
.statusSelect {
  position: relative;
}

.statusSelect__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  cursor: pointer;
}

.statusSelect__button .material-icons {
  font-size: 20px;
  opacity: 0.85;
}

.statusSelect__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1301;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.statusSelect__menu[hidden] {
  display: none !important;
}

.statusSelect__option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.statusSelect__option:hover {
  background: rgba(255, 255, 255, 0.04);
}

.statusSelect__option[aria-selected=true] {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Kunden-Detailansicht: Header (Name + Analyse) */
.customer-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.customer-header__main {
  flex: 1 1 280px;
  min-width: 0;
}

.customer-header__name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  word-break: break-word;
}

.customer-header__addr {
  white-space: pre-wrap;
  color: var(--muted);
  margin-bottom: 6px;
  word-break: break-word;
}

.customer-header__contact {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
  word-break: break-word;
}

.customer-header__stats {
  width: 320px;
  flex-shrink: 0;
}

.customer-header__stats-title {
  font-size: 13px;
  color: var(--muted);
}

.customer-header__stats-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   Reusable tabs component
   Markup:
     <div class="tabs" data-tabs>
       <div class="tabs__nav" role="tablist">
         <button class="tabs__tab is-active" data-tab-target="panelId">…</button>
       </div>
       <div class="tabs__panels">
         <div class="tabs__panel is-active" id="panelId" role="tabpanel">…</div>
       </div>
     </div>
   ========================================================================== */
.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tabs__nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
}

.tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tabs__tab:hover {
  color: var(--text);
}

.tabs__tab.is-active {
  background: var(--primary);
  color: #fff;
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tabs__panels {
  position: relative;
}

.tabs__panel {
  display: none;
}

.tabs__panel.is-active {
  display: block;
  animation: tabsFadeIn 0.18s ease;
}

@keyframes tabsFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   Reusable form field grid — equal columns, aligned rows
   ========================================================================== */
.fieldGrid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

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

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

.fieldGrid .field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 0;
  min-width: 0;
  align-items: stretch;
}

.fieldGrid .field .label {
  margin: 0;
  padding-top: 0;
}

.fieldGrid .input {
  width: 100%;
  box-sizing: border-box;
}

.fieldGrid__full {
  grid-column: 1/-1;
}

@media (max-width: 720px) {
  .fieldGrid--2,
  .fieldGrid--3 {
    grid-template-columns: 1fr;
  }
}
.customer-header__stat-value {
  font-weight: 700;
  font-size: 18px;
}

@media (max-width: 700px) {
  .customer-header {
    gap: 14px;
  }
  .customer-header__stats {
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }
}
@media (max-width: 700px) {
  .card__header {
    padding: var(--space-3);
  }
  .card__body {
    padding: var(--space-3);
  }
  .btn {
    padding: 6px 8px;
    font-size: 13px;
  }
  .table th,
  .table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  .table-wrap .table {
    min-width: 640px;
  }
  .table-wrap--compact .table {
    min-width: 520px;
  }
  .table-wrap .table.table--orders {
    min-width: 0;
  }
  .table-wrap .table.table--purchasesList {
    min-width: 0;
  }
  .table--invoices .col-number {
    width: 61px;
  }
  .table--invoices .col-status {
    width: 76px;
  }
  .table--invoices .col-date {
    width: 74px;
  }
  .table--invoices .col-sum {
    width: 78px;
  }
  .table--invoices .col-actions {
    width: 86px;
  }
  /* Customer: allow two lines instead of stealing horizontal space */
  .table--invoices .col-customer {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  /* Mobile: hide action column, row becomes the action */
  .table--invoices .col-actions {
    display: none;
  }
  .table--orders thead {
    display: none;
  }
  .table--orders,
  .table--orders tbody,
  .table--orders tr,
  .table--orders td {
    display: block;
    width: 100%;
  }
  .table--orders tbody {
    display: block;
  }
  .table--orders tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "meta" "status";
    column-gap: 0;
    row-gap: 8px;
    margin-bottom: 12px;
    border: 1px solid rgba(91, 91, 91, 0.12);
    border-left: 4px solid transparent;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
  }
  .table--orders tr.table-row--pending-review,
  .table--purchasesList tr.table-row--pending-review {
    background: color-mix(in srgb, var(--danger) 14%, var(--panel, transparent));
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  }
  .table--orders tr.table-row--gutschein {
    background: color-mix(in srgb, #d97706 14%, var(--panel, transparent));
    border-color: color-mix(in srgb, #d97706 40%, var(--border));
  }
  html[data-theme=light] .table--orders tr.table-row--pending-review,
  html[data-theme=light] .table--purchasesList tr.table-row--pending-review {
    background: color-mix(in srgb, var(--danger) 10%, #fff);
  }
  .table--orders tr.status-open {
    border-left-color: #ffb000;
  }
  .table--orders tr.status-done {
    border-left-color: #28a745;
  }
  .table--orders tr.status-cancelled {
    border-left-color: #c53049;
  }
  .table--orders tr.status-in_progress {
    border-left-color: #4f8cff;
  }
  .table--orders tr.status-archived {
    border-left-color: #98a2b3;
  }
  /* Vorgang-Typ-Farbe hat auf Mobile Vorrang vor der Status-Farbe */
  .table--orders tbody tr[style*="--vorgang-accent"],
  .table--orders tr {
    border-left-color: var(--vorgang-accent, transparent);
  }
  .table--orders tbody tr .col-id {
    box-shadow: none;
  }
  .table--orders td {
    padding: 0;
    border: none;
    text-align: left;
  }
  .table--orders td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--muted);
  }
  .table--orders .col-id,
  .table--orders .col-customer,
  .table--orders .col-inv {
    display: none;
  }
  .table--orders .orderIdCell__ki--inline {
    display: inline-flex;
  }
  .table--orders .col-title {
    grid-area: title;
  }
  .table--orders .col-meta {
    grid-area: meta;
  }
  .table--orders .col-status {
    grid-area: status;
    display: block;
  }
  .table--orders .vorgangStatusDisplay {
    margin: 0;
    width: 100%;
  }
  .vorgangStatusPopover {
    width: calc(100vw - 16px);
  }
  .table--orders .col-title::before,
  .table--orders .col-meta::before,
  .table--orders .col-status::before,
  .table--orders .col-inv::before {
    display: none;
  }
  .table--orders .orderList__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .table--orders td[colspan] {
    padding: 2px 0;
  }
  .table--orders td[colspan]::before {
    display: none;
  }
  .table--orders .col-title,
  .table--orders .col-customer,
  .table--orders .col-status,
  .table--orders .col-inv,
  .table--orders .col-id {
    max-width: none;
    white-space: normal;
  }
  .table--orders .order__title-main {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-weight: 700;
  }
  .table--orders .order__title-meta {
    display: block;
    margin-top: 4px;
  }
  .table--orders .order__meta-date {
    font-size: 12px;
  }
  .table--orders .order__mobile-head {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 4px;
  }
  .table--orders .order__mobile-customer {
    min-width: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table--orders .col-inv.right {
    text-align: right;
  }
  .table--orders .col-inv .material-icons {
    vertical-align: middle;
  }
  /* Bestellungen-Liste: kompakt, max. 2 Zeilen, Mobile gestapelt */
  .table--purchasesList thead {
    display: none;
  }
  .table--purchasesList,
  .table--purchasesList tbody,
  .table--purchasesList tr,
  .table--purchasesList td {
    display: block;
    width: 100%;
  }
  .table--purchasesList tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .table--purchasesList tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 10px 12px;
    box-sizing: border-box;
  }
  .table--purchasesList td {
    border: 0;
    padding: 0;
  }
  .table--purchasesList .col-pdate,
  .table--purchasesList .col-psupplier,
  .table--purchasesList .col-pcustomer {
    display: none;
  }
  .table--purchasesList .col-particle {
    margin-bottom: 8px;
  }
  .table--purchasesList .purchaseList__mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
  }
  .table--purchasesList .purchaseList__mobile-supplier {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table--purchasesList .purchaseList__mobile-date {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .table--purchasesList .col-pstatus {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .table--purchasesList .purchaseStatus {
    max-width: none;
    flex: 1 1 auto;
  }
  .table--purchasesList .purchaseStatusSelect {
    max-width: none;
    flex: 1 1 auto;
  }
}
@media (max-width: 420px) {
  .btn {
    padding: 6px 8px;
    font-size: 12px;
  }
  .table th,
  .table td {
    padding: 6px 7px;
    font-size: 11px;
  }
  .table th {
    padding: 6px 7px;
    font-size: 11px;
  }
  .table-wrap--compact .table {
    min-width: 480px;
  }
  /* Nur in der Auftragsliste: Label ausblenden (Dot bleibt). Status-Select behält Text. */
  .table--orders .status__label {
    display: none;
  }
}
/* ===== Globale Listen-Pagination ===== */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  margin-bottom: 10px;
  z-index: 50;
}

.list-pager--sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.list-pager__info {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.95em;
}

.list-pager__page {
  font-weight: 600;
}

.list-pager__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.list-pager__controls .btn {
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.list-pager__controls .btn--icon-only {
  padding: 4px 6px;
}

.list-pager__controls .btn[aria-disabled=true] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 600px) {
  .list-pager {
    padding: 6px 8px;
  }
  .list-pager__btn-text {
    display: none;
  }
}
/* -----------------------------------------------------------------------
   Kompakte Buttons
   ----------------------------------------------------------------------- */
.btn--sm {
  padding: 3px 6px;
  font-size: 13px;
  gap: 4px;
}

.btn--sm .material-icons {
  font-size: 18px;
}

/* -----------------------------------------------------------------------
   Kameraaufzeichnungen (Modul)
   ----------------------------------------------------------------------- */
.cameraRec__live {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #020617;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cameraRec__liveImg,
.cameraRec__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020617;
}

.cameraRec__badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(15, 23, 42, 0.82);
  color: #e5e7eb;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.cameraRec__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.cameraRec__searchRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.cameraRec__whenLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cameraRec__whenLabel .material-icons {
  font-size: 20px;
  color: var(--muted, #94a3b8);
}
.cameraRec__whenLabel input[type=datetime-local] {
  max-width: 210px;
  border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent);
}
.cameraRec__whenLabel input[type=datetime-local]:focus {
  border-color: rgba(79, 140, 255, 0.55);
}

/* Native Datums-/Zeitfelder: Kalender-Icon und Picker-Popup dem Theme anpassen
   (sonst ist das Icon im Dark-Theme nahezu unsichtbar). */
input.input[type=date],
input.input[type=time],
input.input[type=datetime-local] {
  color-scheme: dark;
}

html[data-theme=light] input.input[type=date],
html[data-theme=light] input.input[type=time],
html[data-theme=light] input.input[type=datetime-local] {
  color-scheme: light;
}

/* Tages-Zeitstrahl (0-24 Uhr) mit Zoom + Verschieben */
.cameraRec__timelineWrap {
  margin-top: 14px;
}

.cameraRec__timelineHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cameraRec__timeline {
  position: relative;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.cameraRec__timeline:active {
  cursor: grabbing;
}

.cameraRec__timelineHint {
  margin-top: 6px;
  font-size: 11px;
}

.cameraRec__timelineTrack {
  position: absolute;
  inset: 0;
}

.cameraRec__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.7;
  pointer-events: none;
}

.cameraRec__centerMark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--warning, #f59e0b);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 2;
}

.cameraRec__segment {
  position: absolute;
  top: 6px;
  bottom: 6px;
  min-width: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary, #3b82f6) 55%, transparent);
  border: 1px solid var(--primary, #3b82f6);
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s ease;
}
.cameraRec__segment:hover {
  background: color-mix(in srgb, var(--primary, #3b82f6) 80%, transparent);
}
.cameraRec__segment.is-active {
  background: var(--primary, #3b82f6);
}

.cameraRec__playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger, #ef4444);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}

.cameraRec__timelineLabels {
  position: relative;
  height: 18px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted, #94a3b8);
}

.cameraRec__tickLabel {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.cameraRec__tickLabel:first-child {
  transform: none;
}
.cameraRec__tickLabel:last-child {
  transform: translateX(-100%);
}

.cameraRec__anchorInfo {
  margin-top: 10px;
  font-size: 12px;
}

.cameraRec__status {
  margin-top: 6px;
  font-size: 13px;
  min-height: 18px;
}

.cameraRec__list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cameraRec__item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
}

.cameraRec__thumb {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  background: #020617;
  cursor: pointer;
  border: 1px solid var(--border);
}

.cameraRec__meta {
  min-width: 0;
}

.cameraRec__time {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.cameraRec__dur {
  font-size: 12px;
}

.cameraRec__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .cameraRec__item {
    grid-template-columns: 72px 1fr;
    grid-template-areas: "thumb meta" "actions actions";
  }
  .cameraRec__thumb {
    grid-area: thumb;
    width: 72px;
    height: 40px;
  }
  .cameraRec__meta {
    grid-area: meta;
  }
  .cameraRec__actions {
    grid-area: actions;
    justify-content: flex-start;
  }
}
/* ---------------------------------------------------------------------------
 * Aktivitaeten / Timeline
 * ------------------------------------------------------------------------- */
.activityModalCard {
  width: min(640px, 96vw);
  max-width: min(640px, 96vw);
}

.activityFieldFull {
  width: 100%;
  min-width: 0;
}

.activityContentInput {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  resize: vertical;
}

.activityAufgabenList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.activityAufgabeRow {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: start;
  width: 100%;
}

.activityAufgabeRow__bullet {
  font-size: 18px;
  color: var(--muted);
  margin-top: 8px;
}

.activityAufgabeRow__check {
  border: none;
  background: transparent;
  padding: 0;
  margin: 8px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: 4px;
  line-height: 1;
}

.activityAufgabeRow__check:hover {
  color: var(--primary, #3b82f6);
}

.activityAufgabeRow__check .material-icons {
  font-size: 18px;
}

.activityAufgabeRow.is-done .activityAufgabeRow__check .material-icons {
  color: var(--primary, #3b82f6);
}

.activityAufgabeRow.is-done .activityAufgabeInput {
  text-decoration: line-through;
  color: var(--muted);
}

.activityAufgabeInput {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  resize: none;
  min-height: 38px;
  overflow: hidden;
  line-height: 1.35;
}

.activityAufgabeRow__remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 4px;
  display: inline-flex;
  border-radius: 6px;
  margin-top: 2px;
}

.activityAufgabeRow__remove:hover {
  color: var(--danger, #ef4444);
  background: var(--panel-2, rgba(127, 127, 127, 0.12));
}

.activityAufgabeRow__remove .material-icons {
  font-size: 18px;
}

.activityItem__tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activityItem__task {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  align-items: start;
  font-size: 14px;
}

.activityItem__taskBtn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: flex-start;
  color: inherit;
  line-height: 1;
  border-radius: 4px;
}

.activityItem__taskBtn:hover {
  color: var(--primary, #3b82f6);
}

.activityItem__taskBtn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.activityItem__task .material-icons,
.activityItem__taskBtn .material-icons {
  font-size: 18px;
  color: var(--muted);
  margin-top: 1px;
}

.activityItem__task.is-done .activityItem__taskBtn .material-icons {
  color: var(--primary, #3b82f6);
}

.activityItem__taskText {
  white-space: pre-wrap;
  word-break: break-word;
}

.activityItem__task.is-done .activityItem__taskText {
  text-decoration: line-through;
  color: var(--muted);
}

.activityTypeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.activityTypeBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.activityTypeBtn .material-icons {
  font-size: 18px;
  color: var(--muted);
}

.activityTypeBtn:hover {
  border-color: var(--primary, #3b82f6);
}

.activityTypeBtn.is-active {
  border-color: var(--primary, #3b82f6);
  background: color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent);
}

.activityTypeBtn.is-active .material-icons {
  color: var(--primary, #3b82f6);
}

.activityTimeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activityItem {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--panel);
}

.activityItem__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--panel-2, rgba(127, 127, 127, 0.12));
  color: var(--primary, #3b82f6);
  font-size: 18px;
}

.activityItem__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activityItem__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.activityItem__type {
  font-weight: 600;
  font-size: 13px;
}

.activityItem__date {
  color: #111827;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

html[data-theme=dark] .activityItem__date {
  color: #f8fafc;
}

.activityItem__edit {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  border-radius: 6px;
}

.activityItem__edit[hidden] {
  display: none !important;
}

.activityItem__edit:hover {
  color: var(--primary, #3b82f6);
  background: var(--panel-2, rgba(127, 127, 127, 0.12));
}

.activityItem__edit .material-icons {
  font-size: 18px;
}

.activityItem__text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
}

.activityItem__attachment {
  margin-top: 2px;
}

.activityItem__attImg {
  display: inline-block;
  max-width: 180px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.activityItem__attImg img {
  display: block;
  max-width: 100%;
  height: auto;
}

.activityItem__attDoc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2, rgba(127, 127, 127, 0.08));
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  max-width: 100%;
}

.activityItem__attDoc:hover {
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
}

.activityItem__attDoc .material-icons {
  font-size: 18px;
  color: var(--primary, #3b82f6);
}

.activityItem__meta {
  font-size: 12px;
}

.activityItem--email .activityItem__icon {
  color: var(--primary, #3b82f6);
}

.activityItem--email-sent .activityItem__icon {
  color: #0d9488;
}

.activityItem__emailDir {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary, #3b82f6);
}

.activityItem__emailDir--sent {
  background: rgba(13, 148, 136, 0.12);
  color: #0d9488;
}

.activityItem__emailSubject {
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.activityItem__emailSnippet {
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.activityItem__emailLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #3b82f6);
  text-decoration: none;
}

.activityItem__emailLink:hover {
  text-decoration: underline;
}

.activityItem__emailLink .material-icons {
  font-size: 14px;
}

/* Chef-Cockpit Dashboard
   8px spacing grid, compact cards, max content width ~1500px */
.dash {
  --dash-max: 1500px;
  --dash-gap: 16px;
  --dash-radius: 14px;
  --dash-green: var(--success);
  --dash-red: var(--danger);
  --dash-orange: #e6973d;
  --dash-blue: var(--primary);
  max-width: var(--dash-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash-header__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dash-header__subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.dash-header__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.dash-header__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.dash-header__date .material-icons {
  font-size: 18px;
}

.dash-header__refresh {
  min-height: 36px;
}

.dash-header__refresh.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.dash-header__refresh.is-loading .material-icons {
  animation: dash-spin 0.9s linear infinite;
}

@keyframes dash-spin {
  to {
    transform: rotate(360deg);
  }
}
.dash-header__updated {
  font-size: 12px;
}

/* KPI strip */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dash-kpi {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--dash-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme=light] .dash-kpi {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.dash-kpi:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.dash-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--dash-blue) 12%, transparent);
  color: var(--dash-blue);
}

.dash-kpi__icon .material-icons {
  font-size: 20px;
}

.dash-kpi--positive .dash-kpi__icon {
  background: color-mix(in srgb, var(--dash-green) 14%, transparent);
  color: var(--dash-green);
}

.dash-kpi--warn .dash-kpi__icon {
  background: color-mix(in srgb, var(--dash-orange) 14%, transparent);
  color: var(--dash-orange);
}

.dash-kpi--danger .dash-kpi__icon {
  background: color-mix(in srgb, var(--dash-red) 14%, transparent);
  color: var(--dash-red);
}

.dash-kpi--neutral .dash-kpi__icon {
  background: color-mix(in srgb, var(--dash-blue) 12%, transparent);
  color: var(--dash-blue);
}

.dash-kpi__body {
  min-width: 0;
  flex: 1;
}

.dash-kpi__label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.dash-kpi__value {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-kpi__delta {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
}

.dash-kpi__delta.is-up {
  color: var(--dash-green);
}

.dash-kpi__delta.is-down {
  color: var(--dash-red);
}

.dash-kpi__tiers {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-kpi__tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}

.dash-kpi__tier--primary {
  color: var(--text);
  font-size: 11px;
}

.dash-kpi__tier-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-kpi__tier-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.dash-kpi__tier-count::after {
  content: "·";
  margin-left: 6px;
  opacity: 0.55;
}

.dash-kpi__tier-sum {
  color: var(--text);
  font-weight: 600;
}

.dash-kpi--tiers-focus .dash-kpi__value--secondary {
  font-size: 16px;
  font-weight: 650;
}

.dash-kpi--tiers-focus .dash-kpi__tiers {
  margin-top: 10px;
  gap: 4px;
}

/* Sections & cards */
.dash-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dash-section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dash-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--dash-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}

html[data-theme=light] .dash-card {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 16px 0;
}

.dash-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.dash-card__meta {
  font-size: 12px;
}

.dash-card__link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
}

.dash-card__link:hover {
  text-decoration: underline;
}

.dash-card__body {
  padding: 16px;
}

.dash-top-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.dash-card--tall {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.dash-card--tall > .dash-card__body {
  flex: 1;
  min-height: 0;
}

.dash-card__body--scroll {
  overflow: auto;
}

.dash-card--ki .dash-card__body {
  padding-top: 12px;
}

.dash-kiList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-kiItem {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
}

.dash-kiItem__main {
  min-width: 0;
  flex: 1 1 auto;
}

.dash-kiItem__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary, #2f6fed);
  margin-bottom: 2px;
}

.dash-kiItem__title {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}

.dash-kiItem__summary {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.dash-kiItem__meta {
  margin-top: 4px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-kiItem__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.dash-kiItem__form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

@media (max-width: 720px) {
  .dash-kiItem {
    flex-direction: column;
  }
  .dash-kiItem__actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.dash-finance {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.dash-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.dash-tabs__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
}

.dash-tabs__btn:hover {
  color: var(--text);
}

.dash-tabs__btn.is-active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Chart */
.dash-chart {
  min-height: 220px;
  position: relative;
}

.dash-chart--tall {
  min-height: 300px;
}

.dash-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 200px;
  padding-top: 8px;
}

.dash-chart--tall .dash-chart__bars {
  height: 280px;
}

.dash-chart__bars--week {
  gap: 10px;
  justify-content: space-evenly;
  padding-left: 8px;
  padding-right: 8px;
}

.dash-chart__bars--week .dash-chart__col {
  flex: 0 0 auto;
  width: 28px;
}

.dash-chart__bars--week .dash-chart__bar {
  width: 8px;
  max-width: 8px;
}

.dash-chart__bars--month {
  gap: 2px;
}

.dash-chart__bars--month .dash-chart__bar {
  width: 40%;
  max-width: 10px;
}

.dash-chart__col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  cursor: default;
}

.dash-chart__stack {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.dash-chart__bar {
  width: 46%;
  max-width: 18px;
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--primary) 78%, #fff 0%);
  min-height: 2px;
  transition: opacity 0.15s ease;
}

.dash-chart__bar--prev {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.dash-chart__col:hover .dash-chart__bar {
  opacity: 0.92;
}

.dash-chart__label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
}

.dash-chart__label.is-blank {
  visibility: hidden;
}

.dash-chart__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.dash-chart__empty[hidden] {
  display: none !important;
}

.dash-chart__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}

.dash-chart__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--primary);
  display: inline-block;
}

.dash-chart__swatch--prev {
  background: color-mix(in srgb, var(--muted) 40%, transparent);
  margin-left: 12px;
}

.dash-tooltip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  max-width: 220px;
}

/* Finance status list */
.dash-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-status-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.dash-status-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.dash-status-list li:first-child {
  padding-top: 0;
}

.dash-status-list__label {
  font-size: 13px;
  color: var(--muted);
}

.dash-status-list__value {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.dash-status-list__value--positive {
  color: var(--dash-green);
}

.dash-status-list__value--warn {
  color: var(--dash-orange);
}

.dash-status-list__value--danger {
  color: var(--dash-red);
}

/* Liquidity */
.dash-liquidity__calc {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
}

.dash-liquidity__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.dash-liquidity__row.is-placeholder .dash-liquidity__value,
.dash-liquidity__row.is-placeholder .dash-liquidity__label em {
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.dash-liquidity__row--result {
  border-bottom: 0;
  margin-top: 4px;
  padding-top: 14px;
  font-weight: 700;
}

.dash-liquidity__op {
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

.dash-liquidity__value {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.dash-liquidity__hint {
  margin: 16px 0 0;
  font-size: 12px;
}

/* Operations / legacy areas */
.dash-ops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.dash-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dash-mini-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-mini-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel-2);
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
  min-width: 0;
}

.dash-mini:hover {
  border-color: var(--border);
}

.dash-mini--accent {
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-2));
}

.dash-mini__label {
  font-size: 11px;
  color: var(--muted);
}

.dash-mini__value {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-mini__sub {
  font-size: 11px;
}

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}

.dash-list__row:hover {
  background: var(--panel-2);
}

.dash-list__row--split {
  align-items: flex-start;
}

.dash-list__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-list__title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-list__sub {
  font-size: 12px;
}

.dash-list__figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.dash-list__chevron {
  font-size: 18px;
  color: var(--muted);
}

.dash-empty {
  font-size: 13px;
  padding: 8px 0;
}

.dash-card__headerActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-appointmentsMore {
  position: relative;
}

.dash-appointmentsPopover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(360px, 100vw - 32px);
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dash-appointmentsPopover[hidden] {
  display: none !important;
}

.dash-appointmentsPopover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.dash-appointmentsPopover__list {
  overflow: auto;
  max-height: 290px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-appointmentRow {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border-radius: 10px;
}

.dash-appointmentRow:hover {
  background: var(--panel-2);
}

.dash-appointmentRow--card {
  padding: 8px 4px;
}

.dash-appointmentRow__when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-appointmentRow__time {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.dash-appointmentRow__date {
  font-size: 11px;
}

.dash-appointmentRow__main {
  min-width: 0;
}

.dash-appointmentRow__title {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-appointmentRow__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
  font-size: 12px;
}

.dash-appointmentRow__meta a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.dash-appointmentRow__meta a:hover {
  text-decoration: underline;
}

.dash-appointmentRow__cal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
}

.dash-appointmentRow__cal:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dash-appointmentRow__cal .material-icons {
  font-size: 18px;
}

/* Full-width day timeline */
.dash-card--timeline {
  overflow: visible;
}

.dash-card__body--timeline {
  padding-top: 10px;
  padding-bottom: 14px;
}

.dash-timeline__allday {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.dash-timeline__alldayLabel {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 6px;
}

.dash-timeline__alldayList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.dash-timeline__chip {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--_accent, var(--primary)) 45%, var(--border));
  background: color-mix(in srgb, var(--_accent, var(--primary)) 14%, var(--panel-2));
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.dash-timeline__chip:hover {
  background: color-mix(in srgb, var(--_accent, var(--primary)) 22%, var(--panel-2));
}

.dash-timeline__chipTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-timeline {
  --lane-h: 46px;
  --lane-gap: 6px;
  --track-pad-y: 8px;
}

.dash-timeline__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 0 -4px;
  padding: 0 4px;
  /* On overflow (narrow widths), JS centers .dash-timeline__now via scrollLeft */
}

.dash-timeline__inner {
  position: relative;
  width: 100%;
}

.dash-timeline__hours {
  position: relative;
  height: 22px;
  margin-bottom: 4px;
}

.dash-timeline__hour {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.dash-timeline__hour:first-child {
  transform: translateX(0);
}

.dash-timeline__hour:last-child {
  transform: translateX(-100%);
}

.dash-timeline__track {
  position: relative;
  min-height: calc(var(--track-pad-y) * 2 + var(--lanes, 1) * var(--lane-h) + (var(--lanes, 1) - 1) * var(--lane-gap));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 70%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
  overflow: hidden;
}

.dash-timeline__gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

.dash-timeline__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%);
}

.dash-timeline__now::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--danger);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent);
}

.dash-timeline__nowLabel {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.dash-timeline__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 1;
  pointer-events: none;
}

.dash-timeline__event {
  --_accent: var(--primary);
  position: absolute;
  top: calc(var(--track-pad-y) + var(--lane, 0) * (var(--lane-h) + var(--lane-gap)));
  height: var(--lane-h);
  min-width: 52px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--_accent) 50%, var(--border));
  border-left-width: 3px;
  border-left-color: var(--_accent);
  background: color-mix(in srgb, var(--_accent) 16%, var(--panel));
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  overflow: hidden;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.dash-timeline__event:hover {
  background: color-mix(in srgb, var(--_accent) 26%, var(--panel));
  transform: translateY(-1px);
  z-index: 4;
}

.dash-timeline__eventTime {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-timeline__eventTitle {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-timeline__eventMeta {
  font-size: 10px;
  line-height: 1.15;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 1200px) {
  .dash-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .dash-top-row,
  .dash-finance {
    grid-template-columns: 1fr;
  }
  .dash-card--tall {
    min-height: 0;
  }
  .dash-ops {
    grid-template-columns: 1fr;
  }
  .dash-header__meta {
    align-items: flex-start;
  }
  .dash-timeline {
    --lane-h: 42px;
  }
}
@media (max-width: 720px) {
  .dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-header__title {
    font-size: 24px;
  }
  .dash-mini-grid,
  .dash-mini-grid--3,
  .dash-mini-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-kpi__value {
    font-size: 17px;
  }
  .dash-chart__bars {
    gap: 3px;
  }
}
@media (max-width: 420px) {
  .dash-kpis {
    grid-template-columns: 1fr;
  }
}
/* Customer dashboard (Kunden-Hub) */
.custDash {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.custDash-hero {
  border-radius: 16px;
  overflow: hidden;
}

.custDash-hero__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  flex-wrap: wrap;
}

.custDash-hero__identity {
  display: flex;
  gap: 14px;
  min-width: 0;
  flex: 1 1 420px;
}

.custDash-hero__avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  flex: 0 0 auto;
}

.custDash-hero__avatar .material-icons {
  font-size: 28px;
}

.custDash-hero__name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.custDash-hero__sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.custDash-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
}

.custDash-hero__metaItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.custDash-hero__metaItem .material-icons {
  font-size: 18px;
  color: var(--muted);
}

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

.custDash-hero__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.custDash-hero__pass,
.custDash-hero__pass .erxCredManager {
  display: inline-flex;
  align-items: center;
}

.custDash-finance {
  border-radius: 14px;
  overflow: hidden;
}

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

.custDash-finance__cell {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  min-width: 0;
}

.custDash-finance__cell + .custDash-finance__cell {
  border-left: 1px solid var(--border);
}

.custDash-kpi--neutral .custDash-kpi__icon {
  background: var(--panel-2);
  color: var(--muted);
}

.custDash-hub {
  border-radius: 14px;
  overflow: hidden;
}

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

.custDash-hub__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.custDash-hub__col + .custDash-hub__col {
  border-left: 1px solid var(--border);
}

.custDash-hub__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 8px;
}

.custDash-hub__head > .material-icons {
  color: var(--muted);
  margin-top: 2px;
  flex: 0 0 auto;
}

.custDash-hub__head > div {
  flex: 1;
  min-width: 0;
}

.custDash-hub__title {
  font-size: 14px;
  font-weight: 700;
}

.custDash-hub__count {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.custDash-hub__body {
  padding: 0 8px 12px;
  max-height: 280px;
  overflow-y: auto;
}

.custDash .activityCard {
  border-radius: 14px;
}

.custDash .activityCard .card__header {
  margin-bottom: 0;
}

.custDash .activityCard .card__body {
  max-height: 380px;
  overflow-y: auto;
}

.custDash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.custDash-kpi {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.custDash-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.custDash-kpi__icon .material-icons {
  font-size: 20px;
}

.custDash-kpi--green .custDash-kpi__icon {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.custDash-kpi--orange .custDash-kpi__icon {
  background: color-mix(in srgb, #e6973d 14%, transparent);
  color: #e6973d;
}

.custDash-kpi--blue .custDash-kpi__icon {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.custDash-kpi--red .custDash-kpi__icon {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.custDash-kpi__label {
  font-size: 12px;
  color: var(--muted);
}

.custDash-kpi__value {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.custDash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.custDash-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.custDash-stat > .material-icons {
  font-size: 24px;
  color: var(--muted);
}

.custDash-stat__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.custDash-stat__label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.custDash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

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

.custDash-panel {
  border-radius: 14px;
  overflow: hidden;
}

.custDash-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.custDash-panel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.custDash-panel__link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
}

.custDash-panel__body {
  padding: 12px 16px 16px;
}

.custDash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custDash-list__row,
.custDash-list__static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.custDash-list__row:hover {
  background: var(--panel-2);
}

.custDash-list__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custDash-list__title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custDash-list__sub {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.custDash-list__sub--pos {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--text);
  font-weight: 500;
}

.custDash-list__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.custDash-list__amount {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.custDash-payIcon {
  font-size: 16px !important;
}

.custDash-inlineIcon {
  font-size: 16px !important;
  margin-right: 4px;
  vertical-align: -3px;
  color: var(--muted);
}

.custDash-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}

.custDash-badge--paid {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.custDash-badge--open {
  background: color-mix(in srgb, #e6973d 16%, transparent);
  color: #c47a20;
}

.custDash-badge--overdue {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.custDash-badge--status-open,
.custDash-badge--status-in_progress {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.custDash-badge--status-done {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.custDash-badge--status-cancelled {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
}

.custDash-passSummary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.custDash-passSummary__count {
  font-size: 28px;
  font-weight: 700;
}

.custDash-chipList {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.custDash-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  font-size: 12px;
}

.custDash-chip .material-icons {
  font-size: 14px;
  color: var(--muted);
}

.custDash-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.custDash-gallery__item {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: inherit;
  text-decoration: none;
}

.custDash-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.custDash-gallery__file {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
  font-size: 11px;
}

.custDash-gallery__file .material-icons {
  font-size: 28px;
  color: var(--muted);
}

.custDash-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.custDash-placeholder .material-icons {
  font-size: 28px;
}

.custDash-empty {
  font-size: 13px;
  padding: 8px 0;
}

.custDash-chevron {
  color: var(--muted);
  font-size: 18px;
}

@media (max-width: 1100px) {
  .custDash-grid--3,
  .custDash-finance__grid,
  .custDash-hub__grid {
    grid-template-columns: 1fr 1fr;
  }
  .custDash-finance__cell + .custDash-finance__cell,
  .custDash-hub__col + .custDash-hub__col {
    border-left: none;
  }
  .custDash-finance__cell:nth-child(odd),
  .custDash-hub__col:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
  .custDash-finance__cell:nth-child(n+3),
  .custDash-hub__col:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 900px) {
  .custDash-kpis,
  .custDash-stats,
  .custDash-grid,
  .custDash-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .custDash-kpis,
  .custDash-stats,
  .custDash-grid,
  .custDash-grid--3,
  .custDash-finance__grid,
  .custDash-hub__grid {
    grid-template-columns: 1fr;
  }
  .custDash-finance__cell,
  .custDash-hub__col {
    border-right: none !important;
    border-left: none !important;
  }
  .custDash-finance__cell + .custDash-finance__cell,
  .custDash-hub__col + .custDash-hub__col {
    border-top: 1px solid var(--border);
  }
  .custDash-hero__name {
    font-size: 22px;
  }
}
.sumupDashGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .sumupDashGrid {
    grid-template-columns: 1fr;
  }
}
.sumupMonthOverview {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sumupMonthOverview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sumupMonthOverview__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sumupMonthOverview__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.sumupMonthKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .sumupMonthKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .sumupMonthKpis {
    grid-template-columns: 1fr;
  }
}
.sumupMonthKpi {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2) 65%, transparent);
  min-width: 0;
}

.sumupMonthKpi__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sumupMonthKpi__icon .material-icons {
  font-size: 20px;
}

.sumupMonthKpi--success .sumupMonthKpi__icon {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.sumupMonthKpi--payout .sumupMonthKpi__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.sumupMonthKpi--pending .sumupMonthKpi__icon {
  background: color-mix(in srgb, #e6973d 16%, transparent);
  color: #e6973d;
}

.sumupMonthKpi--failed .sumupMonthKpi__icon {
  background: color-mix(in srgb, var(--danger, #d64545) 14%, transparent);
  color: var(--danger, #d64545);
}

.sumupMonthKpi__body {
  min-width: 0;
  flex: 1;
}

.sumupMonthKpi__label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.sumupMonthKpi__value {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sumupMonthKpi__meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

.sumupDashCard {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}

.sumupDashCard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.sumupDashCard__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.sumupDashCard__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.sumupDashCard__icon .material-icons {
  font-size: 18px;
}

.sumupDashCard__icon--pay {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.sumupDashCard__icon--payout {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.sumupDashCard__body {
  padding: 8px 10px 12px;
  flex: 1;
}

.sumupDashRow {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) minmax(70px, 0.8fr) minmax(60px, 0.7fr) minmax(90px, 1.1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 8px;
  border-radius: 10px;
}

.sumupDashRow:nth-child(odd) {
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
}

.sumupDashRow--head {
  background: transparent !important;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 4px;
  padding-bottom: 4px;
}

.sumupDashRow--payout {
  grid-template-columns: minmax(72px, 0.9fr) minmax(80px, 1fr) minmax(70px, 0.8fr) auto;
}

.sumupDashRow__muted {
  color: var(--muted);
  font-size: 12px;
}

.sumupDashRow__amount {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.sumupDashRow__link {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

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

.sumupDashStatus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.sumupDashStatus--booked {
  color: var(--success);
}

.sumupDashStatus--waiting {
  color: #e6973d;
}

.sumupDashStatus--bookable .btn {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
}

.sumupDashStatus--incomplete {
  color: var(--muted);
  font-weight: 500;
}

.sumupDashEmpty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13px;
}

.sumupBookWizard {
  --sbw-radius: 14px;
  max-width: 760px;
  width: min(760px, 100vw - 24px);
}

.sumupBookWizard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sumupBookWizard__count {
  font-size: 13px;
  color: var(--muted);
}

.sumupBookWizard__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}

.sumupBookWizard__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.sumupBookWizard__dot.is-active {
  background: var(--primary);
  transform: scale(1.25);
}

.sumupBookWizard__dot.is-done {
  background: var(--success);
}

.sumupBookWizard__dot:disabled {
  cursor: default;
  opacity: 0.55;
}

.sumupBookWizard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .sumupBookWizard__grid {
    grid-template-columns: 1fr;
  }
}
.sumupBookWizard__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--sbw-radius);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  min-height: 100%;
}

.sumupBookWizard__cardHead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sumupBookWizard__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sumupBookWizard__icon .material-icons {
  font-size: 22px;
}

.sumupBookWizard__icon--sumup {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.sumupBookWizard__icon--invoice {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.sumupBookWizard__icon--fee {
  background: color-mix(in srgb, #e6973d 14%, transparent);
  color: #e6973d;
}

.sumupBookWizard__label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.sumupBookWizard__title {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.sumupBookWizard__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}

.sumupBookWizard__amount {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sumupBookWizard__amountHint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.sumupBookWizard__invoices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.sumupBookWizard__invoiceRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sumupBookWizard__invoiceRow a {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

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

.sumupBookWizard__invoiceAmount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sumupBookWizard__invoiceTotal {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.sumupBookWizard__invoiceTotal[hidden] {
  display: none !important;
}

.sumupBookWizard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.sumupBookWizard__nav {
  display: flex;
  gap: 8px;
}

.sumupBookWizard__result {
  display: none;
  text-align: center;
  padding: 28px 12px 8px;
}

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

.sumupBookWizard__stage.is-hidden {
  display: none;
}

.sumupBookWizard__resultIcon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}

.sumupBookWizard__resultIcon .material-icons {
  font-size: 34px;
}

.sumupBookWizard__resultIcon.is-ok {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.sumupBookWizard__resultIcon.is-err {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.sumupBookWizard__resultTitle {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.sumupBookWizard__resultText {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 auto 18px;
  max-width: 34em;
}

.sumupBookWizard__empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted);
}

.sumupBookWizard.is-busy .sumupBookWizard__bookBtn {
  opacity: 0.7;
  pointer-events: none;
}

.sumupBookLaunch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.sumupBookLaunch__kpis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sumupBookLaunch__kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 140px;
}

.sumupBookLaunch__kpiIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.sumupBookLaunch__kpiIcon .material-icons {
  font-size: 18px;
}

.sumupBookLaunch__kpiIcon--ready {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.sumupBookLaunch__kpiIcon--wait {
  background: color-mix(in srgb, #e6973d 14%, transparent);
  color: #e6973d;
}

.sumupBookLaunch__kpiValue {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.sumupBookLaunch__kpiLabel {
  font-size: 11px;
  color: var(--muted);
}

.erMatchKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 960px) {
  .erMatchKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.erMatchKpi {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  min-height: 56px;
}

.erMatchKpi__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.erMatchKpi__icon .material-icons {
  font-size: 18px;
}

.erMatchKpi--files .erMatchKpi__icon {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
}

.erMatchKpi--ok .erMatchKpi__icon {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.erMatchKpi--warn .erMatchKpi__icon {
  background: color-mix(in srgb, #e6973d 16%, transparent);
  color: #e6973d;
}

.erMatchKpi--bank .erMatchKpi__icon {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--text);
}

.erMatchKpi__value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.erMatchKpi__label {
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
}

.erMatchBadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.erMatchBadge--matched {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.erMatchBadge--ambiguous {
  background: color-mix(in srgb, #e6973d 18%, transparent);
  color: #c57a25;
}

.erMatchBadge--unmatched {
  background: color-mix(in srgb, var(--danger, #d64545) 12%, transparent);
  color: var(--danger, #d64545);
}

.erMatchBadge--no_amount {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.erMatchBadge--pdfFound {
  gap: 2px;
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.erMatchBadge--pdfFound .material-icons {
  font-size: 13px;
  line-height: 1;
}

.erMatchBadge--pdfMissing {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  font-weight: 500;
}

.erMatchTable td {
  vertical-align: middle;
}

/* —— Offene Bankbewegungen · kompakte Liste —— */
.openBankTxPage {
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: hidden;
  min-width: 0;
}

.openBankTxPage__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.openBankTxPage__headerActions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.openBankTxPage__meta {
  font-size: 12px;
  margin-top: 2px;
}

.openBankTxPage .erMatchKpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.openBankTxPage__card > .card__header {
  padding: 10px 12px;
}

.openBankTxPage__card > .card__body {
  padding: 0;
}

.openBankTxPage__toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.openBankTxPage__filters {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.openBankTxPage__filters .label {
  font-size: 11px;
  margin-bottom: 2px;
}

.openBankTxPage__filters .input {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}

.openBankTxPage__search {
  min-width: 160px;
  width: 100%;
  box-sizing: border-box;
}

.openBankTxPage__days .input {
  width: 72px;
}

.openBankTxPage .openBankTx__mobile-head {
  display: none;
}

.table-wrap--openBankTx {
  overflow-x: auto;
  max-width: 100%;
}

.table--openBankTx {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 12px;
  line-height: 1.35;
}

.table--openBankTx thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 10px;
  white-space: nowrap;
  font-weight: 650;
}

.table--openBankTx tbody td {
  padding: 7px 10px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.table--openBankTx tbody tr.openBankTxRow {
  cursor: pointer;
  transition: background 0.12s ease;
}

.table--openBankTx tbody tr.openBankTxRow:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.table--openBankTx .col-obDate {
  width: 88px;
}

.table--openBankTx .col-obPayee {
  width: auto;
  min-width: 0;
}

/* fixed-layout: allow Empfänger cell to shrink so ellipsis works */
.table--openBankTx tbody td.col-obPayee {
  max-width: 0;
  overflow: hidden;
}

.table--openBankTx .col-obMatch {
  width: 316px;
}

.table--openBankTx .col-obAmount {
  width: 96px;
}

.table--openBankTx .col-obPdf {
  width: 64px;
}

.table--openBankTx .col-obActions {
  width: 108px;
}

.obHitBadges {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.obHitBadge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.obHitBadge--cat {
  flex: 0 0 192px;
  width: 192px;
  max-width: 192px;
  justify-content: space-between;
  gap: 6px;
  color: #334155;
  background: color-mix(in srgb, var(--panel-2, #f1f5f9) 80%, #e2e8f0);
}

.obHitBadge__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obHitBadge__skr {
  flex: 0 0 36px;
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.78;
}

.obHitBadge--sev {
  flex: 0 0 88px;
  width: 88px;
  max-width: 88px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  color: #1e3a5f;
  background: color-mix(in srgb, #168cff 12%, var(--panel, #fff));
}

.obHitBadge.is-empty {
  color: var(--muted);
  font-weight: 500;
  background: color-mix(in srgb, var(--border) 35%, transparent);
}

html[data-theme=dark] .obHitBadge--cat {
  color: #cbd5e1;
  background: color-mix(in srgb, #334155 45%, var(--panel));
}

html[data-theme=dark] .obHitBadge--sev {
  color: #93c5fd;
  background: color-mix(in srgb, #168cff 16%, var(--panel));
}

.openBankTx__payee,
.openBankTx__purpose {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.openBankTx__payee {
  font-weight: 600;
}

.openBankTx__purpose {
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
}

.openBankTx__amount {
  white-space: nowrap;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.openBankTx__actions {
  white-space: nowrap;
  text-align: right;
}

/* Tablet: keep Treffer, shrink PDF */
@media (max-width: 860px) {
  .openBankTxPage .erMatchKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .openBankTxPage .erMatchKpi:last-child {
    grid-column: 1/-1;
  }
  .table--openBankTx .col-obMatch {
    width: 268px;
  }
  .table--openBankTx .obHitBadge--cat {
    flex: 0 0 148px;
    width: 148px;
    max-width: 148px;
  }
  .table--openBankTx .col-obPdf {
    width: 56px;
  }
  .table--openBankTx .col-obActions {
    width: 96px;
  }
}
/* Mobile: stacked filters + card rows (like purchases) */
@media (max-width: 700px) {
  .openBankTxPage__header {
    flex-direction: column;
    align-items: stretch;
  }
  .openBankTxPage__headerActions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .openBankTxPage__headerActions .btn,
  .openBankTxPage__headerActions form,
  .openBankTxPage__headerActions form .btn {
    width: 100%;
    justify-content: center;
  }
  .openBankTxPage .erMatchKpis {
    grid-template-columns: 1fr;
  }
  .openBankTxPage .erMatchKpi:last-child {
    grid-column: auto;
  }
  .openBankTxPage__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .openBankTxPage__filters {
    width: 100%;
  }
  .openBankTxPage__filters > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .openBankTxPage__search {
    min-width: 0;
  }
  .table-wrap--openBankTx {
    overflow-x: hidden;
    max-width: 100%;
  }
  .openBankTxPage .table--openBankTx thead {
    display: none;
  }
  .openBankTxPage .table--openBankTx,
  .openBankTxPage .table--openBankTx tbody,
  .openBankTxPage .table--openBankTx tr,
  .openBankTxPage .table--openBankTx td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .openBankTxPage .table--openBankTx tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow-x: hidden;
  }
  .openBankTxPage .table--openBankTx tbody tr.openBankTxRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 8px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel, #fff);
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
  }
  .openBankTxPage .table--openBankTx tbody tr.openBankTxRow td {
    border: 0;
    padding: 0;
    height: auto;
    text-align: left;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .openBankTxPage .table--openBankTx .col-obDate,
  .openBankTxPage .table--openBankTx .col-obAmount {
    display: none !important;
  }
  .openBankTxPage .table--openBankTx .col-obPayee {
    grid-column: 1/-1;
    grid-row: 1;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .openBankTxPage .table--openBankTx .col-obMatch {
    display: block !important;
    grid-column: 1/-1;
    grid-row: 2;
    width: auto;
    min-width: 0;
  }
  .openBankTxPage .table--openBankTx .obHitBadges {
    flex-wrap: wrap;
  }
  .openBankTxPage .table--openBankTx .obHitBadge--cat {
    flex: 1 1 160px;
    width: auto;
    max-width: 100%;
  }
  .openBankTxPage .table--openBankTx .col-obPdf {
    display: block !important;
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    width: auto;
    min-width: 0;
  }
  .openBankTxPage .table--openBankTx .col-obActions {
    grid-column: 2;
    grid-row: 3;
    width: auto;
    align-self: center;
    text-align: right;
  }
  .openBankTxPage .openBankTx__mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .openBankTxPage .openBankTx__mobile-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .openBankTxPage .openBankTx__mobile-amount {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Keep ellipsis on mobile — wrapping long payees caused page overflow-x */
  .openBankTxPage .openBankTx__payee,
  .openBankTxPage .openBankTx__purpose {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .openBankTxPage .openBankTx__purpose {
    margin-top: 2px;
  }
  .openBankTxPage .openBankTx__actions {
    text-align: right;
    white-space: nowrap;
  }
  .openBankTxPage .openBankTx__actions .openBankTxBookBtn {
    min-height: 36px;
  }
}
.recurringWizard__card {
  width: min(920px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

.recurringWizard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.recurringWizard__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.recurringWizard__dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.recurringWizard__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  cursor: pointer;
}

.recurringWizard__dot.is-active {
  background: var(--primary);
}

.sevVoucherForm__section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--panel-2) 40%, transparent);
}

.sevVoucherForm__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sevVoucherForm__posGrid {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.8fr 0.6fr;
  gap: 10px;
  align-items: end;
}

@media (max-width: 860px) {
  .sevVoucherForm__grid,
  .sevVoucherForm__posGrid {
    grid-template-columns: 1fr;
  }
}
.sevVoucherForm__toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sevVoucherForm__label {
  font-size: 13px;
  font-weight: 600;
}

.sevVoucherForm__segment {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel);
}

.sevVoucherForm__segment button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}

.sevVoucherForm__segment button.is-active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.sevVoucherForm__categoryRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.sevVoucherForm__accountId {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 4px;
}

.sevVoucherForm__amountWrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.sevVoucherForm__amountWrap .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.sevVoucherForm__currency {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.sevVoucherForm__footerNote {
  margin: 4px 0 12px;
}

.recurringWizard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.recurringWizard__nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.recurringWizard__result,
.recurringWizard__empty {
  display: none;
  text-align: center;
  padding: 28px 12px 12px;
}

.recurringWizard__result.is-visible,
.recurringWizard__empty:not([hidden]) {
  display: block;
}

.recurringWizard__resultIcon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.recurringWizard__resultIcon .material-icons {
  font-size: 36px;
}

.recurringWizard__resultIcon.is-ok {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.recurringWizard__resultIcon.is-err {
  background: color-mix(in srgb, var(--danger, #d64545) 14%, transparent);
  color: var(--danger, #d64545);
}

.recurringWizard__resultTitle {
  margin: 0 0 8px;
  font-size: 20px;
}

.recurringWizard__resultText {
  margin: 0 0 16px;
  color: var(--muted);
}

.recurringWizard.is-busy #recurringWizardBook {
  opacity: 0.8;
  pointer-events: none;
}

/* —— Offene Bankbewegungen · Verbuchen-Modal —— */
.modal.obBookWizard,
.obBookWizard {
  max-width: min(1120px, 98vw);
  width: min(1120px, 98vw);
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

.obBookWizard__card.recurringWizard__card,
.obBookWizard .obBookWizard__card {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.obBookAiBtn.aiPrompt__submit {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(22, 140, 255, 0.2);
}

.obBookAiBtn.aiPrompt__submit .material-icons {
  font-size: 16px;
}

.obAiModal {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(460px, 54%);
  z-index: 8;
  display: none;
  align-items: center;
  padding: 12px 10px 12px 12px;
  background: linear-gradient(90deg, rgba(12, 16, 28, 0.42), rgba(12, 16, 28, 0.08) 88%, transparent);
}

.obAiModal.is-open,
.obAiModal:not([hidden]) {
  display: flex;
}

.obAiModal[hidden] {
  display: none !important;
}

.obAiModal__panel {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel, #fff);
  box-shadow: 0 16px 40px rgba(12, 16, 28, 0.28);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html[data-theme=dark] .obAiModal__panel {
  background: var(--panel, #1a1d24);
}

.obAiModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.obAiModal__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.obAiModal__title .material-icons {
  font-size: 18px;
  color: var(--erimax-blue, #168cff);
}

.obAiModal__lead {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.obAiModal .aiPrompt--compact {
  margin: 4px 0 0;
}

.obNoReceipt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.obBookPdf__empty.is-optional .material-icons {
  color: #1b7a3d;
}

.obBookPdf__status.is-optional {
  color: #1b7a3d;
}

.obBookRunHint {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  white-space: nowrap;
}

#openBankTxWizardModal .card.modalCard .obBookWizard__head {
  padding: 8px 12px 6px;
  margin-bottom: 0;
}

#openBankTxWizardModal .card.modalCard .obBookWizard__body {
  padding: 6px 12px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.obBookWizard__loading {
  padding: 18px 0;
}

.obBookHead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.obBookHead__main {
  min-width: 0;
  flex: 1 1 auto;
}

.obBookHead .h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.obBookHead__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.obBookHead__msg {
  font-size: 11px;
  margin-top: 4px;
}

.obBookMatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2) 60%, transparent);
  white-space: nowrap;
}

.obBookMatch .material-icons {
  font-size: 18px;
}

.obBookMatch__amt {
  font-size: 16px;
  letter-spacing: 0.01em;
}

.obBookMatch__neq {
  opacity: 0.7;
  font-weight: 700;
}

.obBookMatch.is-ok {
  color: #14532d;
  background: rgba(27, 122, 61, 0.12);
  border-color: rgba(27, 122, 61, 0.4);
}

.obBookMatch.is-bad {
  color: #7f1d1d;
  background: rgba(198, 40, 40, 0.1);
  border-color: rgba(198, 40, 40, 0.4);
}

html[data-theme=dark] .obBookMatch.is-ok {
  color: #86efac;
  background: rgba(27, 122, 61, 0.2);
}

html[data-theme=dark] .obBookMatch.is-bad {
  color: #fca5a5;
  background: rgba(198, 40, 40, 0.18);
}

.obBookStage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
}

#obWizardStage:not([hidden]) {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
}

.obBookBank {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 0 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.obBookBank__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  min-width: 0;
  max-width: 100%;
}

.obBookBank__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--border);
  max-width: min(100%, 260px);
  min-width: 0;
  overflow: hidden;
}

.obBookBank__chipText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .obBookBank__chip {
    max-width: 100%;
  }
}
.obBookBank__chip .material-icons {
  font-size: 14px;
  flex-shrink: 0;
}

.obBookBank__amount {
  color: var(--text);
}

.obBookBank__detail {
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.obBookBank__payee {
  display: block;
  font-weight: 700;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obBookBank__via {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.obBookBank__purpose {
  margin-top: 2px;
  font-size: 11px;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obBookPdf {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
}

.obBookPdf__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.obBookPdf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.obBookPdf__titleRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 200px;
}

.obBookPdf__titleRow > .material-icons {
  font-size: 20px;
  color: var(--muted);
  margin-top: 1px;
  flex-shrink: 0;
}

.obBookPdf__titleBlock {
  flex: 1 1 auto;
  min-width: 0;
}

.obBookPdf__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.obBookPdf__file {
  font-size: 11px;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.obBookPdf__status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.obBookPdf__status.is-matched {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.obBookPdf__status.is-email {
  background: color-mix(in srgb, var(--accent, #2563eb) 14%, transparent);
  color: var(--accent, #2563eb);
}

.obBookPdf__status.is-missing {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.obBookPdf__emailMeta {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  padding: 0;
}

.obBookPdf__candidates {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.obBookPdf__candidates li {
  margin: 0 0 4px;
}

.obBookPdf__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

.obBookPdf__actions .btn {
  padding: 2px 7px;
  min-height: 26px;
  font-size: 11px;
}

.obBookPdf__urlSave {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--panel-2) 50%, transparent);
}

.obBookPdf__urlRow {
  display: flex;
  gap: 6px;
  align-items: center;
}

.obBookPdf__urlRow .input {
  flex: 1 1 auto;
  min-width: 0;
}

.obBookPdf__previewWrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 260px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  overflow: auto;
}

.obBookPdf__pages {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  background: #525659;
}

.obBookPdf__pages[hidden] {
  display: none;
}

.obBookPdf__page {
  position: relative;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  width: 100%;
}

.obBookPdf__page canvas {
  display: block;
  width: 100%;
  height: auto;
}

.obBookPdf__hit {
  position: absolute;
  border: 2px solid #f59e0b;
  background: rgba(245, 158, 11, 0.28);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

@media (max-width: 640px) {
  .obBookPdf__previewWrap {
    min-height: 200px;
  }
}
.obBookPdf__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.obBookPdf__iframe[hidden] {
  display: none;
}

.obBookPdf__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: var(--text);
}

.obBookPdf__empty[hidden] {
  display: none;
}

.obBookPdf__empty .material-icons {
  font-size: 28px;
  color: var(--muted);
  margin-bottom: 2px;
}

.obBookPdf__empty code {
  font-size: 11px;
}

.obBookPdf__emptyActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.obBookPdf__rescanEmpty {
  margin-top: 0;
}

.obBookPdf__browse {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  z-index: 2;
}

.obBookPdf__browse[hidden] {
  display: none;
}

.obBookPdf__browseBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.obBookPdf__browsePath {
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obBookPdf__browseList {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.obBookPdf__browseItem {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.obBookPdf__browseItem:hover {
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
}

.obBookPdf__browseItem .material-icons {
  font-size: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.obBookPdf__browseItem.is-amount-hit {
  background: rgba(27, 122, 61, 0.12);
}

.obBookPdf__browseItem.is-amount-hit .material-icons {
  color: #16a34a;
}

.obBookPdf.is-rescanning .obBookPdf__previewWrap {
  opacity: 0.72;
}

.obBookPdf__actions .btn.is-busy .material-icons,
.obBookPdf__rescanEmpty.is-busy .material-icons {
  animation: obPdfRescanSpin 0.9s linear infinite;
}

@keyframes obPdfRescanSpin {
  to {
    transform: rotate(360deg);
  }
}
.obBookEvidence {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-2) 40%, transparent);
}

.obBookEvidence__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.obBookEvidence__summary::-webkit-details-marker {
  display: none;
}

.obBookEvidence__summary .material-icons {
  font-size: 18px;
  color: var(--muted);
}

.obBookEvidence__summary::after {
  content: "expand_more";
  font-family: "Material Icons";
  margin-left: auto;
  color: var(--muted);
  font-size: 20px;
  font-weight: normal;
}

.obBookEvidence[open] .obBookEvidence__summary::after {
  content: "expand_less";
}

.obBookEvidence__body {
  padding: 0 12px 10px;
  font-size: 13px;
}

.obBookEvidence__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.obBookForm {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.obBookForm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.obBookWizard .obBookForm .input,
.obBookWizard .obBookForm select.input,
.obBookWizard .obBookForm .obCatPick {
  padding: 3px 7px;
  font-size: 12px;
  min-height: 28px;
  height: 28px;
  line-height: 1.2;
}

.obBookWizard .obBookForm .obCatPick {
  padding: 0 4px 0 7px;
}

.obBookWizard .obBookForm .label {
  font-size: 10px;
  line-height: 1.15;
  margin: 0;
}

.obBookWizard .sevVoucherForm__currency {
  padding: 0 7px;
  font-size: 11px;
}

.obBookForm__beleg,
.obBookForm__pos {
  margin-bottom: 0;
}

.obBookPos__summary {
  display: none;
}

.obBookTotals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 50%, transparent);
}

.obBookTotals__row {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}

.obBookTotals .obBookTotals__row.obField {
  display: grid;
  flex-direction: unset;
  gap: 0 10px;
}

.obBookTotals__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.obBookTotals__value,
.obBookTotals__gross {
  justify-self: end;
  min-width: 0;
}

.obBookTotals__value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.obBookTotals__row--gross {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.obBookTotals__gross {
  display: flex;
  align-items: stretch;
  justify-self: end;
  width: min(100%, 168px);
}

.obBookWizard .obBookForm .obBookTotals__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  font-weight: 800;
  min-height: 36px;
  height: 36px;
  padding: 4px 8px;
  text-align: right;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.obBookTotals__eur {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.obBookTotals__rateRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.obBookTotals .obBookTotals__rateRow.obField {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.obBookTotals__rateLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
}

.obBookWizard .obBookForm .obBookTotals__rateInput {
  width: 52px;
  min-height: 26px;
  height: 26px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.obBookTotals__rateUnit {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.obField {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.obField--wide {
  grid-column: 1/-1;
}

.obField--col2 {
  grid-column: 2;
}

.obField__req {
  color: var(--primary);
  font-weight: 700;
}

.obField .label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.obField__ocrOk {
  display: none;
  font-size: 16px;
  color: #1b7a3d;
  vertical-align: middle;
  margin-left: 2px;
}

.obField.is-ocr-ok .obField__ocrOk {
  display: inline-block;
}

.obField.is-vat-warn .input,
.obField.is-vat-warn .sevVoucherForm__amountWrap {
  border-color: #c62828;
  box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.35);
}

.obField.is-vat-warn .sevVoucherForm__amountWrap .input {
  border-color: transparent;
  box-shadow: none;
}

.obVatUiHint {
  margin: 0;
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 6px;
  border: 1px solid transparent;
}

.obVatUiHint.is-warn {
  color: #7f1d1d;
  background: rgba(198, 40, 40, 0.08);
  border-color: rgba(198, 40, 40, 0.35);
}

.obVatUiHint.is-ok {
  color: #14532d;
  background: rgba(27, 122, 61, 0.08);
  border-color: rgba(27, 122, 61, 0.3);
}

.obField__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.obField__label .material-icons {
  font-size: 16px;
  opacity: 0.85;
}

.obField__hint {
  font-size: 11px;
  margin-top: 2px;
}

.obField__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.obField__sevId,
.obField__skr {
  font-variant-numeric: tabular-nums;
}

.obCatPick {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  height: 28px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel, #fff);
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.obCatPick:hover,
.obCatPick:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  outline: none;
}

.obCatPick.is-empty .obCatPick__name {
  color: var(--muted);
  font-weight: 500;
}

.obCatPick__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.obCatPick__own {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #166534;
  background: color-mix(in srgb, #22c55e 16%, #fff);
}

.obCatPick__own[hidden] {
  display: none !important;
}

.obCatPick__skr,
.obCatPick__sev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.obCatPick__skr {
  min-width: 40px;
  color: #334155;
  background: color-mix(in srgb, var(--panel-2, #f1f5f9) 80%, #e2e8f0);
}

.obCatPick__sev {
  min-width: 56px;
  color: #1e3a5f;
  background: color-mix(in srgb, #168cff 12%, var(--panel, #fff));
}

.obCatPick .material-icons {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--muted);
}

html[data-theme=dark] .obCatPick__skr {
  color: #cbd5e1;
  background: color-mix(in srgb, #334155 45%, var(--panel));
}

html[data-theme=dark] .obCatPick__sev {
  color: #93c5fd;
  background: color-mix(in srgb, #168cff 16%, var(--panel));
}

.obCatModal.modal-overlay {
  z-index: 1400;
}

.obCatModal__dialog {
  max-width: 640px;
  width: min(640px, 100%);
}

.obCatModal .card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.obCatModal__lead {
  margin: 4px 0 0;
  font-size: 12px;
}

.obCatModal__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.obCatModal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.obCatModal__tab {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.obCatModal__tab.is-active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.obCatModal__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(52vh, 480px);
  overflow: auto;
  padding-right: 2px;
}

.obCatModal__group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 4px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel, #fff);
}

html[data-theme=dark] .obCatModal__group {
  background: var(--panel, #1a1d24);
}

.obCatModal__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 56px 84px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel, #fff);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.obCatModal__row:hover,
.obCatModal__row:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  outline: none;
}

.obCatModal__row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.obCatModal__own {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #166534;
  background: color-mix(in srgb, #22c55e 16%, #fff);
}

.obCatModal__own.is-empty {
  visibility: hidden;
}

html[data-theme=dark] .obCatPick__own,
html[data-theme=dark] .obCatModal__own {
  color: #86efac;
  background: color-mix(in srgb, #22c55e 18%, var(--panel));
}

.obCatModal__rowName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}

.obCatModal__rowSkr,
.obCatModal__rowSev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.obCatModal__rowSkr {
  color: #334155;
  background: color-mix(in srgb, var(--panel-2, #f1f5f9) 80%, #e2e8f0);
}

.obCatModal__rowSev {
  color: #1e3a5f;
  background: color-mix(in srgb, #168cff 12%, var(--panel, #fff));
}

html[data-theme=dark] .obCatModal__rowSkr {
  color: #cbd5e1;
  background: color-mix(in srgb, #334155 45%, var(--panel));
}

html[data-theme=dark] .obCatModal__rowSev {
  color: #93c5fd;
  background: color-mix(in srgb, #168cff 16%, var(--panel));
}

.obCatModal__empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.obSimilar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obSimilar__bar .label {
  margin-bottom: 2px;
}

.obSimilar__row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.obSimilar__row .input {
  flex: 1;
  min-width: 0;
}

.obSimilar__status {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.obSimilar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.obSimilar__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  background: var(--surface, #fff);
}

.obSimilar__item.is-best {
  border-color: rgba(27, 122, 61, 0.45);
  background: rgba(27, 122, 61, 0.06);
}

.obSimilar__main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.obSimilar__firm {
  font-size: 12px;
  font-weight: 650;
}

.obSimilar__cat,
.obSimilar__meta,
.obSimilar__ai {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.obSimilar__ai {
  color: #1b4d8f;
}

html[data-theme=dark] .obSimilar__item.is-best {
  background: rgba(27, 122, 61, 0.12);
}

html[data-theme=dark] .obSimilar__ai {
  color: #8cb4e8;
}

.obSimilar__apply {
  flex-shrink: 0;
}

.obField__idInput {
  width: 100px;
  padding: 4px 8px;
  font-size: 12px;
}

.obBookLinks {
  margin: 0;
}

.obBookLinks__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  text-decoration: none;
}

.obBookLinks__item .material-icons {
  font-size: 16px;
}

.obBookForm__footer {
  margin: 0 0 10px;
  min-height: 0;
}

.obBookForm__footer:empty,
.obBookForm__footer .muted:empty {
  display: none;
}

.obBookForm__actions {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 4px;
}

@media (max-width: 860px) {
  .obBookStage {
    grid-template-columns: 1fr;
  }
  .obBookPdf__previewWrap {
    min-height: 220px;
    max-height: 42vh;
  }
  .obBookHead {
    flex-wrap: wrap;
  }
  .obBookMatch {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 720px) {
  .obBookForm__grid {
    grid-template-columns: 1fr 1fr;
  }
  .obField--col2 {
    grid-column: 1;
  }
}
@media (max-width: 480px) {
  .obBookForm__grid {
    grid-template-columns: 1fr;
  }
  .obBookPos__summary {
    width: 100%;
  }
}
.recurringWizard.is-busy #obWizardBook {
  opacity: 0.8;
  pointer-events: none;
}

/* Credential PIN — schlichtes weißes Entsperren */
.erxVaultPin {
  --vault-text: #1a1d24;
  --vault-muted: #6b7280;
  --vault-border: #e5e7eb;
  --vault-dot: #9ca3af;
  --vault-dot-fill: #111827;
  --vault-danger: #dc2626;
  --vault-lock: #dc2626;
  z-index: 1600;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.erxVaultPin__panel {
  position: relative;
  width: min(92vw, 360px);
  border-radius: 20px;
  padding: 36px 28px 32px;
  background: #ffffff;
  border: 1px solid var(--vault-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.1);
  color: var(--vault-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

.erxVaultPin__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--vault-muted);
  cursor: pointer;
}

.erxVaultPin__close:hover {
  background: #f3f4f6;
  color: var(--vault-text);
}

.erxVaultPin__face {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding-top: 8px;
}

.erxVaultPin__lock {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vault-lock);
  background: none;
  border: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

.erxVaultPin__lock .material-icons {
  font-size: 42px;
  line-height: 1;
}

.erxVaultPin__dots {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0;
  min-height: 28px;
}

.erxVaultPin__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--vault-dot);
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.erxVaultPin__dot.is-filled {
  background: var(--vault-dot-fill);
  border-color: var(--vault-dot-fill);
}

.erxVaultPin.is-error .erxVaultPin__dot,
.erxVaultPin__dots.is-error .erxVaultPin__dot {
  border-color: var(--vault-danger);
  background: var(--vault-danger);
  animation: erxVaultPinShake 420ms ease;
}

.erxVaultPin__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.erxVaultPin__hint {
  min-height: 1.25em;
  font-size: 0.85rem;
  color: var(--vault-danger);
  opacity: 0;
  transition: opacity 160ms ease;
}

.erxVaultPin__hint.is-visible {
  opacity: 1;
}

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

.erxVaultPin.is-busy .erxVaultPin__lock {
  opacity: 0.65;
}

@keyframes erxVaultPinShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .erxVaultPin__dot,
  .erxVaultPin__hint {
    transition: none;
  }
  .erxVaultPin.is-error .erxVaultPin__dot,
  .erxVaultPin__dots.is-error .erxVaultPin__dot {
    animation: none;
  }
}
.erxCredManager--menuOnly > [data-cred-open] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.erxCredModal.is-active {
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(4px);
}

.erxCredModal__dialog {
  width: min(95vw, 880px);
  max-width: 880px;
}

.erxCredModal__card {
  width: 100%;
  max-width: none;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px rgba(16, 24, 40, 0.14);
  overflow: hidden;
}

.erxCredModal__header {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.erxCredModal__headerRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.erxCredModal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.erxCredModal__subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.erxCredModal__close {
  flex: 0 0 auto;
}

.erxCredModal__body {
  padding: 18px 20px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.erxCredForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 70%, var(--panel));
}

.erxCredForm__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1.15fr);
  gap: 10px;
  align-items: end;
}

.erxCredForm__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.erxCredForm__field--note {
  width: 100%;
}

.erxCredForm__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.erxCredForm__optional {
  font-weight: 500;
  opacity: 0.75;
}

.erxCredForm__input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border-radius: 10px;
  background: var(--panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.erxCredForm__input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.erxCredForm__field--secret .erxCredForm__input {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  letter-spacing: 0.04em;
}

.erxCredForm__secretRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.erxCredForm__save {
  white-space: nowrap;
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
  font-weight: 600;
}

.erxCredForm__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.erxCredForm__toolbarLeft {
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted);
}

.erxCredForm__toolbarRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.erxCredTableWrap {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  overflow: auto;
  max-height: min(48vh, 420px);
}

.erxCredTable {
  margin: 0;
}

.erxCredTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}

.erxCredTable__actions {
  display: inline-flex;
  gap: 4px;
}

@media (max-width: 820px) {
  .erxCredForm__row {
    grid-template-columns: 1fr;
  }
  .erxCredForm__secretRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .erxCredForm__toolbarRight {
    width: 100%;
    justify-content: stretch;
  }
  .erxCredForm__toolbarRight .btn {
    flex: 1 1 auto;
  }
}
.calendarReminderToastHost {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, 100vw - 24px);
  pointer-events: none;
}

.calendarReminderToast {
  pointer-events: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  animation: calendarReminderIn 0.2s ease;
}

.calendarReminderToast__title {
  font-weight: 700;
  font-size: 14px;
}

.calendarReminderToast__meta {
  grid-column: 1/-1;
  font-size: 12px;
  color: var(--muted);
}

.calendarReminderToast__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.calendarReminderToast__ack {
  appearance: none;
  border: 0;
  background: var(--primary, #4f8cff);
  color: #fff;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.calendarReminderToast__ack:hover {
  filter: brightness(1.08);
}

.calendarReminderToast.is-nudge {
  animation: calendarReminderNudge 0.45s ease;
}

@keyframes calendarReminderNudge {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-4px);
  }
}
@keyframes calendarReminderIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.calendarPage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

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

.calendarPage__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.calendarPage__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--space-4);
  align-items: start;
}

.calendarCard,
.calendarSide {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

.calendarWeekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
}

.calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendarCell {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  min-height: 88px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.calendarCell:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.calendarCell.is-outside {
  opacity: 0.45;
}

.calendarCell.is-today {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
}

.calendarCell.is-selected {
  background: color-mix(in srgb, var(--primary) 12%, var(--panel-2));
  border-color: var(--primary);
}

.calendarCell__day {
  font-size: 13px;
  font-weight: 700;
}

.calendarCell__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.calendarDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.calendarCell__more {
  font-size: 11px;
  color: var(--muted);
}

.calendarCell__previews {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}

.calendarPreview {
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-left: 3px solid var(--primary);
}

.calType--termin,
.calType--termin.calendarDot,
.calendarPreview.calType--termin {
  --_accent: var(--primary);
}

.calType--wiedervorlage {
  --_accent: var(--warning);
}

.calType--prioritaet {
  --_accent: var(--danger);
}

.calType--erinnerung {
  --_accent: var(--success);
}

.calType--sonstiges {
  --_accent: var(--muted);
}

.calendarDot.calType--termin,
.calendarDot.calType--wiedervorlage,
.calendarDot.calType--prioritaet,
.calendarDot.calType--erinnerung,
.calendarDot.calType--sonstiges {
  background: var(--_accent, var(--primary));
}

.calendarPreview.calType--termin,
.calendarPreview.calType--wiedervorlage,
.calendarPreview.calType--prioritaet,
.calendarPreview.calType--erinnerung,
.calendarPreview.calType--sonstiges {
  background: color-mix(in srgb, var(--_accent, var(--primary)) 18%, transparent);
  border-left-color: var(--_accent, var(--primary));
}

.calendarStatus {
  margin-top: var(--space-3);
  font-size: 12px;
}

.calendarSide {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 320px;
}

.calendarSide__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendarFilters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendarDayList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendarDayItem {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  text-align: left;
  cursor: pointer;
  border-left: 3px solid var(--_accent, var(--primary));
}

.calendarDayItem:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.calendarDayItem__time {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.calendarDayItem__title {
  font-weight: 650;
  font-size: 14px;
}

.calendarDayItem__meta {
  font-size: 12px;
  margin-top: 2px;
}

.calendarDialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 0;
  width: min(560px, 100vw - 24px);
  box-shadow: var(--shadow);
  overflow: visible;
}

.calendarDialog::backdrop {
  background: rgba(8, 12, 20, 0.55);
}

.calendarDialog__form {
  position: relative;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: visible;
}

.calDtWrap {
  position: relative;
  display: block;
}

.calDtWrap .input {
  width: 100%;
  padding-right: 42px;
}

.calDtWrap input[type=datetime-local]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.calDtWrap__btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.calDtWrap__btn .material-icons {
  font-size: 20px;
}

.calDtWrap__btn:hover {
  background: var(--bg, rgba(0, 0, 0, 0.06));
  color: var(--text);
}

.calPicker {
  position: absolute;
  z-index: 1400;
  width: 292px;
  padding: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.calPicker[hidden] {
  display: none !important;
}

.calPicker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.calPicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.calPicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calPicker__day {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  min-height: 32px;
  font-size: 13px;
  cursor: pointer;
}

.calPicker__day:hover {
  background: var(--bg, rgba(0, 0, 0, 0.06));
}

.calPicker__day.is-outside {
  color: var(--muted);
  opacity: 0.55;
}

.calPicker__day.is-today {
  font-weight: 700;
}

.calPicker__day.is-selected {
  background: var(--primary, #2563eb);
  color: #fff;
  font-weight: 700;
}

.calPicker__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.calPicker__time .input {
  width: auto;
  min-width: 120px;
}

.calPicker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.calPicker__iconBtn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calPicker__iconBtn .material-icons {
  font-size: 20px;
}

.calendarDialog .searchDropdownCard {
  max-height: 240px;
  overflow: auto;
}

.calendarDialog__header,
.calendarDialog__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendarDialog__footerRight {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.calendarDialog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.calendarField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.calendarField--full {
  grid-column: 1/-1;
}

.calendarField--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
}

.calendarRemindRow {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.calendarRemindRow .input {
  flex: 1;
  min-width: 0;
}

.calendarRemindTest {
  width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendarRemindTest .material-icons {
  font-size: 20px;
}

@media (max-width: 960px) {
  .calendarPage__layout {
    grid-template-columns: 1fr;
  }
  .calendarCell {
    min-height: 72px;
  }
  .calendarCell__previews {
    display: none;
  }
}
@media (max-width: 640px) {
  .calendarDialog__grid {
    grid-template-columns: 1fr;
  }
  .calendarField--check {
    padding-top: 0;
  }
  .calendarCell {
    min-height: 56px;
    padding: 6px;
  }
}
/* E-Mail-Modul – kompakte Listenansicht */
.emailDash {
  --email-max: 1500px;
  --email-radius: 12px;
  max-width: var(--email-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emailDash-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.emailDash-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.emailDash-inlineForm {
  display: inline;
  margin: 0;
}

.emailDash-refreshBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 7px 11px;
  min-height: 36px;
}

.emailDash-refreshBtn .material-icons {
  font-size: 18px;
}

.emailDash-refreshBtn.is-syncing .material-icons {
  animation: emailDashSpin 0.8s linear infinite;
}

.emailDash-syncStatus {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

@keyframes emailDashSpin {
  to {
    transform: rotate(360deg);
  }
}
.emailDash-menu {
  position: relative;
}

.emailDash-menu__btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.emailDash-menu__btn:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.emailDash-menu__btn .material-icons {
  font-size: 20px;
}

.emailDash-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
  padding: 6px;
  z-index: 40;
  display: none;
}

.emailDash-menu__panel.is-open {
  display: block;
}

.emailDash-menu__item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.emailDash-menu__item:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.emailDash-menu__item .material-icons {
  font-size: 18px;
  color: var(--muted);
}

/* KPI row */
.emailDash-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.emailDash-kpi {
  padding: 12px;
  gap: 10px;
  min-width: 0;
}

.emailDash-kpi .dash-kpi__value {
  font-size: 18px;
}

.emailDash-kpi .dash-kpi__delta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emailDash-kpi--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.emailDash-kpi--link:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.emailDash-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--email-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}

.emailDash-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.emailDash-toolbar__hint {
  margin-left: auto;
  font-size: 11px;
}

.emailDash-scope {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 18%, transparent);
}

.emailDash-scope__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border: 0;
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
  min-height: 32px;
}

.emailDash-scope__btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.emailDash-scope__btn.is-active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.emailDash-filterToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 12px;
  padding: 6px 12px;
}

.emailDash-filterToggle .material-icons {
  font-size: 18px;
}

.emailDash-filterToggle.is-active,
.emailDash-filterToggle.is-open {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.emailDash-filterBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.emailDash-filters {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--border) 12%, transparent);
}

.emailDash-filters[hidden] {
  display: none !important;
}

.emailDash-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: start;
}

.emailDash-filters__label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.emailDash-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.emailDash-filters input,
.emailDash-filters select {
  min-height: 34px;
  font-size: 12px;
}

.emailDash-catMulti {
  grid-column: 1/-1;
}

.emailDash-catChecks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  max-height: 140px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.emailDash-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.emailDash-check input {
  width: 14px;
  height: 14px;
  min-height: 0;
  accent-color: var(--primary);
}

.emailDash-filters__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.emailDash-listWrap {
  max-height: min(70vh, 720px);
  overflow: auto;
}

.emailDash-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  line-height: 1.35;
}

.emailDash-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
  border-bottom: 1px solid var(--border);
  font-weight: 650;
}

.emailDash-table td {
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  vertical-align: middle;
}

.emailDash-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
  border-left: 3px solid transparent;
}

.emailDash-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* Subtilere Zeilenfärbung */
.emailDash-table tbody tr.emailDash-row--action {
  border-left-color: color-mix(in srgb, #c2410c 75%, transparent);
  background: color-mix(in srgb, #ea580c 6%, transparent);
}

.emailDash-table tbody tr.emailDash-row--action:hover {
  background: color-mix(in srgb, #ea580c 11%, transparent);
}

.emailDash-table tbody tr.emailDash-row--business {
  border-left-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 3.5%, transparent);
}

.emailDash-table tbody tr.emailDash-row--muted {
  opacity: 0.58;
  border-left-color: color-mix(in srgb, var(--muted) 35%, transparent);
}

.emailDash-table tbody tr.emailDash-row--muted:hover {
  opacity: 0.78;
}

.emailDash-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emailDash-info .material-icons {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.emailDash-table a {
  color: inherit;
  text-decoration: none;
}

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

.emailDash-date {
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.emailDash-sender__name {
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emailDash-sender__email {
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emailDash-subject {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.emailDash-table tbody tr.emailDash-rowMain--hasSummary > td {
  border-bottom-color: transparent;
  padding-bottom: 2px;
}

.emailDash-table tbody tr.emailDash-summaryRow {
  border-left: 3px solid transparent;
}

.emailDash-table tbody tr.emailDash-summaryRow > td {
  padding-top: 0;
  padding-bottom: 8px;
  vertical-align: top;
}

/* Type border/background continue onto summary row
   (summaryRow resets border-left; re-apply after that rule) */
.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--action + tr.emailDash-summaryRow,
.emailDash-table tbody tr.emailDash-summaryRow.emailDash-row--action {
  border-left-color: color-mix(in srgb, #c2410c 75%, transparent);
  background: color-mix(in srgb, #ea580c 6%, transparent);
}

.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--business + tr.emailDash-summaryRow,
.emailDash-table tbody tr.emailDash-summaryRow.emailDash-row--business {
  border-left-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 3.5%, transparent);
}

.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--muted + tr.emailDash-summaryRow,
.emailDash-table tbody tr.emailDash-summaryRow.emailDash-row--muted {
  opacity: 0.58;
  border-left-color: color-mix(in srgb, var(--muted) 35%, transparent);
}

.emailDash-listSummary {
  width: 100%;
  max-width: 100%;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover über Hauptzeile + Summary gekoppelt */
.emailDash-table tbody tr.emailDash-rowMain:hover + tr.emailDash-summaryRow,
.emailDash-table tbody tr.emailDash-summaryRow:hover {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.emailDash-table tbody tr.emailDash-rowMain:has(+ tr.emailDash-summaryRow:hover) {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--action:hover + tr.emailDash-summaryRow,
.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--action:has(+ tr.emailDash-summaryRow:hover),
.emailDash-table tbody tr.emailDash-summaryRow.emailDash-row--action:hover {
  background: color-mix(in srgb, #ea580c 11%, transparent);
}

.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--muted:hover + tr.emailDash-summaryRow,
.emailDash-table tbody tr.emailDash-rowMain.emailDash-row--muted:has(+ tr.emailDash-summaryRow:hover),
.emailDash-table tbody tr.emailDash-summaryRow.emailDash-row--muted:hover {
  opacity: 0.78;
}

.emailDash-links {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.emailDash-linkBadge {
  font-size: 11px;
  text-decoration: none;
}

.emailDash-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}

.emailDash-badge--rule {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.emailDash-badge--ai {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
  color: #a78bfa;
}

html[data-theme=light] .emailDash-badge--ai {
  color: #6d28d9;
}

.emailDash-badge--manual {
  background: color-mix(in srgb, #e6973d 18%, transparent);
  color: #e6973d;
}

.emailDash-badge--default {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.emailDash-badge--rejected {
  margin-left: 6px;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
  vertical-align: middle;
}

.emailDash-meta {
  color: var(--muted);
  white-space: nowrap;
}

.emailDash-loading,
.emailDash-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.emailDash-modal .modalCard {
  width: min(560px, 96vw);
}

.emailDash-modal__status {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.emailDash-modal__summary {
  margin: 0;
  white-space: pre-wrap;
  font-size: 11px;
  max-height: 180px;
  overflow: auto;
  background: color-mix(in srgb, var(--border) 25%, transparent);
  padding: 10px;
  border-radius: 8px;
}

@media (max-width: 1200px) {
  .emailDash-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .emailDash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .emailDash-toolbar__hint {
    display: none;
  }
  .emailDash-col--meta {
    display: none;
  }
  .emailDash-sender__email {
    display: none;
  }
  .emailDash-subject {
    max-width: none;
  }
}
@media (max-width: 720px) {
  .emailDash-header__actions {
    width: 100%;
  }
  .emailDash-btnLabel--full {
    /* keep short label already in markup */
  }
  .emailDash-filters__grid {
    grid-template-columns: 1fr;
  }
  .emailDash-listWrap {
    max-height: min(75vh, 820px);
    overflow-x: hidden;
  }
  .emailDash-table {
    font-size: 13px;
    line-height: 1.4;
  }
  .emailDash-table thead {
    display: none;
  }
  .emailDash-table,
  .emailDash-entry,
  .emailDash-emptyBody {
    display: block;
    width: 100%;
  }
  .emailDash-emptyBody[hidden] {
    display: none !important;
  }
  .emailDash-col--source,
  .emailDash-col--info,
  .emailDash-col--meta {
    display: none !important;
  }
  .emailDash-entry {
    margin-top: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: transparent;
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    overflow: hidden;
  }
  .emailDash-entry:has(.emailDash-row--action) {
    border-left-color: color-mix(in srgb, #c2410c 75%, transparent);
    background: color-mix(in srgb, #ea580c 6%, transparent);
  }
  .emailDash-entry:has(.emailDash-row--business) {
    border-left-color: color-mix(in srgb, var(--primary) 55%, transparent);
    background: color-mix(in srgb, var(--primary) 3.5%, transparent);
  }
  .emailDash-entry:has(.emailDash-row--muted) {
    opacity: 0.58;
    border-left-color: color-mix(in srgb, var(--muted) 35%, transparent);
  }
  .emailDash-table tbody tr.emailDash-rowMain {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sender date" "subject subject";
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    margin: 0;
    padding: 12px 12px 10px;
    border: none;
    border-left: none;
    border-radius: 0;
    background: transparent;
    opacity: 1;
  }
  .emailDash-table tbody tr.emailDash-rowMain--hasSummary {
    padding-bottom: 6px;
  }
  .emailDash-table tbody tr.emailDash-summaryRow {
    display: block;
    margin: 0;
    padding: 0 12px 12px;
    border: none;
    border-left: none;
    border-radius: 0;
    background: transparent;
    opacity: 1;
  }
  .emailDash-entry > tr.emailDash-row--action,
  .emailDash-entry > tr.emailDash-row--business,
  .emailDash-entry > tr.emailDash-row--muted {
    background: transparent;
    opacity: 1;
  }
  .emailDash-table tbody tr.emailDash-empty-row {
    display: block;
    padding: 16px 12px;
  }
  .emailDash-table td {
    border: none;
    padding: 0;
  }
  .emailDash-date {
    grid-area: date;
    justify-self: end;
    text-align: right;
    font-size: 12px;
    padding-top: 1px;
  }
  .emailDash-col--sender {
    grid-area: sender;
    min-width: 0;
  }
  .emailDash-sender__name {
    max-width: none;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .emailDash-subject {
    grid-area: subject;
    max-width: none;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .emailDash-listSummary {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 13px;
  }
  .emailDash-links {
    margin-top: 6px;
  }
  .emailDash-entry.is-highlight {
    outline: 1.5px solid var(--email-hl);
    outline-offset: -1.5px;
    border-color: color-mix(in srgb, var(--email-hl) 50%, var(--border));
  }
  .emailDash-entry.is-highlight > tr {
    background: var(--email-hl-bg);
  }
}
/* ==========================================================================
   E-Mail Details (kompakt)
   ========================================================================== */
.emailShow {
  --email-show-max: 1180px;
  max-width: var(--email-show-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emailShow-flash {
  display: inline-block;
  align-self: flex-start;
}

.emailShow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 14px;
  align-items: start;
}

.emailShow-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.emailShow-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 12px;
}

.emailShow-actionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  min-height: 36px;
  text-decoration: none;
}

.emailShow-actionBtn .material-icons {
  font-size: 18px;
}

.emailShow-actions__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.emailShow-kiSummary {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 88%, var(--primary) 12%);
}

.emailShow-kiSummary--empty {
  background: var(--panel-2);
}

.emailShow-kiSummary__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.emailShow-kiSummary__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.emailShow-kiSummary__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.emailShow-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  border: 1px solid var(--border);
}

.emailShow-chip--warn {
  color: var(--warning, #b45309);
  background: color-mix(in srgb, var(--warning, #b45309) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning, #b45309) 35%, transparent);
}

.emailShow-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emailShow-title {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  font-weight: 700;
}

.emailShow-meta {
  margin: 0;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.emailShow-meta > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.emailShow-meta dt {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.emailShow-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.emailShow-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emailShow-pre {
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  max-height: min(62vh, 720px);
  overflow: auto;
}

.emailShow-attList {
  margin: 0;
  padding-left: 18px;
}

.emailShow-attList li {
  margin-bottom: 6px;
}

.emailShow-details {
  overflow: hidden;
}

.emailShow-details__sum {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 650;
  font-size: 14px;
  user-select: none;
}

.emailShow-details__sum::-webkit-details-marker {
  display: none;
}

.emailShow-details[open] .emailShow-details__sum {
  border-bottom: 1px solid var(--border);
}

.emailShow-compose {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.emailShow-compose__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.emailShow-compose__title {
  margin: 0;
  font-size: 1.15rem;
}

.emailShow-compose__bodyWrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: auto;
  min-height: 0;
  flex: 1;
}

.emailShow-compose__fields {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.emailShow-compose__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-sizing: border-box;
}

.emailShow-compose__row:last-child {
  border-bottom: none;
}

.emailShow-compose__key {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.emailShow-compose__input {
  width: 100%;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}

.emailShow-compose__input:focus {
  outline: none;
  box-shadow: none !important;
}

.emailShow-compose__editor {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px !important;
  box-sizing: border-box;
}

.emailShow-compose__editor:focus {
  outline: none;
  box-shadow: none !important;
}

.emailShow-compose__signature {
  margin: 0 14px 10px;
  padding: 12px 0 4px;
  border-top: 1px dashed var(--border);
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.emailShow-compose__signature img {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 8px 0;
}

.emailShow-compose__signature a {
  color: #3b82f6;
}

.emailShow-compose__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 88%, transparent);
}

.emailShow-compose__ai,
.emailShow-compose__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.emailShow-compose__status {
  margin: 0 14px 8px;
  font-size: 12px;
}

.emailShow-compose__error {
  margin: 0 14px 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}

.emailShow-compose__hint {
  margin: 0 14px 12px;
  font-size: 12px;
}

/* legacy alias kept for any leftover references */
.emailShow-compose__body {
  min-height: 180px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

/* Return-from-detail: one continuous mint outline around the whole entry */
.emailDash-table {
  --email-hl: color-mix(in srgb, var(--success) 42%, #a7f3d0);
  --email-hl-bg: color-mix(in srgb, var(--success) 7%, transparent);
}

.emailDash-entry.is-highlight {
  outline: 1.5px solid var(--email-hl);
  outline-offset: -1.5px;
}

.emailDash-entry.is-highlight > tr {
  background: var(--email-hl-bg);
}

@media (max-width: 860px) {
  .emailShow-layout {
    grid-template-columns: 1fr;
  }
  .emailShow-actions {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .emailShow-actionBtn {
    width: auto;
    flex: 1 1 calc(50% - 6px);
  }
  .emailShow-actions__divider {
    display: none;
  }
}
/* ===== Bestellübersicht (light SaaS) ===== */
.purchasesOverview {
  gap: 14px;
}

.purchasesOverview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.purchasesOverview__card {
  border-radius: 12px;
}

.purchasesOverview__card > .card__body {
  padding: 0;
}

.table-wrap--purchases {
  overflow-x: auto;
}

.table-wrap--purchases .table.table--purchasesList {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

/* KPI strip */
.purchasesKpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.purchasesKpi {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  min-height: 64px;
}

.purchasesKpi:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.purchasesKpi.is-active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
  background: color-mix(in srgb, var(--primary) 6%, #fff);
}

.purchasesKpi__label {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
}

.purchasesKpi__value {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f2937;
}

.purchasesKpi--open.is-active {
  border-color: color-mix(in srgb, #6b7280 50%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #6b7280 14%, transparent);
  background: color-mix(in srgb, #6b7280 7%, #fff);
}

.purchasesKpi--shipped.is-active {
  border-color: color-mix(in srgb, #2563eb 50%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #2563eb 14%, transparent);
  background: color-mix(in srgb, #2563eb 7%, #fff);
}

.purchasesKpi--today.is-active {
  border-color: color-mix(in srgb, #ea580c 50%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #ea580c 14%, transparent);
  background: color-mix(in srgb, #ea580c 7%, #fff);
}

.purchasesKpi--delivered.is-active {
  border-color: color-mix(in srgb, #16a34a 50%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #16a34a 14%, transparent);
  background: color-mix(in srgb, #16a34a 7%, #fff);
}

.purchasesKpi--late.is-active {
  border-color: color-mix(in srgb, #dc2626 50%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, #dc2626 14%, transparent);
  background: color-mix(in srgb, #dc2626 7%, #fff);
}

.purchasesKpi--open .purchasesKpi__value {
  color: #4b5563;
}

.purchasesKpi--shipped .purchasesKpi__value {
  color: #2563eb;
}

.purchasesKpi--today .purchasesKpi__value {
  color: #ea580c;
}

.purchasesKpi--delivered .purchasesKpi__value {
  color: #16a34a;
}

.purchasesKpi--late .purchasesKpi__value {
  color: #dc2626;
}

/* Toolbar */
.purchasesToolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.purchasesToolbar__left,
.purchasesToolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.purchasesToolbar__left {
  flex: 1 1 520px;
  min-width: 0;
}

.purchasesToolbar__search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.purchasesToolbar__search .material-icons {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--muted);
  pointer-events: none;
}

.purchasesToolbar__search .input {
  width: 100%;
  padding-left: 34px;
}

.purchasesToolbar__left > .input,
.purchasesToolbar__dates .input {
  flex: 0 1 150px;
  min-width: 120px;
}

.purchasesToolbar__dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.purchasesToolbar__dates .input {
  width: 140px;
  flex: 0 0 auto;
}

.purchasesCols {
  position: relative;
}

.purchasesCols__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.purchasesCols__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px !important;
}

.purchasesCols__body label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.purchasesQuick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.purchasesQuick__chip {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: #374151;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.purchasesQuick__chip:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.purchasesQuick__chip.is-active {
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: color-mix(in srgb, var(--primary) 80%, #111);
}

.purchasesEmpty {
  padding: 16px 18px;
}

/* Table columns / rows */
.table--purchasesList thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  padding: 10px 10px;
  white-space: nowrap;
}

.table--purchasesList tbody tr[data-purchase-row] {
  height: 68px;
}

.table--purchasesList tbody tr[data-purchase-row] td {
  padding: 10px;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.table--purchasesList tbody tr[data-purchase-row].is-clickable:hover {
  background: color-mix(in srgb, var(--primary) 5%, #fff);
}

.table--purchasesList .col-pbestellung {
  width: 92px;
}

.table--purchasesList .col-particle {
  width: 22%;
}

.table--purchasesList .col-psupplier {
  width: 12%;
}

.table--purchasesList .col-pcustomer {
  width: 13%;
}

.table--purchasesList .col-pstatus {
  width: 132px;
}

.table--purchasesList .col-ptracking {
  width: 12%;
}

.table--purchasesList .col-pankunft {
  width: 120px;
}

.table--purchasesList .col-palter {
  width: 88px;
}

.table--purchasesList .col-paktionen {
  width: 84px;
}

.table--purchasesList [data-col].is-col-hidden {
  display: none !important;
}

.purchaseList__date {
  font-weight: 650;
  font-size: 13px;
  line-height: 1.2;
  color: #111827;
}

.purchaseList__id {
  font-size: 11px;
  margin-top: 2px;
  color: #9ca3af;
}

.purchaseList__article {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: #111827;
}

.purchaseList__meta {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchaseList__payBadge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  background: color-mix(in srgb, #2563eb 12%, #fff);
  color: #1d4ed8;
  vertical-align: middle;
}

.purchaseList__payBadge--muted {
  background: #f3f4f6;
  color: #4b5563;
}

.purchaseList__reviewBadge {
  margin-top: 4px;
  font-size: 10px !important;
  padding: 2px 6px;
}

.purchaseList__clamp,
.purchaseList__customerLine {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.purchaseList__customerLine--eigen {
  font-style: italic;
  color: #4b5563;
}

.purchaseList__orderLink {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  text-decoration: none;
}

.purchaseList__orderLink:hover {
  text-decoration: underline;
}

.table--purchasesList .purchaseStatus {
  width: 100%;
  max-width: 128px;
  position: relative;
  gap: 6px;
}

.table--purchasesList .purchaseStatusSelect {
  width: 100%;
  max-width: none;
  padding: 3px 6px;
  font-size: 12px;
  min-height: 0;
  border-radius: 8px;
}

.table--purchasesList .purchaseStatusSelect.is-loading {
  opacity: 0.65;
}

.purchaseStatus__feedback {
  position: absolute;
  right: 0;
  top: -14px;
  font-size: 10px;
  font-weight: 650;
  color: #16a34a;
}

.purchaseList__tracking {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.purchaseList__carrier {
  font-size: 11px;
  font-weight: 650;
  color: #374151;
}

.purchaseList__trackLink {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  text-decoration: none;
  color: #2563eb;
  min-width: 0;
}

.purchaseList__trackLink .material-icons {
  font-size: 14px;
}

.purchaseList__trackLink:hover {
  text-decoration: underline;
}

.purchaseList__trackPlain,
.purchaseList__noTrack {
  font-size: 12px;
}

.purchaseArrival {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.purchaseArrival__icon {
  font-size: 16px !important;
  margin-top: 1px;
  color: #9ca3af;
}

.purchaseArrival__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.purchaseArrival__label {
  font-size: 12px;
  font-weight: 650;
}

.purchaseArrival__date {
  font-size: 11px;
}

.purchaseArrival--late .purchaseArrival__label,
.purchaseArrival--late .purchaseArrival__icon {
  color: #dc2626;
}

.purchaseArrival--today .purchaseArrival__label,
.purchaseArrival--today .purchaseArrival__icon {
  color: #ea580c;
}

.purchaseArrival--delivered .purchaseArrival__label,
.purchaseArrival--delivered .purchaseArrival__icon {
  color: #16a34a;
}

.purchaseArrival--soon .purchaseArrival__label {
  color: #2563eb;
}

.purchaseAge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.purchaseAge__bar {
  height: 5px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.purchaseAge__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9ca3af;
}

.purchaseAge--ok .purchaseAge__fill {
  background: #60a5fa;
}

.purchaseAge--warn .purchaseAge__fill {
  background: #f59e0b;
}

.purchaseAge--late .purchaseAge__fill {
  background: #dc2626;
}

.purchaseAge--delivered .purchaseAge__fill {
  background: #16a34a;
}

.purchaseAge__text {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}

.purchaseList__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.btn.btn--icon {
  padding: 6px;
  min-width: 0;
  line-height: 1;
}

.btn.btn--icon .material-icons {
  font-size: 18px;
}

.purchasesOverview .purchaseList__mobile-head {
  display: none;
}

.purchasesOverview .purchaseList__status-pill {
  display: none;
}

/* Tablet: compact */
@media (max-width: 1100px) {
  .purchasesKpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .table--purchasesList .col-psupplier,
  .table--purchasesList .col-palter {
    display: none;
  }
  .table--purchasesList .col-pbestellung {
    width: 84px;
  }
  .table--purchasesList .col-pstatus {
    width: 120px;
  }
}
@media (max-width: 860px) {
  .purchasesToolbar__dates {
    width: 100%;
  }
}
/* Mobile card list */
@media (max-width: 700px) {
  .purchasesKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .purchasesKpi {
    min-height: 56px;
    padding: 8px 10px;
  }
  .purchasesKpi__value {
    font-size: 18px;
  }
  .purchasesToolbar__right > .btn--primary {
    display: none; /* header already has Neue Bestellung */
  }
  .table-wrap--purchases {
    overflow-x: visible;
  }
  .purchasesOverview .table--purchasesList thead {
    display: none;
  }
  .purchasesOverview .table--purchasesList,
  .purchasesOverview .table--purchasesList tbody,
  .purchasesOverview .table--purchasesList tr,
  .purchasesOverview .table--purchasesList td {
    display: block;
    width: 100%;
  }
  .purchasesOverview .table--purchasesList tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }
  .purchasesOverview .table--purchasesList tbody tr[data-purchase-row] {
    height: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
  }
  .purchasesOverview .table--purchasesList tbody tr[data-purchase-row] td {
    border: 0;
    padding: 0;
    height: auto;
  }
  .purchasesOverview .table--purchasesList .col-pbestellung,
  .purchasesOverview .table--purchasesList .col-psupplier,
  .purchasesOverview .table--purchasesList .col-pcustomer,
  .purchasesOverview .table--purchasesList .col-palter,
  .purchasesOverview .table--purchasesList .col-paktionen {
    display: none !important;
  }
  .purchasesOverview .table--purchasesList .col-particle {
    margin-bottom: 8px;
  }
  .purchasesOverview .purchaseList__mobile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
  }
  .purchasesOverview .purchaseList__mobile-supplier {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .purchasesOverview .table--purchasesList .col-pstatus,
  .purchasesOverview .table--purchasesList .col-pankunft,
  .purchasesOverview .table--purchasesList .col-ptracking {
    display: block !important;
    margin-top: 8px;
  }
  .purchasesOverview .table--purchasesList .col-pstatus {
    order: 2;
  }
  .purchasesOverview .table--purchasesList .purchaseStatus {
    max-width: none;
  }
  .purchasesOverview .table--purchasesList tr[data-purchase-row] {
    display: flex;
    flex-direction: column;
  }
  .purchasesOverview .table--purchasesList .col-particle {
    order: 1;
  }
  .purchasesOverview .table--purchasesList .col-pstatus {
    order: 2;
  }
  .purchasesOverview .table--purchasesList .col-pankunft {
    order: 3;
  }
  .purchasesOverview .table--purchasesList .col-ptracking {
    order: 4;
  }
}
/* Phone-call bottom rollup (incoming / manual lookup) */
.phoneCallRollup.modal-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  /* Above page loading overlay (2000) so capture CTA stays usable */
  z-index: 2100;
  pointer-events: none;
}

/* Explicit open state (same as .modal-overlay.is-active) */
.phoneCallRollup.modal-overlay.is-active {
  display: flex;
  pointer-events: auto;
}

.phoneCallRollup__sheet {
  width: min(920px, 100vw - 24px);
  max-width: 920px;
  margin: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 28px color-mix(in srgb, var(--text) 12%, transparent);
  animation: phoneCallRollupIn 0.22s ease-out;
}

@keyframes phoneCallRollupIn {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.phoneCallRollup__header {
  border-bottom: 1px solid var(--border);
}

.phoneCallRollup__identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.phoneCallRollup__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, #2f6fed) 14%, var(--panel));
  color: var(--accent, #2f6fed);
  flex: 0 0 auto;
}

.phoneCallRollup--incoming .phoneCallRollup__icon {
  background: color-mix(in srgb, #1a7f4b 16%, var(--panel));
  color: #1a7f4b;
}

.phoneCallRollup--incoming .phoneCallRollup__label {
  color: #1a7f4b;
  font-weight: 600;
}

.phoneCallRollup__icon .material-icons {
  font-size: 24px;
}

.phoneCallRollup__number {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  word-break: break-all;
}

.phoneCallRollup__caller {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text);
}

.phoneCallRollup__body {
  padding: 12px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.phoneCallRollup__workspace {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(360px, 1.22fr);
  min-height: 250px;
  max-height: min(52vh, 430px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}

.phoneCallRollup__matches,
.phoneCallRollup__detail {
  min-width: 0;
  min-height: 0;
}

.phoneCallRollup__matches {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}

.phoneCallRollup__status {
  flex: 0 0 auto;
  padding: 0 2px 7px;
  font-size: 12px;
}

.phoneCallRollup__results {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background: transparent;
}

.phoneCallRollup__results:empty {
  display: none;
}

.phoneCallRollup__emptyHint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  font-size: 13px;
  color: var(--muted, #6b7280);
}

.phoneCallRollup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.phoneCallRollup__actions .btn {
  width: auto;
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
}

.phoneCallRollup__actions .material-icons {
  font-size: 16px;
}

.phoneCallResult {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  width: 100%;
  min-height: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.phoneCallResult:hover,
.phoneCallResult.is-selected {
  border-color: color-mix(in srgb, var(--accent, #2f6fed) 40%, var(--border));
  background: color-mix(in srgb, var(--accent, #2f6fed) 6%, var(--panel));
}

.phoneCallResult.is-selected {
  box-shadow: inset 3px 0 0 var(--accent, #2f6fed);
}

.phoneCallResult__main {
  display: block;
  min-width: 0;
}

.phoneCallResult__name {
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneCallResult__meta {
  font-size: 12px;
  color: var(--muted, #6b7280);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneCallResult__count {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #6b7280);
}

.phoneCallResult > .material-icons {
  font-size: 18px;
  color: var(--muted, #6b7280);
}

.phoneCallRollup__detail {
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
}

.phoneCallRollup__detailEmpty {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--muted, #6b7280);
  font-size: 13px;
}

.phoneCallRollup__detailEmpty[hidden],
#phoneCallModalDetailContent[hidden] {
  display: none !important;
}

.phoneCallRollup__detailEmpty .material-icons {
  font-size: 28px;
}

#phoneCallModalDetailContent {
  min-height: 0;
  overflow: auto;
}

.phoneCallRollup__customerHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
}

.phoneCallRollup__customerHead strong,
.phoneCallRollup__customerHead span {
  display: block;
}

.phoneCallRollup__customerHead strong {
  font-size: 14px;
}

.phoneCallRollup__customerHead span {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #6b7280);
}

.phoneCallRollup__customerHead .btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
}

.phoneCallRollup__vorgangTitle {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0 5px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 650;
}

.phoneCallRollup__vorgangTitle span {
  color: var(--muted, #6b7280);
  font-size: 10px;
  font-weight: 400;
}

.phoneCallRollup__vorgaenge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phoneCallVorgang {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.phoneCallVorgang:hover {
  border-color: color-mix(in srgb, var(--accent, #2f6fed) 42%, var(--border));
  background: color-mix(in srgb, var(--accent, #2f6fed) 5%, var(--panel));
}

.phoneCallVorgang__id,
.phoneCallVorgang__status {
  font-size: 11px;
  color: var(--muted, #6b7280);
}

.phoneCallVorgang__title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneCallVorgang .material-icons {
  font-size: 15px;
  color: var(--accent, #2f6fed);
}

.phoneCallRollup__noVorgang {
  padding: 12px 8px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--muted, #6b7280);
  font-size: 12px;
}

@media (max-width: 700px) {
  .phoneCallRollup__workspace {
    grid-template-columns: 1fr;
    max-height: min(68vh, 560px);
  }
  .phoneCallRollup__matches {
    max-height: 190px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}
/* Entity typeahead (customer / vorgang) on Telefonat + POS */
.eventEntitySearch {
  position: relative;
}

.eventEntitySearch__selected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #2f6fed) 7%, var(--panel));
  font-size: 13px;
}

.eventEntitySearch__selected[hidden] {
  display: none !important;
}

.eventEntitySearch__selected .material-icons {
  font-size: 18px;
  color: var(--accent, #2f6fed);
}

.eventEntitySearch__selected > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.eventEntitySearch__clear {
  padding: 2px 6px;
  min-height: 0;
}

.eventEntitySearch__clear .material-icons {
  font-size: 16px;
  color: var(--muted, #6b7280);
}

/* Telefonat capture form */
.phoneCallForm__checks {
  display: grid;
  gap: 8px;
}

.phoneCallForm__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  cursor: pointer;
}

.phoneCallForm__check .material-icons {
  font-size: 20px;
  color: var(--muted, #6b7280);
}

.phoneCallForm__check input {
  margin: 0;
}

.phoneCallForm__check:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent, #2f6fed) 45%, var(--border));
  background: color-mix(in srgb, var(--accent, #2f6fed) 8%, var(--panel));
}

.phoneCallForm__check:has(input:checked) .material-icons {
  color: var(--accent, #2f6fed);
}

.phoneCallList__row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr auto;
  gap: 8px 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.phoneCallList__row:last-child {
  border-bottom: 0;
}

.phoneCallList__when {
  font-size: 13px;
  color: var(--muted, #6b7280);
}

.phoneCallList__phone {
  font-weight: 600;
}

.phoneCallList__meta {
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .phoneCallList__row {
    grid-template-columns: 1fr;
  }
}
/* Inline panel on Telefonat form */
.phoneCallInlinePanel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 10px 12px;
}

.phoneCallInlinePanel[hidden] {
  display: none !important;
}

.phoneCallInlinePanel__title {
  font-size: 12px;
  color: var(--muted, #6b7280);
  margin-bottom: 6px;
}

.phoneCallInlinePanel .searchResults {
  max-height: 220px;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Floating note-first capture — desk stays usable underneath */
.phoneCallCapture {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(420px, 100vw - 24px);
  z-index: 2200;
  display: none;
  pointer-events: none;
}

.phoneCallCapture.is-active {
  display: block;
  pointer-events: auto;
  animation: phoneCallCaptureIn 0.2s ease-out;
}

@keyframes phoneCallCaptureIn {
  from {
    opacity: 0.55;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.phoneCallCapture__card {
  display: flex;
  flex-direction: column;
  max-height: min(78vh, 640px);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--text) 16%, transparent);
  overflow: hidden;
}

.phoneCallCapture__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
  touch-action: none;
  background: color-mix(in srgb, var(--accent, #2f6fed) 6%, var(--panel));
}

.phoneCallCapture__header:active {
  cursor: grabbing;
}

.phoneCallCapture__identity {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.phoneCallCapture__icon {
  font-size: 22px;
  color: var(--accent, #2f6fed);
  margin-top: 2px;
}

.phoneCallCapture__eyebrow {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}

.phoneCallCapture__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.phoneCallCapture__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  word-break: break-all;
}

.phoneCallCapture__headerActions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.phoneCallCapture__body {
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phoneCallCapture__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}

@media (max-width: 480px) {
  .phoneCallCapture {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
  }
  .phoneCallCapture__row {
    grid-template-columns: 1fr;
  }
}
.phoneCallCapture__field {
  margin: 0;
}

.phoneCallCapture__customer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent, #2f6fed) 28%, var(--border));
  background: color-mix(in srgb, var(--accent, #2f6fed) 7%, var(--panel));
  font-size: 13px;
  font-weight: 600;
}

.phoneCallCapture__customer .material-icons {
  font-size: 18px;
  color: var(--accent, #2f6fed);
}

.phoneCallCapture__customer[hidden],
#phoneCallCaptureNameField[hidden] {
  display: none !important;
}

.phoneCallCapture__notesField {
  display: block;
  width: 100%;
  margin: 0;
  grid-column: 1/-1;
}

.phoneCallCapture__notesField .phoneCallCapture__notes,
.phoneCallCapture__notes {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 132px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.45;
}

.phoneCallCapture__status {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
  border: 1px solid var(--border);
  color: var(--muted, #6b7280);
}

.phoneCallCapture__status.is-ok {
  border-color: color-mix(in srgb, #1a7f4b 35%, var(--border));
  color: #1a7f4b;
}

.phoneCallCapture__status.is-error {
  border-color: color-mix(in srgb, #b42318 35%, var(--border));
  color: #b42318;
}

.phoneCallCapture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.phoneCallCapture__actions .btn .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

.phoneCallCapture__suggestions {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.phoneCallCapture__suggestions[hidden] {
  display: none !important;
}

.phoneCallCapture__suggestionsHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

.phoneCallCapture__suggestionsHead .material-icons {
  font-size: 18px;
  color: var(--accent, #2f6fed);
}

.phoneCallCapture__suggestionsHead .muted {
  font-size: 11px;
  width: 100%;
}

.phoneCallCapture__suggestionList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phoneCallSuggestion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}

.phoneCallSuggestion.is-accepted {
  border-color: color-mix(in srgb, #1a7f4b 40%, var(--border));
  background: color-mix(in srgb, #1a7f4b 8%, var(--panel));
}

.phoneCallSuggestion.is-dismissed {
  opacity: 0.45;
}

.phoneCallSuggestion__label {
  font-weight: 650;
  font-size: 13px;
}

.phoneCallSuggestion__desc {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.phoneCallSuggestion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phoneCallSuggestion__actions .btn {
  font-size: 12px;
  padding: 4px 8px;
}

.mcOverlay.is-active {
  display: flex;
}

.mcModal {
  width: min(980px, 100%);
  max-width: 980px;
}

.mcModal__card {
  max-height: min(92vh, 900px);
}

.mcModal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mcModal__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mcModal__headActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcProgress {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.mcModal__body {
  padding-top: 8px !important;
}

.mcHint {
  margin: 0 0 10px;
  font-size: 13px;
}

.mcListHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.mcTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.mcTab {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mcTab.is-active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.mcTab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.mcTab.is-idle .mcTab__dot {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.mcTab.is-partial .mcTab__dot {
  background: var(--warning);
}

.mcTab.is-done .mcTab__dot {
  background: var(--success);
}

.mcGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.mcField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}

.mcField select.input {
  width: 100%;
}

.mcHint[hidden] {
  display: none !important;
}

#mcProviderNote,
#mcPrevProviderNote {
  grid-column: 1/-1;
  margin: 0;
}

.mcField.mcReq > span::after {
  content: " *";
  color: var(--danger);
}

.mcSub {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.mcSubRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mcOptGrid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 8px;
}

.mcCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.mcHwList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mcHw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}

.mcPortAsk {
  font-size: 18px;
  font-weight: 650;
  margin: 4px 0 12px;
}

.mcChoice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.mcChoice label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.mcWarn {
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  margin: 0 0 10px;
}

.mcOk {
  color: var(--success);
  font-size: 13px;
  font-weight: 650;
}

.mcPinList,
.mcCopyWrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcPin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: end;
}

.mcCopyWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.mcCopy,
.mcReveal,
.mcRevealInline {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.mcModal__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border);
}

.mcFootSpacer {
  flex: 1;
}

.mcSummary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mcSum {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--panel-2);
}

.mcSum__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.mcSum dl,
.mcViewGrid dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 0;
  font-size: 12px;
}

.mcSum dt,
.mcViewGrid dt {
  color: var(--muted);
}

.mcSum dd,
.mcViewGrid dd {
  margin: 0;
}

.mcSum dd.is-missing {
  color: var(--danger);
  font-weight: 650;
}

.mcSaveMsg {
  font-size: 13px;
  margin: 8px 0 0;
}

.mcSaveMsg.is-ok {
  color: var(--success);
}

.mcSaveMsg.is-bad {
  color: var(--danger);
}

.mcIbanHint.is-bad,
#mcIbanHint.is-bad {
  color: var(--danger);
}

.mcCardList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}

.mcCard__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}

.mcCard__main strong {
  color: var(--text);
  font-size: 14px;
}

.mcCard__actions {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mcBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  height: fit-content;
}

.mcBadge--draft {
  color: var(--muted);
}

.mcBadge--prepared {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
}

.mcBadge--ordered,
.mcBadge--active {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}

.mcBadge--cancelled {
  color: var(--danger);
}

.mcViewHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mcViewGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mcViewGrid h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.mcViewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mcJson {
  margin-top: 10px;
  font-size: 11px;
  overflow: auto;
  max-height: 240px;
  background: var(--panel-2);
  padding: 10px;
  border-radius: 8px;
}

.mcOrderBar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-2));
  font-size: 13px;
}

.mcOrderBar[hidden] {
  display: none !important;
}

.mcOrderBar .material-icons {
  color: var(--primary);
}

@media (max-width: 800px) {
  .mcGrid,
  .mcSummary,
  .mcViewGrid,
  .mcHw,
  .mcOptGrid,
  .mcPin {
    grid-template-columns: 1fr;
  }
}
/* Vorgang v2 Detail — Light first, Dark unterstützt */
.vgPage {
  --vg-pink: #ff3264;
  --vg-cyan: #06bfe7;
  --vg-purple: #9c3cff;
  --vg-card: var(--panel);
  --vg-muted: var(--muted);
  --vg-line: var(--border);
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.vgHero {
  --vg-hero-accent: #7b8794;
  --vg-hero-accent-rgb: 123, 135, 148;
  display: block;
  margin-bottom: 20px;
  padding: 0;
  background: linear-gradient(100deg, rgba(var(--vg-hero-accent-rgb), 0.055), transparent 32%), var(--vg-card);
  border: 1px solid var(--vg-line);
  border-left: 3px solid var(--vg-hero-accent);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.045);
}

.vgHero--cat-repair {
  --vg-hero-accent: #e97b24;
  --vg-hero-accent-rgb: 233, 123, 36;
}

.vgHero--cat-sale {
  --vg-hero-accent: #2684d9;
  --vg-hero-accent-rgb: 38, 132, 217;
}

.vgHero--cat-order {
  --vg-hero-accent: #8b5bd6;
  --vg-hero-accent-rgb: 139, 91, 214;
}

.vgHero--cat-it {
  --vg-hero-accent: #0799a8;
  --vg-hero-accent-rgb: 7, 153, 168;
}

.vgHero--cat-mobile {
  --vg-hero-accent: #2a9d62;
  --vg-hero-accent-rgb: 42, 157, 98;
}

.vgHero--cat-advice {
  --vg-hero-accent: #5865c7;
  --vg-hero-accent-rgb: 88, 101, 199;
}

.vgHero__command {
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.vgHero__tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.vgHero__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--vg-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.vgHero__category {
  max-width: 150px;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid rgba(var(--vg-hero-accent-rgb), 0.3);
  border-radius: 999px;
  background: rgba(var(--vg-hero-accent-rgb), 0.09);
  color: var(--vg-hero-accent);
  cursor: pointer;
  font: inherit;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.vgHero__subcategory {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgHero__info {
  min-height: 76px;
  display: flex;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--vg-line) 76%, transparent);
}

.vgHeroInfo {
  min-width: 0;
  display: flex;
  flex: 1 1 210px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--vg-line) 76%, transparent);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.vgHeroInfo--customer {
  position: relative;
  flex: 1.65 1 350px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.vgHeroInfo--button {
  cursor: pointer;
}

.vgHeroInfo--button:hover,
.vgHeroInfo--button:focus-visible {
  background: rgba(var(--vg-hero-accent-rgb), 0.045);
}

.vgHeroInfo strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgHeroInfo > span:last-child:not(.vgCreateMicroLabel) {
  overflow: hidden;
  color: var(--vg-muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgHeroInfo .vgCreateMicroLabel {
  font-size: 9px;
  letter-spacing: 0.07em;
}

.vgHeroInfo--customer > .vgIconBtn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin-left: auto;
}

.vgHeroInfo .vgCustomer__avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 15px;
}

.vgHeroInfo .vgCustomer__body {
  overflow: hidden;
  flex: 1;
}

.vgHeroInfo .vgCustomer__name {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgCustomer__details {
  display: flex;
  gap: 4px 10px;
  overflow: hidden;
  color: var(--vg-muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.vgHeroInfo .vgCustomer__contact {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}

.vgHeroInfo .vgCustomer__contact a {
  gap: 3px;
  font-size: 11px;
  white-space: nowrap;
}

.vgHeroInfo .vgCustomer__contact .material-icons {
  font-size: 13px;
}

.vgHero__info > .vgHero__invoices {
  flex: 0 1 auto;
  align-content: center;
  align-items: center;
  padding: 8px 12px;
  border-right: 0;
}

@media (max-width: 1120px) {
  .vgHero__command {
    grid-template-columns: 38px minmax(160px, 1fr) auto;
  }
  .vgHero__when {
    display: none;
  }
  .vgHeroInfo--customer {
    flex-basis: 300px;
  }
}
@media (max-width: 860px) {
  .vgHero__command {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .vgHero__tools {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .vgHero__info {
    flex-wrap: wrap;
  }
  .vgHeroInfo {
    flex-basis: 45%;
    border-bottom: 1px solid color-mix(in srgb, var(--vg-line) 76%, transparent);
  }
  .vgHeroInfo--customer {
    flex-basis: 100%;
  }
}
@media (max-width: 560px) {
  .vgHero__command {
    padding: 8px 10px;
  }
  .vgHero__tools {
    flex-wrap: wrap;
  }
  .vgHero__status {
    order: -1;
  }
  .vgHeroInfo {
    flex-basis: 100%;
    border-right: 0;
  }
  .vgCustomer__details {
    flex-direction: column;
    gap: 1px;
    white-space: normal;
  }
}
.vgHero--desk .vgHero__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: start;
  gap: 10px 14px;
}

.vgSource,
.vgIconBtn,
.vgFact {
  border: 1px solid var(--vg-line);
  background: color-mix(in srgb, var(--panel-2) 70%, var(--panel));
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.vgSource {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: rgba(var(--vg-hero-accent-rgb), 0.25);
  border-radius: 10px;
  background: rgba(var(--vg-hero-accent-rgb), 0.08);
}

.vgSource .material-icons {
  font-size: 21px;
  color: var(--vg-hero-accent);
}

.vgSource span:last-child:not(.material-icons) {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vg-muted);
}

.vgHero__when {
  margin: 0 3px;
  color: var(--vg-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.vgHero__analysis {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  padding: 0;
}

.vgHero__customer {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.vgHero__customer .vgCustomer {
  flex: 1;
}

.vgHero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vgRepairDesk .vgHero__facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vgRepairFinish {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.vgRepairFinish > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--vg-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 70%, var(--panel));
}

.vgHero__invoices,
.vgCalcInvoices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vgHero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.vgHero__foot .vgHero__invoices {
  margin-right: auto;
}

.vgHero__status {
  flex: 0 0 auto;
  min-width: 112px;
  max-width: 150px;
}

.vgHero__status .input {
  min-height: 34px;
  height: 34px;
  padding: 5px 30px 5px 10px;
  border-color: rgba(var(--vg-hero-accent-rgb), 0.26);
  border-radius: 9px;
  background-color: rgba(var(--vg-hero-accent-rgb), 0.065);
  font-size: 12px;
  font-weight: 650;
}

.vgInvoiceBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--erimax-blue) 40%, var(--border));
  background: color-mix(in srgb, var(--erimax-blue) 12%, var(--panel));
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.vgInvoiceBadge .material-icons {
  font-size: 16px;
  color: var(--erimax-blue);
}

.vgInvoiceBadge:hover,
.vgInvoiceBadge:focus-visible {
  border-color: var(--erimax-blue);
}

.vgInvoiceModalBody {
  min-height: 120px;
}

.vgInvoiceModalBody .invoiceDetails {
  gap: 12px;
}

#vgInvoiceModal.modal-overlay {
  z-index: 1400;
}

#vgInvoiceModal.vgDeskModal--wide .card.modalCard > .card__body {
  overflow: auto;
  max-height: calc(100vh - 88px);
}

.vgFact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 12px;
}

.vgFact strong {
  font-size: 15px;
}

.vgFact span:last-child:not(.vgCreateMicroLabel) {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgIconBtn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

.vgIconBtn .material-icons {
  font-size: 18px;
}

.vgSourceLink {
  border: 0;
  padding: 0;
  background: none;
  color: var(--erimax-blue);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vgStatusInline {
  min-width: 180px;
}

.vgStatusInline .input {
  min-height: 42px;
}

.vgHero .vgHero__status .input {
  min-height: 34px;
}

.vgCard--full,
.vgWorkspaceGrid > .vgCard.vgCard--full {
  grid-column: 1/-1;
}

.vgCard--workPlanCompact {
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.vgCard--workPlanCompact .vgWorkPlan {
  overflow-y: auto;
  max-height: 168px;
}

.vgCard__heading p {
  margin: 3px 0 0;
  color: var(--vg-muted);
  font-size: 12px;
}

.vgHero__meta {
  min-width: 0;
}

.vgKicker {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vg-muted);
}

.vgTitle {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  width: 100%;
  font: inherit;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

button.vgTitle:hover,
button.vgTitle:focus-visible {
  color: var(--erimax-blue);
}

.vgFacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgFacts a {
  color: inherit;
}

.vgActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.vgActions > form {
  display: contents;
}

.vgActions .btn {
  min-height: 40px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-color: color-mix(in srgb, var(--vg-line) 88%, transparent);
  text-decoration: none;
}

.vgActions .btn:hover {
  border-color: color-mix(in srgb, var(--erimax-blue) 38%, var(--vg-line));
  background: color-mix(in srgb, var(--erimax-blue) 7%, var(--panel));
}

.vgActions__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.vgActions__icon .material-icons {
  font-size: 22px;
}

.vgHero .vgTitle {
  overflow: hidden;
  margin: 3px 0 0;
  font-size: clamp(17px, 1.65vw, 21px);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgHero .vgActions {
  flex-wrap: nowrap;
  gap: 5px;
}

.vgHero .vgActions .btn,
.vgHero .vgActions__icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 9px;
}

.vgHero .vgActions__icon .material-icons {
  font-size: 19px;
}

.vgMenu {
  position: relative;
  margin-left: auto;
}

.vgMenu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 248px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--vg-line);
  background: var(--vg-card);
}

.vgMenu__panel[hidden] {
  display: none !important;
}

.vgMenu__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vgMenu__item:hover,
.vgMenu__item:focus-visible {
  background: var(--panel-2);
  outline: none;
}

.vgMenu__item .material-icons {
  font-size: 20px;
  color: var(--vg-muted);
}

.vgMenu__item--danger,
.vgMenu__item--danger .material-icons {
  color: var(--danger);
}

.vgMenu__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--vg-line);
}

.vgNextAction {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--erimax-blue) 35%, var(--vg-line));
  border-radius: 15px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--erimax-blue) 10%, var(--panel)), var(--panel) 58%);
  box-shadow: 0 5px 18px rgba(16, 24, 40, 0.055);
}

.vgNextAction__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--erimax-blue) 15%, var(--panel));
  color: var(--erimax-blue);
}

.vgNextAction__body h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(18px, 2.4vw, 23px);
}

.vgNextAction__body > p:last-child {
  margin: 5px 0 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgNextAction__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.vgNextAction__form {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 520px);
}

.vgNextAction__form .input {
  min-width: min(300px, 42vw);
}

.vgCommBar {
  margin: 0 0 12px;
  border: 1px solid var(--vg-line);
  border-radius: 14px;
  background: var(--panel);
  overflow: visible;
}

.vgCommBar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 5px 8px 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--vg-line) 78%, transparent);
}

.vgCommBar__tabs {
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  gap: 4px;
}

.vgCommBar__tab {
  position: relative;
  min-height: 40px;
  padding: 8px 10px 10px;
  border: 0;
  background: transparent;
  color: var(--vg-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.vgCommBar__tab::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

.vgCommBar__tab.is-active {
  color: var(--text);
}

.vgCommBar__tab.is-active::after {
  background: var(--erimax-blue);
}

.vgCommBar__add {
  margin-left: auto;
}

.vgCommBar__addButton {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--erimax-blue);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--erimax-blue) 28%, transparent);
  color: #fff;
  cursor: pointer;
}

.vgCommBar__addButton:hover,
.vgCommBar__addButton:focus-visible {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.vgCommBar__addButton .material-icons {
  font-size: 20px;
}

.vgCommBar__addMenu {
  right: 0;
  left: auto;
  min-width: 190px;
}

.vgCommBar__panel {
  min-width: 0;
  padding: 5px 8px 7px;
}

.vgCommBar__flow {
  max-height: 330px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.vgCommBar__flow > li + li {
  border-top: 1px solid color-mix(in srgb, var(--vg-line) 62%, transparent);
}

.vgCommBar__entry {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.vgCommBar__entry--button {
  cursor: pointer;
}

.vgCommBar__entry--button:hover,
.vgCommBar__entry--button:focus-visible {
  background: color-mix(in srgb, var(--erimax-blue) 5%, var(--panel));
}

.vgCommBar__entryIcon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--erimax-blue) 8%, var(--panel));
  color: var(--erimax-blue);
  font-size: 16px;
}

.vgCommBar__entryBody {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.vgCommBar__entryLine {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.vgCommBar__entryLine strong {
  flex: 0 0 auto;
  font-weight: 680;
}

.vgCommBar__entryLine > span {
  min-width: 0;
  overflow: hidden;
  color: var(--vg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgCommBar__entryMeta,
.vgCommBar__empty {
  color: var(--vg-muted);
  font-size: 10px;
  line-height: 1.25;
}

.vgCommBar__empty {
  margin: 0;
  padding: 12px;
}

.vgFlowModal__card {
  width: min(560px, 100vw - 28px);
  max-width: 560px;
  overflow: hidden;
}

.vgFlowModal__header {
  min-height: 50px;
  padding: 10px 14px;
  border: 0;
  background: linear-gradient(125deg, var(--erimax-blue), color-mix(in srgb, var(--erimax-blue) 72%, #4361ee));
  color: #fff;
}

.vgFlowModal__header h2 {
  margin: 0;
  color: inherit;
  font-size: 17px;
}

.vgFlowModal__header .vgIconBtn {
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: rgba(0, 55, 130, 0.22) !important;
  color: #fff !important;
}

.vgFlowModal__header .vgIconBtn .material-icons {
  color: #fff !important;
}

.vgFlowModal__body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.vgFlowModal__body textarea.input {
  width: 100%;
  min-height: 116px;
  resize: vertical;
}

.vgFlowModal__body textarea.vgFlowModal__summary {
  min-height: 82px;
  background: color-mix(in srgb, var(--panel-2) 82%, var(--panel));
}

.vgFlowModal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.vgFlowModal__actions [data-flow-note-delete] {
  margin-right: auto;
}

.vgFlowModal__status {
  margin: 0;
  color: var(--danger);
  font-size: 12px;
}

.vgRow__main--btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vgRow__main--btn:hover .vgRow__title,
.vgTimeline__what--link:hover strong {
  text-decoration: underline;
}

.vgTimeline__what--link {
  display: block;
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#vgEmailReadModal .card.modalCard > .card__body {
  overflow: hidden;
  padding: 0;
}

.vgEmailRead {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: min(62vh, 640px);
  max-height: min(72vh, 760px);
}

.vgEmailRead__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow: auto;
  border-right: 1px solid var(--vg-line);
  background: color-mix(in srgb, var(--vg-card) 70%, var(--panel));
}

.vgEmailRead__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vgEmailRead__item .material-icons {
  font-size: 18px;
  color: var(--erimax-blue);
  margin-top: 1px;
}

.vgEmailRead__itemBody {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vgEmailRead__itemBody strong {
  font-size: 12px;
  font-weight: 650;
}

.vgEmailRead__itemBody span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.vgEmailRead__itemMeta {
  color: var(--vg-muted);
  font-size: 12px !important;
}

.vgEmailRead__item:hover,
.vgEmailRead__item.is-active {
  background: color-mix(in srgb, var(--erimax-blue) 10%, var(--panel));
}

.vgEmailRead__view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px 18px 18px;
  overflow: auto;
}

.vgEmailRead__status {
  margin: 0;
  color: var(--vg-muted);
}

.vgEmailRead__status.is-error {
  color: #b42318;
}

.vgEmailRead__meta {
  display: grid;
  gap: 4px;
}

.vgEmailRead__meta p {
  margin: 0;
  font-size: 13px;
}

.vgEmailRead__meta span {
  display: inline-block;
  min-width: 72px;
  color: var(--vg-muted);
  font-weight: 650;
}

.vgEmailRead__body {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vg-card) 80%, var(--panel));
  border: 1px solid var(--vg-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.vgEmailRead__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vgEmailRead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.vgChecker {
  --ai-bg: color-mix(in srgb, #f4f1ff 32%, var(--panel));
  --ai-ring: linear-gradient(135deg, rgba(22, 140, 255, 0.55), rgba(156, 60, 255, 0.45));
  margin: 0 0 14px;
  padding: 6px 8px 6px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(var(--ai-bg), var(--ai-bg)) padding-box, var(--ai-ring) border-box;
}

html[data-theme=dark] .vgChecker {
  --ai-bg: color-mix(in srgb, #24183a 22%, var(--panel));
}

.vgChecker__bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vgChecker__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.vgChecker__toggle:focus-visible {
  outline: 2px solid var(--erimax-blue);
  outline-offset: 2px;
  border-radius: 8px;
}

.vgChecker__mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  color: var(--erimax-blue);
  background: color-mix(in srgb, var(--erimax-blue) 12%, var(--panel));
}

.vgChecker__mark .material-icons {
  font-size: 18px;
}

.vgChecker__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
}

.vgChecker__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  border: 1px solid var(--vg-line);
  background: var(--panel-2);
  white-space: nowrap;
}

.vgChecker__chip .material-icons {
  font-size: 15px;
}

.vgChecker__chip--ok {
  color: var(--success, #1a7f4b);
  border-color: color-mix(in srgb, var(--success, #1a7f4b) 35%, var(--vg-line));
  background: color-mix(in srgb, var(--success, #1a7f4b) 10%, var(--panel));
}

.vgChecker__chip--warn {
  color: #b45309;
  border-color: color-mix(in srgb, #b45309 35%, var(--vg-line));
  background: color-mix(in srgb, #f59e0b 12%, var(--panel));
}

.vgChecker__chip--high {
  color: var(--danger, #c0392b);
  border-color: color-mix(in srgb, var(--danger, #c0392b) 40%, var(--vg-line));
  background: color-mix(in srgb, var(--danger, #c0392b) 10%, var(--panel));
}

.vgChecker__chip--price {
  color: var(--text);
}

.vgChecker__hint {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgChecker__chevron {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--vg-muted);
  transition: transform 160ms ease;
}

.vgChecker.is-open .vgChecker__chevron {
  transform: rotate(180deg);
}

.vgChecker__run {
  flex: 0 0 auto;
}

.vgChecker__run .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vgChecker__run .btn .material-icons {
  font-size: 16px;
}

.vgChecker__body {
  padding: 8px 6px 8px;
  border-top: 1px solid color-mix(in srgb, var(--vg-line) 70%, transparent);
  margin-top: 4px;
}

.vgChecker__empty {
  margin: 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgChecker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.vgChecker__item {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--vg-line);
  border-radius: 10px;
  background: var(--panel-2);
}

.vgChecker__item--high {
  border-color: color-mix(in srgb, var(--danger, #c0392b) 40%, var(--vg-line));
}

.vgChecker__itemBody strong {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}

.vgChecker__itemBody p {
  margin: 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgChecker__form {
  display: grid;
  gap: 8px;
}

.vgChecker__formActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vgChecker__summary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--vg-line);
}

.vgChecker__summary h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.vgChecker__summary p {
  margin: 0 0 6px;
  font-size: 13px;
}

.vgChecker__price,
.vgChecker__priceMeta {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgChecker__summary ul,
.vgChecker__summary ol {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .vgCommBar__entryLine {
    display: block;
  }
  .vgCommBar__entryLine strong {
    margin-right: 6px;
  }
  .vgChecker__hint {
    display: none;
  }
  .vgChecker__bar {
    flex-wrap: wrap;
  }
  .vgChecker__run {
    margin-left: auto;
  }
}
.vgTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px;
  background: var(--panel-2);
  border: 1px solid var(--vg-line);
  border-radius: 14px;
}

.vgTabs__btn {
  border: 0;
  background: transparent;
  color: var(--vg-muted);
  padding: 9px 13px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.vgTabs__btn.is-active {
  background: var(--vg-card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.09);
  font-weight: 650;
}

.vgPanel {
  display: none;
}

.vgPanel.is-active {
  display: block;
}

.vgPanel[data-vg-panel=details].is-active + .vgPanel[data-vg-panel=details].is-active {
  margin-top: 16px;
}

.vgPanel[data-vg-panel=details].is-active {
  margin-bottom: 16px;
}

.vgPill--warning {
  color: #8a4b08;
  border-color: color-mix(in srgb, #d97706 42%, var(--border));
  background: color-mix(in srgb, #f59e0b 15%, var(--panel));
}

.vgEmptyAction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}

.vgEmptyAction p {
  margin: 0;
  color: var(--muted);
}

.orderHubBack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel);
  font-size: 12px;
}

.orderHubBack .btn {
  min-height: 34px;
}

.vgCard--workPlan {
  scroll-margin-top: 18px;
}

.vgCard--workPlan .vgCard__heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.vgWorkPlan__progress {
  height: 6px;
  margin: 2px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-2);
}

.vgWorkPlan__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width 220ms ease;
}

.vgWorkPlan {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vgWorkPlan__step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
}

.vgWorkPlan__step:last-child {
  border-bottom: 0;
}

.vgWorkPlan__step::before {
  position: absolute;
  top: 38px;
  bottom: -20px;
  left: 17px;
  width: 2px;
  content: "";
  background: var(--border);
}

.vgWorkPlan__step:last-child::before {
  display: none;
}

.vgWorkPlan__icon {
  position: relative;
  z-index: 1;
  color: var(--primary);
  background: var(--panel);
  font-size: 22px;
}

.vgWorkPlan__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vgWorkPlan__body strong {
  color: var(--text);
  font-size: 14px;
}

.vgWorkPlan__body span {
  color: var(--muted);
  font-size: 12px;
}

.vgWorkPlan__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.vgWorkPlan__step--executed .vgWorkPlan__icon {
  color: var(--success);
}

.vgWorkPlan__step--executed .vgWorkPlan__body strong,
.vgWorkPlan__step--skipped .vgWorkPlan__body strong {
  color: var(--muted);
}

.vgWorkPlan__step--blocked {
  opacity: 0.62;
}

.vgWorkPlan__step--blocked .vgWorkPlan__icon,
.vgWorkPlan__step--skipped .vgWorkPlan__icon {
  color: var(--muted);
}

.vgWorkPlan__step--review_required {
  margin-inline: -8px;
  padding-inline: 12px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

@media (max-width: 720px) {
  .vgEmptyAction,
  .orderHubBack {
    align-items: stretch;
    flex-direction: column;
  }
  .vgWorkPlan__step {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .vgWorkPlan__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}
.vgWorkspaceGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.vgCard--wide {
  grid-column: span 8;
}

.vgCard--full,
.vgWorkspaceGrid > .vgCard.vgCard--full {
  grid-column: 1/-1;
}

.vgWorkspaceGrid > .vgCard:not(.vgCard--wide):not(.vgCard--full) {
  grid-column: span 4;
}

.vgFlash {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--vg-line);
}

.vgFlash--ok {
  background: rgba(6, 191, 231, 0.08);
}

.vgFlash--error {
  border-color: rgba(255, 50, 100, 0.28);
  color: var(--vg-pink);
}

.vgAssign,
.vgMeta {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

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

.vgMeta__title {
  grid-column: 1/-1;
}

.vgMeta__full,
.vgAssign .field,
.vgAssign__actions {
  grid-column: 1/-1;
}

.vgAssign__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.vgCard .field {
  margin: 0;
}

.vgCard .input {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--vg-line) 92%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-2) 66%, var(--panel));
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.vgCard .input:hover {
  border-color: color-mix(in srgb, var(--erimax-blue) 25%, var(--vg-line));
}

.vgCard .input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--erimax-blue) 68%, var(--vg-line));
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erimax-blue) 12%, transparent);
}

.vgCard textarea.input {
  width: 100%;
  min-height: 112px;
  resize: vertical;
}

.vgCard select.input:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.vgCard .searchField {
  position: relative;
}

.vgCard {
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 55%), var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: 15px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.045);
}

.vgWorkspaceGrid > .vgCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--vg-card-accent, var(--erimax-blue));
  opacity: 0.78;
}

.vgCard--customer {
  --vg-card-accent: var(--erimax-blue);
}

.vgCard--status {
  --vg-card-accent: var(--erimax-pink);
}

.vgCard--record {
  --vg-card-accent: var(--erimax-violet);
}

.vgCard--analysis {
  --vg-card-accent: var(--vg-cyan);
}

.vgAnalysisFacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--text);
  font-size: 14px;
}

.vgAnalysisMissing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgCard--appointment {
  --vg-card-accent: var(--erimax-cyan);
}

.vgCard--finance {
  --vg-card-accent: #22a06b;
}

.vgCard--contact,
.vgCard--metric {
  --vg-card-accent: #94a3b8;
}

.vgLinkedDocs {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.vgLinkedDocs__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.vgLinkedDocs__row span,
.vgLinkedDocs__row .muted {
  display: block;
  font-weight: 400;
  color: var(--vg-muted);
}

.vgWorkspaceGrid > .vgCard--finance,
.vgWorkspaceGrid > .vgCard--contact {
  grid-column: span 6;
}

.vgCard h3 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vg-muted);
  font-weight: 600;
}

.vgCard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.vgCard__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.vgCard__heading > .material-icons {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  color: var(--erimax-blue);
  background: color-mix(in srgb, var(--erimax-blue) 11%, var(--panel));
  font-size: 21px;
}

.vgCard__heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  font-weight: 700;
}

.vgCard__hint {
  margin: 3px 0 0 !important;
  color: var(--vg-muted) !important;
  font-size: 12px;
}

.vgCard__action {
  flex: 0 0 auto;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--erimax-blue), #6272e8);
  box-shadow: 0 5px 14px rgba(22, 140, 255, 0.2);
  font-weight: 650;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.vgCard__action:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(22, 140, 255, 0.27);
}

.vgCard__action.is-active {
  filter: brightness(0.94);
}

.vgCard__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--vg-line);
}

.vgCard__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vgCard__actions .btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--erimax-blue), #6272e8);
  box-shadow: 0 5px 14px rgba(22, 140, 255, 0.18);
  font-weight: 650;
}

.vgCard__actions .btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(22, 140, 255, 0.24);
}

.vgMetricHint {
  margin-top: 8px !important;
  color: var(--vg-muted) !important;
  font-size: 12px;
  line-height: 1.45;
}

.vgSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 20px 22px;
  border: 1px solid var(--vg-line);
  border-radius: 15px;
  background: radial-gradient(circle at 100% 0%, rgba(6, 191, 231, 0.08), transparent 38%), var(--panel);
}

.vgSectionHead h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.vgSectionHead p {
  margin: 4px 0 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgAssignPanel {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--erimax-blue) 28%, var(--vg-line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--erimax-blue) 4%, var(--panel));
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.05);
}

.vgAssignPanel[hidden] {
  display: none;
}

.vgAssignPanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.vgAssignPanel__head h3,
.vgLinkedSection > h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.vgLinkedSection > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 12px;
}

.vgLinkedSection > h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--vg-muted);
  font-size: 11px;
}

.vgAssignList {
  display: grid;
  gap: 8px;
}

.vgAssignRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--vg-line);
  border-radius: 11px;
  background: var(--panel);
}

.vgAssignRow__body {
  min-width: 0;
}

.vgAssignRow__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vgAssignRow p {
  margin: 4px 0 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgAssignRow__meta {
  font-size: 12px !important;
}

.vgAssignRow form {
  flex: 0 0 auto;
}

.vgAssignRow .btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--erimax-blue), #6272e8);
}

.vgPill--match {
  color: #157347;
  border-color: rgba(34, 160, 107, 0.24);
  background: rgba(34, 160, 107, 0.09);
}

.vgCustomer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--vg-line) 82%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.vgCustomer__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--erimax-violet), var(--erimax-blue));
  font-weight: 750;
  font-size: 17px;
}

.vgCustomer__body {
  min-width: 0;
}

.vgCustomer__name {
  display: inline-block;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

a.vgCustomer__name:hover {
  color: var(--erimax-blue);
}

.vgCustomer__meta {
  margin: 3px 0 0 !important;
  color: var(--vg-muted) !important;
  font-size: 13px;
}

.vgCustomer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
}

.vgCustomer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--vg-muted);
  font-size: 13px;
  text-decoration: none;
}

.vgCustomer__contact a:hover {
  color: var(--erimax-blue);
}

.vgCustomer__contact .material-icons {
  font-size: 15px;
}

.vgAssign[hidden] {
  display: none;
}

.vgAssign:not([hidden]) {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--erimax-blue) 28%, var(--vg-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--erimax-blue) 5%, var(--panel));
}

.vgCard p,
.vgEmpty {
  margin: 0;
  color: var(--text);
}

.vgEmpty {
  color: var(--vg-muted);
  padding: 12px 0;
}

.vgList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vgRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: 10px;
}

.vgRow__main {
  min-width: 0;
}

.vgRow__title {
  margin: 0 0 4px;
  font-weight: 600;
}

.vgRow__meta {
  margin: 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgRow--split .vgRow__main {
  flex: 1;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.vgRow__side {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.vgPill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--vg-line);
}

.vgPill--accent {
  border-color: rgba(255, 50, 100, 0.28);
  color: var(--vg-pink);
}

.vgTimeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--vg-line);
}

.vgTimeline li {
  position: relative;
  padding: 0 0 16px 18px;
}

.vgTimeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vg-cyan);
}

.vgTimeline__when {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgTimeline__what {
  margin: 2px 0 0;
}

.vgTech {
  font-size: 13px;
}

.vgTech code {
  font-size: 12px;
}

.vgCreatePage {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.vgCreateBack,
.vgCreateCancel:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--erimax-blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}

.vgCreateBack .material-icons {
  font-size: 18px;
}

.vgCreateBack:hover,
.vgCreateCancel:not(.btn):hover {
  text-decoration: underline;
}

.vgCreateCancel:not(.btn) {
  margin-top: 8px;
  color: var(--vg-muted);
  font-weight: 600;
}

.btn.vgCreateCancel {
  margin-top: 8px;
}

.vgCreateHero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
  padding: 0;
}

.vgCreateHero__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
}

.vgCreateHero__mark .material-icons {
  font-size: 28px;
}

.vgCreateNotice {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border));
}

.vgCreateLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

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

.vgCreateManual {
  margin-top: 6px;
  padding: 16px 16px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: none;
}

.vgCreateManual__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vgCreateManual__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.vgCreateManual__title .material-icons {
  font-size: 18px;
  color: var(--vg-muted);
}

.vgCreateManual__choice {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.vgCreateOr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 2px 14px;
  color: var(--vg-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vgCreateOr::before,
.vgCreateOr::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.vgCreateManualTitle {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.vgCreateManualTitle span {
  font-size: 12px;
  font-weight: 650;
  color: var(--vg-muted);
}

.vgCreateManualTitle input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2, var(--panel));
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
}

.vgCreateManualTitle input:focus {
  outline: 2px solid var(--erimax-blue);
  outline-offset: 1px;
}

.vgCreateManualActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.vgCreateManualActions .btn--primary,
.vgCreateManualActions .btn--primary:hover,
.vgCreateManualActions .btn--primary:disabled,
.vgCreateManualActions .btn--primary:disabled:hover {
  color: var(--btn-text-on-primary, #fff);
  background: var(--primary);
  filter: none;
}

.vgDeskModal.modal-overlay {
  align-items: center;
  align-items: safe center;
  justify-content: center;
  padding: 40px 16px;
  background: color-mix(in srgb, #0b1220 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vgDeskModal .modal.card.modalCard,
.vgDeskModal .card.modalCard {
  border: 1px solid color-mix(in srgb, #0b1220 18%, var(--border));
  box-shadow: 0 8px 24px color-mix(in srgb, #0b1220 22%, transparent), 0 28px 80px color-mix(in srgb, #0b1220 42%, transparent);
}

#vgDeviceModal .modal.card.modalCard,
#vgCategoryModal .modal.card.modalCard {
  width: min(760px, 100vw - 32px);
  max-width: 760px;
}

.vgRepairDeviceHeader {
  min-height: 48px;
  padding: 8px 12px !important;
}

.vgRepairDeviceHeader h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 17px;
}

.vgRepairDeviceHeader h2 .material-icons {
  color: var(--erimax-blue);
  font-size: 20px;
}

.vgRepairDeviceHeader .vgIconBtn {
  width: 32px;
  min-width: 32px;
  height: 32px;
}

.vgRepairDeviceBody {
  padding: 0 !important;
}

.vgRepairDeviceForm {
  display: flex;
  flex-direction: column;
  min-height: 330px;
}

.vgRepairDeviceTabs {
  display: flex;
  gap: 3px;
  padding: 5px 10px 0;
  border-bottom: 1px solid var(--vg-line);
  background: color-mix(in srgb, var(--panel-2) 72%, var(--panel));
}

.vgRepairDeviceTabs button {
  position: relative;
  min-height: 36px;
  padding: 7px 12px 9px;
  border: 0;
  background: transparent;
  color: var(--vg-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.vgRepairDeviceTabs button::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: -1px;
  left: 9px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

.vgRepairDeviceTabs button.is-active {
  color: var(--text);
}

.vgRepairDeviceTabs button.is-active::after {
  background: var(--erimax-blue);
}

.vgRepairDevicePanel {
  flex: 1;
  padding: 14px 16px 10px;
}

.vgRepairDevicePanel[hidden] {
  display: none !important;
}

.vgRepairDeviceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.vgRepairDeviceGrid--details {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vgRepairField {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--vg-muted);
  font-size: 11px;
  font-weight: 600;
}

.vgRepairField--full {
  grid-column: 1/-1;
  margin-bottom: 10px;
}

.vgRepairField input,
.vgRepairField select,
.vgRepairField textarea {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--vg-line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.vgRepairField textarea {
  min-height: 68px;
  resize: vertical;
}

.vgRepairField small {
  color: var(--vg-muted);
  font-size: 10px;
  font-weight: 400;
}

.vgRepairAccepted {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--erimax-blue) 22%, var(--vg-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--erimax-blue) 5%, var(--panel));
  cursor: pointer;
}

.vgRepairAccepted input {
  width: 17px;
  height: 17px;
  accent-color: var(--erimax-blue);
}

.vgRepairAccepted > span {
  display: grid;
  gap: 1px;
}

.vgRepairAccepted strong {
  font-size: 12px;
}

.vgRepairAccepted small {
  color: var(--vg-muted);
  font-size: 10px;
}

.vgRepairColors {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.vgRepairColors legend,
.vgRepairAccessories legend {
  margin-bottom: 8px;
  color: var(--vg-muted);
  font-size: 11px;
  font-weight: 650;
}

.vgRepairColors > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vgRepairColors label {
  display: grid;
  justify-items: center;
  gap: 3px;
  cursor: pointer;
}

.vgRepairColors input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vgRepairColors label > span {
  width: 25px;
  height: 25px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--device-color);
  box-shadow: 0 0 0 1px var(--vg-line);
}

.vgRepairColors input:checked + span {
  box-shadow: 0 0 0 2px var(--erimax-blue);
}

.vgRepairColors small {
  color: var(--vg-muted);
  font-size: 9px;
}

.vgRepairAccessories {
  margin: 0;
  padding: 0;
  border: 0;
}

.vgRepairAccessories > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vgRepairAccessories > div label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--vg-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 64%, var(--panel));
  font-size: 11px;
}

.vgRepairAccessories input[type=checkbox] {
  accent-color: var(--erimax-blue);
}

.vgRepairAccessories .vgRepairField {
  margin-top: 10px;
}

.vgRepairDeviceActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--vg-line);
  background: color-mix(in srgb, var(--panel-2) 58%, var(--panel));
}

@media (max-width: 720px) {
  .vgRepairDeviceGrid,
  .vgRepairDeviceGrid--details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vgRepairAccessories > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.vgDeskModal .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.vgDeskModal .field > .label {
  display: block;
  grid-column: 1;
}

.vgDeskModal .input {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  grid-column: 1;
}

.vgDeskModal textarea.input {
  min-height: 96px;
  resize: vertical;
}

.vgDeviceForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.vgDeviceForm__full {
  grid-column: 1/-1;
}

.vgDeviceForm__actions {
  display: flex;
  justify-content: flex-end;
}

.vgDeviceForm .searchField {
  position: relative;
}

.vgDeviceForm__combo {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.vgDeviceForm__combo .input {
  flex: 1 1 auto;
  min-width: 0;
}

.vgDeviceForm__combo .vgIconBtn {
  align-self: stretch;
  height: auto;
  min-height: 42px;
}

.vgDeviceForm__combo .vgIconBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vgDeviceForm__newModel {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}

.vgDeviceForm__newModel[hidden] {
  display: none;
}

.vgDeviceForm__newModel .input {
  flex: 1 1 auto;
  min-width: 0;
}

.vgDeviceForm__hint {
  margin: 6px 0 0;
  color: var(--vg-pink);
  font-size: 12px;
}

.vgDeskModal .card.modalCard > .card__header,
.vgReviewCard > .card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

.vgDeskModal__close,
.vgDeskModal .card__header .vgIconBtn,
.vgReviewCard > .card__header .vgIconBtn {
  margin-left: auto;
  flex: 0 0 36px;
  margin-top: 0;
}

.vgDeskModal--lift .modal,
.vgDeskModal--lift .card.modalCard {
  overflow: visible;
}

.vgDeskModal--lift .card__body {
  overflow: visible;
}

#vgCustomerModal.vgDeskModal.modal-overlay {
  align-items: flex-start;
  align-items: safe flex-start;
}

#vgCustomerModal .modal.card.modalCard {
  flex: 0 0 auto;
  width: min(560px, 100vw - 32px);
  max-width: 560px;
  max-height: none;
}

#vgCustomerModal .card.modalCard > .card__body {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.vgDeskModal .searchDropdownCard,
.vgReviewCard .searchDropdownCard,
.vgCreateCustomerSearch .searchDropdownCard {
  z-index: 1600;
  max-height: min(360px, 50vh);
  overflow-y: auto;
}

.vgDeskModal .searchDropdownCard:not([hidden]),
.vgReviewCard .searchDropdownCard:not([hidden]),
.vgCreateCustomerSearch .searchDropdownCard:not([hidden]) {
  display: block;
}

.vgCustomerHint {
  margin: 0 0 10px;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgCustomerCreate {
  margin-top: 12px;
}

.vgCustomerCreate[hidden],
.vgDeskModal [hidden] {
  display: none !important;
}

.vgDeskModal--wide.modal-overlay {
  align-items: center;
  align-items: safe center;
  padding: 40px 16px;
  overflow-y: auto;
}

.vgDeskModal--wide .modal.card.modalCard {
  width: min(1400px, 100vw - 32px);
  max-width: 1400px;
  max-height: none;
  overflow: visible;
}

.vgDeskModal--wide .card.modalCard > .card__body {
  overflow: visible;
  padding: 16px 20px 20px;
}

.vgCalcSuggest {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.vgCalcSuggest__block:not([hidden]) {
  display: grid;
  gap: 8px;
}

.vgCalcChips,
.vgCalcHits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vgCalcChip,
.vgCalcHit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.vgCalcChip:hover,
.vgCalcHit:hover,
.vgCalcChip:focus-visible,
.vgCalcHit:focus-visible {
  border-color: color-mix(in srgb, var(--erimax-blue) 45%, var(--border));
  background: color-mix(in srgb, var(--erimax-blue) 8%, var(--panel));
}

.vgCalcChip strong,
.vgCalcHit strong {
  font-size: 13px;
}

.vgCalcChip span,
.vgCalcHit span {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgCalcChip__ek {
  font-size: 11px;
  font-weight: 650;
  font-style: normal;
  color: var(--muted);
}

.vgCalcForm {
  display: grid;
  gap: 12px;
}

.vgCalcTable {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vgCalcHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 136px 128px 40px 40px;
  column-gap: 0;
  align-items: end;
  padding: 0 12px 8px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}

.vgCalcHead__qty {
  margin-left: 10px;
  margin-right: 18px;
}

.vgCalcHead__price {
  margin-right: 18px;
}

.vgCalcHead__sum {
  margin-right: 12px;
}

.vgCalcRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 136px 128px 40px 40px;
  column-gap: 0;
  row-gap: 8px;
  align-items: start;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

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

.vgCalcRow > input[type=hidden] {
  display: none !important;
}

.vgCalcRow .field {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.vgCalcRow .field.vgCalcRow__qty {
  margin-left: 10px;
  margin-right: 18px;
}

.vgCalcRow .field.vgCalcRow__price {
  margin-right: 18px;
}

.vgCalcRow .field.vgCalcRow__sum {
  margin-right: 12px;
}

.vgCalcRow__pos {
  grid-column: 1;
  width: 100%;
}

.vgCalcRow__pos .searchField {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.vgCalcRow__pos .searchField > .input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.vgCalcRow__articleEdit {
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
}

.vgCalcRow__articleEdit[hidden] {
  display: none !important;
}

.vgCalcRow__qty {
  grid-column: 2;
}

.vgCalcRow__price {
  grid-column: 3;
}

.vgCalcRow__sum {
  grid-column: 4;
}

.vgCalcRow__note {
  grid-column: 5;
  align-self: end;
  margin: 0 0 2px;
}

.vgCalcRow__note.is-on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #06bfe7) 16%, transparent);
}

.vgCalcRow__remove {
  grid-column: 6;
  align-self: end;
  margin: 0 0 2px;
}

.vgCalcRow__text {
  grid-column: 1/-1;
}

.vgCalcRow__text:not([hidden]) {
  display: block;
}

.vgCalcRow__text textarea.input {
  display: block;
  width: 100%;
  min-height: 64px;
  resize: vertical;
}

.vgCalcRow__sumValue {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 14px;
  font-weight: 650;
}

.vgCalcRow .searchField {
  position: relative;
  overflow: visible;
}

.vgCalcRow .searchDropdownCard {
  right: auto;
  z-index: 40;
  width: min(720px, 100vw - 48px);
  min-width: 100%;
  max-height: min(420px, 55vh);
  overflow-y: auto;
}

.vgCalcHit.articleSearchHit {
  flex-direction: unset;
  align-items: center;
  max-width: none;
  padding: 8px 10px;
}

.vgCalcHit.articleSearchHit span.articleSearchHit__meta {
  color: var(--muted);
}

.vgCalcHit.articleSearchHit span.articleSearchHit__price {
  color: var(--text);
  font-size: 14px;
}

.vgCalcRow .searchDropdownCard:not([hidden]) {
  display: block;
}

.vgCalcHitRow {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.vgCalcHitRow .vgCalcHit {
  flex: 1;
  min-width: 0;
}

.vgCalcHitEdit {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.vgCalcHitCreate {
  width: 100%;
  margin-top: 4px;
  font-weight: 650;
}

.vgCalcTotal {
  display: flex;
  justify-content: flex-end;
  padding-right: 92px;
}

.vgCalcTotal .field {
  display: grid;
  gap: 6px;
  width: 128px;
  margin: 0;
}

.vgCalcAdd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.vgCalcAdd .material-icons {
  font-size: 18px;
}

.vgCalcAdd:hover,
.vgCalcAdd:focus-visible {
  border-color: color-mix(in srgb, var(--erimax-blue) 45%, var(--border));
  background: color-mix(in srgb, var(--erimax-blue) 8%, var(--panel));
}

.vgCalcAdd--plus {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  margin: 8px 12px 4px;
}

.vgCalcAdd--plus .material-icons {
  font-size: 26px;
}

.vgCalcForm .vgCalcFooter {
  justify-content: flex-end;
  align-items: flex-end;
  gap: 16px;
}

.vgCalcForm .vgCalcTotal {
  padding-right: 0;
}

.vgCalcForm .vgCalcFooter .btn--primary {
  margin-left: 0;
}

.vgCalcFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.vgCalcFooter__assign {
  margin-right: auto;
  gap: 6px;
}

.vgAssignInvoice {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 70%, var(--panel));
}

.vgAssignInvoice .input {
  width: 100%;
  min-height: 40px;
  border-radius: 4px;
}

.vgAssignInvoice__hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.vgAssignInvoice__results {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
}

.vgAssignInvoice__hit {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr) auto auto;
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.vgAssignInvoice__hit:last-child {
  border-bottom: 0;
}

.vgAssignInvoice__hit:hover,
.vgAssignInvoice__hit:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.vgAssignInvoice__hit:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.vgAssignInvoice__hit strong {
  font-size: 13px;
}

.vgAssignInvoice__hit span {
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgAssignInvoice__selected {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 650;
}

.vgAssignInvoice__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .vgDeskModal.modal-overlay,
  .vgDeskModal--wide.modal-overlay {
    padding: 16px 8px;
  }
  .vgDeskModal--wide .modal.card.modalCard {
    width: calc(100vw - 16px);
  }
  .vgDeviceForm {
    grid-template-columns: 1fr;
  }
  .vgCalcHead {
    display: none;
  }
  .vgCalcRow .label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
  }
  .vgCalcRow {
    grid-template-columns: 1fr;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    background: color-mix(in srgb, var(--panel-2) 65%, var(--panel));
  }
  .vgCalcRow__pos,
  .vgCalcRow__qty,
  .vgCalcRow__price,
  .vgCalcRow__sum,
  .vgCalcRow__note,
  .vgCalcRow__remove,
  .vgCalcRow__text {
    grid-column: 1;
    margin: 0;
  }
  .vgCalcRow__remove {
    justify-self: end;
  }
  .vgCalcTotal {
    padding-right: 0;
  }
  .vgCalcTotal .field {
    width: 100%;
  }
  .vgCalcFooter {
    flex-direction: column;
    align-items: stretch;
  }
  .vgCalcFooter__assign {
    margin-right: 0;
    justify-content: center;
  }
  .vgAssignInvoice__hit {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .vgAssignInvoice__hit span:nth-child(3) {
    display: none;
  }
}
.vgReviewNewCustomer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.vgReviewNewCustomer input:nth-child(4),
.vgReviewNewCustomer input:nth-child(7) {
  grid-column: 1/-1;
}

.vgReviewCard {
  display: flex;
  flex-direction: column;
  width: min(780px, 100vw - 32px);
  max-width: 780px;
  max-height: min(88vh, 860px);
  overflow: hidden;
  padding: 0;
}

.vgReviewCard > .card__header {
  flex: 0 0 auto;
  align-items: flex-start;
  padding: 24px 28px 16px;
  border-bottom: 0;
}

.vgReviewBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 14%, var(--panel));
  color: color-mix(in srgb, var(--success) 72%, var(--text));
  font-size: 12px;
  font-weight: 700;
}

.vgReviewBadge .material-icons {
  font-size: 16px;
}

.vgReviewCard h2 {
  margin: 0;
}

.vgReviewQuote {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  color: var(--vg-muted);
  font-size: 14px;
  font-style: italic;
}

.vgReviewBody {
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 28px 16px;
}

.vgReviewGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vgReviewRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--vg-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-2) 40%, var(--panel));
}

.vgReviewRow--check {
  grid-column: 1/-1;
  background: transparent;
  border: 0;
  padding: 8px 4px 0;
}

.vgReviewRow__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vgReviewRow__text strong {
  font-size: 16px;
}

.vgReviewRow__text span {
  color: var(--vg-muted);
  font-size: 13px;
}

.vgReviewRow .vgIconBtn {
  margin-top: 2px;
}

.vgReviewRow .vgIconBtn:hover,
.vgReviewRow .vgIconBtn:focus-visible {
  border-color: color-mix(in srgb, var(--erimax-blue) 40%, var(--vg-line));
  background: color-mix(in srgb, var(--erimax-blue) 8%, var(--panel));
}

.vgReviewEditor {
  padding: 4px 4px 8px;
}

.vgReviewCheck {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.vgReviewFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 24px 28px;
  border-top: 1px solid var(--vg-line);
  background: var(--panel);
}

.vgReviewLoading,
.vgReviewFail {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px 12px 20px;
  text-align: center;
}

.vgReviewLoading__icon {
  font-size: 32px;
  color: var(--erimax-blue);
  animation: aiPromptSpinGlow 1.8s ease-in-out infinite;
}

.vgReviewLoading h3,
.vgReviewFail p {
  margin: 0;
}

.vgReviewSteps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgReviewSteps li + li {
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .vgReviewLoading__icon {
    animation: none;
  }
}
.vgReviewPos {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.vgSourceBlock {
  margin-bottom: 14px;
}

.vgSourceBlock h3,
.vgSourceMeta {
  margin: 0 0 6px;
  color: var(--vg-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vgSourceBlock p {
  margin: 0;
}

.vgCreateMain {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.vgCreateCard,
.vgCreateAssistant {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--erimax-blue) 2.5%, var(--panel)), var(--panel) 55%);
  box-shadow: 0 7px 24px rgba(16, 24, 40, 0.055);
}

.vgCreateCard {
  padding: 20px;
}

.vgCreateSectionHead,
.vgCreateAssistantHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.vgCreateSectionHead > .material-icons,
.vgCreateAssistantHead > .material-icons {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--erimax-blue);
  background: color-mix(in srgb, var(--erimax-blue) 10%, var(--panel));
}

.vgCreateSectionHead h2,
.vgCreateAssistantHead h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.vgCreateSectionHead--compact {
  margin-bottom: 16px;
}

.vgCreateOptional {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--vg-muted);
  background: var(--panel-2);
  font-size: 12px;
}

.vgCreateCustomerSearch {
  position: relative;
}

.vgCreateCustomerSearch > .material-icons {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 14px;
  color: var(--vg-muted);
  font-size: 20px;
}

.vgCreateCustomerSearch > input,
.vgCreateTask textarea,
.vgCreateProgressive input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 45%, var(--panel));
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.vgCreateCustomerSearch > input {
  height: 48px;
  padding: 0 14px 0 44px;
}

.vgCreateTask textarea {
  min-height: 112px;
  resize: vertical;
  padding: 17px 18px;
  font: inherit;
  font-size: 18px;
  line-height: 1.5;
}

.vgCreateCustomerSearch > input:focus,
.vgCreateTask textarea:focus,
.vgCreateProgressive input:focus {
  border-color: color-mix(in srgb, var(--erimax-blue) 60%, var(--border));
  background: var(--panel);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--erimax-blue) 10%, transparent);
}

.vgCreateCustomerSearch .searchDropdownCard {
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1600;
}

.vgCreateCustomerSearch .card__body {
  padding: 8px;
}

.vgCreateCustomerResult {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 9px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.vgCreateCustomerResult:hover,
.vgCreateCustomerResult:focus-visible {
  background: var(--panel-2);
}

.vgCreateCustomerResult span {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgCreateCustomerEmpty {
  margin-top: 9px;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgCreateCustomerSelected {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding: 10px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--vg-cyan) 7%, var(--panel-2));
}

.vgCreateCustomerSelected[hidden] {
  display: none;
}

.vgCreateCustomerSelected > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vgCreateCustomerSelected span {
  overflow: hidden;
  color: var(--vg-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgCreateCustomerAvatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--vg-cyan);
  background: color-mix(in srgb, var(--vg-cyan) 12%, var(--panel));
}

.vgCreateExamples {
  margin: 9px 2px 0;
  color: var(--vg-muted);
  font-size: 12px;
  line-height: 1.55;
}

.vgCreateAnalyzeState {
  min-height: 18px;
  margin: 5px 2px -4px;
  color: var(--vg-muted);
  font-size: 12px;
}

.vgCreateAnalyzeState.is-loading::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border: 2px solid color-mix(in srgb, var(--vg-cyan) 30%, transparent);
  border-top-color: var(--vg-cyan);
  border-radius: 50%;
  animation: vgCreateSpin 0.8s linear infinite;
}

.vgCreateAnalyzeState.is-ready {
  color: color-mix(in srgb, var(--success) 78%, var(--text));
}

@keyframes vgCreateSpin {
  to {
    transform: rotate(360deg);
  }
}
.vgCreateProcessGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.vgCreateProcess {
  --vg-create-accent: var(--erimax-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--vg-create-accent) 16%, var(--border));
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(150deg, color-mix(in srgb, var(--vg-create-accent) 5%, var(--panel)), var(--panel) 70%);
  text-align: center;
  cursor: pointer;
  font: inherit;
}

.vgCreateProcess strong {
  font-size: 12px;
  font-weight: 700;
}

.vgCreateProcess:hover {
  border-color: color-mix(in srgb, var(--vg-create-accent) 42%, var(--border));
  background: color-mix(in srgb, var(--vg-create-accent) 8%, var(--panel));
}

.vgCreateProcess:focus-visible {
  outline: 2px solid var(--erimax-blue);
  outline-offset: 2px;
}

.vgCreateProcess.is-selected {
  border-color: color-mix(in srgb, var(--vg-create-accent) 62%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vg-create-accent) 12%, transparent);
}

.vgCreateProcess .material-icons {
  color: var(--vg-create-accent);
}

.vgCreateProcess--pink {
  --vg-create-accent: var(--vg-pink);
}

.vgCreateProcess--cyan {
  --vg-create-accent: var(--vg-cyan);
}

.vgCreateProcess--purple {
  --vg-create-accent: var(--vg-purple);
}

.vgCreateProcess--blue {
  --vg-create-accent: #3478f6;
}

.vgCreateProcess--violet {
  --vg-create-accent: #7257d8;
}

.vgCreateProcess--orange {
  --vg-create-accent: #e58a2d;
}

.vgCreateProgressive {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.vgCreateMicroLabel,
.vgCreateFieldLabel {
  display: block;
  margin: 0 0 8px;
  color: var(--vg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.vgCreateChoiceRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vgCreateChoiceRow button {
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel);
  cursor: pointer;
}

.vgCreateChoiceRow button:hover,
.vgCreateChoiceRow button.is-selected {
  border-color: color-mix(in srgb, var(--erimax-blue) 55%, var(--border));
  color: var(--erimax-blue);
  background: color-mix(in srgb, var(--erimax-blue) 7%, var(--panel));
}

.vgCreateChoiceRow--small button {
  padding: 6px 11px;
  font-size: 13px;
}

.vgCreateRepairFields {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}

.vgCreateRepairFields[hidden],
.vgCreateProductField[hidden] {
  display: none;
}

.vgCreatePricePicker {
  grid-column: 1/-1;
  display: grid;
  gap: 8px;
}

.vgCreatePricePicker[hidden] {
  display: none;
}

.vgCreatePriceHint {
  margin: 0;
  color: var(--vg-muted);
  font-size: 12px;
  font-weight: 600;
}

.vgCreatePriceGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

.vgCreatePriceTile {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: 108px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}

.vgCreatePriceTile .material-icons {
  font-size: 22px;
  color: var(--erimax-blue);
}

.vgCreatePriceTile strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.vgCreatePriceTile span {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgCreatePriceTile em {
  margin-top: auto;
  color: var(--text);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.vgCreatePriceTile:hover,
.vgCreatePriceTile.is-selected {
  border-color: color-mix(in srgb, var(--erimax-blue) 55%, var(--border));
  background: color-mix(in srgb, var(--erimax-blue) 7%, var(--panel));
}

.vgCreatePriceTile.is-selected {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--erimax-blue) 35%, transparent);
}

.vgCreateRepairFields label,
.vgCreateProductField {
  display: grid;
  gap: 7px;
  color: var(--vg-muted);
  font-size: 12px;
  font-weight: 600;
}

.vgCreateProgressive input {
  height: 44px;
  padding: 0 12px;
}

.vgCreateProductField {
  max-width: 620px;
  margin-top: 16px;
}

.vgCreateSubmit {
  position: fixed;
  left: 260px;
  right: 0;
  bottom: 10px;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  width: auto;
  max-width: 1100px;
  min-height: 64px;
  margin: 0 auto;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  box-shadow: 0 -4px 24px rgba(16, 24, 40, 0.13);
  backdrop-filter: blur(12px);
}

.vgCreateSubmit p {
  grid-row: span 2;
  margin: 0;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgCreateSubmit > span {
  color: var(--vg-muted);
  font-size: 11px;
  text-align: center;
}

.vgCreatePage .vgCreateStart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 48px;
  border: 1px solid transparent !important;
  color: #fff !important;
  background: linear-gradient(115deg, #b0003a, #6020a8 62%, #075f87) !important;
  box-shadow: 0 8px 20px rgba(74, 27, 122, 0.28);
  font-weight: 700;
}

.vgCreatePage .vgCreateStart:hover:not(:disabled) {
  color: #fff !important;
  background: linear-gradient(115deg, #90002f, #4b1687 62%, #044967) !important;
  filter: none;
  transform: translateY(-1px);
}

.vgCreatePage .vgCreateStart:disabled,
.vgCreatePage .vgCreateStart:disabled:hover {
  cursor: not-allowed;
  color: #fff !important;
  border-color: #4b4555 !important;
  background: #5e5769 !important;
  filter: none;
  opacity: 1;
  box-shadow: 0 5px 15px rgba(42, 37, 49, 0.2);
}

.vgCreatePage .vgCreateStart:focus-visible {
  outline: 3px solid #ffd24a;
  outline-offset: 3px;
}

.vgCreateAssistant {
  position: sticky;
  top: 18px;
  padding: 18px;
}

.vgCreateAssistantHead {
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.vgCreateAssistantHead > .material-icons {
  color: var(--vg-purple);
  background: color-mix(in srgb, var(--vg-purple) 10%, var(--panel));
}

.vgCreateAssistant section {
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.vgCreateAssistant section:last-child {
  border-bottom: 0;
}

.vgCreateAssistantEmpty {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 20px;
  color: var(--vg-muted);
  text-align: center;
}

.vgCreateAssistantEmpty .material-icons {
  color: color-mix(in srgb, var(--vg-purple) 55%, var(--vg-muted));
  font-size: 30px;
}

.vgCreateAssistantEmpty p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.vgCreateDetected,
.vgCreateMissing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vgCreateDetected span,
.vgCreateMissing span {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vg-cyan) 25%, var(--border));
  background: color-mix(in srgb, var(--vg-cyan) 7%, var(--panel));
  font-size: 12px;
}

.vgCreateMissing span {
  border-color: color-mix(in srgb, #e58a2d 28%, var(--border));
  background: color-mix(in srgb, #e58a2d 7%, var(--panel));
}

.vgCreateDetected span.is-uncertain {
  border-style: dashed;
}

.vgCreateSuggestedTitle {
  margin: 10px 0 0;
  color: var(--vg-muted);
  font-size: 12px;
  line-height: 1.45;
}

.vgCreateSteps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 13px;
}

.vgCreateFallback {
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  color: var(--vg-muted);
  background: var(--panel-2);
  font-size: 12px;
  line-height: 1.45;
}

html[data-theme=light] .vgHero,
html[data-theme=light] .vgCard,
html[data-theme=light] .vgRow {
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.055);
}

html[data-theme=light] .vgCard {
  background: linear-gradient(145deg, color-mix(in srgb, var(--vg-card-accent, var(--erimax-blue)) 3.5%, #fff), #fff 52%);
  border-color: #e6eaf0;
}

html[data-theme=light] .vgCreateCard,
html[data-theme=light] .vgCreateAssistant {
  border-color: #e8ebf1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--erimax-blue) 2%, #fff), #fff 56%);
}

@media (max-width: 1050px) {
  .vgCreateSubmit {
    left: 84px;
    right: 8px;
  }
  .vgCreateLayout {
    grid-template-columns: 1fr;
  }
  .vgCreateAssistant {
    position: static;
  }
  .vgCreateProcessGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vgReviewGrid {
    grid-template-columns: 1fr;
  }
  .vgCard--wide,
  .vgWorkspaceGrid > .vgCard:not(.vgCard--wide):not(.vgCard--full) {
    grid-column: span 6;
  }
  .vgCard--full,
  .vgWorkspaceGrid > .vgCard.vgCard--full {
    grid-column: 1/-1;
  }
  .vgHero--desk .vgHero__top {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .vgHero__facts {
    grid-template-columns: 1fr;
  }
  .vgRepairFinish {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 780px) {
  .vgCreateSubmit {
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-height: 58px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .vgCreateSubmit p,
  .vgCreateSubmit > span {
    display: none;
  }
  .vgCreateHero {
    margin-bottom: 14px;
  }
  .vgCreateCard,
  .vgCreateAssistant {
    padding: 15px;
    border-radius: 15px;
  }
  .vgCreateProcessGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vgCreateProcess {
    min-height: 72px;
  }
  .vgReviewCard > .card__header,
  .vgReviewBody,
  .vgReviewFooter {
    padding-left: 18px;
    padding-right: 18px;
  }
  .vgCreateRepairFields {
    grid-template-columns: 1fr;
  }
  .vgCreateSubmit {
    grid-template-columns: 1fr;
  }
  .vgCreateSubmit p {
    grid-row: auto;
  }
  .vgCreateStart {
    width: 100%;
  }
  .vgNextAction {
    grid-template-columns: 1fr;
  }
  .vgCommBar {
    grid-template-columns: 1fr;
  }
  .vgCommBar__icon {
    display: none;
  }
  .vgEmailRead {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: 0;
  }
  .vgEmailRead__list {
    max-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--vg-line);
  }
  .vgNextAction__icon {
    display: none;
  }
  .vgNextAction__actions,
  .vgNextAction__form {
    width: 100%;
  }
  .vgNextAction__form {
    align-items: stretch;
    flex-direction: column;
  }
  .vgNextAction__form .input,
  .vgNextAction__actions .btn {
    width: 100%;
    min-width: 0;
  }
  .vgWorkspaceGrid {
    grid-template-columns: 1fr;
  }
  .vgCard--wide,
  .vgWorkspaceGrid > .vgCard:not(.vgCard--wide):not(.vgCard--full) {
    grid-column: 1;
  }
  .vgCard--full,
  .vgWorkspaceGrid > .vgCard.vgCard--full {
    grid-column: 1;
  }
  .vgHero--desk .vgHero__top {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .vgHero__when {
    grid-column: 1/-1;
    align-items: flex-start;
    margin-left: 0;
  }
  .vgHero__status {
    width: 100%;
    max-width: none;
  }
  .vgMeta {
    grid-template-columns: 1fr;
  }
  .vgCard__head {
    flex-direction: column;
  }
  .vgCard__action {
    width: 100%;
  }
  .vgCustomer {
    align-items: flex-start;
  }
  .vgSectionHead,
  .vgAssignRow {
    align-items: stretch;
    flex-direction: column;
  }
  .vgSectionHead .vgCard__action,
  .vgAssignRow form,
  .vgAssignRow form .btn {
    width: 100%;
  }
}
.vgCreateProcess--featured {
  border-color: color-mix(in srgb, var(--vg-pink) 42%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vg-pink) 18%, transparent);
}

.vgCreatePage .aiPrompt--compact {
  padding: 12px 14px 10px;
  border-radius: 14px;
}

.vgCreatePage .aiPrompt--compact::before {
  border-radius: 18px;
}

.vgCreatePage .aiPrompt--compact .aiPrompt__input {
  min-height: 48px;
  max-height: 72px;
}

.vgRepairDraft {
  margin: 14px 0 4px;
  padding: 16px 18px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.vgRepairDraft__loading,
.vgRepairDraft__fail {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--vg-muted);
  font-size: 14px;
}

.vgRepairDraft__loading[hidden],
.vgRepairDraft__fail[hidden],
.vgRepairDraft__result[hidden] {
  display: none !important;
}

.vgRepairDraft__badge {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vg-pink);
}

.vgRepairDraft__aiNotice,
.vgRepairDraft__catalogEmpty {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, #2563eb 24%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, #2563eb 6%, var(--panel));
  color: var(--text);
  font-size: 13px;
}

.vgRepairDraft__aiNotice span {
  display: block;
  margin-top: 2px;
  color: var(--vg-muted);
}

.vgRepairDraft__catalogEmpty {
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel) 92%, #e5e7eb);
  color: var(--vg-muted);
}

.vgRepairDraft__models,
.vgCustomerCandidateReview {
  display: grid;
  gap: 10px;
}

.vgCustomerCandidateReview {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.vgCustomerCandidateMatch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 72%, var(--panel));
}

.vgCustomerCandidateMatch span {
  min-width: 0;
  color: var(--text);
  line-height: 1.35;
}

.vgCustomerCandidateMatch .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.vgCustomerCandidateReview .vgAssign__actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.vgCustomerCandidateReview .vgAssign__actions label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 240px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.vgCustomerCandidateReview .vgAssign__actions .btn {
  flex: 0 0 auto;
}

.vgRepairDraft__facts {
  display: grid;
  gap: 10px 24px;
  margin: 0 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.vgRepairDraft__facts dt {
  margin: 0;
  color: var(--vg-muted);
  font-size: 12px;
  font-weight: 650;
}

.vgRepairDraft__facts dd {
  margin: 2px 0 0;
  font-size: 15px;
}

.vgRepairDraft__facts .is-uncertain dd {
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
}

.vgRepairDraft__sub {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
}

.vgRepairDraft__prices {
  display: grid;
  gap: 8px;
}

.vgRepairPrice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.vgRepairPrice.is-selected,
.vgRepairPrice:has(input:checked) {
  border-color: color-mix(in srgb, var(--vg-pink) 45%, var(--border));
  background: color-mix(in srgb, var(--vg-pink) 6%, var(--panel));
}

.vgRepairPrice strong,
.vgRepairPrice em {
  display: block;
}

.vgRepairPrice em {
  color: var(--vg-muted);
  font-style: normal;
  font-size: 12px;
}

.vgRepairDraft__cred,
.vgRepairDraft__note {
  margin: 8px 0;
  font-size: 13px;
  color: var(--vg-muted);
}

.vgRepairDraft__pick {
  display: block;
  margin: 4px 0;
}

.vgRepairAkte {
  max-width: 1080px;
}

.vgRepairAkte.is-ctx {
  max-width: 1180px;
}

.vgAkteHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 16px;
  margin-bottom: 12px;
}

.vgAkteHead__main h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.vgAkteHead__time {
  margin: 2px 0 0;
  color: var(--vg-muted);
  font-size: 12px;
}

.vgAkteKicker {
  margin: 0;
  color: var(--vg-pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vgAkteMeta {
  margin: 0;
  color: var(--vg-muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.vgAkteNext {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--erimax-blue, #1d4ed8);
}

.vgAkteHead__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.vgAkteWork {
  display: grid;
  gap: 14px;
}

.vgAkteBlock {
  padding: 14px 16px;
  border: 1px solid var(--vg-line);
  border-radius: 14px;
  background: var(--panel);
}

.vgAkteBlock h2,
.vgAkteBlock h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.vgAkteCompact {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
}

.vgAkteStamp {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--vg-muted);
}

.vgAktePosHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
}

.vgAkteDraft {
  font-size: 12px;
  font-weight: 700;
  color: var(--vg-muted);
}

.vgAkteDraft--lock {
  color: var(--erimax-blue, #1d4ed8);
}

.vgAktePosRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 110px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.vgAktePosRemove {
  font-size: 12px;
  color: var(--vg-muted);
  display: flex;
  gap: 6px;
  align-items: center;
}

.vgAkteForm--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.vgAkteWaitForm {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}

.vgAkteOutcomes {
  border: 0;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.vgAkteOutcomes legend {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.vgRepairDraft__missing {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgAktePhase {
  font-size: 13px;
  font-weight: 700;
}

.vgAkteWait {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--erimax-gold, #e3b341) 16%, var(--panel));
  color: color-mix(in srgb, #9a6700 70%, var(--text));
  font-size: 11px;
  font-weight: 650;
}

.vgAkteWait--inline {
  display: inline-block;
  margin: 8px 0 0;
}

.vgAkteFallback {
  color: var(--vg-muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vgAkteCtx {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) 72px 44px;
  gap: 8px;
  margin: 0 0 18px;
  align-items: stretch;
}

.vgAkteCtx__card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: start;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.vgAkteCtx__icon {
  font-size: 18px;
  line-height: 1;
  color: var(--vg-muted);
}

.vgAkteCtx__facts {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.vgAkteCtx__facts span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.vgAkteCtx__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--vg-muted);
  font-size: 11px;
}

.vgAkteCtx__status .material-icons {
  font-size: 16px;
}

.vgAkteCtx__card[data-received="1"] .vgAkteCtx__status .material-icons {
  color: #3d9a5c;
}

.vgAkteCtx__card--media,
.vgAkteCtx__card--history {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.vgAkteCtxThumb {
  position: relative;
  width: 56px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 70%, var(--panel));
  color: var(--vg-muted);
}

.vgAkteCtxThumb .material-icons {
  font-size: 22px;
}

.vgAkteCtxThumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.vgAkteCtxThumb.has-thumb:hover img,
.vgAkteCtxThumb.has-thumb:focus-within img,
.vgAkteCtx__card--media:hover .vgAkteCtxThumb.has-thumb img,
.vgAkteCtx__card--media:focus-visible .vgAkteCtxThumb.has-thumb img {
  opacity: 1;
}

.vgAkteCtx a.is-active,
.vgAkteCtx__card.is-active {
  border-color: color-mix(in srgb, var(--vg-pink) 45%, var(--border));
  background: color-mix(in srgb, var(--vg-pink) 8%, var(--panel));
}

.vgAkteLightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.78);
  cursor: zoom-out;
}

.vgAkteLightbox[hidden] {
  display: none;
}

.vgAkteLightbox img {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
}

.vgAkteBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.vgRepairAkte.is-ctx .vgAkteBody {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.vgAkteDrawer {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 12px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.vgAkteDrawer__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.vgAkteDrawer__head h2 {
  margin: 0;
  font-size: 16px;
}

.vgAkteDrawer__close {
  color: var(--vg-muted);
  font-size: 12px;
}

.vgAkteFacts--compact {
  margin-bottom: 12px;
}

.vgAkteForm__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vgAkteArticle {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 65%, var(--panel));
}

.vgAkteArticle[hidden] {
  display: none;
}

.vgAkteArticle label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--vg-muted);
}

.vgAkteArticle .input,
.vgAkteArticle select {
  width: 100%;
}

.vgAkteArticle__err {
  margin: 0;
  color: var(--danger, #b00020);
  font-size: 13px;
}

.vgAkteForm input[type=text],
.vgAkteForm input[type=email],
.vgAkteForm input[type=search],
.vgAkteForm input[type=password],
.vgAkteForm input[type=file],
.vgAkteForm select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.vgAkteAccessories {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}

.vgAkteAccessories legend {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 650;
  color: var(--vg-muted);
}

.vgAkteCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.vgAkteMiniList {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.vgAkteMiniList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 13px;
}

.vgAkteSuggest {
  display: grid;
  gap: 4px;
}

.vgAkteSuggest button {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}

.vgAkteCredStatus {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 650;
}

.vgAkteCred {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.vgAkteCred p {
  margin: 0 0 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vgAkteReveal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.vgAkteRevealOut {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 80%, #000);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.vgAkteMedia {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vgAkteMedia img {
  display: block;
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
}

.vgAkteMedia em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  color: var(--vg-muted);
}

.vgAkteTimeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vgAkteTimeline li {
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.vgAkteTimeline time,
.vgAkteTimeline p {
  display: block;
  color: var(--vg-muted);
  font-size: 12px;
  margin: 0;
}

.vgAkteTimeline strong {
  font-size: 13px;
}

.vgAkteStatus {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vg-pink) 12%, var(--panel));
  color: var(--vg-pink);
  font-size: 11px;
  font-weight: 650;
  vertical-align: middle;
}

.vgAkteKiReserve {
  margin: 0 0 14px;
  color: var(--vg-muted);
  font-size: 13px;
}

.vgAkteTrack {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid color-mix(in srgb, var(--vg-pink) 22%, var(--border));
}

.vgAkteStep {
  position: relative;
  padding: 0 0 28px 28px;
}

.vgAkteStep__mark {
  position: absolute;
  left: -13px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--vg-pink) 40%, var(--border));
  background: var(--bg);
  color: var(--vg-muted);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.vgAkteStep.is-current .vgAkteStep__mark,
.vgAkteStep.is-done .vgAkteStep__mark {
  background: var(--vg-pink);
  border-color: var(--vg-pink);
  color: #fff;
}

.vgAkteSection h2 {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.vgAkteFacts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.vgAkteFacts dt {
  color: var(--vg-muted);
  font-size: 12px;
  font-weight: 650;
}

.vgAkteFacts dd {
  margin: 2px 0 0;
}

.vgAkteMuted {
  color: var(--vg-muted);
}

.vgAkteKi {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid color-mix(in srgb, var(--vg-purple) 55%, var(--border));
  background: color-mix(in srgb, var(--vg-purple) 5%, var(--panel));
  border-radius: 0 10px 10px 0;
}

.vgAkteKi__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vg-purple);
}

.vgAkteSub {
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 700;
}

.vgAkteKi ul {
  margin: 0;
  padding-left: 18px;
}

.vgAkteForm {
  display: grid;
  gap: 12px;
}

.vgAkteForm label span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--vg-muted);
}

.vgAkteForm textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  resize: vertical;
}

.vgAkteActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vgAktePositions {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.vgAktePositions li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.vgAktePlanLead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

@media (max-width: 900px) {
  .vgRepairAkte.is-ctx .vgAkteBody {
    grid-template-columns: minmax(0, 1fr);
  }
  .vgAkteCtx {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px 44px;
  }
  .vgAkteDrawer {
    position: static;
    max-height: none;
  }
}
@media (max-width: 760px) {
  .vgAkteHead {
    flex-wrap: wrap;
  }
  .vgAkteHead__aside {
    align-items: flex-start;
  }
  .vgAkteCtx {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .vgAkteForm__row,
  .vgAkteMedia,
  .vgAktePosRow {
    grid-template-columns: minmax(0, 1fr);
  }
}
html.has-checkout-bar .vgPage {
  padding-bottom: 78px;
}

.vgCheckoutRowBtn,
.vgCheckoutCardBtn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #6b7280;
  border-radius: 50%;
  cursor: pointer;
  color: #374151;
  background: color-mix(in srgb, var(--panel) 94%, #e5e7eb);
  box-shadow: none;
}

.vgCheckoutRowBtn:hover,
.vgCheckoutCardBtn:hover {
  border-color: #111827;
  color: #111827;
  background: color-mix(in srgb, var(--panel) 82%, #d1d5db);
}

.vgCheckoutRowBtn .material-icons,
.vgCheckoutCardBtn .material-icons {
  font-size: 18px;
}

.vgListView__row {
  position: relative;
}

.vgListView__checkout {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 3;
  transform: translateY(-50%);
}

.vgListView__row:has(.vgListView__checkout) .vgListView__rowLink {
  padding-right: 52px;
}

.vgCardWrap {
  position: relative;
}

.vgCheckoutCardBtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
}

.vgCheckout {
  position: fixed;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 880;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.vgCheckout[hidden] {
  display: none;
}

.vgCheckout.is-docked:not(.is-open) {
  z-index: 850;
}

.vgCheckout.is-open {
  pointer-events: auto;
}

.vgCheckout__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #05070d 42%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.vgCheckout.is-docked:not(.is-open) .vgCheckout__scrim {
  visibility: hidden;
}

.vgCheckout.is-open .vgCheckout__scrim {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.vgCheckout__sheet {
  position: relative;
  z-index: 2;
  width: min(420px, 100% - 24px);
  max-height: min(62vh, 460px);
  pointer-events: auto;
  transform: translateY(110%);
  transform-origin: 50% 100%;
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.vgCheckout.is-docked .vgCheckout__sheet {
  transform: translateY(0);
}

.vgCheckout.is-open .vgCheckout__sheet {
  transform: translateY(0);
}

.vgCheckout__roll {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(62vh, 460px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2, var(--panel)) 88%, #fff) 0%, var(--panel) 28%);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.vgCheckout__roll::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--erimax-pink), var(--erimax-purple, #9c3cff) 48%, var(--erimax-cyan));
}

.vgCheckoutFab {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--erimax-pink), var(--erimax-purple, #9c3cff) 48%, var(--erimax-cyan));
  box-shadow: 0 8px 20px rgba(156, 60, 255, 0.28), 0 0 0 1px color-mix(in srgb, #fff 16%, transparent);
}

.vgCheckoutFab .material-icons {
  font-size: 20px;
}

.vgCheckoutFab:hover,
.vgCheckoutFab:focus-visible {
  filter: brightness(1.06);
}

.vgCheckout.is-open .vgCheckoutFab {
  display: none;
}

.vgCheckout:not(.is-open) .vgCheckout__x {
  display: none;
}

.vgCheckout.is-open .vgCheckout__x {
  position: relative;
  z-index: 2;
}

.vgCheckout__expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.vgCheckout.is-open .vgCheckout__expand {
  grid-template-rows: 1fr;
}

.vgCheckout__expandInner {
  min-height: 0;
  overflow: hidden;
}

.vgCheckout__handle {
  width: 46px;
  height: 4px;
  margin: 0 auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
  transition: max-height 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), margin 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.16s ease;
}

.vgCheckout.is-open .vgCheckout__handle {
  max-height: 4px;
  margin: 10px auto 0;
  opacity: 1;
}

.vgCheckout.is-docked:not(.is-open) .vgCheckout__sub {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}

.vgCheckout.is-docked:not(.is-open) .vgCheckout__roll {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.vgCheckout.is-docked:not(.is-open) .vgCheckout__head {
  align-items: center;
  padding: 10px 16px 12px;
  border-bottom-color: transparent;
  cursor: pointer;
}

.vgCheckout.is-docked:not(.is-open) .vgCheckout__kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
}

.vgCheckout.is-docked:not(.is-open) .vgCheckout__head h2 {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.vgCheckout__head,
.vgCheckout__head h2,
.vgCheckout__kicker {
  transition: padding 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), font-size 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), border-color 0.2s ease;
}

.vgCheckout__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.vgCheckout__kicker {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-image: linear-gradient(90deg, var(--erimax-pink), var(--erimax-purple, #9c3cff) 48%, var(--erimax-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vgCheckout__head h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.vgCheckout__sub {
  margin: 4px 0 0;
  max-height: 3em;
  color: var(--muted);
  font-size: 13px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), margin 0.2s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.16s ease;
}

.vgCheckout__x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  color: var(--muted);
  cursor: pointer;
}

.vgCheckout__body {
  display: grid;
  gap: 14px;
  padding: 16px 18px 22px;
  overflow: auto;
}

.vgCheckout__flash {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.vgCheckout__flash.is-ok {
  background: color-mix(in srgb, #0f766e 16%, var(--panel));
  color: #0f766e;
}

.vgCheckout__flash.is-err {
  background: color-mix(in srgb, #c81e4b 14%, var(--panel));
  color: #c81e4b;
}

.vgCheckout__row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.vgCheckout__handover,
.vgCheckout__done,
.vgCheckout__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
}

.vgCheckout__handover {
  flex: 1 1 0;
  width: auto;
  max-width: none;
}

.vgCheckout__kasse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  width: auto;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.vgCheckout__kasse[hidden],
.vgCheckout__handover[hidden] {
  display: none;
}

.vgCheckout__kasse .material-icons,
.vgCheckout__handover .material-icons {
  font-size: 20px;
}

.vgCheckout__kasse .material-icons {
  color: var(--primary);
}

.vgCheckout__kasse:hover {
  background: color-mix(in srgb, var(--primary) 20%, var(--panel));
}

.vgCheckout__kasse.is-disabled,
.vgCheckout__kasse[aria-disabled=true] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.vgCheckout__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.vgCheckout__done,
.vgCheckout__cancel {
  flex: 1 1 0;
  max-width: 168px;
  border-radius: 9px;
}

.vgCheckout__handover:hover:not(:disabled),
.vgCheckout__done:hover:not(:disabled),
.vgCheckout__cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg) 55%, var(--panel));
}

.vgCheckout__handover:disabled,
.vgCheckout__done:disabled,
.vgCheckout__cancel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .vgCheckout.is-docked:not(.is-open) .vgCheckout__head {
    padding: 8px 12px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vgCheckout__sheet,
  .vgCheckout__scrim,
  .vgCheckout__expand,
  .vgCheckout__handle,
  .vgCheckout__sub,
  .vgCheckout__head,
  .vgCheckout__head h2,
  .vgCheckout__kicker,
  .vgCheckoutFab {
    transition: none;
  }
}
.app--kasse .sidebar,
.app--kasse .sidebar-backdrop {
  display: none !important;
}

.app--kasse #mobileMenuToggle,
.app--kasse .topbar__back,
.app--kasse .topbar__breadcrumb {
  display: none !important;
}

html.is-kasse,
html.is-kasse body {
  height: 100%;
  overflow: hidden;
}

.app--kasse {
  min-height: 100%;
  height: 100%;
}

.app--kasse .main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.app--kasse .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  flex: 0 0 auto;
}

.app--kasse .topbar .container {
  max-width: none;
  width: 100%;
}

.app--kasse .kasseWorkspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.app--kasse .kasseWorkspace > .container.page {
  max-width: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 24px;
}

.topbar__kasseTitle {
  font-size: 15px;
  font-weight: 700;
}

.topbar--kasse.topbar--noCrumb .topbar__kasseTitle {
  display: inline;
}

.topbar__kasseBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar__customerView {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar__customerView.is-on {
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #06bfe7) 16%, transparent);
}

.topbar__customerViewText {
  font-size: 13px;
  font-weight: 650;
}

@media (max-width: 700px) {
  .topbar__customerViewText {
    display: none;
  }
}
.kassePage {
  display: grid;
  gap: 18px;
  max-width: none;
}

.kasseCustomer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.kasseCustomer__current {
  min-width: 0;
  flex: 1 1 220px;
}

.kasseCustomer__current strong {
  display: block;
  font-size: 18px;
}

.kasseCustomer__meta {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.kasseCustomer__search {
  flex: 1 1 280px;
  min-width: 0;
}

.kasseReference {
  display: grid;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 0;
}

.kassePrint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.kassePrint__label {
  width: 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.kasseInvoices--print {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.kasseCheckout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 100%;
}

.kasseCheckout__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
}

.kasseCheckout__btn .material-icons {
  font-size: 22px;
}

.btn.kasseCheckout__btn[data-kasse-pay=bar] {
  background: var(--success);
  border-color: transparent;
  color: #fff;
}

.btn.kasseCheckout__btn[data-kasse-pay=karte] {
  background: var(--warning);
  border-color: transparent;
  color: #1a1a1a;
}

.btn.kasseCheckout__btn[data-kasse-pay=ueberweisung] {
  background: var(--erimax-blue);
  border-color: transparent;
  color: #fff;
}

.btn.kasseCheckout__btn[data-kasse-pay=bar]:hover:not(:disabled),
.btn.kasseCheckout__btn[data-kasse-pay=bar]:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--success) 82%, #000);
  color: #fff;
}

.btn.kasseCheckout__btn[data-kasse-pay=karte]:hover:not(:disabled),
.btn.kasseCheckout__btn[data-kasse-pay=karte]:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--warning) 82%, #000);
  color: #1a1a1a;
}

.btn.kasseCheckout__btn[data-kasse-pay=ueberweisung]:hover:not(:disabled),
.btn.kasseCheckout__btn[data-kasse-pay=ueberweisung]:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--erimax-blue) 82%, #000);
  color: #fff;
}

.kasseCheckout__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.kasseCheckout__btn:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

.kasseCardWait {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 650;
}

.kasseCardActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.kasseCashTotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 14px;
}

.kasseCashTotal strong {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.kasseCashGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 12px;
}

.kasseCashField {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 13px;
}

.kasseCashField .input {
  font-size: 22px;
  font-weight: 700;
  min-height: 48px;
}

.kasseCashField .input.is-short {
  color: var(--danger, #b00020);
}

#kasseCashChange {
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 80%, var(--panel));
}

.kasseCashHint {
  margin: 0 0 12px;
  color: var(--danger, #b00020);
  font-size: 13px;
}

.app--kasse .vgCalcFooter {
  align-items: stretch;
}

.app--kasse .kasseCheckout {
  order: 2;
}

.app--kasse .vgCalcFooter > .btn {
  order: 3;
}

.kasseInvoices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.kasseFoot {
  margin: 0;
  font-size: 13px;
}

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

.app--kasse .vgCalcTable {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.app--kasse .vgCalcHead {
  padding: 10px 12px 8px;
  border-radius: 12px 12px 0 0;
}

.app--kasse .vgCalcFooter {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 0 4px;
  background: var(--bg);
}

.kassePreview {
  position: relative;
  z-index: 1400;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #eceff4;
  border-left: 1px solid var(--border);
}

.kassePreview.is-saver {
  background: #000;
}

.kassePreview__fit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.12);
  transform-origin: center center;
}

.kassePreview.is-saver .kassePreview__fit {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}

.kassePreview__iframe {
  display: block;
  width: 1024px;
  height: 768px;
  border: 0;
  pointer-events: none;
  background: #fff;
}

.kassePreview.is-saver .kassePreview__iframe {
  background: #000;
}

.app--kasse #kasseCashModal.modal-overlay,
.app--kasse #kasseCardModal.modal-overlay,
.app--kasse #kasseTransferModal.modal-overlay {
  right: auto;
  width: 50%;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.kasseTransferHint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.kasseTransferActions {
  flex-wrap: wrap;
}

.app--kasse #kasseTransferModal .modalCard {
  width: min(640px, 100% - 24px);
  max-width: 640px;
}

.kasseTransferMail {
  margin: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #101828;
}

.kasseTransferMail .emailShow-compose__key,
.kasseTransferMail .emailShow-compose__input,
.kasseTransferMail .emailShow-compose__editor {
  color: #101828;
}

.kasseTransferMail .emailShow-compose__editor {
  min-height: 148px;
}

.dsKicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.dsAdmin__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.dsAdmin__actions {
  display: flex;
  gap: 8px;
}

.dsAdmin__rowActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dsToken {
  font-size: 12px;
  word-break: break-all;
}

.dsApp {
  --ds-violet: var(--erimax-violet, #9c3cff);
  --ds-blue: #168cff;
  --ds-pink: var(--erimax-pink, #ff3264);
  --ds-cyan: var(--erimax-cyan, #06bfe7);
  --ds-select: var(--ds-violet);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100dvh - 108px);
  max-height: calc(100dvh - 108px);
  overflow: hidden;
}

.dsTop {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dsTop .dsField--inline .input {
  width: auto;
  min-width: 168px;
  height: 32px;
}

.dsTop__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dsToolBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.dsToolBtn .material-icons {
  font-size: 18px;
}

.dsToolBtn:hover,
.dsToolBtn:focus-visible {
  border-color: color-mix(in srgb, var(--ds-violet) 40%, var(--border));
  color: var(--ds-violet);
}

.dsToolBtn--primary {
  background: var(--ds-violet);
  border-color: var(--ds-violet);
  color: #fff;
}

.dsToolBtn--primary:hover,
.dsToolBtn--primary:focus-visible {
  background: color-mix(in srgb, var(--ds-violet) 88%, #000);
  color: #fff;
}

.dsStatus {
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}

.dsWorkspace {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) minmax(320px, 340px);
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.dsRail,
.dsInspector,
.dsStageWrap,
.dsTimeline {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.dsRail,
.dsInspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.dsSeg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px 8px 0;
}

.dsSeg__btn {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dsSeg__btn.is-on {
  background: color-mix(in srgb, var(--ds-violet) 12%, #fff);
  color: var(--ds-violet);
}

.dsRail__pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.dsRail__pane[hidden] {
  display: none !important;
}

.dsRail__toolbar {
  padding: 8px;
}

.dsSplit {
  position: relative;
  display: flex;
}

.dsSplit__main,
.dsSplit__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  border: 1px solid var(--ds-violet);
  background: var(--ds-violet);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.dsSplit__main {
  flex: 1 1 auto;
  border-radius: 8px 0 0 8px;
  padding: 0 10px;
}

.dsSplit__main .material-icons {
  font-size: 18px;
}

.dsSplit__chev {
  width: 32px;
  border-left: 1px solid color-mix(in srgb, #fff 35%, var(--ds-violet));
  border-radius: 0 8px 8px 0;
}

.dsSplit__chev .material-icons {
  font-size: 20px;
}

.dsMenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
}

.dsMenu[hidden] {
  display: none;
}

.dsMenu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.dsMenu button:hover,
.dsMenu button:focus-visible {
  background: color-mix(in srgb, var(--ds-violet) 8%, #fff);
}

.dsMenu button strong {
  font-size: 13px;
}

.dsMenu button span:not(.material-icons) {
  color: var(--muted);
  font-size: 11px;
}

.dsMenu button:has(.material-icons) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.dsMenu .material-icons {
  font-size: 18px;
  color: var(--ds-violet);
}

.dsMenu--right {
  left: auto;
  right: 0;
  min-width: 148px;
  width: max-content;
}

.dsSceneList,
.dsLayerList {
  overflow: auto;
  padding: 0 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  flex: 1 1 auto;
}

.dsSceneCard {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  position: relative;
}

.dsSceneCard.is-active {
  border-color: var(--ds-violet);
  box-shadow: 0 0 0 1px var(--ds-violet);
}

.dsSceneCard__main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dsSceneCard__thumb {
  position: relative;
  width: 64px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  border: 1px solid #e4e7ec;
}

.dsSceneThumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1024px;
  height: 768px;
  transform: translate(-50%, -50%) scale(0.0625);
  transform-origin: center center;
  pointer-events: none;
}

.dsSceneCard__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dsSceneCard__meta strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dsSceneCard__meta span {
  font-size: 11px;
  color: var(--muted);
}

.dsDrag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #98a2b3;
  cursor: grab;
}

.dsDrag .material-icons {
  font-size: 16px;
}

.dsMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  position: relative;
}

.dsMore:hover,
.dsMore.is-open {
  background: var(--panel-2);
  color: var(--text);
}

.dsMore .material-icons {
  font-size: 18px;
}

.dsLayerRow {
  display: grid;
  grid-template-columns: 16px 28px 28px 22px minmax(0, 1fr);
  gap: 2px;
  align-items: center;
  padding: 4px 4px 4px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}

.dsLayerRow.is-active {
  background: color-mix(in srgb, var(--ds-violet) 10%, #fff);
  border-color: color-mix(in srgb, var(--ds-violet) 28%, var(--border));
}

.dsLayerRow.is-off {
  opacity: 0.45;
}

.dsLayerRow__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  padding: 4px 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.dsChipIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
}

.dsChipIcon .material-icons {
  font-size: 14px;
}

.dsChipIcon--text {
  background: var(--ds-violet);
}

.dsChipIcon--image {
  background: var(--ds-blue);
}

.dsChipIcon--article {
  background: var(--ds-cyan);
}

.dsChipIcon--logo {
  background: var(--ds-pink);
}

.dsChipIcon--background {
  background: #98a2b3;
}

.dsIconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.dsIconBtn .material-icons,
.dsIconBtn svg {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  pointer-events: none;
}

.dsIconBtn:hover,
.dsIconBtn:focus-visible,
.dsIconBtn.is-on {
  color: var(--ds-violet);
  background: color-mix(in srgb, var(--ds-violet) 10%, #fff);
}

.dsIconBtn.is-warn:hover {
  color: #c42348;
}

.dsStageWrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dsStageShell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #eef1f6;
  border-radius: 10px 10px 0 0;
}

.dsStageFrame {
  position: relative;
  flex: 0 0 auto;
  width: 320px;
  height: 240px;
  background: #111;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.12);
  overflow: hidden;
}

.dsStage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1024px;
  height: 768px;
  transform-origin: center center;
  overflow: hidden;
  background: #111;
}

.dsScenePane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dsStageMeta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}

.dsInspector {
  min-width: 320px;
}

.dsInsp {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.dsInsp__head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}

.dsInsp__head strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dsInsp__head span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.dsInsp__tools {
  display: flex;
  gap: 2px;
}

.dsInsp__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.dsInsp__tab {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dsInsp__tab.is-on {
  background: color-mix(in srgb, var(--ds-violet) 12%, #fff);
  color: var(--ds-violet);
}

.dsInsp__body {
  overflow: auto;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  flex: 1 1 auto;
}

.dsGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dsGroup__title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.dsField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.dsField--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.dsField .input,
.dsField textarea {
  width: 100%;
}

.dsMiniRow {
  display: grid;
  gap: 6px;
}

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

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

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

.dsMini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}

.dsMini .input,
.dsMini__input {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
}

.dsStepper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dsStepper .input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.dsHint {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.dsSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dsSwatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  cursor: pointer;
}

.dsSwatch.is-on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ds-violet);
}

.dsToggles {
  display: flex;
  gap: 4px;
}

.dsImgPrev {
  display: grid;
  place-items: center;
  height: 120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
}

.dsImgPrev img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dsAnchor {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 4px;
  width: max-content;
}

.dsAnchor button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.dsAnchor button.is-on {
  border-color: var(--ds-violet);
  background: color-mix(in srgb, var(--ds-violet) 14%, #fff);
}

.dsChain {
  display: inline-flex;
}

.dsAnimCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafbfc;
}

.dsAnimCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dsAnimCard__head strong {
  font-size: 13px;
}

.dsArtCard {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.dsArtCard img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}

.dsArtCard strong,
.dsArtCard span {
  display: block;
}

.dsArtCard span {
  color: var(--muted);
  font-size: 12px;
}

.dsTimeline__label .dsIconBtn {
  width: 24px;
  height: 24px;
}

.dsSwitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.dsSwitch .input {
  width: auto;
}

.dsTimeline__scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
}

.dsTimeline__zoom {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.dsInsp__empty {
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13px;
}

.dsStage.is-edit .dsLayer {
  cursor: move;
  touch-action: none;
  user-select: none;
}

.dsStage.is-edit .dsLayer.is-locked {
  cursor: default;
}

.dsStage.is-edit .dsLayer.is-selected {
  overflow: visible;
}

.dsStage.is-edit .dsLayer img,
.dsStage.is-edit .dsLayer .dsText,
.dsStage.is-edit .dsLayer .dsCard,
.dsStage.is-edit .dsLayer .dsLogo {
  pointer-events: none;
  user-select: none;
}

.dsHandle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid var(--ds-select);
  border-radius: 2px;
  z-index: 40;
  pointer-events: auto;
  box-sizing: border-box;
}

.dsHandle--nw {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}

.dsHandle--n {
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  cursor: ns-resize;
}

.dsHandle--ne {
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  cursor: nesw-resize;
}

.dsHandle--e {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  cursor: ew-resize;
}

.dsHandle--se {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}

.dsHandle--s {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: ns-resize;
}

.dsHandle--sw {
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}

.dsHandle--w {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
}

.dsSnapGuide {
  position: absolute;
  z-index: 55;
  pointer-events: none;
  background: var(--ds-cyan);
  box-shadow: 0 0 0 1px rgba(6, 191, 231, 0.35);
}

.dsSnapGuide--v {
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
}

.dsSnapGuide--h {
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
}

.dsLayer__del {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 50;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c42348;
  color: #c42348;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
  pointer-events: auto;
  cursor: pointer;
}

.dsLayer__del:hover,
.dsLayer__del:focus-visible {
  background: #c42348;
  color: #fff;
}

.dsProps__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dsTimeline {
  position: relative;
  flex: 0 0 auto;
  height: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dsApp.is-timeline-off .dsTimeline {
  height: 44px;
}

.dsApp.is-timeline-off .dsTimeline__canvas {
  display: none;
}

.dsTimeline__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.dsTimeline__now {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
}

.dsTimeline__hint {
  font-size: 11px;
  color: var(--muted);
}

.dsTimeline__spacer {
  flex: 1 1 auto;
}

.dsTimeline__canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.dsTimeline__needleHost {
  position: absolute;
  left: 214px;
  right: 0;
  top: 22px;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}

.dsTimeline__needle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-left: 2px solid var(--ds-violet);
  transform: translateX(-1px);
}

.dsTimeline__needle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--ds-violet);
}

.dsTimeline__end {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 214px;
  right: 0;
  width: auto;
  border-left: 0;
  border-right: 1px solid color-mix(in srgb, var(--ds-pink) 50%, #d0d5dd);
  pointer-events: none;
  z-index: 2;
}

.dsTimeline__ruler {
  display: flex;
  justify-content: space-between;
  margin: 0 0 4px 214px;
  padding: 6px 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  flex: 0 0 auto;
  cursor: ew-resize;
}

.dsTimeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 8px 8px 0;
}

.dsTimeline.is-dragging {
  user-select: none;
  cursor: grabbing;
}

.dsTimeline__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.dsTimeline__groupTitle {
  margin: 0 0 2px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.dsTimeline__layer {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 0;
  align-items: center;
  min-height: 28px;
}

.dsTimeline__layer.is-active .dsTimeline__name {
  color: var(--ds-violet);
}

.dsTimeline__label {
  display: grid;
  grid-template-columns: 24px 24px 22px minmax(0, 1fr);
  gap: 2px;
  align-items: center;
  padding: 0 6px 0 8px;
  min-width: 0;
}

.dsTimeline__name {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dsTimeline__track {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: #f2f4f7;
}

.dsTimeline__bar {
  position: absolute;
  top: 3px;
  height: 16px;
  min-width: 18px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ds-blue) 70%, #fff);
  cursor: grab;
  touch-action: none;
}

.dsTimeline__bar--text {
  background: color-mix(in srgb, var(--ds-violet) 72%, #fff);
}

.dsTimeline__bar--image {
  background: color-mix(in srgb, var(--ds-blue) 72%, #fff);
}

.dsTimeline__bar--article {
  background: color-mix(in srgb, var(--ds-cyan) 72%, #fff);
}

.dsTimeline__bar--logo {
  background: color-mix(in srgb, var(--ds-pink) 72%, #fff);
}

.dsTimeline__bar--background {
  background: #c5cdd6;
}

.dsTimeline__bar.is-open {
  outline: 1px dashed rgba(16, 24, 40, 0.18);
  outline-offset: -1px;
}

.dsTimeline__bar.is-dragging {
  cursor: grabbing;
}

.dsTimeline__layer.is-active .dsTimeline__bar {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.18);
}

.dsTimeline__trim {
  position: absolute;
  top: -2px;
  width: 8px;
  height: 20px;
  border-radius: 3px;
  background: #fff;
  border: 2px solid var(--ds-violet);
  box-sizing: border-box;
  z-index: 2;
  pointer-events: auto;
}

.dsTimeline__trim--start {
  left: 0;
  cursor: ew-resize;
}

.dsTimeline__trim--end {
  right: 0;
  cursor: ew-resize;
}

.dsTimeline__marks {
  position: absolute;
  inset: 3px 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.dsTimeline__mark {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  margin-top: 6px;
}

.dsTimeline__tip {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.dsTimeline__bar:hover .dsTimeline__tip,
.dsTimeline__layer.is-active .dsTimeline__tip {
  opacity: 1;
}

.dsLayer {
  position: absolute;
  overflow: hidden;
}

.dsStage.is-edit .dsLayer.is-selected {
  outline: 2px solid var(--ds-select);
  outline-offset: 1px;
}

.dsStage:not(.is-edit) .dsHandle,
.dsStage:not(.is-edit) .dsLayer__del {
  display: none;
}

.dsStage:not(.is-edit) .dsLayer.is-empty {
  border: none;
}

.dsLayer.is-empty {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  font-size: 18px;
}

.dsLayer--logo.is-light img {
  filter: brightness(0) invert(1);
}

.dsLayer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dsLayer--fill img {
  object-fit: cover;
}

.dsText {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: pre-wrap;
  line-height: 1.15;
}

.dsStage.is-edit .dsLayer--text .dsText {
  height: auto;
  min-height: 0;
  align-items: flex-start;
}

.dsLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dsCard {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.1);
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  color: #101828;
}

.dsCard__img {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  background: #fff;
}

.dsCard__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dsCard__name {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.dsCard__text {
  margin-top: 6px;
  color: #475467;
  font-size: 15px;
  line-height: 1.35;
}

.dsCard__price {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dsCard__empty {
  color: #667085;
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 18px;
}

.dsDialog {
  width: min(640px, 100vw - 32px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
}

.dsDialog::backdrop {
  background: rgba(16, 24, 40, 0.35);
}

.dsDialog__form {
  padding: 18px 18px 14px;
}

.dsDialog__head h2 {
  margin: 0 0 4px;
}

.dsDialog__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.dsTemplates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.dsTemplate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dsTemplate:hover,
.dsTemplate:focus {
  border-color: color-mix(in srgb, var(--ds-violet) 40%, var(--border));
}

.dsTemplate span {
  color: var(--muted);
  font-size: 13px;
}

.dsArticleResults {
  margin-top: 10px;
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dsArticleHit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dsArticleHit img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}

.dsArticleHit span {
  color: var(--muted);
  font-size: 13px;
}

.dsDialog--wide {
  width: min(760px, 100vw - 32px);
}

.dsMediaToolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
}

.dsMediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  min-height: 120px;
}

.dsMediaTile {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}

.dsMediaTile:hover,
.dsMediaTile:focus {
  border-color: color-mix(in srgb, var(--ds-violet) 45%, var(--border));
}

.dsMediaTile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 1100px) {
  .dsApp {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .dsWorkspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .dsRail,
  .dsInspector {
    min-height: 0;
  }
  .dsStageShell {
    min-height: 260px;
  }
}
.page-articles {
  padding-bottom: 72px;
}

.article-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  overflow: visible;
}

.article-toolbar .searchbar {
  overflow: visible;
}

.articleSearchWrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
  z-index: 8;
}

.articleSearchWrap .input {
  width: 100%;
  min-width: 0;
}

.articleSearchSuggest {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 999;
  width: min(720px, 100vw - 32px);
  min-width: 100%;
  max-height: 360px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.articleSearchHit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.articleSearchHit:hover,
.articleSearchHit:focus-visible {
  background: var(--panel-2);
}

.articleSearchHit__thumb {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.articleSearchHit__thumb img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.articleSearchHit__thumb .material-icons {
  font-size: 20px;
}

.articleSearchHit__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.articleSearchHit__body strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}

.articleSearchHit__meta {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.articleSearchHit__price {
  flex-shrink: 0;
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.articleSearchHit__ek {
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}

.searchResults .vgCalcHit.articleSearchHit,
.searchResults button.vgCalcHit.articleSearchHit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  justify-content: stretch;
  height: auto;
  min-height: 56px;
  padding: 8px 10px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.article-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article-col-thumb {
  width: 52px;
  padding-left: 8px;
  padding-right: 4px;
}

.page-articles .table-wrap--compact .table.table--articles {
  min-width: 0;
  width: 100%;
}

.table--articles {
  font-size: 13px;
}

.table--articles .article-col-name {
  width: auto;
}

.table--articles .article-col-category {
  width: 18%;
}

.table--articles .article-col-manufacturer {
  width: 14%;
}

.table--articles .article-col-stock {
  width: 72px;
}

.table--articles .article-col-price {
  width: 92px;
}

.table--articles .article-col-actions {
  width: 152px;
}

.table--articles.table--fixed th.article-col-actions,
.table--articles.table--fixed td.article-col-actions {
  overflow: visible;
}

.table--articles .article-col-category,
.table--articles .article-col-manufacturer,
.table--articles .article-col-stock,
.table--articles .article-col-price {
  white-space: nowrap;
}

.article-name-line,
.article-specs-preview,
.table--articles .article-col-category,
.table--articles .article-col-manufacturer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-row-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.article-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.article-row-actions .btn {
  flex: 0 0 auto;
  padding: 6px 8px;
  min-width: 36px;
}

.article-thumb {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.article-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.article-specs-preview {
  margin-top: 3px;
  font-size: 12px;
}

#articleModalOverlay.modal-overlay {
  align-items: flex-start;
  padding-top: 28px;
}

#articleModalOverlay .article-edit-modal {
  width: min(1080px, 100vw - 40px);
  max-width: min(1080px, 100vw - 40px);
  max-height: calc(100vh - 48px);
}

#articleModalOverlay .article-edit-modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

#articleModalOverlay .article-edit-body {
  flex: 1 1 auto;
}

#articleModalOverlay .article-edit-footer {
  flex: 0 0 auto;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
}

.article-edit-footer__main {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

#articleConfirmModalOverlay {
  z-index: 1600;
}

.article-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 12px;
  align-items: start;
}

.article-edit-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  padding: 14px 16px;
  min-width: 0;
}

.article-edit-card--full {
  grid-column: 1/-1;
}

.article-edit-card__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-edit-card .field + .field {
  margin-top: 10px;
}

.article-edit-card .field {
  display: grid;
  gap: 4px;
}

.article-edit-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.article-edit-inline .input,
.article-edit-inline select.input {
  flex: 1 1 auto;
  min-width: 0;
}

.article-edit-prices {
  display: grid;
  grid-template-columns: 88px repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, 1.15fr));
  gap: 10px 12px;
}

.article-edit-prices .field {
  margin: 0;
}

.article-edit-card--details {
  padding: 0;
}

.article-edit-card--details > .article-edit-card__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-edit-card--details > .article-edit-card__summary::-webkit-details-marker,
.article-edit-card--details > .article-edit-card__summary::marker {
  display: none;
  content: "";
}

.article-edit-card--details[open] > .article-edit-card__summary {
  border-bottom: 1px solid var(--border);
}

.article-edit-card--details > .article-edit-card__summary .details__chevron {
  transition: transform 150ms ease;
}

.article-edit-card--details[open] > .article-edit-card__summary .details__chevron {
  transform: rotate(180deg);
}

.article-edit-card__body {
  padding: 14px 16px 16px;
}

.article-edit-json {
  margin-top: 10px;
}

.article-edit-json > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.article-edit-json textarea {
  margin-top: 8px;
}

.article-modal-image {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: contain;
  background: transparent;
}

.article-image-stage {
  position: relative;
}

.article-image-stage.is-webcam {
  min-height: 168px;
}

.article-image-webcam {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}

.article-image-webcam[hidden] {
  display: none !important;
}

.article-image-webcam video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #111;
}

.article-image-webcam-device {
  margin-top: 8px;
}

.article-image-webcam-device[hidden] {
  display: none !important;
}

.article-image-drop {
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--panel);
}

.article-image-drop.is-over,
.article-image-drop.is-waiting-paste {
  border-color: var(--accent, #3b82f6);
}

.article-image-drop.is-waiting-paste {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);
}

.article-image-paste-catch {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  color: transparent;
  caret-color: transparent;
}

.article-image-drop__hint {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.article-image-drop__hint .material-icons {
  font-size: 36px;
  opacity: 0.7;
}

.article-image-status {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.article-image-status.is-ready {
  color: var(--text);
}

.article-image-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.article-image-actions[hidden] {
  display: none !important;
}

.btn.is-armed {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 1px;
}

.article-image-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.article-image-result {
  display: block;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
}

.article-image-result img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  display: block;
}

.specs-row .specs-label {
  flex: 0 0 140px;
  min-width: 120px;
  font-size: 12px;
  color: var(--muted);
}

.specs-notes {
  margin-top: 16px;
}

.specs-review {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
}

.specs-review__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px;
}

.specs-review__item {
  display: grid;
  grid-template-columns: auto minmax(120px, 160px) 1fr;
  gap: 8px 10px;
  align-items: start;
  font-size: 13px;
}

.specs-review__item strong {
  font-weight: 650;
}

.specs-review__item span {
  color: var(--muted);
}

.specs-review__item--add strong {
  color: #1b7a3d;
}

.specs-review__item--update strong {
  color: #9a6b00;
}

.specs-review__preview {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, #fff);
  white-space: pre-wrap;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.list-pager--fixed-bottom {
  position: fixed;
  left: 232px;
  right: 0;
  bottom: 0;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  z-index: 80;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .article-edit-grid {
    grid-template-columns: 1fr;
  }
  .article-edit-prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .table--articles .article-col-manufacturer,
  .table--articles th.article-col-manufacturer,
  .table--articles td.article-col-manufacturer {
    display: none;
  }
  .table--articles .article-col-category {
    width: 22%;
  }
}
@media (max-width: 700px) {
  .list-pager--fixed-bottom {
    left: 0;
  }
  .page-articles {
    padding-bottom: 88px;
  }
  .table--articles .article-col-category,
  .table--articles th.article-col-category,
  .table--articles td.article-col-category {
    display: none;
  }
  .table--articles .article-col-price {
    width: 80px;
  }
  .table--articles .article-col-actions {
    width: 132px;
  }
  .article-row-actions .btn {
    padding: 5px 6px;
    min-width: 32px;
  }
}
.mlDialog {
  position: relative;
  width: min(1120px, 100vw - 16px);
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  overflow: hidden;
}

.mlDialog::backdrop {
  background: rgba(16, 24, 40, 0.42);
}

.mlDialog__shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.mlDialog__head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.mlDialog__headMain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}

.mlDialog__head h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.mlDialog__headTools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.mlTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mlTabs__btn {
  border: 1px solid var(--border);
  background: var(--panel-2, var(--panel));
  color: inherit;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

.mlTabs__btn.is-active {
  border-color: var(--accent, #9c3cff);
  background: color-mix(in srgb, var(--accent, #9c3cff) 16%, var(--panel));
}

.mlCapture,
.mlView {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mlView {
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.mlDialog .btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mlDialog .btn--icon .material-icons {
  font-size: 20px;
}

.mlDialog .btn--icon.is-active,
.mlDialog .btn--icon.is-armed,
.mlDialog .btn--icon[aria-pressed=true] {
  border-color: var(--accent, #9c3cff);
  background: color-mix(in srgb, var(--accent, #9c3cff) 16%, var(--panel));
  color: var(--accent, #9c3cff);
}

.mlStatus {
  min-width: 0;
  max-width: 220px;
  font-size: 12px;
  color: var(--muted, #667085);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlDialog__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}

.mlGrid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  justify-content: start;
}

.mlGrid[data-view=thumbs-sm] {
  display: grid;
  grid-template-columns: repeat(auto-fill, 96px);
  grid-auto-rows: 96px;
  gap: 8px;
}

.mlGrid[data-view=thumbs-lg] {
  display: grid;
  grid-template-columns: repeat(auto-fill, 168px);
  grid-auto-rows: 168px;
  gap: 10px;
}

.mlGrid[data-view=details] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mlTile {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2, #fff);
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  min-width: 0;
  min-height: 0;
}

.mlGrid[data-view=thumbs-sm] .mlTile,
.mlGrid[data-view=thumbs-lg] .mlTile {
  width: 100%;
  height: 100%;
}

.mlTile:hover,
.mlTile:focus {
  border-color: var(--accent, #9c3cff);
}

.mlTile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #111;
}

.mlTile--svg img {
  background: #f4f4f6;
  padding: 8px;
  box-sizing: border-box;
}

.mlTile--name {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  height: auto;
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlWebcam,
.mlViewer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  padding: 12px 14px;
}

.mlWebcam[hidden],
.mlViewer[hidden],
.mlToolbar [hidden],
.mlViewer__bar [hidden],
.mlWebcam__bar [hidden],
.mlDialog [hidden] {
  display: none !important;
}

.mlWebcam__stage,
.mlViewer__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
}

.mlViewer__stage.is-svg {
  background: #f4f4f6;
}

.mlWebcam__stage video,
.mlViewer__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mlViewer__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.46);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mlViewer__nav .material-icons {
  font-size: 32px;
}

.mlViewer__nav--prev {
  left: 10px;
}

.mlViewer__nav--next {
  right: 10px;
}

.mlViewer__nav:hover,
.mlViewer__nav:focus {
  background: rgba(0, 0, 0, 0.68);
}

.mlViewer__nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.mlViewer__pos {
  min-width: 4.5em;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #667085);
}

.mlCrop {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  cursor: move;
  touch-action: none;
  box-sizing: border-box;
}

.mlCrop__handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
}

.mlCrop__handle[data-handle=nw] {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.mlCrop__handle[data-handle=ne] {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.mlCrop__handle[data-handle=sw] {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.mlCrop__handle[data-handle=se] {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.mlWebcam__bar,
.mlViewer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex: 0 0 auto;
}

.mlPasteCatch {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.mlPage .hubPage__head {
  margin-bottom: 0;
}

.article-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.article-image-gallery[hidden] {
  display: none !important;
}

.article-image-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
}

.article-image-thumb.is-selected {
  outline: 2px solid var(--accent, #9c3cff);
  outline-offset: 1px;
}

.article-image-thumb.is-primary {
  border-color: var(--accent, #9c3cff);
}

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

.article-image-thumb__star {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}

@media (max-width: 720px) {
  .mlDialog {
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    max-height: calc(100vh - 8px);
    border-radius: 12px;
  }
  .mlGrid[data-view=thumbs-sm] {
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 80px;
  }
  .mlGrid[data-view=thumbs-lg] {
    grid-template-columns: repeat(auto-fill, 128px);
    grid-auto-rows: 128px;
  }
  .mlStatus {
    max-width: 100%;
    order: 8;
    flex-basis: 100%;
  }
}
.repairPricesPage {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.repairPricesHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.repairPricesHead__sub {
  margin: 4px 0 0;
  max-width: 42rem;
}

.repairPricesHead__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.repairPricesMeta {
  font-size: 13px;
  color: var(--muted);
}

.repairPricesFilters .input {
  min-width: 140px;
}

.repairPriceList {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel, #fff) 92%, transparent);
}

.repairPriceList__head,
.repairPriceRow {
  display: grid;
  grid-template-columns: 0.9fr 1.35fr 0.9fr 1.45fr 7.5rem;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
}

.repairPriceList__head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-2, #f4f6f8) 88%, transparent);
  border-bottom: 1px solid var(--border);
}

.repairPriceList__priceHead,
.repairPriceRow__price {
  text-align: right;
}

.repairPriceRow {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.repairPriceRow:last-child {
  border-bottom: 0;
}

.repairPriceRow:hover,
.repairPriceRow:focus-visible {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.repairPriceRow:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: -2px;
}

.repairPriceRow__brand,
.repairPriceRow__model {
  font-weight: 600;
}

.repairPriceRow__defect,
.repairPriceRow__option {
  color: var(--muted);
}

.repairPriceRow__price {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}

.repairPriceEmpty,
.repairPriceStatus,
.repairPriceSentinel {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.repairPriceSentinel {
  height: 1px;
  padding: 0;
}

.repairPriceModal {
  width: min(720px, 100vw - 24px);
}

.repairPriceModal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.repairPriceModal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.repairPriceModal__grid .field[hidden] {
  display: none !important;
}

.repairPriceModal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 820px) {
  .repairPriceList__head {
    display: none;
  }
  .repairPriceRow {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand price" "model price" "meta meta";
    gap: 2px 12px;
    padding: 12px 14px;
  }
  .repairPriceRow__brand {
    grid-area: brand;
  }
  .repairPriceRow__model {
    grid-area: model;
  }
  .repairPriceRow__price {
    grid-area: price;
    align-self: center;
  }
  .repairPriceRow__defect,
  .repairPriceRow__option {
    grid-area: meta;
    font-size: 13px;
  }
  .repairPriceRow__option {
    margin-left: 0.4em;
  }
  .repairPriceRow__option::before {
    content: "· ";
  }
  .repairPriceModal__grid {
    grid-template-columns: 1fr;
  }
}
/* Phase 7 — Information architecture: boards, hubs, start facts */
.sidebar__rule {
  height: 1px;
  margin: 10px 12px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
}

.topbar__iconBtn {
  position: relative;
  min-width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
}

.topbar__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e86a4a;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.topbar--cockpit .topbar__breadcrumb,
.topbar--cockpit .topbar__back {
  display: none;
}

.hubNav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.hubNav__item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

.hubNav__item.is-active {
  border-color: color-mix(in srgb, #06bfe7 45%, var(--border));
  background: color-mix(in srgb, #06bfe7 10%, var(--panel));
}

.hubPage {
  width: 100%;
}

.hubPage__head {
  margin-bottom: 20px;
}

.hubLinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.hubLink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.vgBoard {
  width: 100%;
  max-width: 1280px;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
  overflow-x: hidden;
  container-type: inline-size;
  container-name: vg-board;
}

.vgBoard__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
  min-width: 0;
}

.vgBoard__row {
  min-width: 0;
}

.vgBoard__row--title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vgBoard__kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vgBoard__title {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.03em;
  flex: 0 0 auto;
}

.vgBoard__header .vgBoard__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.vgBoard__total {
  color: var(--muted);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.vgBoard__create {
  flex: 0 0 auto;
  gap: 4px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: none;
}

.vgBoard__createShort {
  display: none;
}

.vgBoard__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.vgBoard__row--tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vgBoard__searchBox {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: none;
}

.vgBoard__searchField {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.vgBoard__searchBox:focus-within {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: 1px;
}

.vgBoard__searchIcon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.vgBoard__searchInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.vgBoard__searchInput:focus {
  outline: none;
}

.vgBoard__searchGo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.vgBoard__searchGo:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.vgBoard__searchGo:focus-visible,
.vgBoard__create:focus-visible,
.vgBoard__filterBtn:focus-visible,
.vgBoard__viewToggle:focus-visible,
.vgBoard__viewSwitch .btn:focus-visible,
.vgBoard__view:focus-visible,
.vgBoard__filterToggle:focus-visible,
.vgBoard__filters .input:focus-visible,
.vgBoard__quickSelect:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.vgBoard__searchGo .material-icons {
  font-size: 20px;
  line-height: 1;
}

.vgBoard__quickSelect {
  display: none;
}

.vgBoard__toolBtns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.vgBoard__filterBtn {
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 4px;
}

.vgBoard__filterCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--btn-text-on-primary, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.vgBoard__viewToggle {
  display: none;
}

.vgBoard__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px 12px;
  align-items: end;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vgBoard__filters[hidden] {
  display: none;
}

.vgBoard__filterField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vgBoard__filterField > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vgBoard__filters .input {
  width: 100%;
  min-height: 40px;
  border-radius: 4px;
}

.vgBoard__filterToggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vgBoard__filterToggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

.vgBoard__filterToggle span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.vgBoard__filterToggle.is-active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
}

.vgBoard__filterToggle.is-active span {
  color: var(--primary);
  font-weight: 700;
}

.vgBoard__check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  grid-column: 1/-1;
  min-height: 40px;
  font-size: 13px;
  color: var(--muted);
}

.vgBoard__views {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.vgBoard__view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px 2px;
  margin: 0 0 -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.vgBoard__view:hover {
  color: var(--text);
}

.vgBoard__view.is-active {
  color: var(--text);
  font-weight: 650;
  border-bottom-color: var(--primary);
}

.vgBoard__count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.vgBoard__view.is-active .vgBoard__count {
  color: var(--primary);
  font-weight: 700;
}

.vgBoard__empty {
  color: var(--muted);
  padding: 28px 4px;
}

.vgBoard__viewSwitch {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  box-shadow: none;
}

.vgBoard__viewSwitch .btn {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.vgBoard__viewSwitch .btn.is-active {
  color: #fff;
  background: var(--primary);
  box-shadow: none;
}

.vgBoard__viewSwitch .material-icons {
  font-size: 19px;
}

@container vg-board (max-width: 699px) {
  .vgBoard__header .vgBoard__title {
    font-size: 20px;
  }
  .vgBoard__createFull {
    display: none;
  }
  .vgBoard__createShort {
    display: inline;
  }
  .vgBoard__create,
  .vgBoard__filterBtn,
  .vgBoard__viewToggle,
  .vgBoard__searchBox,
  .vgBoard__quickSelect,
  .vgBoard__filters .input,
  .vgBoard__filterToggle,
  .vgBoard__check {
    min-height: 44px;
  }
  .vgBoard__searchBox {
    height: 44px;
  }
  .vgBoard__row--tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "search search" "quick tools";
    align-items: stretch;
  }
  .vgBoard__searchBox {
    grid-area: search;
  }
  .vgBoard__quickSelect {
    display: block;
    grid-area: quick;
    width: 100%;
    min-width: 0;
    border-radius: 4px;
  }
  .vgBoard__toolBtns {
    grid-area: tools;
  }
  .vgBoard__filterLabel {
    display: none;
  }
  .vgBoard__filterBtn,
  .vgBoard__viewToggle {
    min-width: 44px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .vgBoard__viewSwitch {
    display: none;
  }
  .vgBoard__viewToggle {
    display: inline-flex;
    border-radius: 4px;
  }
  .vgBoard__views {
    display: none;
  }
  .vgBoard__searchGo {
    width: 40px;
    height: 40px;
  }
  .vgListView__head .vgListView__dateSort {
    display: none;
  }
  .vgListView__datePlain {
    display: inline;
  }
}
.vgListView {
  --vg-list-cols: 110px 150px minmax(0, 1fr) 118px;
  --vg-list-gap: 12px;
  --vg-list-pad-x: 12px;
  --vg-list-wash: calc(var(--vg-list-pad-x) + 110px + var(--vg-list-gap) + 150px);
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

.vgListView__head,
.vgListView__rowLink {
  display: grid;
  grid-template-columns: var(--vg-list-cols);
  grid-template-areas: "date category subject status";
  column-gap: var(--vg-list-gap);
  align-items: center;
  min-width: 0;
}

.vgListView__head {
  padding: 8px var(--vg-list-pad-x);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-2, var(--panel)) 72%, var(--panel));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.vgListView__row {
  --cat-fg: #334155;
  --cat-dark: #64748b;
  --cat: #e2e8f0;
  --cat-soft: #f8fafc;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vgListView__row + .vgListView__row {
  border-top: 1px solid var(--border);
}

.vgListView__rowLink {
  position: relative;
  isolation: isolate;
  min-height: 76px;
  padding: 10px var(--vg-list-pad-x);
  color: inherit;
  background: transparent;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.12s ease;
}

.vgListView__rowLink::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--vg-list-pad-x) + 36px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 58%, transparent) 0%, color-mix(in srgb, var(--cat) 42%, transparent) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.vgListView__rowLink > * {
  position: relative;
  z-index: 1;
}

.vgListView__rowLink:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.vgListView__rowLink:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  z-index: 1;
}

.vgListView__date {
  grid-area: date;
}

.vgListView__category {
  grid-area: category;
}

.vgListView__subject {
  grid-area: subject;
}

.vgListView__status {
  grid-area: status;
}

.vgListView__date {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.vgListView__dateValue {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vgListView__date > .vgListView__originIcon {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--cat-dark) 76%, #374151);
  font-size: 19px;
}

.vgListView__date strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.vgListView__date span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.vgListView__head .vgListView__date,
.vgListView__head .vgListView__category,
.vgListView__head .vgListView__subject,
.vgListView__head .vgListView__status {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.vgListView__head .vgListView__dateSort {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  text-transform: inherit;
  border-radius: 4px;
}

.vgListView__head .vgListView__dateSort:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.vgListView__head .vgListView__dateSort .material-icons {
  font-size: 14px;
  line-height: 1;
}

.vgListView__datePlain {
  display: none;
}

@container vg-board (max-width: 699px) {
  .vgListView__head .vgListView__dateSort {
    display: none;
  }
  .vgListView__datePlain {
    display: inline;
  }
}
.vgListView__category {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vgListView__row .vgListView__category .material-icons {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--cat-dark);
  font-size: 18px;
}

.vgListView__subject {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vgListView__subject strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vgListView__subject span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vgListView__status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  justify-self: center;
  max-width: 100%;
}

.vgListView__head .vgListView__status {
  text-align: center;
}

.vgListView__statusBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--status-fg) 28%, var(--border));
  border-radius: 6px;
  color: var(--status-fg);
  background: var(--status-bg);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.vgListView__statusBadge .material-icons {
  flex: 0 0 auto;
  font-size: 14px;
}

.vgListView__statusText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vgListView__statusBadge--new {
  --status-fg: #155fad;
  --status-bg: color-mix(in srgb, #168cff 14%, #fff);
}

.vgListView__statusBadge--progress {
  --status-fg: #9a4d0a;
  --status-bg: color-mix(in srgb, #e58a2d 16%, #fff);
}

.vgListView__statusBadge--waiting {
  --status-fg: #7a5608;
  --status-bg: color-mix(in srgb, #c4a05a 22%, #fff);
}

.vgListView__statusBadge--ready {
  --status-fg: #0f6a4a;
  --status-bg: color-mix(in srgb, #17845e 16%, #fff);
}

.vgListView__statusBadge--done {
  --status-fg: #4d5b4d;
  --status-bg: color-mix(in srgb, #778277 16%, #fff);
}

.vgListView__statusBadge--cancelled {
  --status-fg: #5c6370;
  --status-bg: color-mix(in srgb, #94a3b8 16%, #fff);
}

.vgListView__statusBadge--review {
  --status-fg: #9b1738;
  --status-bg: color-mix(in srgb, #c81e4b 14%, #fff);
}

.vgListView__statusBadge--default {
  --status-fg: #3d4a5c;
  --status-bg: color-mix(in srgb, #64748b 12%, #fff);
}

html[data-theme=dark] .vgListView__statusBadge--new {
  --status-fg: #8ec8ff;
  --status-bg: color-mix(in srgb, #168cff 22%, var(--panel));
}

html[data-theme=dark] .vgListView__statusBadge--progress {
  --status-fg: #f0b36a;
  --status-bg: color-mix(in srgb, #e58a2d 22%, var(--panel));
}

html[data-theme=dark] .vgListView__statusBadge--waiting {
  --status-fg: #e0c078;
  --status-bg: color-mix(in srgb, #c4a05a 22%, var(--panel));
}

html[data-theme=dark] .vgListView__statusBadge--ready {
  --status-fg: #7dcea6;
  --status-bg: color-mix(in srgb, #17845e 22%, var(--panel));
}

html[data-theme=dark] .vgListView__statusBadge--done,
html[data-theme=dark] .vgListView__statusBadge--cancelled,
html[data-theme=dark] .vgListView__statusBadge--default {
  --status-fg: #c5ccd6;
  --status-bg: color-mix(in srgb, #94a3b8 16%, var(--panel));
}

html[data-theme=dark] .vgListView__statusBadge--review {
  --status-fg: #f3a0b4;
  --status-bg: color-mix(in srgb, #c81e4b 22%, var(--panel));
}

@container vg-board (max-width: 720px) {
  .vgListView {
    --vg-list-cols: 110px minmax(0, 1fr) 108px;
    --vg-list-wash: calc(var(--vg-list-pad-x) + 110px);
  }
  .vgListView__head,
  .vgListView__rowLink {
    grid-template-areas: "date subject status" "category subject status";
    align-items: start;
    row-gap: 4px;
  }
  .vgListView__rowLink {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@container vg-board (max-width: 520px) {
  .vgListView {
    --vg-list-cols: 96px minmax(0, 1fr);
    --vg-list-gap: 10px;
    --vg-list-wash: calc(var(--vg-list-pad-x) + 96px);
  }
  .vgListView__head,
  .vgListView__rowLink {
    grid-template-areas: "date status" "category status" "subject subject";
  }
}
.vgGrid,
.vgGrid--start {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  padding: 6px 2px 2px;
}

.vgGrid .vgCard {
  --cat-fg: #334155;
  --cat-dark: #64748b;
  --cat: #e2e8f0;
  --cat-soft: #f8fafc;
  --prio: #94a3b8;
  display: flex;
  flex-direction: column;
  min-height: 142px;
  max-height: 175px;
  position: relative;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: visible;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.vgGrid .vgCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

html[data-theme=dark] .vgGrid .vgCard {
  --cat-soft: color-mix(in srgb, var(--cat-fg) 18%, var(--panel));
  background: var(--panel);
}

.vgGrid .vgCard--critical {
  --prio: #d96a5a;
}

.vgGrid .vgCard--review {
  --prio: #c81e4b;
  border-color: color-mix(in srgb, #c81e4b 48%, var(--border));
  background: color-mix(in srgb, #c81e4b 7%, #fff);
}

.vgGrid .vgCard--high {
  --prio: #e08a3a;
}

.vgGrid .vgCard--waiting {
  --prio: #c4a05a;
}

.vgGrid .vgCard--ready,
.vgGrid .vgCard--normal {
  --prio: var(--erimax-blue, #168cff);
}

.vgGrid .vgCard--done {
  --prio: #7a8b7a;
}

html[data-theme=dark] .vgGrid .vgCard--review {
  background: color-mix(in srgb, #c81e4b 18%, var(--panel));
}

.vgCard__reviewBadge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: #b4233f;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.vgReviewModal {
  width: min(520px, 100vw - 32px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--panel);
}

.vgReviewModal::backdrop {
  background: rgba(15, 23, 42, 0.58);
}

.vgReviewModal form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.vgReviewModal__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vgReviewModal__head .material-icons {
  color: #b4233f;
  font-size: 25px;
}

.vgReviewModal__head h2,
.vgReviewModal p {
  margin: 0;
}

.vgReviewModal__head h2 {
  font-size: 19px;
}

.vgReviewModal p {
  color: var(--muted);
  line-height: 1.55;
}

.vgReviewModal__reason {
  display: grid;
  gap: 6px;
}

.vgReviewModal__reason[hidden] {
  display: none;
}

.vgReviewModal__reason > span {
  font-size: 12px;
  font-weight: 650;
}

.vgReviewModal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.vgGrid .vgCard[data-category=verkauf],
.vgGrid .vgCard[data-category=bestellung],
.vgListView__row[data-category=verkauf],
.vgListView__row[data-category=bestellung] {
  --cat-fg: #134e4a;
  --cat-dark: #0f766e;
  --cat: #5eead4;
  --cat-soft: #ccfbf1;
}

.vgGrid .vgCard[data-category=reparatur],
.vgGrid .vgCard[data-category=webdesign],
.vgListView__row[data-category=reparatur],
.vgListView__row[data-category=webdesign] {
  --cat-fg: #9a3412;
  --cat-dark: #c2410c;
  --cat: #fdba74;
  --cat-soft: #ffedd5;
}

.vgGrid .vgCard[data-category=it-service],
.vgListView__row[data-category=it-service] {
  --cat-fg: #5b21b6;
  --cat-dark: #6d28d9;
  --cat: #c4b5fd;
  --cat-soft: #ede9fe;
}

.vgGrid .vgCard[data-category=mobilfunk],
.vgGrid .vgCard[data-category=print],
.vgListView__row[data-category=mobilfunk],
.vgListView__row[data-category=print] {
  --cat-fg: #374151;
  --cat-dark: #4b5563;
  --cat: #9ca3af;
  --cat-soft: #e5e7eb;
}

.vgGrid .vgCard[data-category=softwareentwicklung],
.vgListView__row[data-category=softwareentwicklung] {
  --cat-fg: #3730a3;
  --cat-dark: #4338ca;
  --cat: #a5b4fc;
  --cat-soft: #e0e7ff;
}

.vgGrid .vgCard[data-category=beratung],
.vgListView__row[data-category=beratung] {
  --cat-fg: #9d174d;
  --cat-dark: #be185d;
  --cat: #f9a8d4;
  --cat-soft: #fce7f3;
}

.vgGrid .vgCard[data-category=ticket],
.vgGrid .vgCard[data-category=angebot],
.vgListView__row[data-category=ticket],
.vgListView__row[data-category=angebot] {
  --cat-fg: #1e3a8a;
  --cat-dark: #1d4ed8;
  --cat: #93c5fd;
  --cat-soft: #dbeafe;
}

.vgGrid .vgCard[data-category=auftrag],
.vgListView__row[data-category=auftrag] {
  --cat-fg: #991b1b;
  --cat-dark: #b91c1c;
  --cat: #fca5a5;
  --cat-soft: #fee2e2;
}

.vgGrid .vgCard[data-category=gutscheine],
.vgListView__row[data-category=gutscheine] {
  --cat-fg: #92400e;
  --cat-dark: #b45309;
  --cat: #fbbf24;
  --cat-soft: #fef3c7;
}

.vgGrid .vgCard__urgent {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e11d48;
  color: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18);
}

.vgGrid .vgCard__urgent .material-icons {
  font-size: 13px;
  line-height: 1;
}

.vgGrid .vgCard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 10px;
  min-height: 0;
  height: auto;
  background: var(--cat-soft);
  color: var(--cat-fg);
  border-radius: 4px 4px 0 0;
}

.vgGrid .vgCard__id {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cat-fg);
}

.vgGrid .vgCard__cat {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--cat-fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vgGrid .vgCard__icon {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--cat-fg);
}

.vgGrid .vgCard__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 10px 8px;
  background: #fff;
  border-radius: 0 0 4px 4px;
}

html[data-theme=dark] .vgGrid .vgCard__body {
  background: var(--panel);
}

.vgGrid .vgCard__title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vgGrid .vgCard__customer {
  color: color-mix(in srgb, var(--cat-fg) 72%, #64748b);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vgGrid .vgCard__status,
.vgGrid .vgCard__urgency,
.vgGrid .vgCard__meta {
  margin-top: 3px;
  font-size: 12px;
  color: color-mix(in srgb, var(--cat-fg) 55%, #64748b);
}

.vgGrid .vgCard__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.vgGrid .vgCard__date {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
}

.vgGrid .vgCard__ind {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.vgGrid .vgCard__ind .material-icons {
  font-size: 14px;
}

.vgGrid .vgCard__go {
  margin-left: auto;
  font-size: 16px;
}

.startPulse {
  margin-top: 20px;
  width: 100%;
}

.startKpis,
.startFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.startKpi,
.startFact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cockpit-border, var(--border));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.startKpi__icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb;
  color: #3b6ea8;
  font-size: 16px;
}

.startKpi--open .startKpi__icon {
  background: #ffe8ee;
  color: var(--erimax-pink);
}

.startKpi--wait .startKpi__icon {
  background: #fff4dc;
  color: #c4841a;
}

.startKpi--cal .startKpi__icon {
  background: #e7f6ff;
  color: var(--erimax-cyan);
}

.startKpi--call .startKpi__icon {
  background: #fff1e6;
  color: #e08a3a;
}

.startKpi--ki .startKpi__icon {
  background: #f3e9ff;
  color: var(--erimax-violet);
}

.startKpi--alert .startKpi__hint {
  color: #c2410c;
}

.startKpi__label,
.startFact__label {
  font-size: 12px;
  color: var(--cockpit-muted, var(--muted));
}

.startKpi__value,
.startFact__value {
  margin-top: 1px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.startKpi__hint,
.startFact__hint {
  font-size: 12px;
  color: var(--cockpit-muted, var(--muted));
}

.startBottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.startLast {
  display: block;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cockpit-border, var(--border));
  border-radius: 14px;
  background: var(--cockpit-surface, var(--panel));
  color: inherit;
  text-decoration: none;
}

.startPanel--flat {
  margin: 0;
}

.startPanel__titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.startTag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #166534;
}

.startTag--attention {
  background: #fff7e6;
  color: #9a6700;
}

.startTag--busy,
.startTag--critical {
  background: #fff1f0;
  color: #b42318;
}

.startLast__kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cockpit-muted, var(--muted));
}

.startLast__line {
  display: block;
  margin-top: 2px;
  font-weight: 600;
}

.startLast__sub {
  color: var(--cockpit-muted, var(--muted));
  font-size: 13px;
}

.startBlock {
  margin: 8px 0 4px;
}

.startBlock__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.startBlock__head h2,
.startPanel h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.startCols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.startPanel {
  padding: 14px 16px;
  border: 1px solid var(--cockpit-border, var(--border));
  border-radius: 14px;
  background: var(--cockpit-surface, var(--panel));
}

.startPanel__lead {
  margin: 8px 0 4px;
  font-weight: 600;
}

.startPanel__more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
}

.startDl {
  margin: 10px 0 0;
}

.startDl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}

.startDl dt {
  color: var(--cockpit-muted, var(--muted));
}

.startStat + .startStat {
  margin-top: 10px;
}

.startStat__label {
  display: block;
  font-size: 12px;
  color: var(--cockpit-muted, var(--muted));
}

.startStat__value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.startStat__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--cockpit-muted, var(--muted));
}

.startStat__warn,
.startTaxDue {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #c2410c;
}

.startCount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.startCount strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.startCount span {
  color: var(--cockpit-muted, var(--muted));
  font-size: 13px;
}

.startCount.is-warn strong,
.startCount.is-alert strong {
  color: #c2410c;
}

.startPanel--tax {
  border-color: color-mix(in srgb, var(--erimax-gold, #e3b341) 35%, var(--border));
}

.startKi {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

@media (max-width: 820px) {
  .startCols,
  .startBottom {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .vgGrid,
  .vgGrid--start {
    grid-template-columns: 1fr;
  }
  .startCols,
  .startBottom,
  .startKpis,
  .startFacts {
    grid-template-columns: 1fr 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vgGrid .vgCard {
    transition: none;
  }
}
.hidden {
  display: none !important;
}