:root {
  --bg: #F6F6F6;
  --bg-soft: #ffffff;
  --primary: #AD093D;
  --radius-sm: 4px;
  --radius-md: 6px;
  --color-primary: #AD093D;
  --color-ink: #1E0C13;
  --color-muted: #7A5060;
  --color-border: #E4D4DA;
  --color-bg: #F6F6F6;
  --font-size-label: 9.5px;
  --font-size-body: 12px;
  --font-size-value: 12px;
  --blue: #C05D7E;
  --muted: #C4C2C2;
  --text: #5A2236;
  --text-muted: #7B4A5D;
  --surface-tint: #FAEDF2;
  --surface-soft: #FDF7FA;
  --surface-track: #F5E8EE;
  --shadow: 0 16px 40px rgba(23, 32, 43, 0.08);
  --radius: 18px;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Futura PT", Futura, "Trebuchet MS", sans-serif;
  font-size: 16px;
  line-height: 1.35;
  background:
    radial-gradient(circle at 0% 0%, rgba(173, 9, 61, 0.08), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(173, 9, 61, 0.05), transparent 30%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.landing {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.18s ease, transform 0.18s ease;
}

.landing::before,
.landing::after {
  content: "";
  position: absolute;
  left: -15%;
  width: 130%;
  height: 46%;
  border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%;
  z-index: -1;
  filter: blur(1px);
}

.landing::before {
  top: 10%;
  background: linear-gradient(120deg, rgba(173, 9, 61, 0.18) 0%, rgba(173, 9, 61, 0.03) 65%);
  animation: landingWaveA 12s ease-in-out infinite alternate;
}

.landing::after {
  bottom: 6%;
  background: linear-gradient(120deg, rgba(173, 9, 61, 0.12) 0%, rgba(214, 111, 146, 0.04) 68%);
  animation: landingWaveB 14s ease-in-out infinite alternate;
}

.landing.login-burst {
  background:
    radial-gradient(circle at 18% 22%, rgba(173, 9, 61, 0.16), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(214, 111, 146, 0.12), transparent 26%),
    var(--bg);
}

.landing.login-burst::before {
  animation: loginWaveScreenA 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  filter: blur(0);
}

.landing.login-burst::after {
  animation: loginWaveScreenB 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  filter: blur(0);
}

.landing-card {
  width: min(680px, 100%);
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid rgba(173, 9, 61, 0.22);
  border-radius: 22px;
  padding: 1.6rem 1.45rem;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 3;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  backdrop-filter: none;
}

.landing-corner-left,
.landing-corner-right {
  position: absolute;
  top: 1.2rem;
  z-index: 2;
}

.landing-corner-left {
  left: 1.4rem;
}

.landing-corner-right {
  right: 1.4rem;
}

.landing-corner-logo {
  width: clamp(128px, 12.8vw, 208px);
  height: auto;
  display: block;
}

.landing-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(173, 9, 61, 0.22);
  box-shadow: 0 6px 16px rgba(173, 9, 61, 0.1);
}

.landing-lang-btn {
  display: grid;
  place-items: center;
  min-height: 34px;
  min-width: 48px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  box-shadow: none;
  padding: 0 0.7rem;
  vertical-align: middle;
  text-align: center;
}

.landing-lang-btn:hover {
  border-color: rgba(173, 9, 61, 0.22);
  background: rgba(173, 9, 61, 0.05);
  color: var(--text);
  transform: none;
}

.landing-lang-btn.active {
  border-color: rgba(173, 9, 61, 0.36);
  background: #ffffff;
  color: var(--primary);
}

.landing-lang-btn:focus,
.landing-lang-btn:focus-visible {
  outline: none;
  border-color: rgba(173, 9, 61, 0.36);
  box-shadow: 0 0 0 2px rgba(173, 9, 61, 0.1);
}

.landing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.6) 46%, transparent 100%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

@keyframes landingWaveA {
  0% { transform: translate3d(-1%, 0, 0) rotate(-2deg) scale(1); }
  50% { transform: translate3d(2%, -3%, 0) rotate(1deg) scale(1.03); }
  100% { transform: translate3d(0, 2%, 0) rotate(-1deg) scale(1.01); }
}

@keyframes landingWaveB {
  0% { transform: translate3d(0, 0, 0) rotate(1deg) scale(1); }
  50% { transform: translate3d(-2%, 3%, 0) rotate(-1deg) scale(1.02); }
  100% { transform: translate3d(1%, -2%, 0) rotate(2deg) scale(1.01); }
}

@keyframes loginSweep {
  0% {
    transform: translateX(-130%);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@keyframes loginWaveScreenA {
  0% {
    transform: translate3d(-2%, 0, 0) scale(1);
    opacity: 0.35;
  }
  38% {
    transform: translate3d(2%, -3%, 0) scale(1.14);
    opacity: 0.72;
  }
  100% {
    transform: translate3d(6%, -6%, 0) scale(1.24);
    opacity: 0;
  }
}

@keyframes loginWaveScreenB {
  0% {
    transform: translate3d(2%, 0, 0) scale(1);
    opacity: 0.34;
  }
  42% {
    transform: translate3d(-3%, 4%, 0) scale(1.13);
    opacity: 0.68;
  }
  100% {
    transform: translate3d(-7%, 7%, 0) scale(1.22);
    opacity: 0;
  }
}

.landing-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
}

.landing-brand > div {
  display: grid;
  align-content: end;
  gap: 0.08rem;
}

.landing-form {
  margin-top: 1.15rem;
  display: grid;
  gap: 1rem;
}

.landing .brand-kicker {
  margin-top: 0;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.landing .landing-brand h1 {
  font-size: 3.2rem;
  line-height: 1.05;
}

.landing .hint,
#tokenFlowTitle {
  font-size: 1.16rem;
  line-height: 1.5;
}

.landing .landing-form input,
.landing .landing-form button {
  font-size: 1.14rem;
  min-height: 52px;
}

.landing #tokenFlowCard input {
  background: #fcf6f9 !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.landing #tokenFlowCard input:focus {
  background: #ffffff !important;
}

.landing .landing-form button {
  margin-top: 0.1rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px #fcf6f9 inset !important;
  box-shadow: 0 0 0 1000px #fcf6f9 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.landing input::-webkit-credentials-auto-fill-button,
.landing input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
}

.landing-exit .landing-card {
  transform: translateY(-10px) scale(0.985);
  opacity: 0;
  filter: blur(4px);
  box-shadow: 0 30px 60px rgba(23, 32, 43, 0.12);
}

.landing-card.login-success-flash::after {
  animation: loginSweep 0.34s ease forwards;
}

.landing-card.login-success-flash {
  box-shadow: 0 20px 48px rgba(173, 9, 61, 0.16);
}

.landing-card.login-error-shake {
  animation: loginShake 0.22s ease;
}

#appShell.app-enter {
  opacity: 0;
  transform: translateY(10px);
}

#appShell.app-enter.app-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.2rem 1.1rem;
  background: linear-gradient(120deg, #fff 0%, #fdf6f8 100%);
  border-bottom: 1px solid rgba(173, 9, 61, 0.18);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}

.brand-kicker {
  margin: 0;
  color: var(--blue);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.brand h1 {
  margin: 0.1rem 0 0;
  font-size: 1.75rem;
  color: var(--primary);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.78rem;
}

.brand-mark {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(173, 9, 61, 0.3);
  border: 1px solid rgba(196, 194, 194, 0.6);
  padding: 0.35rem;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.6);
  border-radius: 999px;
  padding: 0.35rem;
  min-height: 46px;
  font-size: 1rem;
  box-shadow: var(--shadow);
}

.app-lang-switch {
  margin-bottom: 0;
}

.app-lang-switch select {
  height: 38px;
  min-height: 38px;
  padding: 0.35rem 0.72rem;
  font-size: 14px;
  line-height: 1.15;
  border-radius: 999px;
  background-image: none !important;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 0.72rem;
}

.user-badge {
  margin: 0;
  min-width: 42px;
  height: 42px;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff 0%, #f9f4f7 100%);
  border: 1px solid rgba(173, 9, 61, 0.22);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(173, 9, 61, 0.08);
}

.user-menu-wrap {
  position: relative;
}

.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.55);
  border-radius: 12px;
  padding: 0.45rem;
  box-shadow: var(--shadow);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.user-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(173, 9, 61, 0.2);
  width: fit-content;
}

.user-menu .btn-subtle {
  width: 100%;
  text-align: left;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 33, 42, 0.42);
  display: grid;
  place-items: center;
  z-index: 120;
  padding: 1rem;
}

.overlay-card {
  width: min(460px, 100%);
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.55);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.overlay-card h3 {
  margin: 0 0 0.5rem;
}

.success-overlay-card {
  width: min(520px, 100%);
  border-color: rgba(48, 136, 93, 0.22);
  background: linear-gradient(145deg, #ffffff 0%, #f6fcf9 100%);
}

.success-overlay-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.success-badge {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #C43A6A 0%, var(--primary) 100%);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(173, 9, 61, 0.18);
  flex: 0 0 auto;
}

.success-summary-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

.success-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(196, 194, 194, 0.38);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.success-summary-label {
  color: var(--text);
  font-size: 0.95rem;
}

.success-summary-value {
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
}

.ui-dialog-card {
  width: min(560px, 100%);
}

.ui-dialog-head {
  margin-bottom: 0.3rem;
}

.ui-dialog-head h3 {
  margin: 0;
}

.ui-dialog-message {
  display: grid;
  gap: 0.45rem;
  margin: 0.25rem 0 0.9rem;
}

.ui-dialog-message-line {
  color: var(--text);
  line-height: 1.45;
  padding: 0.15rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.ui-dialog-message-line.is-emphasis {
  color: var(--primary);
  font-weight: 700;
}

.ui-dialog-message-line.is-link {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(196, 194, 194, 0.4);
  border-radius: 12px;
  background: var(--surface-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
}

.ui-dialog-card.dialog-tone-success {
  border-color: rgba(48, 136, 93, 0.24);
  background: linear-gradient(145deg, #ffffff 0%, #f6fcf9 100%);
}

.ui-dialog-card.dialog-tone-warning {
  border-color: rgba(173, 137, 9, 0.24);
  background: linear-gradient(145deg, #ffffff 0%, #fffaf2 100%);
}

.ui-dialog-card.dialog-tone-danger {
  border-color: rgba(173, 9, 61, 0.2);
  background: linear-gradient(145deg, #ffffff 0%, #fff7fa 100%);
}

/* Matches the green Testumgebung/Staging color scheme (see "Testumgebungen"
   block below) so this dialog is unmistakably flagged as test-related. */
.ui-dialog-card.dialog-tone-test-env {
  border-color: rgba(18, 59, 52, 0.35);
  background: linear-gradient(145deg, #ffffff 0%, #eafaf1 100%);
}

.ui-dialog-message-line.is-test-warning {
  margin: 0.35rem 0;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: #d8f3dc;
  color: #123b34;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#uiDialogForm {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.35rem;
}

#uiDialogForm label {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

#uiDialogForm label:has(textarea) {
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 0.4rem;
}

#uiDialogForm label input,
#uiDialogForm label select,
#uiDialogForm label textarea {
  width: 100%;
  min-width: 0;
}

#uiDialogForm > input,
#uiDialogForm > select,
#uiDialogForm > textarea {
  width: 100%;
}

#uiDialogForm textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

#uiDialogActions {
  margin-top: 1rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

#userAdminPanel .actions.import-card {
  margin-bottom: 0.8rem;
  align-items: center;
}

#newUserUsername {
  min-width: 180px;
  flex: 1 1 180px;
  transition: none !important;
  animation: none !important;
}

#newUserEmail {
  min-width: 280px;
  flex: 1.35 1 320px;
  transition: none !important;
  animation: none !important;
}

#newUserRole {
  min-width: 220px;
  flex: 1 1 260px;
}

#createUserBtn {
  flex: 0 0 auto;
}

.user-admin-card {
  padding: 0.75rem 0.8rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff 0%, #f8fbfe 100%);
}

.user-admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.user-admin-identity {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 200px;
}

.user-admin-name {
  color: var(--text);
  font-size: 1rem;
}

.user-admin-mail {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.user-admin-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.role-chip {
  font-size: 0.79rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.role-admin {
  color: #7a1a3a;
  background: #fceaf0;
}

.role-advanced {
  color: #7d4c08;
  background: #fff4de;
}

.role-basic {
  color: #3f5f73;
  background: #eef6fb;
}

.user-admin-actions {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.user-admin-actions button {
  min-width: 122px;
}

.auth .hint {
  margin: 0;
  align-self: center;
  padding: 0 0.4rem;
}

input, select, button {
  padding: 0.6rem 0.75rem;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
  background: #ffffff;
}

select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(90, 34, 54, 0.85) 50%),
    linear-gradient(135deg, rgba(90, 34, 54, 0.85) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 3px),
    calc(100% - 9px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}

#pricing-eur-rate {
  -moz-appearance: textfield;
  appearance: textfield;
}

#pricing-eur-rate::-webkit-outer-spin-button,
#pricing-eur-rate::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:focus, select:focus {
  outline: none;
  border-color: rgba(173, 9, 61, 0.5);
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.1);
}

.landing .landing-form input::placeholder {
  color: #9ea0a5;
  opacity: 1;
}

#landingUsername,
#landingPassword {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(130deg, #ffffff 0%, #f9f4f7 100%);
  color: var(--text);
  cursor: pointer;
  border: 1px solid rgba(173, 9, 61, 0.24);
  line-height: 1.2;
  min-height: 38px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
  box-shadow: 0 6px 14px rgba(173, 9, 61, 0.1);
}

.btn-main,
.save-btn {
  background: linear-gradient(135deg, #C43A6A 0%, var(--primary) 100%);
  color: #ffffff;
  border-color: rgba(173, 9, 61, 0.92);
  box-shadow: 0 8px 18px rgba(173, 9, 61, 0.16);
}

.btn-main:hover,
.btn-main:focus-visible,
.save-btn:hover,
.save-btn:focus-visible {
  background: linear-gradient(135deg, #CF4A79 0%, #B70F47 100%);
  color: #ffffff;
  border-color: rgba(173, 9, 61, 1);
  box-shadow:
    0 0 0 3px rgba(173, 9, 61, 0.12),
    0 10px 20px rgba(173, 9, 61, 0.18);
}

.edit-btn {
  background: linear-gradient(130deg, #ffffff 0%, #f9f4f7 100%);
  color: var(--text);
  border-color: rgba(173, 9, 61, 0.28);
  box-shadow: 0 5px 12px rgba(173, 9, 61, 0.08);
}

.edit-btn:hover,
.edit-btn:focus-visible {
  background: linear-gradient(130deg, #ffffff 0%, #F8E8EE 55%, var(--surface-soft) 100%);
  color: var(--text);
  border-color: rgba(173, 9, 61, 0.35);
}

.btn-subtle,
.cancel-btn {
  background: #ffffff;
  color: var(--text-muted);
  border: 1px solid rgba(173, 9, 61, 0.14);
  box-shadow: none;
}

.btn-subtle:hover,
.btn-subtle:focus-visible,
.cancel-btn:hover,
.cancel-btn:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
  border-color: rgba(173, 9, 61, 0.22);
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.06);
}

#landingLoginBtn {
  position: relative;
  overflow: hidden;
  min-height: 46px;
}

#landingLoginBtn.is-loading {
  background: linear-gradient(135deg, #C05D7E, #AD093D);
  color: #fff;
  box-shadow: 0 12px 24px rgba(173, 9, 61, 0.14);
}

#landingLoginBtn.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 0.55rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  display: inline-block;
  vertical-align: -3px;
  animation: spin 0.48s linear infinite;
}

#landingLoginBtn.is-success {
  background: linear-gradient(135deg, #C43A6A 0%, var(--primary) 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(173, 9, 61, 0.18);
}

button:hover {
  filter: brightness(1.01);
  border-color: rgba(173, 9, 61, 0.35);
  background: linear-gradient(130deg, #ffffff 0%, #F8E8EE 55%, var(--surface-soft) 100%);
  box-shadow: 0 8px 18px rgba(173, 9, 61, 0.12);
  transform: translateY(-1px);
}

button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(173, 9, 61, 0.18),
    0 8px 18px rgba(173, 9, 61, 0.14);
}

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

.tabs {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.95rem;
  background: transparent;
  overflow-x: auto;
}

.tabs button {
  background: #ffffff;
  color: var(--blue);
  border: 1px solid rgba(173, 9, 61, 0.18);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(173, 9, 61, 0.08);
  padding: 0.72rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.tabs button.active {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

main { padding: 0.45rem 1rem 1.2rem; }
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  background: var(--bg-soft);
  border: 1px solid rgba(196, 194, 194, 0.4);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.tab-panel.active h2,
.tab-panel.active h3,
.tab-panel.active h4 {
  color: var(--text-muted);
}

#master h2,
#master h3,
#master h4 {
  color: var(--text);
}

.tab-panel.active input,
.tab-panel.active select,
.tab-panel.active textarea {
  color: var(--text);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dashboard-welcome {
  margin: 0.3rem 0 1rem;
  font-size: 2.45rem;
  color: var(--text);
}

.dashboard-search-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(173, 9, 61, 0.16);
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, var(--surface-soft) 100%);
}

.dashboard-search-card input {
  min-height: 54px;
  font-size: 1.02rem;
  padding: 0.85rem 1rem;
}

.dashboard-search-card button {
  min-height: 54px;
  padding: 0.85rem 1.1rem;
}

.card {
  background: linear-gradient(145deg, #fff 0%, var(--surface-soft) 100%);
  border: 1px solid rgba(196, 194, 194, 0.5);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  position: relative;
  overflow: hidden;
  min-height: 142px;
  display: flex;
  flex-direction: column;
}

.card::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  right: -14px;
  top: -14px;
  background: rgba(173, 9, 61, 0.12);
}

.card h3 {
  margin: 0;
  color: var(--text-muted);
}

.card p { font-size: 1.6rem; margin: 0.3rem 0 0; }

.cards .card[data-metric] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cards .card[data-metric]:hover,
.cards .card[data-metric]:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(173, 9, 61, 0.45);
  box-shadow: 0 12px 24px rgba(173, 9, 61, 0.16);
  outline: none;
}

.card-action {
  margin-top: auto;
  padding: 0.4rem 0.56rem;
  border-radius: 10px;
  font-size: 0.8rem;
}

.import-summary-cards .card {
  min-height: 110px;
}

/* Compact stat cards inside the import preview modal (Neu / Updates / Klärfälle):
   override the global .card min-height so they aren't unnecessarily tall. */
#importPreviewOverlay .preview-stat-card {
  min-height: 0 !important;
}
#importPreviewOverlay .preview-stat-card::after {
  display: none !important;
}
#importPreviewOverlay .preview-stat-card h4 {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
#importPreviewOverlay .preview-stat-card p {
  font-size: 1.45rem;
  margin-top: 2px;
}

.import-summary-cards .card p {
  font-size: 1.45rem;
}

.import-step {
  margin-bottom: 0.75rem;
}

#effective #manualBulkPreviewCard {
  margin-bottom: 96px;
}

#effective #manualBulkPreviewCard .manual-bulk-preview-wrap {
  max-height: min(48vh, 520px);
  overflow: auto;
}

#effective #manualBulkPreviewCard .manual-bulk-preview-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 0.65rem;
  background: #fff;
  border-top: 1px solid rgba(228, 212, 218, 0.8);
  padding-top: 0.7rem;
}

#effective #manualBulkPreviewCard .manual-bulk-import-status {
  flex: 1 1 260px;
  margin: 0;
  min-width: 220px;
}

#dashboardDetailWrap {
  margin-bottom: 0.8rem;
}

.dashboard-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.audit-filters {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  gap: 0.45rem;
}

.audit-filters select {
  min-width: 130px;
}

#auditWrap {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(196, 194, 194, 0.45);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.35rem;
}

#audit {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.audit-line {
  font-size: 0.86rem;
  color: var(--text);
  padding: 0.34rem 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(196, 194, 194, 0.4);
  background: #fffafb;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.45);
  border-radius: var(--radius);
  overflow: hidden;
}
th, td {
  border-bottom: 1px solid rgba(196, 194, 194, 0.45);
  padding: 0.62rem;
  text-align: left;
  vertical-align: middle;
}
th {
  background: #f9f4f7;
  color: var(--text);
}
tr:last-child td {
  border-bottom: none;
}

#pricesTable tr.manual-price-row td {
  background: #f9f4f7;
}

.table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
  margin-bottom: 0.35rem;
}

.price-toggles-row {
  margin-top: -0.15rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
}

.condition-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.cond-toggle-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.22rem;
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
  text-align: left;
  line-height: 1.1;
  white-space: nowrap;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content;
}

input[type="checkbox"] {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  width: 16px;
  height: 16px;
  min-width: 16px;
  box-shadow: none !important;
  appearance: auto;
  -webkit-appearance: checkbox;
}

.price-toggles-row input[type="checkbox"] {
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none !important;
}

#mappingEditor label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  color: var(--text);
  font-size: 0.9rem;
}

#mappingCard {
  display: grid !important;
  gap: 18px;
  align-items: stretch;
}

#mappingCard .mapping-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 20px;
  flex-wrap: wrap;
}

#mappingCard .mapping-card-copy {
  display: grid;
  gap: 6px;
  min-width: min(100%, 360px);
}

#mappingCard .mapping-card-copy strong {
  display: block;
}

#mappingCard .mapping-card-copy .hint {
  margin: 0;
  max-width: 760px;
}

#mappingCard .mapping-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#mappingEditor {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
  align-items: start;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
}

#mappingEditor select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  #mappingCard .mapping-card-head {
    align-items: flex-start;
  }

  #mappingCard .mapping-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

#pricesTable th,
#pricesTable td {
  padding: 0.42rem 0.5rem;
  color: var(--text);
}

.prices-table-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  border: 1px solid rgba(196, 194, 194, 0.45);
  border-radius: 18px;
  margin-bottom: 0.85rem;
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.88) 0%, rgba(255, 255, 255, 0.96) 100%);
  /* needed so the loading overlay ::after is positioned relative to this box */
  position: relative;
}

/* Unified loading overlay for both tab-switch and market-price fetches.
   Sits on .prices-table-layout so it's above the sticky thead (z-index 100)
   and the table's own stacking context (overflow: clip). */
.prices-table-layout.table-loading {
  pointer-events: none;
}
.prices-table-layout.table-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 500;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: tableLoadingPulse 1.2s ease-in-out infinite;
}
.prices-table-layout.table-loading::before {
  content: 'Daten werden geladen';
  position: absolute;
  left: 50%;
  top: 44px;
  z-index: 501;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 12px 18px 12px 44px;
  border: 1px solid rgba(173, 9, 61, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0%, #ad093d 45%, transparent 90%) 0 100% / 42% 3px no-repeat,
    rgba(255, 255, 255, 0.92);
  color: #5a2236;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: 0 12px 28px rgba(52, 34, 42, 0.13);
  animation: tableLoadingSlide 1.05s ease-in-out infinite;
}
@keyframes tableLoadingPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
@keyframes tableLoadingSlide {
  0% { background-position: -50% 100%, 0 0; }
  100% { background-position: 150% 100%, 0 0; }
}

.prices-table-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* No reserved scrollbar gutter: the table (rows + lines + header) fills the full
     width to the right edge so the rounded card corner / titles no longer show
     through on the right. The vertical scrollbar overlays the content. */
  scrollbar-gutter: auto;
}

.prices-table-wrap::-webkit-scrollbar {
  height: 10px;
}


.prices-table-wrap::-webkit-scrollbar-track {
  background: var(--surface-track);
  border-top: 1px solid rgba(196, 194, 194, 0.35);
}

.prices-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(173, 9, 61, 0.32);
  border-radius: 999px;
  border: 2px solid var(--surface-track);
}

.prices-actions-wrap {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(196, 194, 194, 0.45);
  background: #ffffff;
}

.prices-actions-wrap::after {
  content: "";
  display: block;
  flex: 0 0 10px;
  background: #eef3f7;
  border-top: 1px solid rgba(196, 194, 194, 0.35);
}

#pricesTable,
#pricesActionTable {
  border: none;
  border-radius: 0;
  background: transparent;
}

#pricesTable {
  width: max-content;
  min-width: 100%;
}

#pricesActionTable {
  width: 176px;
  min-width: 176px;
  max-width: 176px;
  table-layout: fixed;
}

#pricesTable th,
#pricesActionTable th {
  line-height: 1.15;
}

#pricesTable thead tr:first-child th,
#pricesActionTable thead tr:first-child th {
  height: 52px;
}

#pricesTable .filter-row th,
#pricesActionTable .filter-row th {
  height: 52px;
  padding: 0.35rem 0.4rem;
  background: var(--surface-soft);
}

#pricesTable tbody tr,
#pricesActionTable tbody tr {
  height: 62px;
}

#pricesTable input,
#pricesTable select {
  padding: 0.4rem 0.45rem;
  min-width: 88px;
}

#pricesTable .filter-row input,
#pricesTable .filter-row select {
  min-width: 78px;
  width: 100%;
  padding: 0.34rem 0.4rem;
  font-size: 0.82rem;
}

#pricesTable th.price-col-head,
#pricesTable td.price-value-cell,
#pricesTable .filter-row th.price-filter-cell {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}

#pricesTable .filter-row th.price-filter-cell input {
  min-width: 0;
  width: 100%;
  text-align: right;
}

#pricesTable .price-name-input {
  min-width: 200px !important;
  width: min(25vw, 360px) !important;
}

#pricesTable .price-manual-vk-input {
  min-width: 110px;
  width: 110px;
  text-align: right;
}

#pricesActionTable th,
#pricesActionTable td {
  padding: 0.42rem 0.5rem;
  color: var(--text);
}

#pricesActionTable .action-col-head {
  background: #f9f4f7;
  text-align: center;
}

#pricesActionTable .action-col-filter {
  background: var(--surface-soft);
}

#pricesActionTable tbody td {
  background: #ffffff;
}

#pricesActionTable tbody tr.manual-price-row td {
  background: #f9f4f7;
}

.action-cell-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  flex-wrap: nowrap;
  width: 100%;
}

.price-action-btn {
  min-height: 30px;
  padding: 0.34rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

#manualProductName {
  min-width: 220px;
  flex: 1 1 220px;
}

#manualProductSkuZumstein,
#manualProductVkA {
  min-width: 140px;
}

.csv-import-head {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hidden-file-input {
  display: none;
}

.inline-info {
  position: relative;
  display: inline-flex;
}

.inline-info summary {
  list-style: none;
  width: 1.5rem;
  min-width: 1.5rem;
  max-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  max-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(173, 9, 61, 0.22);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  background: var(--surface-soft);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 1.5rem;
}

.inline-info summary::-webkit-details-marker {
  display: none;
}

.inline-info-body {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  width: min(26rem, 70vw);
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(196, 194, 194, 0.45);
  border-radius: 12px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 12px 24px rgba(173, 9, 61, 0.1);
}

.csv-import-head .inline-info-body.manual-bulk-info-body {
  z-index: 1800;
  width: min(46rem, calc(100vw - 3rem));
  max-width: 46rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  line-height: 1.32;
}

#effective .actions.import-card {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.table-tools input {
  min-width: 250px;
  flex: 1;
}

th input[type="checkbox"] {
  transform: scale(1.05);
}

.hint {
  color: var(--text-muted);
  margin: 0.65rem 0 0.1rem;
}

.hidden {
  display: none !important;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.pagination p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.grid-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.1rem;
}

.grid-3 > div {
  flex: 0 0 auto;
  min-width: 320px;
  max-width: 430px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.import-finish-actions {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.actions p {
  margin: 0;
}

.dropzone {
  border: 2px dashed rgba(173, 9, 61, 0.42);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: linear-gradient(120deg, #ffffff 0%, var(--surface-soft) 100%);
  min-width: 260px;
  transition: border-color 0.2s ease, background 0.2s ease;
  flex: 1;
}

.format-hints {
  background: var(--surface-soft);
  border: 1px solid rgba(173, 9, 61, 0.14);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.75rem;
}

.format-hints p {
  margin: 0.2rem 0;
  color: var(--text);
  font-size: 0.93rem;
}

.import-card {
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.5);
  border-radius: 14px;
  padding: 0.7rem;
}

#newAiConnectionName {
  min-width: 280px;
  flex: 1 1 280px;
}

#imports .actions {
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.45);
  border-radius: 14px;
  padding: 0.7rem;
  margin-bottom: 0.7rem;
  align-items: center;
}

#imports .actions.import-card {
  border-color: rgba(196, 194, 194, 0.55);
  background: linear-gradient(145deg, #fff 0%, #f7fafc 100%);
}

.connections-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.55);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
}

.status-active,
.status-inactive,
.status-unknown {
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.status-active {
  color: #1f6a45;
  background: #eaf8f1;
}

.status-inactive {
  color: var(--text-muted);
  background: #FCF1F5;
}

.status-unknown {
  color: var(--text-muted);
  background: #f9f4f7;
}

.ai-inline-row {
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  gap: 0.5rem;
}

.ai-inline-row button {
  white-space: nowrap;
  min-height: 36px;
  line-height: 1.2;
}

.ai-status-pill {
  margin-left: 0;
  text-align: left;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  min-height: 26px;
  line-height: 1.1;
  white-space: nowrap;
}

/* Keep "Kein API Key" and "Ungeprüft" visually same size */
#aiConnectionsList .ai-status-pill.status-unknown {
  width: 132px !important;
  justify-content: center !important;
  text-align: center !important;
}

.ai-status-pill.status-active {
  color: #1f6b3c;
  background: #e9f7ef;
  border: 1px solid rgba(31, 107, 60, 0.18);
}

.ai-status-pill.status-error {
  color: #8a0730;
  background: #fbeff3;
  border: 1px solid rgba(173, 9, 61, 0.2);
}

.ai-status-pill.status-key-missing {
  color: #7a5060;
  background: #f6edf0;
  border: 1px solid #e4d4da;
}

.ai-default-pill {
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  color: #1f6a45;
  background: #eaf8f1;
  border: 1px solid rgba(31, 107, 60, 0.18);
  align-self: center;
  white-space: nowrap;
}

/* Force Aktiv checkbox + label onto a single row in AI connections */
#aiConnectionsList .record-actions > label {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#aiConnectionsList .record-actions > label > span {
  display: inline-block !important;
  white-space: nowrap !important;
}

#aiConnectionsList .record-actions > label > input[type="checkbox"] {
  flex: 0 0 auto !important;
}

#imports .section-title {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #7a6070);
  margin: 1.2rem 0 0.4rem 0;
}

.connections-list {
  width: 100%;
}

/* Marktplatz-Verbindungs-Karten */
.marketplace-provider-list {
  width: 100%;
}

.marketplace-provider-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.mp-conn-card {
  border: 1px solid #e4d4da;
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mp-conn-card.mp-conn-active {
  border-color: rgba(31, 107, 60, 0.3);
}

.mp-conn-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mp-conn-name {
  font-weight: 600;
  flex: 1;
}

.mp-conn-actions {
  display: flex;
  gap: 0.4rem;
}

.mp-conn-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0e8ec;
  margin-top: 0.3rem;
}

.mp-conn-edit label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #7a6070);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mp-conn-edit input[type="text"],
.mp-conn-edit input[type="password"],
.mp-conn-edit input[type="number"],
.mp-conn-edit input:not([type="checkbox"]) {
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  min-width: 140px;
}

.mp-conn-edit .cond-toggle-item {
  flex-direction: row;
  align-items: center;
  text-transform: none;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.mp-conn-edit-actions {
  display: flex;
  gap: 0.4rem;
  align-items: flex-end;
  width: 100%;
  margin-top: 0.25rem;
}

.mp-conn-footer {
  margin-top: 0.25rem;
}

.import-card textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  resize: vertical;
}

.auto-fetch-row {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  align-items: center;
  gap: 0.5rem;
}

.auto-fetch-row > * {
  flex: 0 0 auto;
}

.auto-fetch-row input[type="number"] {
  width: 88px;
}

#backupStatus {
  margin: 0.55rem 0 0.2rem;
}

.backup-actions-row {
  align-items: center;
}

.backup-status-line {
  padding-left: 0.15rem;
  margin-top: 0.7rem !important;
}

.backup-schedule-card {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.backup-schedule-card .section-title {
  width: 100%;
  display: block;
  margin-bottom: 0.1rem;
}

.backup-schedule-toggle {
  white-space: nowrap;
}

.backup-schedule-time-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.backup-schedule-time-input {
  width: 72px !important;
}

.backup-schedule-retention-input {
  width: 58px !important;
}

.backup-schedule-retention-label {
  margin: 0 !important;
}

.backup-auto-last-run {
  width: 100%;
  margin-top: 0.1rem !important;
}

.progress {
  width: 100%;
  height: 12px;
  background: var(--surface-track);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0 0.9rem;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #D67B9A, #AD093D);
  transition: width 0.12s ease;
}

.import-progress-text {
  margin: -0.35rem 0 0.9rem;
  color: #7a2e4d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.info-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.info-btn {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  border-radius: 50%;
  padding: 0;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.file-input-hidden {
  position: absolute;
  left: -9999px;
}

.file-picker-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(173, 9, 61, 0.22);
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(173, 9, 61, 0.12);
}

.file-picker-btn:hover {
  background: var(--surface-soft);
}

.record {
  background: #ffffff;
  border: 1px solid rgba(196, 194, 194, 0.55);
  border-radius: 14px;
  padding: 0.55rem 0.6rem;
  margin-bottom: 0.4rem;
  position: relative;
  display: block;
  width: 100%;
}

.record-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  flex-wrap: wrap;
}

#groups .record-row[id^="group-row-"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(80px, max-content) max-content max-content;
  align-items: center;
  gap: 0.6rem;
}

#catalog .record-row[id^="catalog-row-"],
#classes .record-row[id^="class-row-"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
  align-items: center;
  gap: 0.6rem;
}

#groups .record-row[id^="group-row-"] input,
#catalog .record-row[id^="catalog-row-"] input,
#classes .record-row[id^="class-row-"] input {
  width: 100%;
  min-width: 0;
}

.record-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.record-row input {
  min-width: 0;
  padding: 0.42rem 0.5rem;
}

.record-row input[readonly] {
  background: var(--surface-soft);
  color: var(--text);
  border-color: rgba(173, 9, 61, 0.12);
}

.record-row input[type="number"] {
  max-width: 110px;
}

.record-row button {
  padding: 0.42rem 0.58rem;
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: nowrap;
}

#groups .record-row[id^="group-row-"] button,
#catalog .record-row[id^="catalog-row-"] button,
#classes .record-row[id^="class-row-"] button {
  justify-self: start;
}

#groups .record-row[id^="group-row-"] .btn-subtle,
#catalog .record-row[id^="catalog-row-"] .btn-subtle,
#classes .record-row[id^="class-row-"] .btn-subtle {
  margin-left: 0.08rem;
}

.factors-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 0.9rem;
}

.factor-col {
  background: linear-gradient(145deg, #ffffff 0%, var(--surface-soft) 100%);
  border: 1px solid rgba(196, 194, 194, 0.55);
  border-radius: 16px;
  padding: 0.75rem;
}

.factor-col > h3 {
  margin: 0 0 0.55rem;
}

#vkFactors,
#ekFactors {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#vkFactors .record,
#ekFactors .record {
  margin-bottom: 0;
}

#vkFactors .record h4,
#ekFactors .record h4 {
  margin: 0 0 0.55rem;
  color: var(--text);
}

#vkFactors .record-row strong,
#ekFactors .record-row strong {
  color: var(--text);
  font-weight: 700;
}

#pricing-vk-settings-row,
#pricing-ek-settings-row {
  align-items: flex-end;
}

#pricing-vk-settings-row label,
#pricing-ek-settings-row label {
  flex: 1 1 120px;
  min-width: 112px;
}

#pricing-vk-settings-row .ecb-inline-hint {
  align-self: center;
  margin-left: 0.25rem;
  white-space: nowrap;
}

#vkFactors .record-row[id^="vk-class-row-"],
#ekFactors .record-row[id^="ek-class-row-"] {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 92px auto auto auto;
  align-items: center;
  gap: 0.45rem;
}

#vkFactors .record-row[id^="cond-row-"] {
  display: grid;
  grid-template-columns: 42px 92px max-content max-content max-content max-content;
  align-items: center;
  gap: 0.55rem;
  justify-content: start;
}

#vkFactors .record-row[id^="cond-row-"] .edit-btn,
#vkFactors .record-row[id^="cond-row-"] .save-btn,
#vkFactors .record-row[id^="cond-row-"] .cancel-btn,
#vkFactors .record-row[id^="cond-row-"] .delete-cond-btn {
  min-width: 96px;
  max-width: 96px;
  width: 96px;
  justify-self: start;
  justify-content: center;
}

#cond-create-row {
  display: grid;
  grid-template-columns: 170px 110px max-content;
  align-items: center;
  gap: 0.6rem;
  justify-content: start;
  margin-top: 0.4rem;
  padding-top: 0.15rem;
}

#cond-create-row input {
  min-width: 0;
}

.cond-code {
  width: 36px;
  color: var(--text);
}

.delete-icon-btn {
  position: static;
  transform: none;
  margin-left: 0.2rem;
  width: 34px;
  height: 34px;
  max-width: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  background: #b30a3f;
  font-size: 0.95rem;
}

.record:hover .delete-icon-btn {
  opacity: 1;
  pointer-events: auto;
}

#groups,
#catalog,
#classes,
#conditions,
#aiConnectionsList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 700px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .auth {
    width: 100%;
    flex-wrap: wrap;
    border-radius: var(--radius);
  }
  .tab-panel.active {
    padding: 0.75rem;
  }
  .factors-two-col {
    grid-template-columns: 1fr;
  }
  #vkFactors .record-row[id^="vk-class-row-"],
  #ekFactors .record-row[id^="ek-class-row-"] {
    grid-template-columns: 1fr;
  }
  #vkFactors .record-row[id^="cond-row-"] {
    grid-template-columns: 1fr;
  }
  #cond-create-row {
    grid-template-columns: 1fr;
  }
  #groups .record-row[id^="group-row-"],
  #catalog .record-row[id^="catalog-row-"],
  #classes .record-row[id^="class-row-"] {
    grid-template-columns: 1fr;
  }
  .dashboard-search-card {
    grid-template-columns: 1fr;
  }
  #uiDialogForm label {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}
#groups .record.flash-focus,
#catalog .record.flash-focus,
#classes .record.flash-focus {
  outline: 2px solid rgba(173, 9, 61, 0.4);
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.12);
  border-radius: 12px;
}

/* --- 2026-03 Corporate Redesign Override (Photo Vision Zumstein AG) --- */
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_book-oblique.ttf') format('truetype');
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_medium-oblique.ttf') format('truetype');
  font-weight: 500;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_demi.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_bold-oblique.ttf') format('truetype');
  font-weight: 700;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura PT";
  src: url('/fonts/futura-pt/futura-pt_extrabold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ci-primary: #AD093D;
  --ci-primary-dark: #8A0730;
  --ci-primary-light: #F5E8ED;
  --ci-info: #69839A;
  --ci-panel-dark: #1E0C13;
  --ci-bg: #F6F6F6;
  --ci-surface: #FFFFFF;
  --ci-border: #E4D4DA;
  --ci-muted: #7A5060;
  --ci-focus: 0 0 0 3px rgba(173, 9, 61, 0.08);
  --sidebar-width: 200px;
  --topbar-height: 52px;
  --detail-panel-width: 420px;
  --ci-font-family: "Futura PT", Futura, "Trebuchet MS", sans-serif;
}

* {
  font-family: var(--ci-font-family) !important;
  box-shadow: none;
}

html,
body {
  background: var(--ci-bg) !important;
  color: var(--ci-panel-dark) !important;
}

body {
  line-height: 1.38;
  overflow-x: hidden;
}

input,
select,
textarea,
button,
a,
th,
td,
.card,
.tab-panel,
.topbar,
.tabs button,
.actions,
.import-card,
.overlay-card {
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease, transform 0.2s ease !important;
}

#appShell {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ci-bg);
}

.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 18px;
  background: #fff !important;
  border-bottom: 1px solid var(--ci-border) !important;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
}

.brand-kicker {
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ci-primary) !important;
  line-height: 1.2;
}

.brand h1 {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ci-panel-dark) !important;
}

.auth {
  background: transparent !important;
  border: 0 !important;
  min-height: 0;
  padding: 0;
}

.tabs {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  background: var(--ci-panel-dark) !important;
  border-right: 1px solid rgba(228, 212, 218, 0.18);
  padding: 10px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  z-index: 80;
}

.sidebar-brand {
  padding: 14px 20px 16px;
  border-bottom: 1px solid rgba(228, 212, 218, 0.18);
  margin-bottom: 6px;
}

.sidebar-brand .brand-kicker {
  color: rgba(255, 255, 255, 0.82) !important;
  margin: 0 0 6px;
}

.sidebar-brand h1 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabs button {
  width: 100%;
  justify-content: flex-start;
  border: 0 !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
}

.tabs button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

.tabs button.active {
  border-left-color: var(--ci-primary) !important;
  background: rgba(173, 9, 61, 0.12) !important;
  color: #fff !important;
}

main {
  position: absolute !important;
  top: var(--topbar-height) !important;
  bottom: 0 !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: left 0.25s ease-out, right 0.25s ease-out !important;
}

#appShell.detail-panel-open main {
  margin-right: var(--detail-panel-width);
}

.tab-panel.active {
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.tab-panel > h2 {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 12px;
  font-size: 22px !important;
  line-height: 1.15;
  color: var(--ci-panel-dark) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.tab-panel > h2::before {
  content: attr(data-eyebrow);
  display: block;
  margin-bottom: 10px;
  color: var(--ci-primary);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
}

.tab-panel > h2::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--ci-primary);
  margin-top: 10px;
}

.tab-panel h3,
.tab-panel h4,
label,
th {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.tab-panel h3,
.tab-panel h4 {
  position: relative;
  color: var(--ci-panel-dark) !important;
  font-weight: 700;
  font-size: 13px;
  padding-left: 24px;
}

.tab-panel h3::before,
.tab-panel h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--ci-primary);
  transform: translateY(-50%);
}

.hint,
.pagination p,
.user-admin-mail,
.auth .hint,
.brand-kicker,
.ui-dialog-message-line {
  color: var(--ci-muted) !important;
}

.cards,
.import-card,
.actions,
.table-wrap,
#auditWrap,
.connection-row,
.user-admin-card,
.dropzone,
.format-hints,
.dashboard-search-card,
.prices-table-layout,
.prices-actions-wrap,
.overlay-card,
.success-summary-item {
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: 0 !important;
}

.dashboard-search-card,
.import-card,
.actions,
.user-admin-card,
.table-wrap,
.overlay-card {
  padding: 14px !important;
}

.card {
  background: var(--ci-surface) !important;
  border: 1px solid var(--ci-border) !important;
  border-top: 2px solid var(--ci-border) !important;
  border-radius: 0 !important;
  min-height: 124px;
}

.card[data-metric="langeNichtGeprueft"] {
  border-top-color: var(--ci-info) !important;
}

.card[data-metric="total"] {
  border-top-color: var(--ci-primary) !important;
}

.card[data-metric]:not([data-metric="total"]):not([data-metric="langeNichtGeprueft"]) {
  border-top-color: var(--ci-border) !important;
}

.card::after {
  display: none !important;
}

.card h3 {
  color: var(--ci-muted) !important;
  font-size: 11px;
  margin-bottom: 8px;
}

.card p {
  font-size: 31px !important;
  line-height: 1;
  color: var(--ci-panel-dark) !important;
  font-weight: 700;
}

.cards .card[data-metric]:hover,
.cards .card[data-metric]:focus-visible {
  border-color: var(--ci-border) !important;
  transform: translateY(-1px) !important;
}

input,
select,
textarea,
button {
  border: 1px solid var(--ci-border) !important;
  border-radius: 0 !important;
  color: var(--ci-panel-dark) !important;
  background: #fff !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ci-muted) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: none !important;
  border-color: var(--ci-primary) !important;
  box-shadow: var(--ci-focus) !important;
}

.btn-main,
.save-btn,
button:not(.btn-subtle):not(.cancel-btn):not(.landing-lang-btn) {
  background: var(--ci-panel-dark) !important;
  color: #fff !important;
  border-color: var(--ci-panel-dark) !important;
}

#landingLoginBtn {
  background: var(--ci-primary) !important;
  border-color: var(--ci-primary) !important;
  color: #fff !important;
}

#landingLoginBtn:hover {
  background: var(--ci-primary-dark) !important;
  border-color: var(--ci-primary-dark) !important;
}

.btn-main:hover,
.save-btn:hover,
button:not(.btn-subtle):not(.cancel-btn):not(.landing-lang-btn):hover {
  background: var(--ci-primary-dark) !important;
  border-color: var(--ci-primary-dark) !important;
  transform: translateY(-1px) !important;
}

.btn-main:active,
.save-btn:active,
button:not(.btn-subtle):not(.cancel-btn):not(.landing-lang-btn):active {
  transform: scale(0.98) !important;
}

/* Borderless icon buttons (import info "i" and modal close "×").
   ID-prefixed so they beat the global button { border/background !important }. */
#suggestions .btn-icon,
#suggestions .btn-icon:hover,
#suggestions .btn-icon:active,
#suggestions .btn-icon:focus-visible,
#importInfoOverlay .btn-icon,
#importInfoOverlay .btn-icon:hover,
#importInfoOverlay .btn-icon:active,
#importInfoOverlay .btn-icon:focus-visible {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0 !important;
  color: var(--color-text-muted) !important;
}

#suggestions .btn-icon:hover,
#importInfoOverlay .btn-icon:hover {
  color: var(--ci-panel-dark) !important;
}

.btn-subtle,
.cancel-btn,
.edit-btn {
  background: #fff !important;
  color: var(--ci-panel-dark) !important;
  border-color: var(--ci-border) !important;
}

.btn-subtle:hover,
.cancel-btn:hover,
.edit-btn:hover {
  background: var(--ci-primary-light) !important;
  border-color: var(--ci-border) !important;
}

table {
  border-collapse: collapse;
  background: #fff !important;
  border: 1px solid var(--ci-border) !important;
  border-radius: 0 !important;
}

th,
td {
  border-bottom: 1px solid var(--ci-border) !important;
  background: #fff;
  color: var(--ci-panel-dark) !important;
  padding: 10px;
}

th {
  background: #fff !important;
  font-size: 11px;
  font-weight: 700;
}

tbody tr td {
  transition: background-color 0.15s ease, padding-left 0.2s ease;
}

tbody tr:hover td {
  background: #fdf5f8 !important;
  padding-left: 14px;
}

#pricesTable,
#pricesActionTable {
  table-layout: fixed;
}

.prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 100px !important;
}

#pricesActionTable {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

#pricesTable th.price-col-head,
#pricesTable td.price-value-cell {
  width: 80px !important;
  max-width: 80px !important;
  text-align: right;
}

#pricesTable th.col-sku,
#pricesTable td.col-sku {
  width: 120px;
  max-width: 120px;
}

#pricesActionTable th.col-action,
#pricesActionTable td.col-action {
  width: 100px;
  max-width: 100px;
}

#dashboardDetailWrap {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--detail-panel-width);
  max-width: calc(100vw - 24px);
  z-index: 95;
  background: #fff !important;
  border-left: 1px solid var(--ci-border);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(30, 12, 19, 0.08);
  transition: transform 0.25s ease-out, opacity 0.2s ease;
}

#dashboardDetailWrap:not(.hidden) {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#dashboardDetailWrap .dashboard-audit-head {
  margin: 0;
  padding: 14px 16px;
  background: var(--ci-panel-dark);
  border-bottom: 1px solid var(--ci-border);
}

#dashboardDetailWrap h3 {
  color: #fff !important;
  padding-left: 0;
}

#dashboardDetailWrap h3::before {
  display: none;
}

#dashboardDetailWrap table {
  border: 0 !important;
  border-top: 1px solid var(--ci-border) !important;
  border-radius: 0 !important;
}

.overlay {
  background: rgba(30, 12, 19, 0.48) !important;
}

.ui-dialog-message-line.is-link {
  font-family: "Futura PT" !important;
}

.landing .landing-brand h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

#landingHint.notice-success {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  background: #e8f5ee;
  color: #1a5c36 !important;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 9px !important;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid rgba(26, 92, 54, 0.2);
}

.landing-lang-btn {
  border: 1px solid rgba(173, 9, 61, 0.36) !important;
  background: transparent !important;
  color: var(--ci-primary) !important;
}

.landing-lang-btn.active {
  background: var(--ci-primary) !important;
  color: #fff !important;
  border-color: var(--ci-primary) !important;
}

.pagination button:disabled {
  opacity: 0.5;
  transform: none !important;
}

.ki-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  padding: 3px 8px;
  border: 1px solid var(--ci-border);
  color: var(--ci-info);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

.ki-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #378ADD;
  animation: kiPulse 1.8s infinite;
}

.ki-live-badge.is-reviewed {
  color: #2f6c47;
  transform: scale(1.1);
  transition: transform 0.2s ease, color 0.15s ease;
}

.suggestion-row-exit {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes kiPulse {
  0% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.5; transform: scale(0.9); }
}

.stagger-in {
  opacity: 0;
  transform: translateY(16px);
  animation: staggerReveal 0.32s ease forwards;
  animation-delay: var(--stagger-delay, 0ms);
}

@keyframes staggerReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.skeleton-row td {
  padding-top: 11px;
  padding-bottom: 11px;
  background: #fff !important;
}

.skeleton-shimmer {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #EDE6E9 25%, #F5EEF1 50%, #EDE6E9 75%);
  background-size: 240% 100%;
  animation: skeletonShimmer 1.2s linear infinite;
}

@keyframes skeletonShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

#suggestionsEmpty,
#effectiveEmpty,
#clarificationsEmpty,
#backupEmpty {
  margin-top: 16px;
  border: 1px solid var(--ci-border);
  background: #fff;
  min-height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ci-muted) !important;
  position: relative;
}

#importSuggestionsPanel .suggestions-table-wrap.is-empty {
  min-height: 260px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
}

#importSuggestionsPanel .suggestions-table-wrap.is-empty table {
  display: table !important;
  width: 100% !important;
}

#importSuggestionsPanel .suggestions-table-wrap.is-empty #suggestionsEmpty {
  margin: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 0 !important;
  border-top: 1px solid var(--ci-border) !important;
}

#importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) #suggestionsEmpty {
  display: none !important;
}

#suggestionsEmpty::before,
#effectiveEmpty::before,
#clarificationsEmpty::before,
#backupEmpty::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23AD093D'/%3E%3C/svg%3E");
}

#audit .empty-state-block {
  min-height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ci-muted);
  text-align: center;
}

#audit .empty-state-icon {
  width: 12px;
  height: 12px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23AD093D'/%3E%3C/svg%3E");
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: var(--ci-border);
}

::-webkit-scrollbar-thumb {
  background: var(--ci-primary);
  border-radius: 2px;
}

.prices-table-wrap::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.prices-table-wrap::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track {
  background: #E4D4DA;
}

.prices-table-wrap::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: #AD093D;
  border-radius: 2px;
}

.dashboard-search-card {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.dashboard-search-card input {
  flex: 0 1 60%;
  max-width: 60%;
}

#dashboardProductSearchBtn {
  padding: 8px 20px !important;
  min-height: 0 !important;
}

.manual-product-card {
  display: grid;
  gap: 10px;
}

.manual-product-main-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.manual-product-main-row #manualProductName,
.manual-product-main-row #manualProductSkuZumstein {
  min-width: 220px;
  flex: 0 1 260px;
}

.manual-product-main-row #manualProductVkA {
  width: 140px;
}

.manual-product-more summary {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--ci-muted);
}

.manual-product-more-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 3px !important;
  background: #fff !important;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4 4.7 8.9 9.8 3.8' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1080px) {
  .tabs {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 6px;
  }

  .tabs button {
    border-left: 0 !important;
    border-bottom: 2px solid transparent !important;
    padding: 10px 12px;
    font-size: 10px;
  }

  .sidebar-brand {
    display: none;
  }

  .tabs button.active {
    border-bottom-color: var(--ci-primary) !important;
  }

  .topbar,
  main {
    margin-left: 0;
    left: 0;
  }

  .topbar {
    position: sticky;
  }

  main {
    margin-top: 0;
    padding: 18px !important;
  }

  .dashboard-search-card input {
    flex-basis: 100%;
    max-width: 100%;
  }

  #appShell.detail-panel-open main {
    margin-right: 0;
  }

  #dashboardDetailWrap {
    width: min(420px, 92vw);
  }
}

/* --- 2026-03 Precision Refinements --- */
main {
  padding: 40px !important;
}

.tab-panel.active > * + * {
  margin-top: 32px !important;
}

.topbar {
  justify-content: space-between !important;
}

.topbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.topbar-brand .brand-kicker {
  margin: 0;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  color: var(--ci-muted) !important;
}

.topbar-brand h1 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ci-panel-dark);
}

.tabs {
  padding-top: 10px !important;
}

.sidebar-brand {
  display: none !important;
}

.tabs .sidebar-user {
  margin-top: auto;
  padding: 14px 12px 16px;
  width: 100%;
}

.tabs .sidebar-user .user-badge {
  width: 100%;
  min-height: 36px;
  border-radius: 4px !important;
  border-color: rgba(228, 212, 218, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.tabs .sidebar-user .user-menu {
  right: 12px;
  left: 12px;
  min-width: 0;
}

.tab-panel > h2 {
  font-size: 20px !important;
  letter-spacing: 0.08em !important;
}

.tab-panel > h2::before {
  content: none !important;
  display: none !important;
}

.tab-panel > h2::after {
  width: 32px !important;
  height: 2px !important;
}

.tab-panel h3::before,
.tab-panel h4::before {
  content: none !important;
  display: none !important;
}

.tab-panel h3,
.tab-panel h4 {
  padding-left: 0 !important;
}

.cards,
.dashboard-search-card,
.actions,
.import-card,
.table-wrap,
#auditWrap,
.prices-table-layout,
.prices-actions-wrap,
.user-admin-card,
.connection-row,
.dropzone,
.format-hints {
  border: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

.card {
  padding: 20px !important;
  border: 0 !important;
  border-top: 2px solid var(--ci-border) !important;
}

.dashboard-search-card {
  max-width: 100%;
}

.dashboard-search-card input {
  max-width: 60% !important;
  flex-basis: 60% !important;
}

#dashboardProductSearchBtn {
  padding: 8px 20px !important;
}

#pricesTable {
  border: 1px solid var(--ci-border) !important;
}

#pricesActionTable {
  border-top: 1px solid var(--ci-border) !important;
  border-right: 1px solid var(--ci-border) !important;
  border-bottom: 1px solid var(--ci-border) !important;
}

.landing-card {
  border-radius: 6px !important;
}

.landing .landing-form input,
.landing .landing-form button,
#landingLangDe,
#landingLangFr {
  border-radius: 4px !important;
}

.landing-lang-toggle,
.user-lang-toggle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px !important;
}

.landing-lang-btn {
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  padding: 5px 12px !important;
  min-height: 0 !important;
  height: auto !important;
}

.landing .brand-kicker {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
}

#landingLoginBtn {
  border-radius: 4px !important;
}

.manual-product-main-row,
.manual-product-more-grid {
  gap: 12px !important;
}

.manual-product-main-row input,
.manual-product-main-row select,
.manual-product-main-row button,
.manual-product-more-grid input,
.manual-product-more-grid select {
  min-height: 40px !important;
  height: 40px !important;
}

.manual-product-main-row input::placeholder,
.manual-product-more-grid input::placeholder {
  font-size: 12px !important;
  color: #9a7080 !important;
  font-weight: 400;
}

.manual-product-more {
  margin-top: 2px;
}

.manual-product-more summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #7A5060 !important;
  list-style: none;
  padding: 0;
}

.manual-product-more summary::-webkit-details-marker {
  display: none;
}

.manual-product-more summary::after {
  content: '\203A';
  font-size: 11px;
  transform: translateY(-1px);
}

.manual-product-more[open] summary::after {
  transform: rotate(90deg);
}

body,
button,
.card,
.import-card,
.actions,
.dashboard-search-card,
.landing,
.tab-panel,
.topbar,
.tabs,
.overlay-card {
  background-image: none !important;
}

.card::after,
.landing::before,
.landing::after,
.landing-card::after {
  display: none !important;
}

@media (max-width: 1080px) {
  main {
    padding: 24px !important;
  }

  .tabs .sidebar-user {
    margin-top: 0;
    margin-left: auto;
    width: auto;
    padding: 0;
  }

  .tabs .sidebar-user .user-badge {
    width: auto;
    min-width: 42px;
    color: var(--ci-panel-dark) !important;
    background: #fff !important;
  }

  .dashboard-search-card input {
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* --- 2026-03 Refinement v4: Dashboard & Navigation --- */
.topbar {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #E4D4DA !important;
}

.topbar-page-name {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1E0C13;
}

.topbar-brand {
  display: none !important;
}

.auth {
  display: flex;
  align-items: center;
  gap: 0;
}

.tabs {
  height: 100vh !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  display: block !important;
  padding: 14px 20px 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(228, 212, 218, 0.18);
}

.sidebar-brand h1 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-brand p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tabs button:last-of-type {
  margin-bottom: 0;
}

.tabs .sidebar-user {
  display: none !important;
}

.user-badge {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid #AD093D !important;
  background: #AD093D !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
}

.user-menu {
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(30, 12, 19, 0.08) !important;
  padding: 4px 0;
}

.user-menu .btn-subtle {
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1E0C13 !important;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  justify-content: flex-start;
  padding: 10px 16px !important;
}

.user-menu .btn-subtle:hover {
  background: #F5E8ED !important;
  color: #AD093D !important;
}

.card {
  border: 1px solid #E4D4DA !important;
  border-top-width: 2px !important;
  background: #FFFFFF !important;
}

.dashboard-search-card {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.cards,
#auditWrap,
.dashboard-audit-head,
.actions,
.import-card,
.prices-table-layout,
.prices-actions-wrap,
.table-wrap {
  border: 0 !important;
  box-shadow: none !important;
}

#auditWrap {
  background: transparent !important;
  padding: 0 !important;
  min-height: 220px;
}

#audit {
  min-height: 220px;
}

#audit .empty-state-block {
  min-height: 220px;
  justify-content: center;
  gap: 12px;
}

#audit .empty-state-icon {
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3.5h7l4 4V20a.5.5 0 0 1-.5.5h-10A.5.5 0 0 1 7 20V3.5Z' stroke='%23AD093D' stroke-width='1.4'/%3E%3Cpath d='M14 3.5V8h4' stroke='%23AD093D' stroke-width='1.4'/%3E%3Cpath d='M9.5 12.5h5M9.5 15.5h5' stroke='%23AD093D' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

#audit .empty-state-block p {
  margin: 0;
  font-size: 9px;
  color: #9a7080;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tab-panel h3,
.tab-panel h4,
.card h3 {
  padding-left: 0 !important;
}

.card h3::before,
.tab-panel h3::before,
.tab-panel h4::before {
  content: none !important;
}

@media (max-width: 1080px) {
  .topbar-page-name {
    display: none;
  }
}

/* --- 2026-03 Refinement v5: Comprehensive Fixes --- */
.topbar {
  display: none !important;
}

main {
  margin-top: 0 !important;
  margin-left: var(--sidebar-width) !important;
}

.tabs {
  height: 100vh !important;
  padding: 0 !important;
}

.sidebar-brand {
  padding: 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(228, 212, 218, 0.18);
}

.sidebar-brand img {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
  filter: brightness(0) invert(1);
}

.sidebar-brand p {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.tabs button {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.5) !important;
  padding: 8px 20px 8px 22px !important;
}

.tabs button.active {
  border-left: 2px solid #AD093D !important;
  background: rgba(173, 9, 61, 0.1) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding-left: 20px !important;
}

.tabs .sidebar-user {
  display: block !important;
  margin-top: auto !important;
  padding: 12px 14px 14px !important;
}

.tabs .sidebar-user .user-badge {
  margin-left: auto;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #AD093D !important;
  background: #AD093D !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.tabs .sidebar-user .user-menu {
  right: 0;
  left: auto;
  min-width: 190px;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(30, 12, 19, 0.08) !important;
  padding: 4px 0;
}

.tabs .sidebar-user .user-menu .btn-subtle {
  font-family: "Futura PT";
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 10px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: #1E0C13 !important;
  border-radius: 0 !important;
}

.tabs .sidebar-user .user-menu .btn-subtle:hover {
  background: #F5E8ED !important;
  color: #AD093D !important;
}

#dashboardWelcome {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  margin: 0 !important;
  color: #1E0C13 !important;
}

#dashboardWelcome::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #AD093D;
  margin-top: 12px;
}

.audit-filters select,
.audit-filters button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  font-family: "Futura PT";
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #7A5060 !important;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 !important;
  background: #fff;
  border: 1px solid #E4D4DA;
}

.card {
  border: 0 !important;
  border-right: 1px solid #E4D4DA !important;
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
  border-radius: 0 !important;
  background: #fff !important;
  min-height: 0;
}

.cards .card:last-child {
  border-right: 0 !important;
}

.card[data-metric="total"] {
  border-top: 2px solid #AD093D !important;
}

.card[data-metric="langeNichtGeprueft"] {
  border-top: 2px solid #69839A !important;
}

.card[data-metric]:not([data-metric="total"]):not([data-metric="langeNichtGeprueft"]) {
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
}

.dashboard-search-card,
.dashboard-audit-head,
#auditWrap {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#pricesTable {
  table-layout: fixed !important;
}

#pricesTable th,
#pricesTable td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pricesTable th.col-sku-mpb,
#pricesTable td.col-sku-mpb {
  width: 100px !important;
  max-width: 100px !important;
}

#pricesTable th.col-sku-zs,
#pricesTable td.col-sku-zs {
  width: 110px !important;
  max-width: 110px !important;
}

#pricesTable th.price-col-head,
#pricesTable td.price-value-cell {
  width: 80px !important;
  max-width: 80px !important;
  text-align: right !important;
}
/* In the default (non-expanded) view only EK A/VK A are shown, so there's
   room to give them a bit more width — enough for a 5-digit formatted
   number (e.g. "12'345.00") plus the quick-search filter's funnel icon. The
   expanded view (8 price columns) keeps the narrower 80px to avoid excess
   horizontal scrolling. */
body:not(.show-extended-prices) #pricesTable th.price-col-head,
body:not(.show-extended-prices) #pricesTable td.price-value-cell {
  width: 100px !important;
  max-width: 100px !important;
}

#pricesTable th:nth-child(7),
#pricesTable td:nth-child(7) {
  width: 90px !important;
  max-width: 90px !important;
}

#pricesActionTable,
#pricesActionTable th,
#pricesActionTable td {
  width: 100px !important;
  max-width: 100px !important;
}

#pricesTable th.col-name,
#pricesTable td.col-name {
  width: auto !important;
}

body:not(.show-extended-prices) #pricesTable th:nth-child(n+8),
body:not(.show-extended-prices) #pricesTable td:nth-child(n+8) {
  display: none;
}

#effective .manual-product-more summary {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: #7A5060 !important;
}

#effective .manual-product-more summary::after {
  content: '\203A';
  margin-left: 4px;
}

.record-row .edit-btn {
  display: none !important;
}

.record-row .save-btn,
.record-row .cancel-btn {
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  font-size: 13px;
  border-radius: 4px !important;
}

.record-row .btn-subtle {
  opacity: 0;
  color: #AD093D !important;
  font-size: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.record-row:hover .btn-subtle {
  opacity: 1;
}

input,
select,
button,
.card,
.overlay-card,
.user-menu,
.import-card,
.actions,
.table-wrap {
  border-radius: 4px !important;
}

.card { border-radius: 6px !important; }

.btn-main,
.save-btn,
button:not(.btn-subtle):not(.cancel-btn):not(.landing-lang-btn) {
  background: #AD093D !important;
  border: 1px solid #AD093D !important;
  border-radius: 4px !important;
  color: #fff !important;
}

.btn-subtle,
.cancel-btn,
.edit-btn {
  background: transparent !important;
  border: 1px solid #C9A8B5 !important;
  border-radius: 4px !important;
  color: #7A5060 !important;
}

.details-panel,
#dashboardDetailWrap {
  box-shadow: -4px 0 24px rgba(30, 12, 19, 0.08) !important;
}

.cards,
.import-card,
.actions,
.table-wrap,
#auditWrap,
.overlay-card,
.user-admin-card,
.connection-row,
.dropzone,
.format-hints,
.dashboard-search-card,
.prices-table-layout,
.prices-actions-wrap,
.tab-panel,
main,
.landing,
.landing-card {
  box-shadow: none !important;
  background-image: none !important;
}

@media (max-width: 1080px) {
  .tabs {
    height: auto !important;
  }

  .tabs .sidebar-user {
    margin-top: 0 !important;
    margin-left: auto;
  }
}

/* --- 2026-03 Refinement v6: CI & Usability --- */
:root {
  --radius-btn: 4px;
  --radius-input: 4px;
  --radius-card: 6px;
  --radius-pill: 3px;
}

button,
input,
select,
textarea {
  border-radius: var(--radius-input) !important;
}

button,
.btn-main,
.btn-subtle,
.save-btn,
.cancel-btn,
.edit-btn {
  border-radius: var(--radius-btn) !important;
}

.card,
.import-card,
.actions,
.table-wrap,
.overlay-card,
.user-menu,
.record,
.record-row,
.dashboard-search-card,
#auditWrap,
.prices-table-layout,
.prices-actions-wrap {
  border-radius: var(--radius-card) !important;
}

.status-active,
.status-inactive,
.status-unknown,
.reviewed-badge,
.ki-live-badge,
.pagination button {
  border-radius: var(--radius-pill) !important;
}

.tabs {
  padding-bottom: 0 !important;
}

.tabs button {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
}

.tabs button.active {
  background: rgba(173, 9, 61, 0.12) !important;
  border-left: 2px solid #AD093D !important;
  color: #fff !important;
}

.sidebar-brand {
  padding: 0 !important;
  border: 0 !important;
}

.sidebar-brand img {
  max-width: 120px !important;
  margin: 20px auto 8px 16px;
}

.sidebar-brand p {
  margin: 0 0 10px 16px;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

#dashboardWelcome {
  margin: 0 !important;
}

.dashboard-greeting-kicker {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #AD093D;
  margin-bottom: 6px;
}

.dashboard-greeting-name {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1E0C13;
}

#dashboardWelcome::after {
  width: 32px !important;
}

.cards {
  border: 0 !important;
  background: transparent !important;
}

.card {
  border-radius: 0 !important;
  border-left: 1px solid #E4D4DA !important;
  border-right: 0 !important;
}

.cards .card:first-child {
  border-left: 1px solid #E4D4DA !important;
}

.audit-filters {
  gap: 8px !important;
}

.audit-filters select,
.audit-filters button {
  height: 28px !important;
  min-height: 28px !important;
  width: fit-content !important;
  padding: 0 12px !important;
  font-size: 9px !important;
}

/* Preise Tab - einfaches Layout */
#effective {
  height: 100%;
  min-height: 500px;
}

#effective .prices-table-wrap {
  max-height: 50vh;
  overflow-y: auto;
}

#effective .prices-actions-wrap {
  max-height: 50vh;
  overflow-y: auto;
}

#effective .prices-pagination {
  position: sticky;
  bottom: 0;
  z-index: 99;
}

#effective .prices-table-layout {
  display: flex;
  overflow: hidden;
}

#effective .prices-table-wrap {
  overflow-y: auto;
}

#effective .prices-actions-wrap {
  overflow-y: auto;
}

#effective .prices-pagination {
  position: sticky;
  bottom: 0;
}

.action-cell-inner {
  justify-content: flex-end !important;
}

.reviewed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  background: #e8f5ee;
  color: #1a5c36;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.delete-mini-btn {
  font-size: 10px !important;
  padding: 4px 8px !important;
  border: 1px solid #E4D4DA !important;
  color: #7A5060 !important;
  background: transparent !important;
}

.kebab-wrap {
  position: relative;
}

.kebab-btn {
  width: 24px;
  height: 24px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
  font-size: 18px;
  line-height: 1;
}

.kebab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  border: 1px solid #E4D4DA;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(30, 12, 19, 0.08);
  padding: 4px 0;
  z-index: 15;
}

.kebab-menu button {
  width: 100%;
  justify-content: flex-start;
  border: 0 !important;
  background: transparent !important;
  color: #1E0C13 !important;
  padding: 8px 12px !important;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kebab-menu button:hover {
  background: #F5E8ED !important;
  color: #AD093D !important;
}

#imports .settings-accordion-section {
  border-bottom: 1px solid #E4D4DA;
}

#imports .settings-accordion-trigger {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  color: #1E0C13;
  padding: 14px 0 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  justify-content: space-between;
}

#imports .settings-accordion-trigger:hover {
  color: #AD093D;
}

#imports .settings-accordion-trigger .chevron {
  transition: transform 0.2s ease;
}

#imports .settings-accordion-section:not(.is-open) .settings-accordion-content {
  display: none;
}

#imports .settings-accordion-section.is-open .settings-accordion-trigger .chevron {
  transform: rotate(90deg);
}

input[type="file"] {
  display: none !important;
}

.file-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #C9A8B5;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7A5060;
  background: transparent;
  cursor: pointer;
}

.ui-dialog-card {
  border-radius: 6px !important;
  border: 1px solid #E4D4DA !important;
  box-shadow: 0 8px 32px rgba(30, 12, 19, 0.12) !important;
}

.ui-dialog-head h3 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.ui-dialog-message-line {
  font-family: inherit !important;
  font-size: 13px !important;
}

.ui-dialog-card.dialog-tone-danger {
  border-top: 3px solid #AD093D !important;
}

.landing {
  background: #F6F6F6 !important;
}

.landing::before,
.landing::after {
  display: block !important;
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
}

.landing::before {
  top: -120px;
  left: -100px;
  width: 420px;
  height: 300px;
  background: #E8C4D0;
  opacity: 0.35;
}

.landing::after {
  right: -120px;
  bottom: -100px;
  width: 380px;
  height: 280px;
  background: #D4A8BC;
  opacity: 0.25;
}

.landing-card {
  position: relative;
  z-index: 2;
}

/* --- 2026-03 Refinement v7: Final Consistency Pass --- */
:root {
  --radius-input: 4px;
  --radius-btn: 4px;
  --radius-card: 6px;
  --radius-pill: 3px;
}

input,
select,
textarea {
  border-radius: var(--radius-input) !important;
}

button,
.btn-main,
.btn-subtle,
.pagination button,
#landingLoginBtn,
#suggestionsPrev,
#suggestionsNext {
  border-radius: var(--radius-btn) !important;
}

.card,
.record,
.import-card,
.table-wrap,
.prices-table-layout,
#auditWrap,
#dashboardDetailWrap,
.user-menu,
.ui-dialog-card,
.landing-card {
  border-radius: var(--radius-card) !important;
}

.reviewed-badge,
.ki-live-badge,
.role-chip,
.status-active,
.status-inactive {
  border-radius: var(--radius-pill) !important;
}

button:not(.kebab-btn):not(.settings-accordion-trigger):not(.user-badge):not(.landing-lang-btn):not(.inline-field-save):not(.icon-btn):not(.jump-btn),
.save-btn,
.edit-btn,
.cancel-btn,
.pagination button,
#landingLoginBtn {
  min-height: 34px;
  padding: 8px 18px !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

button:not(.btn-main):not(.kebab-btn):not(.settings-accordion-trigger):not(.user-badge):not(.landing-lang-btn):not(.inline-field-save):not(.icon-btn):not(.jump-btn),
.btn-subtle,
.edit-btn,
.cancel-btn,
.delete-mini-btn {
  background: transparent !important;
  border: 1px solid #C9A8B5 !important;
  color: #7A5060 !important;
}

button.btn-main,
.save-btn,
#landingLoginBtn,
#createManualProductBtn,
#previewManualBulkBtn,
#importManualBulkBtn,
#acceptSelectedBtn,
#openImportStep1Btn {
  background: #AD093D !important;
  border: 1px solid #AD093D !important;
  color: #fff !important;
}

button:disabled,
.btn-main:disabled,
.btn-subtle:disabled,
#landingLoginBtn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.tabs {
  height: 100vh !important;
}

.sidebar-brand {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 0 !important;
}

.sidebar-brand img {
  max-width: 120px !important;
  margin: 20px auto 8px 16px !important;
}

.sidebar-brand p {
  margin: 0 0 10px 16px !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35) !important;
}

.tabs button {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  border-left: 2px solid transparent !important;
}

.tabs button.active {
  border-left: 2px solid #AD093D !important;
  background: rgba(173, 9, 61, 0.15) !important;
  color: #fff !important;
}

#dashboardWelcome {
  margin: 0 !important;
}

.dashboard-greeting-kicker {
  display: block;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #AD093D !important;
  margin-bottom: 6px;
}

.dashboard-greeting-name {
  display: block;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: #1E0C13;
}

#dashboardWelcome::after {
  width: 32px !important;
  height: 2px !important;
}

.cards {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cards .card {
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #fff !important;
}

.cards .card[data-metric="total"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="langeNichtGeprueft"] { border-top: 2px solid #69839A !important; }
.cards .card:not([data-metric="total"]):not([data-metric="langeNichtGeprueft"]) { border-top: 2px solid #E4D4DA !important; }

.cards::before,
.cards::after,
.dashboard-search-card::before,
.dashboard-search-card::after {
  content: none !important;
}

.dashboard-audit-head,
#auditWrap,
.dashboard-search-card,
.actions,
.import-card,
.prices-table-layout {
  border: 0 !important;
  box-shadow: none !important;
}

.audit-filters {
  gap: 8px !important;
}

.audit-filters select,
.audit-filters button,
#auditMonths,
#auditUser,
#toggleAuditBtn {
  width: fit-content !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #7A5060 !important;
}

#pricesTable {
  table-layout: fixed !important;
}

.prices-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.prices-actions-wrap {
  position: sticky !important;
  right: 0 !important;
  z-index: 6 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#pricesActionTable th.col-action,
#pricesActionTable td.col-action {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  text-align: right !important;
}

.action-cell-inner {
  justify-content: flex-end !important;
}

.reviewed-badge {
  background: #e8f5ee !important;
  border: 1px solid #cbe4d6 !important;
  color: #1a5c36 !important;
  min-height: 22px;
  padding: 0 8px;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
}

.delete-mini-btn {
  padding: 4px 10px !important;
  font-size: 10px !important;
  border: 1px solid #E4D4DA !important;
  color: #7A5060 !important;
  background: transparent !important;
}

#master .record-row input {
  background: #F6F6F6 !important;
  border: 1px solid #E4D4DA !important;
}

#master .record-row.editing input:not([disabled]) {
  background: #fff !important;
}

#master .record-row.editing input:not([disabled]):focus {
  border-color: #AD093D !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.08) !important;
}

#master .record-row .inline-field-save {
  margin-left: 8px;
  min-height: 28px;
  padding: 4px 10px !important;
  border: 1px solid #AD093D !important;
  background: #AD093D !important;
  color: #fff !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  border-radius: 4px !important;
}

#master .record-row .save-btn,
#master .record-row .cancel-btn {
  display: none !important;
}

#suggestionSearch,
#suggestionConfidenceFilter,
#suggestionPageSize {
  height: 36px !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}

.pagination button {
  border-radius: 4px !important;
}

.pagination button:disabled {
  opacity: 0.35 !important;
}

.pagination p {
  color: #7A5060 !important;
  font-family: inherit !important;
  font-size: 12px !important;
}

#imports .settings-accordion-trigger {
  color: #1E0C13 !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 14px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

#imports .settings-accordion-section.is-open .settings-accordion-trigger {
  background: transparent !important;
  border-left: 2px solid #AD093D;
  padding-left: 10px !important;
}

#imports .settings-accordion-trigger .chevron {
  color: #AD093D !important;
}

.landing {
  position: relative;
  overflow: hidden;
  background: #F6F6F6 !important;
}

.landing::before,
.landing::after {
  position: fixed !important;
  z-index: 0 !important;
}

.landing-card {
  position: relative !important;
  z-index: 1 !important;
}

/* --- 2026-03 Refinement v8: Live Review Fixes --- */
.tabs button {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 20px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  border-left: none !important;
}

.tabs button.active {
  border-left: 3px solid #AD093D !important;
  background: rgba(173, 9, 61, 0.2) !important;
  color: #ffffff !important;
  padding-left: 17px !important;
}

.dashboard-search-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#dashboardProductSearch {
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  background: #fff !important;
}

.cards .card[data-metric="total"] {
  border-top: 2px solid #AD093D !important;
}

.cards .card[data-metric="langeNichtGeprueft"] {
  border-top: 2px solid #69839A !important;
}

.cards .card[data-metric="nieGeprueft"],
.cards .card[data-metric="noBuyback"],
.cards .card[data-metric="kiPending"] {
  border-top: 2px solid #E4D4DA !important;
}

#toggleManualBulkBtn {
  border: 1px solid #C9A8B5 !important;
  color: #7A5060 !important;
  font-size: 10px !important;
  padding: 7px 14px !important;
  border-radius: 4px !important;
  background: transparent !important;
}

#master input,
#master select,
#master textarea,
#master .record-row input,
#master .record-row select,
#master .record-row textarea {
  border-radius: 4px !important;
  background: #F6F6F6 !important;
  border: 1px solid #E4D4DA !important;
}

#master input:focus,
#master select:focus,
#master textarea:focus,
#master .record-row.editing input:not([disabled]):focus {
  background: #fff !important;
  border-color: #AD093D !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.08) !important;
}

#vkFactors .record-row strong,
#ekFactors .record-row strong {
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #1E0C13 !important;
}

#master .factor-col > h3,
#master #vkFactors .record h4,
#master #ekFactors .record h4,
#master .grid-3 > div > h3,
#master .grid-3 > div .master-data-toggle {
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: #1E0C13 !important;
  border-bottom: 1px solid #E4D4DA !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

#master .grid-3 > div .master-data-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 0 10px 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}

#master .grid-3 > div .master-data-toggle:hover {
  color: #AD093D !important;
}

#master .grid-3 > div .master-data-toggle .chevron {
  transition: transform 0.2s ease !important;
  font-size: 14px !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  flex-shrink: 0 !important;
}

#master .grid-3 > div .master-data-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg) !important;
}

#master .record-row .inline-field-save {
  display: none !important;
}

#master .record-row .inline-row-save {
  border-color: #AD093D !important;
  background: #AD093D !important;
  color: #fff !important;
}

#master .record-row .inline-row-save.is-submitting {
  background: #1a5c36 !important;
  border-color: #1a5c36 !important;
}

#groups .record-row[id^="group-row-"] select[data-category-select] {
  width: 100%;
  min-width: 0;
  cursor: pointer;
  background: #fff !important;
}

.landing::before,
.landing::after {
  opacity: 1 !important;
}

.landing.login-burst::before,
.landing.login-burst::after {
  opacity: 1 !important;
}

.landing-lang-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 6px !important;
}

.landing-lang-btn {
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  min-height: 30px !important;
  min-width: auto !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  background: transparent !important;
  color: #7A5060 !important;
}

.landing-lang-btn.active {
  background: #AD093D !important;
  color: #fff !important;
  border-color: #AD093D !important;
}

/* --- 2026-03 Refinement v9: Technical CSS Cleanup --- */
:root {
  --fs-9: 9px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-16: 16px;
  --fs-28: 28px;
  --r-4: 4px;
  --r-6: 6px;
}

/* Font-size system: only 9 / 12 / 13 / 16 / 28 */
body {
  font-size: var(--fs-13) !important;
}

h1,
h2,
h3,
h4,
.topbar-page-name,
.tab-panel > h2,
.tab-panel > h3,
.tab-panel > h4 {
  font-size: var(--fs-16) !important;
}

p,
span,
div,
label,
li,
input,
select,
textarea,
table,
th,
td,
.hint,
.ui-dialog-message-line,
.pagination p {
  font-size: var(--fs-12) !important;
}

button,
.btn-main,
.btn-subtle,
.tabs button,
.landing-lang-btn,
.reviewed-badge,
.role-chip,
.status-active,
.status-inactive,
.ki-live-label,
.dashboard-greeting-kicker {
  font-size: var(--fs-9) !important;
}

.dashboard-greeting-name,
.cards .card p,
#import-summary-imported,
#import-summary-inserted,
#import-summary-updated,
#import-summary-clarifications,
#card-total,
#card-nie,
#card-stale,
#card-no-buyback,
#card-ki {
  font-size: var(--fs-28) !important;
}

/* Shadow cleanup: only focus ring + detail panel shadow allowed */
*,
*::before,
*::after {
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
#master .record-row.editing input:not([disabled]):focus {
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.08) !important;
}

#dashboardDetailWrap,
.dashboard-detail-panel {
  box-shadow: -4px 0 24px rgba(30, 12, 19, 0.08) !important;
}

/* Radius system: only 4 / 6 / 50% */
input,
select,
textarea,
button,
.btn-main,
.btn-subtle,
.reviewed-badge,
.ki-live-badge,
.role-chip,
.status-active,
.status-inactive,
.pagination button,
.landing-lang-btn,
.file-picker-btn {
  border-radius: var(--r-4) !important;
}

.card,
.record,
.import-card,
.table-wrap,
.prices-table-layout,
#auditWrap,
#dashboardDetailWrap,
.user-menu,
.ui-dialog-card,
.landing-card,
.factor-col,
.tab-panel.active {
  border-radius: var(--r-6) !important;
}

.user-badge,
.avatar,
.user-avatar {
  border-radius: 50% !important;
}

/* Sidebar nav items: no box borders, only active left border */
.tabs button,
.nav-item {
  border: none !important;
  border-left: none !important;
  color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  padding-left: 20px !important;
}

.tabs button.active,
.nav-item.active {
  border-left: 3px solid #AD093D !important;
  background: rgba(173, 9, 61, 0.2) !important;
  color: #ffffff !important;
  padding-left: 17px !important;
}

/* KPI cards: all five have top border */
.cards .card[data-metric="total"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="langeNichtGeprueft"] { border-top: 2px solid #69839A !important; }
.cards .card[data-metric="nieGeprueft"],
.cards .card[data-metric="noBuyback"],
.cards .card[data-metric="kiPending"] { border-top: 2px solid #E4D4DA !important; }

/* Dashboard search container unboxed */
.dashboard-search-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

#dashboardProductSearch {
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  background: #fff !important;
}

/* Import button hierarchy and states */
#acceptSelectedBtn {
  background: #AD093D !important;
  border: 1px solid #AD093D !important;
  color: #fff !important;
}

#undoSuggestionsBtn {
  background: transparent !important;
  border: 1px solid #C9A8B5 !important;
  color: #7A5060 !important;
}

#suggestionsPrev,
#suggestionsNext {
  border-radius: 4px !important;
}

#suggestionsPrev:disabled,
#suggestionsNext:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* Import filter inputs unified */
#suggestionConfidenceFilter,
#suggestionPageSize {
  height: 36px !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  background: #fff !important;
}

/* Settings accordion hierarchy */
#imports .settings-accordion-section {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #E4D4DA !important;
}

#imports .settings-accordion-trigger {
  color: #1E0C13 !important;
}

#imports .settings-accordion-section.is-open .settings-accordion-trigger {
  color: #AD093D !important;
}

/* Login waves: visible from first render, no delayed reveal */
.landing::before,
.landing::after {
  opacity: 1 !important;
  animation: none !important;
}

/* v9 shadow hard reset for interactive/components */
button,
.btn-main,
.btn-subtle,
.edit-btn,
.save-btn,
.cancel-btn,
.card,
.record,
.import-card,
.table-wrap,
.prices-table-layout,
.prices-actions-wrap,
.user-menu,
.user-menu-wrap,
.dropdown,
.kebab-menu,
.file-picker-btn,
.landing-card,
.factor-col,
.tab-panel,
.tab-panel.active {
  box-shadow: none !important;
}

/* --- 2026-03 Refinement v10: Visual Alignment Pass --- */
.tabs {
  background: #1E0C13 !important;
  border-right: 1px solid rgba(228, 212, 218, 0.2) !important;
}

.sidebar-brand {
  padding: 18px 16px 10px 16px !important;
}

.sidebar-brand img {
  max-width: 110px !important;
  width: 110px !important;
  filter: brightness(0) invert(1) !important;
  margin: 0 0 8px 0 !important;
}

.sidebar-brand p {
  margin: 0 !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.18em !important;
}

.tabs button,
.nav-item {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding: 9px 20px !important;
}

.tabs button.active,
.nav-item.active {
  border-left: 3px solid #AD093D !important;
  background: rgba(173, 9, 61, 0.22) !important;
  color: #fff !important;
}

.tabs .sidebar-user,
#userMenuWrap.sidebar-user {
  display: flex !important;
  margin-top: auto !important;
  margin-left: 14px !important;
  margin-bottom: 16px !important;
  align-self: flex-start !important;
}

.tabs .sidebar-user .user-badge,
#userBadge.user-badge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #AD093D !important;
  background: #AD093D !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
}

.dashboard-greeting-kicker {
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  color: #AD093D !important;
}

.tab-panel > h2,
#dashboard > h2,
#effective > h2,
#suggestions > h2,
#master > h2,
#imports > h2,
#export > h2,
#backup > h2 {
  font-size: 24px !important;
  letter-spacing: 0.08em !important;
  color: #1E0C13 !important;
}

.card,
.record,
.import-card,
.factor-col,
.table-wrap,
.prices-table-layout,
#dashboardDetailWrap,
#auditWrap {
  background: #fff !important;
  border: 1px solid #E4D4DA !important;
}

#imports .settings-accordion-content {
  background: transparent !important;
  border: none !important;
}

#imports .settings-accordion-section {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(228, 212, 218, 0.5) !important;
}

.cards .card[data-metric="total"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="langeNichtGeprueft"] { border-top: 2px solid #69839A !important; }
.cards .card[data-metric="nieGeprueft"],
.cards .card[data-metric="noBuyback"],
.cards .card[data-metric="kiPending"] { border-top: 2px solid #E4D4DA !important; }

#imports .settings-accordion-section {
  margin-bottom: 0 !important;
}

.landing {
  background: #F6F6F6 !important;
}

.landing::before,
.landing::after {
  filter: none !important;
  border-radius: 0 !important;
  opacity: 0.22 !important;
  animation: none !important;
}

.landing::before {
  top: -140px !important;
  left: -180px !important;
  width: 560px !important;
  height: 420px !important;
  background: #E8C4D0 !important;
  clip-path: polygon(0 18%, 78% 0, 100% 42%, 34% 84%, 0 60%) !important;
}

.landing::after {
  right: -220px !important;
  bottom: -170px !important;
  width: 600px !important;
  height: 430px !important;
  background: #D4A8BC !important;
  clip-path: polygon(20% 0, 100% 24%, 86% 100%, 0 76%) !important;
}

/* --- 2026-03 Refinement v10.1: Sidebar Hard Override --- */
#appShell > nav.tabs {
  background: #1E0C13 !important;
  border-right: 1px solid rgba(228, 212, 218, 0.2) !important;
}

#appShell > nav.tabs .sidebar-brand {
  padding: 18px 16px 10px 16px !important;
  border: none !important;
  background: transparent !important;
}

#appShell > nav.tabs .sidebar-brand img {
  width: 112px !important;
  max-width: 112px !important;
  height: auto !important;
  margin: 0 0 6px 0 !important;
  filter: brightness(0) invert(1) !important;
}

#appShell > nav.tabs .sidebar-brand p {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.42) !important;
}

#appShell > nav.tabs > button {
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.46) !important;
  margin: 0 !important;
  padding: 9px 20px !important;
}

#appShell > nav.tabs > button::before,
#appShell > nav.tabs > button::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

#appShell > nav.tabs > button.active {
  border-left: 3px solid #AD093D !important;
  border-radius: 0 !important;
  background: rgba(173, 9, 61, 0.2) !important;
  color: #fff !important;
}

#appShell > nav.tabs > button:not(.active):hover {
  background: rgba(173, 9, 61, 0.08) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* --- 2026-03 Refinement v11: Consistency Sweep --- */
:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --color-primary: #AD093D;
  --color-ink: #1E0C13;
  --color-muted: #7A5060;
  --color-border: #E4D4DA;
  --color-bg: #F6F6F6;
  --font-size-label: 9.5px;
  --font-size-body: 12px;
  --font-size-value: 12px;
}

* {
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.08) !important;
}

#userBadge,
.user-badge,
.avatar {
  box-shadow: none !important;
  border-radius: 50% !important;
}

input,
select,
textarea,
button,
.btn-main,
.btn-subtle,
.reviewed-badge,
.ki-live-badge,
.role-chip,
.status-active,
.status-inactive,
.pagination button {
  border-radius: var(--radius-sm) !important;
}

.card,
.record,
.import-card,
.factor-col,
.table-wrap,
.prices-table-layout,
#dashboardDetailWrap,
#auditWrap,
.ui-dialog-card,
.landing-card,
.settings-accordion-section,
.settings-accordion-content {
  border-radius: var(--radius-md) !important;
}

#appShell > nav.tabs {
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #1E0C13 !important;
}

#appShell > nav.tabs > button {
  border: none !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

#appShell > nav.tabs > button.active {
  border-left: 3px solid var(--color-primary) !important;
  background: rgba(173, 9, 61, 0.2) !important;
  color: #fff !important;
}

#userMenuWrap.sidebar-user {
  margin-top: auto !important;
  width: 100% !important;
  padding: 16px 20px !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  display: flex !important;
  justify-content: flex-start !important;
}

#appShell > nav.tabs .sidebar-brand p {
  font-size: var(--font-size-label) !important;
  color: rgba(255, 255, 255, 0.42) !important;
}

#newwareRowsBody input[type="text"],
#newwareRowsBody input[type="date"],
#newwareRowsBody input:not([type]),
#newwareRowsBody select {
  width: 100%;
  min-width: 110px;
}

#newwareRowsBody td:first-child {
  width: 36px;
}

#newwareFeed .newware-feed-status-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#newwareFeed .newware-feed-status-card .hint {
  margin: 0;
}

#newwareFeed .newware-feed-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#newwareFeed .newware-feed-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

#newwareFeed #newwareExportTxtLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 380px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

#newwareFeed #pushNewwareExportTabBtn {
  min-width: 260px;
  min-height: 44px;
}

#newwareFeed .table-wrap {
  overflow-x: auto;
  overflow-y: auto;
}

#newwareFeed > h2 {
  position: sticky;
  top: 0;
  z-index: 100;
}

#newwareFeed .actions.import-card.auto-fetch-row,
#newwareFeed .actions.import-card.newware-feed-status-card {
  position: sticky;
  top: 36px;
  z-index: 99;
}

#newwareFeed .table-wrap {
  flex: 1;
  overflow-y: auto;
}

#newwareFeed .table-wrap thead > tr:first-child {
  position: sticky;
  top: 0;
  z-index: 10;
}

#newwareFeed .table-wrap thead > tr.newware-filter-row {
  position: sticky;
  top: 0;
  z-index: 11;
}

#newwareFeed .table-wrap table {
  min-width: 1680px;
}

#newwareFeed .newware-pagination {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

#newwareFeed .newware-pagination .cond-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#newwareFeed #newwarePageSize {
  width: 88px;
  min-width: 88px;
}

#newwareFeed .newware-filter-row th {
  padding-top: 8px;
  padding-bottom: 8px;
}

#newwareFeed .newware-filter-row input {
  width: 100%;
  min-width: 120px;
}

#newwareFeed #newwareOnlyActiveActions {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid #c9a8b5;
  border-radius: 4px;
  background: #fff;
  padding: 0 !important;
  margin: 0;
  margin-right: 8px;
  vertical-align: middle !important;
  transform: translateY(0);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#newwareFeed #newwareOnlyActiveActions:checked {
  background-color: #ad093d;
  border-color: #ad093d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2 6.3 11.5 13 4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

#newwareFeed #newwareSelectAllVisible {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border: 2px solid #c9a8b5;
  border-radius: 3px;
  background: #fff;
  padding: 0 !important;
  margin: 0;
  vertical-align: middle !important;
  cursor: pointer;
}

#newwareFeed #newwareSelectAllVisible:checked {
  background-color: #ad093d;
  border-color: #ad093d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2 6.3 11.5 13 4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

#newwareFeed .auto-fetch-row .cond-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

#newwareRowsBody tr.newware-action-active td {
  background: #f5e8ed !important;
}

#master label,
#effective label,
#imports label,
.record-row label,
.manual-product-card label,
.auto-fetch-row label,
#mappingEditor label {
  color: var(--color-muted) !important;
  font-family: inherit !important;
  font-size: var(--font-size-label) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

input,
select,
textarea,
#master input,
#master select,
#master textarea,
#effective input,
#effective select,
#imports input,
#imports select {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 10px !important;
  font-size: var(--font-size-value) !important;
  color: var(--color-ink) !important;
}

input:focus,
select:focus,
textarea:focus {
  background: #fff !important;
  border-color: var(--color-primary) !important;
}

#master h3,
#master h4,
#effective h3,
#suggestions h3,
#imports h3,
#imports h4,
.factor-col > h3,
#vkFactors .record h4,
#ekFactors .record h4 {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-ink) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

.cards .card h3 {
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  line-height: 1.2 !important;
  min-height: 2em !important;
  display: flex !important;
  align-items: flex-start !important;
}

#pricesTable thead th,
#pricesActionTable thead th {
  font-family: inherit !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

#effective .manual-product-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#effective .manual-product-card::before,
#effective .manual-product-card::after {
  content: none !important;
}

.landing::before,
.landing::after {
  opacity: 1 !important;
  animation: none !important;
}

/* --- 2026-03 Refinement v12: Brand, Avatar Dropdown, Landing Split --- */
#appShell > nav.tabs {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  background: #1E0C13 !important;
}

#appShell > nav.tabs .sidebar-brand {
  padding: 24px 20px 28px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
}

#appShell > nav.tabs .sidebar-brand img {
  max-width: 130px !important;
  width: 130px !important;
  display: block !important;
  margin: 0 0 6px 0 !important;
  filter: brightness(0) invert(1) !important;
}

#appShell > nav.tabs .sidebar-brand p {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

#appShell > nav.tabs > button[data-tab] {
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 9px 20px !important;
}

#appShell > nav.tabs > button[data-tab]:first-of-type {
  margin-top: 20px !important;
}

#userMenuWrap.sidebar-user {
  position: relative !important;
  margin-top: auto !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}

#userBadge {
  cursor: pointer !important;
  position: relative !important;
}

#userMenu {
  position: absolute !important;
  bottom: 56px !important;
  left: 12px !important;
  width: 176px !important;
  min-width: 176px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  z-index: 100 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#userMenuName {
  padding: 12px 16px !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#userMenu .btn-subtle {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  padding: 10px 16px !important;
  font-family: inherit !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

#userMenu .btn-subtle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* --- 2026-03 Refinement v12.1: Landing + Sidebar + Avatar Final --- */
#appShell > nav.tabs .sidebar-brand {
  padding: 24px 20px 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#appShell > nav.tabs .sidebar-brand img {
  max-width: 130px !important;
  width: 130px !important;
  margin-bottom: 6px !important;
}

#appShell > nav.tabs .sidebar-brand p {
  font-size: 9px !important;
  letter-spacing: 0.3em !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

#appShell > nav.tabs > button[data-tab]:first-of-type {
  margin-top: 16px !important;
}

#userMenuWrap.sidebar-user {
  margin-top: auto !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#userBadge {
  cursor: pointer !important;
  position: relative !important;
}

#userMenu {
  position: fixed !important;
  bottom: 64px !important;
  left: 12px !important;
  width: 180px !important;
  min-width: 180px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  z-index: 200 !important;
  overflow: hidden !important;
}

#userMenuName {
  padding: 12px 16px !important;
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#userMenu .btn-subtle {
  padding: 10px 16px !important;
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer !important;
}

#userMenu .btn-subtle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

/* Clean landing layout without !important specificity conflicts */
.landing {
  display: flex;
  min-height: 100vh;
  background: #F6F6F6;
  position: relative;
}

.landing-split {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
}

.landing-side-left {
  flex: 0 0 45%;
  background: #1E0C13;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.landing-side-right {
  flex: 1;
  background: #F6F6F6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 10% 48px 8%;
  position: relative;
}

.landing-side-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(320px, 100%);
}

.landing-side-logo {
  width: 100%;
  max-width: 260px;
  filter: brightness(0) invert(1);
}

.landing-side-accent {
  display: block;
  width: 32px;
  height: 2px;
  background: #AD093D;
  margin: 16px 0 12px;
}

.landing-side-claim {
  font-family: inherit;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
}

.landing::before,
.landing::after {
  content: none;
}

.landing-corner-left {
  display: none;
}

.landing-corner-right {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 40;
}

.landing-lang-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
}

#landingLangDe,
#landingLangFr {
  font-family: inherit;
  font-size: 9px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 5px 12px;
}

#landingLangDe.active {
  background: #AD093D;
  color: #fff;
  border: 1px solid #AD093D;
}

#landingLangFr,
#landingLangDe:not(.active),
#landingLangFr:not(.active) {
  background: transparent;
  color: #7A5060;
  border: 1px solid #E4D4DA;
}

.landing-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.landing-form {
  width: 100%;
  max-width: 400px;
}

.landing-form input,
.landing-form button,
#landingLoginBtn {
  width: 100%;
}

.landing-form input {
  height: 44px;
  border: 1px solid #E4D4DA;
  border-radius: 4px;
  padding: 0 14px;
  font-size: 13px;
  background: #fff;
}

#landingLoginBtn {
  height: 44px;
  background: #AD093D;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 900px) {
  .landing-split {
    flex-direction: column;
  }
  .landing-side-left,
  .landing-side-right {
    flex: 1 1 auto;
    width: 100%;
    padding: 24px;
  }
  .landing-corner-right {
    top: 12px;
    right: 16px;
  }
}

/* --- 2026-03 Refinement v12.2: Avatar Menu Visibility Hard Fix --- */
#userMenu.hidden {
  display: none !important;
}

#userMenu:not(.hidden) {
  display: block !important;
}

/* --- 2026-03 Refinement v12.3: Sidebar Position + JU Click Hard Fix --- */
#appShell > nav.tabs {
  justify-content: flex-start !important;
}

#appShell > nav.tabs .sidebar-brand {
  order: 0 !important;
  margin-top: 0 !important;
  align-self: stretch !important;
}

#appShell > nav.tabs > button[data-tab] {
  order: 1 !important;
  flex: 0 0 auto !important;
}

#userMenuWrap.sidebar-user {
  order: 2 !important;
  margin-top: auto !important;
  z-index: 260 !important;
}

#userBadge {
  pointer-events: auto !important;
  z-index: 261 !important;
}

#userMenu {
  z-index: 262 !important;
}

/* --- 2026-03 Refinement v12.4: JS-Independent User Menu Fallback --- */
#userMenuWrap.sidebar-user #userMenu {
  display: none !important;
}

#userMenuWrap.sidebar-user:hover #userMenu,
#userMenuWrap.sidebar-user:focus-within #userMenu,
#userMenuWrap.sidebar-user #userMenu:not(.hidden) {
  display: block !important;
}

#userMenuWrap.sidebar-user {
  pointer-events: auto !important;
}

#userBadge {
  pointer-events: auto !important;
}

/* --- 2026-03 Refinement v12.5: Force Visible User Menu Content --- */
#userMenuWrap.sidebar-user:hover #userMenu.hidden,
#userMenuWrap.sidebar-user:focus-within #userMenu.hidden,
#userMenuWrap.sidebar-user:hover #userMenu,
#userMenuWrap.sidebar-user:focus-within #userMenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 12px !important;
  bottom: 72px !important;
  width: 180px !important;
  min-height: 112px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  z-index: 9999 !important;
}

#userMenuWrap.sidebar-user:hover #userMenuName,
#userMenuWrap.sidebar-user:focus-within #userMenuName {
  display: block !important;
  color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
}

#userMenuWrap.sidebar-user:hover #userMenu .btn-subtle,
#userMenuWrap.sidebar-user:focus-within #userMenu .btn-subtle {
  display: flex !important;
  width: 100% !important;
  padding: 10px 16px !important;
  color: rgba(255,255,255,0.78) !important;
  background: transparent !important;
  border: 0 !important;
}

/* --- 2026-03 Refinement v12.6: Wrapper-State User Menu --- */
#userMenuWrap.sidebar-user {
  position: relative !important;
}

#userMenuWrap.sidebar-user #userMenu {
  display: none !important;
}

#userMenuWrap.sidebar-user.menu-open #userMenu,
#userMenuWrap.sidebar-user:hover #userMenu,
#userMenuWrap.sidebar-user:focus-within #userMenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 12px !important;
  bottom: 72px !important;
  width: 180px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
  z-index: 10001 !important;
}

#userMenuWrap.sidebar-user.menu-open #userMenuName,
#userMenuWrap.sidebar-user.menu-open #userMenu .btn-subtle {
  display: block !important;
}

/* --- 2026-03 Refinement v12.7: Persistent Sidebar User Menu Fallback --- */
#userMenuWrap.sidebar-user {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#userMenuWrap.sidebar-user #userMenu {
  display: block !important;
  position: static !important;
  width: calc(100% - 0px) !important;
  min-width: 0 !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  background: rgba(42, 16, 24, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  z-index: auto !important;
}

#userMenuWrap.sidebar-user #userMenuName {
  display: block !important;
}

#userMenuWrap.sidebar-user #userMenu .btn-subtle {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

/* --- 2026-03 Refinement v12.8: Stop User Menu Flicker --- */
#userMenuWrap.sidebar-user,
#userMenuWrap.sidebar-user:hover,
#userMenuWrap.sidebar-user:focus-within,
#userMenuWrap.sidebar-user.menu-open {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#userMenuWrap.sidebar-user #userMenu,
#userMenuWrap.sidebar-user:hover #userMenu,
#userMenuWrap.sidebar-user:focus-within #userMenu,
#userMenuWrap.sidebar-user.menu-open #userMenu,
#userMenuWrap.sidebar-user #userMenu.hidden {
  display: block !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  background: rgba(42, 16, 24, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  z-index: auto !important;
}

#userMenuWrap.sidebar-user #userMenuName,
#userMenuWrap.sidebar-user:hover #userMenuName,
#userMenuWrap.sidebar-user:focus-within #userMenuName {
  display: block !important;
}

#userMenuWrap.sidebar-user #userMenu .btn-subtle,
#userMenuWrap.sidebar-user:hover #userMenu .btn-subtle,
#userMenuWrap.sidebar-user:focus-within #userMenu .btn-subtle {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

/* --- 2026-03 Refinement v13: Static Sidebar User Area --- */
#userMenuWrap.sidebar-user {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#userMenu,
#userBadge,
#userMenuPortal {
  display: none !important;
}

#userMenuWrap .user-static-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: rgba(42, 16, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 10px 12px;
}

#userStaticName {
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

#userMenuWrap .user-logout-btn {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#userMenuWrap .user-logout-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

#userMenuWrap .user-lang-toggle {
  display: inline-flex !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn {
  min-width: 40px !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn.active {
  background: #AD093D !important;
  color: #fff !important;
  border: 1px solid #AD093D !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn:not(.active) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: rgba(255, 255, 255, 0.74) !important;
}

/* --- 2026-03 Refinement v14: Landing Edge-to-Edge + Cleanup --- */
#landing.landing:not(.hidden) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#landing .landing-split {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
}

#landing .landing-side-left,
#landing .landing-side-right {
  height: 100dvh;
  min-height: 100dvh;
}

/* Remove accent + claim under logo */
#landing .landing-side-accent,
#landing .landing-side-claim {
  display: none !important;
}

/* Hide red scrollbar on landing */
#landing,
#landing * {
  scrollbar-width: none;
}

#landing::-webkit-scrollbar,
#landing *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* --- 2026-03 Refinement v15: Minimal Sidebar Footer --- */
#userMenuWrap.sidebar-user {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}

#userMenuWrap .user-static-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  gap: 6px !important;
}

#userStaticName {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

#userMenuWrap .user-logout-btn {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  line-height: 1;
}

#userMenuWrap .user-logout-btn:hover {
  background: transparent !important;
  color: #fff !important;
}

/* --- 2026-03 Refinement v16: Sidebar Footer Polish --- */
#userStaticName {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #ffffff !important;
}

#userMenuWrap .user-logout-btn {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

#userMenuWrap .user-logout-btn .door-icon {
  display: inline-block;
  width: 10px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  position: relative;
  box-sizing: border-box;
}

#userMenuWrap .user-logout-btn .door-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 5px;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

#userMenuWrap .user-logout-btn:hover {
  color: #fff !important;
}

#userMenuWrap .user-lang-toggle {
  gap: 6px !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn {
  min-width: 38px !important;
  min-height: 28px !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn.active {
  background: #AD093D !important;
  color: #fff !important;
  border-color: #AD093D !important;
}

/* --- 2026-03 Refinement v17: Clean Sidebar Footer Row --- */
#userMenuWrap.sidebar-user {
  margin-top: auto !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-direction: row !important;
  position: relative !important;
  background: transparent !important;
}

#userBadge {
  display: inline-flex !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #AD093D !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#userNameBtn {
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: inherit !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#logoutIconBtn {
  margin-left: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
}

#logoutIconBtn:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

#logoutIconBtn svg {
  display: block;
}

#userMenuWrap .user-lang-toggle {
  margin-left: 8px !important;
  display: inline-flex !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn {
  min-width: 34px !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.65) !important;
}

#userMenuWrap .user-lang-toggle .landing-lang-btn.active {
  border-color: #AD093D !important;
  background: #AD093D !important;
  color: #fff !important;
}

/* dropdown only for avatar/name click */
#userMenuWrap #userMenu {
  display: none !important;
  position: absolute !important;
  left: 12px !important;
  bottom: 64px !important;
  width: 180px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  z-index: 300 !important;
}

#userMenuWrap.menu-open #userMenu {
  display: block !important;
}

#userMenuWrap #userMenu .btn-subtle {
  width: 100% !important;
  text-align: left !important;
  padding: 10px 16px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

#userMenuWrap #userMenu .btn-subtle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* remove obsolete static panel remnants */
#userMenuWrap .user-static-panel,
#userStaticName,
#userMenuWrap .user-logout-btn,
#userMenuWrap .door-icon,
#userMenuPortal,
#userMenuName {
  display: none !important;
}

/* --- 2026-03 Refinement v18: Preise Layout Stabilization --- */
#effective {
  overflow-x: hidden !important;
}

#effective .manual-product-card {
  width: 100% !important;
  max-width: 100% !important;
}

#effective .manual-product-main-row {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 140px auto auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
}

#effective #manualProductName,
#effective #manualProductSkuZumstein,
#effective #manualProductVkA,
#effective #createManualProductBtn,
#effective #toggleManualBulkBtn {
  width: 100% !important;
  max-width: 100% !important;
}

#effective .manual-product-main-row .cond-toggle-item {
  white-space: nowrap !important;
}

#effective .prices-table-layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) 120px !important;
  overflow: hidden !important;
}

#effective .prices-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#effective #pricesTable,
#effective #pricesActionTable {
  table-layout: fixed !important;
}

#effective #pricesActionTable,
#effective #pricesActionTable th,
#effective #pricesActionTable td {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 120px !important;
}

#effective #pricesActionTable td,
#effective #pricesActionTable th {
  text-align: center !important;
}

#effective .action-cell-inner {
  justify-content: center !important;
}

@media (max-width: 1280px) {
  #effective .manual-product-main-row {
    grid-template-columns: 1fr 1fr 140px auto !important;
  }
  #effective #createManualProductBtn,
  #effective #toggleManualBulkBtn {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  #effective .manual-product-main-row {
    grid-template-columns: 1fr !important;
  }
  #effective #createManualProductBtn,
  #effective #toggleManualBulkBtn {
    grid-column: auto;
  }
}

/* --- 2026-03 Refinement v19: Sidebar Footer & Dropdown Final --- */
#userMenuWrap.sidebar-user {
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: auto !important;
}

#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #AD093D !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  box-shadow: none !important;
}

#userNameBtn {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.45) !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
}

#logoutIconBtn {
  margin-left: auto !important;
  opacity: 0.35 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
}

#logoutIconBtn:hover {
  opacity: 0.8 !important;
}

#logoutIconBtn svg {
  width: 14px !important;
  height: 14px !important;
}

#userMenuWrap .user-lang-toggle {
  display: none !important;
}

#userMenuWrap #userMenu {
  position: fixed !important;
  left: 0 !important;
  bottom: 60px !important;
  width: 200px !important;
  min-width: 200px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  z-index: 200 !important;
}

#userMenuWrap #userMenu .btn-subtle {
  display: block !important;
  width: 100% !important;
  padding: 11px 16px !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#userMenuWrap #userMenu .btn-subtle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

#userMenuName {
  display: none !important;
}

/* --- 2026-03 Refinement v20: Sidebar Dropdown Width + Backend Language --- */
#userMenuWrap.sidebar-user {
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #AD093D !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  box-shadow: none !important;
}

#userNameBtn {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.45) !important;
  text-transform: uppercase !important;
}

#logoutIconBtn {
  margin-left: auto !important;
  opacity: 0.3 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.95) !important;
}

#logoutIconBtn:hover {
  opacity: 0.8 !important;
}

#userMenuWrap #userMenu {
  position: fixed !important;
  bottom: 56px !important;
  left: 8px !important;
  width: 184px !important;
  min-width: 184px !important;
  max-width: 184px !important;
  right: auto !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  z-index: 300 !important;
}

#userMenuWrap.menu-open #userMenu {
  display: block !important;
}

#userMenuWrap #userMenu .user-menu-lang-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  background: transparent !important;
}

#userMenuWrap #userMenu .user-menu-lang-label {
  margin-right: auto !important;
  font-size: 8px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn {
  padding: 3px 8px !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn.active {
  background: #AD093D !important;
  color: #fff !important;
  border-color: #AD093D !important;
}

#userMenuWrap #userMenu .btn-subtle {
  display: block !important;
  width: 100% !important;
  padding: 11px 14px !important;
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#userMenuWrap #userMenu .btn-subtle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* --- 2026-03 Refinement v21: Sidebar footer dropdown final override --- */
#userMenuWrap.sidebar-user {
  margin-top: auto !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}

#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #AD093D !important;
  color: #fff !important;
  border: none !important;
}

#userNameBtn {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.72) !important;
  text-transform: uppercase !important;
}

#logoutIconBtn {
  margin-left: auto !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.95) !important;
  opacity: 0.38 !important;
}

#logoutIconBtn:hover {
  opacity: 0.82 !important;
}

#userMenuWrap .user-lang-toggle,
#userMenuWrap #userMenu .user-menu-lang-row {
  display: flex !important;
}

#userMenuWrap #userMenu {
  position: fixed !important;
  left: 8px !important;
  right: auto !important;
  bottom: 56px !important;
  width: 184px !important;
  min-width: 184px !important;
  max-width: 184px !important;
  z-index: 300 !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

#userMenuWrap #userMenu .user-menu-lang-row {
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

#userMenuWrap #userMenu .user-menu-lang-label {
  margin-right: auto !important;
  font-size: 8px !important;
  color: rgba(255,255,255,0.34) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn {
  border-radius: 3px !important;
  padding: 2px 8px !important;
  min-height: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn.active {
  background: #AD093D !important;
  color: #fff !important;
  border-color: #AD093D !important;
}

#userMenuWrap #userMenu .btn-subtle {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#userMenuWrap #userMenu .btn-subtle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

#dashboardWelcome {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

#dashboardWelcome .dashboard-greeting-kicker,
#dashboardWelcome .dashboard-greeting-name {
  display: inline !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

#dashboardWelcome .dashboard-greeting-kicker {
  font-size: 26px !important;
  font-weight: 400 !important;
  color: #AD093D !important;
  letter-spacing: 0.06em !important;
}

#dashboardWelcome .dashboard-greeting-name {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1E0C13 !important;
  letter-spacing: 0.06em !important;
}

#dashboardProductSearchBtn {
  min-width: 140px !important;
  height: 44px !important;
  padding: 0 24px !important;
}

.cards .card[data-metric="total"] {
  border-top: 2px solid #E4D4DA !important;
}

.cards .card[data-metric="nieGeprueft"],
.cards .card[data-metric="langeNichtGeprueft"] {
  border-top: 2px solid #AD093D !important;
}

.cards .card[data-metric="noBuyback"] {
  border-top: 2px solid #C4C2C2 !important;
}

.cards .card[data-metric="kiPending"] {
  border-top: 2px solid #69839A !important;
}

/* --- 2026-03 Refinement v22: Full Sweep v14 --- */
/* Sidebar dropdown: fixed, full-width inside 200px sidebar */
#userMenuWrap #userMenu {
  position: fixed !important;
  left: 8px !important;
  bottom: 56px !important;
  right: auto !important;
  width: 188px !important;
  min-width: 188px !important;
  max-width: 188px !important;
  z-index: 320 !important;
}

#userMenuWrap #userMenu .user-menu-lang-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

#userMenuWrap #userMenu .user-menu-lang-label {
  margin-right: auto !important;
  font-size: 8px !important;
  color: rgba(255,255,255,0.3) !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn {
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn.active {
  border: none !important;
  background: #AD093D !important;
  color: #fff !important;
}

#userMenuWrap #userMenu .user-menu-lang-row .landing-lang-btn:not(.active) {
  background: transparent !important;
  color: rgba(255,255,255,0.4) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

#userMenuWrap #userMenu .btn-subtle {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: 0.08em !important;
}

/* Avatar roundness */
#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Dashboard greeting: no inline trailing accent mark */
#dashboardWelcome {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
}

#dashboardWelcome::after {
  flex-basis: 100% !important;
  width: 32px !important;
  max-width: 32px !important;
  margin-top: 8px !important;
}

/* KPI consistency */
.cards .card {
  border-radius: 6px !important;
}

.cards .card[data-metric="total"] {
  border-top: 2px solid #E4D4DA !important;
}

.cards .card[data-metric="nieGeprueft"] {
  border-top: 2px solid #AD093D !important;
}

.cards .card[data-metric="langeNichtGeprueft"] {
  border-top: 2px solid #AD093D !important;
}

.cards .card[data-metric="noBuyback"] {
  border-top: 2px solid #C4C2C2 !important;
}

.cards .card[data-metric="kiPending"] {
  border-top: 2px solid #69839A !important;
}

/* Prices: keep action column visible */
.prices-table-layout {
  overflow-x: auto !important;
}

.prices-actions-wrap {
  position: sticky !important;
  right: 0 !important;
  z-index: 2 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#pricesActionTable thead th,
#pricesActionTable tbody td {
  position: sticky !important;
  right: 0 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  z-index: 2 !important;
}

/* Custom toggle switches in prices area */
#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 34px !important;
  height: 20px !important;
  border-radius: 10px !important;
  border: 1px solid #E4D4DA !important;
  background: #E4D4DA !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background 0.2s ease !important;
}

#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.2s ease !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#manualProductNoBuyback:checked::after,
#showAllConditionPrices:checked::after,
#hideNoBuybackRows:checked::after {
  left: 16px !important;
}

/* Settings accordion: no boxed cards, only separators */
#imports .settings-accordion-section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #E4D4DA !important;
}

#imports .settings-accordion-trigger {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
}

#imports .settings-accordion-content {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 16px 0 24px !important;
}

#imports .settings-accordion-trigger .chevron {
  transition: transform 0.2s ease !important;
  transform: rotate(0deg) !important;
}

#imports .settings-accordion-section.is-open .settings-accordion-trigger .chevron,
#imports .settings-accordion-trigger[aria-expanded="true"] .chevron {
  transform: rotate(90deg) !important;
}

/* Master data typography consistency */
#master .factor-card h4,
#master .cond-code,
#master .class-name,
#master .factor-label,
#master .status-label {
  font-family: inherit !important;
  color: #1E0C13 !important;
}

#master .cond-code,
#master .factor-label,
#master .status-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#master .class-name {
  font-size: 12px !important;
  font-weight: 400 !important;
}

#master input,
#master .factor-input,
#master .editable-value {
  border-radius: 4px !important;
  border: 1px solid #E4D4DA !important;
  background: #F6F6F6 !important;
  font-size: 13px !important;
}

/* --- 2026-03 Refinement v23: Final sweep v15 --- */
/* Dropdown fully visible and readable */
#userMenuWrap #userMenu {
  position: fixed !important;
  left: 0 !important;
  bottom: 56px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  overflow: visible !important;
  z-index: 340 !important;
}

#userMenuWrap #userMenu .user-menu-lang-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}

#userMenuWrap #userMenu .user-menu-lang-label {
  margin-right: auto !important;
  white-space: nowrap !important;
}

#userMenuWrap #userMenu .btn-subtle {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: 0.06em !important;
}

/* Greeting accent line removed from inline title */
#dashboardWelcome::after {
  content: none !important;
}

/* KPI top-border mapping */
.cards .card[data-metric="total"] { border-top: 2px solid #E4D4DA !important; }
.cards .card[data-metric="nieGeprueft"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="langeNichtGeprueft"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="noBuyback"] { border-top: 2px solid #C4C2C2 !important; }
.cards .card[data-metric="kiPending"] { border-top: 2px solid #69839A !important; }
.cards .card { border-radius: 6px !important; }

/* Custom switches for no-buyback and filter checkboxes */
.cond-toggle-item input[type="checkbox"]#manualProductNoBuyback,
.cond-toggle-item input[type="checkbox"]#hideNoBuybackRows,
.cond-toggle-item input[type="checkbox"]#showAllConditionPrices,
.cond-toggle-item input[type="checkbox"]#showMarketPriceOverview,
.cond-toggle-item input[type="checkbox"]#market-prices-enabled {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 32px !important;
  height: 18px !important;
  min-width: 32px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  border: 1px solid #E4D4DA !important;
  background: #E4D4DA !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

.cond-toggle-item input[type="checkbox"]#manualProductNoBuyback::after,
.cond-toggle-item input[type="checkbox"]#hideNoBuybackRows::after,
.cond-toggle-item input[type="checkbox"]#showAllConditionPrices::after,
.cond-toggle-item input[type="checkbox"]#showMarketPriceOverview::after,
.cond-toggle-item input[type="checkbox"]#market-prices-enabled::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.2s ease !important;
}

.cond-toggle-item input[type="checkbox"]#manualProductNoBuyback:checked,
.cond-toggle-item input[type="checkbox"]#hideNoBuybackRows:checked,
.cond-toggle-item input[type="checkbox"]#showAllConditionPrices:checked,
.cond-toggle-item input[type="checkbox"]#showMarketPriceOverview:checked,
.cond-toggle-item input[type="checkbox"]#market-prices-enabled:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

.cond-toggle-item input[type="checkbox"]#manualProductNoBuyback:checked::after,
.cond-toggle-item input[type="checkbox"]#hideNoBuybackRows:checked::after,
.cond-toggle-item input[type="checkbox"]#showAllConditionPrices:checked::after,
.cond-toggle-item input[type="checkbox"]#showMarketPriceOverview:checked::after,
.cond-toggle-item input[type="checkbox"]#market-prices-enabled:checked::after {
  left: 15px !important;
}

/* Prices action column sticky and visible */
.prices-table-wrap {
  overflow-x: auto !important;
}

.prices-actions-wrap {
  position: sticky !important;
  right: 0 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  z-index: 3 !important;
}

#pricesActionTable,
#pricesActionTable thead,
#pricesActionTable tbody,
#pricesActionTable tr,
#pricesActionTable th,
#pricesActionTable td {
  background: #fff !important;
}

#pricesActionTable th,
#pricesActionTable td {
  position: sticky !important;
  right: 0 !important;
  border-left: 1px solid #E4D4DA !important;
  z-index: 3 !important;
}

/* Accordion chevron rotation */
#imports .settings-accordion-trigger .chevron {
  transition: transform 0.2s ease !important;
  transform: rotate(0deg) !important;
}

#imports .settings-accordion-section.is-open .settings-accordion-trigger .chevron,
#imports .settings-accordion-trigger[aria-expanded="true"] .chevron {
  transform: rotate(90deg) !important;
}

/* Avatar perfectly round */
#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sidebar nav alignment consistency */
.tabs button[data-tab] {
  padding: 9px 20px !important;
  text-align: left !important;
}

/* --- 2026-03 Fix v17: Footer/Dropdown hard reset --- */
#appShell > nav.tabs {
  overflow: visible !important;
}

#userMenuWrap {
  margin-top: auto !important;
  padding: 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  position: relative !important;
  overflow: visible !important;
}

#userFooterRow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: #AD093D !important;
  color: #fff !important;
  font-family: 'Futura PT', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#userFooterName {
  font-family: 'Futura PT', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  flex: 1 !important;
}

#userLogoutDirectBtn {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  padding: 4px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
}

#userLogoutDirectBtn:hover {
  color: rgba(255,255,255,0.8) !important;
}

#userMenu {
  position: fixed !important;
  bottom: 60px !important;
  left: 0 !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  background: #2a1018 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

#userMenu.hidden {
  display: none !important;
}

#userMenu:not(.hidden) {
  display: block !important;
}

#userMenuLangRow {
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#userMenuLangRow span {
  font-family: 'Futura PT', sans-serif !important;
  font-size: 8px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  margin-right: auto !important;
  white-space: nowrap !important;
}

#userMenuLangToggle {
  font-family: 'Futura PT', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

#userMenuLangToggle.active {
  background: #AD093D !important;
  color: #fff !important;
  border: 1px solid #AD093D !important;
}

#userMenuLangToggle:not(.active) {
  background: transparent !important;
  color: rgba(255,255,255,0.4) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

#userSettingsMenuBtn,
#userLogoutMenuBtn {
  display: block !important;
  width: 100% !important;
  padding: 11px 16px !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  font-family: 'Futura PT', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#userSettingsMenuBtn:hover,
#userLogoutMenuBtn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* --- 2026-03 Fix v18: Sidebar nav back to top --- */
#appShell > nav.tabs {
  justify-content: flex-start !important;
}

#appShell > nav.tabs .sidebar-brand {
  padding: 16px 16px 10px 16px !important;
}

#appShell > nav.tabs > button[data-tab]:first-of-type,
#appShell > nav.tabs > button:first-of-type {
  margin-top: 6px !important;
}

#appShell > nav.tabs > button[data-tab] {
  margin-top: 0 !important;
}

/* --- 2026-03 Fix v19: Sidebar order hard fix --- */
#appShell > nav.tabs {
  display: flex !important;
  flex-direction: column !important;
}

#appShell > nav.tabs .sidebar-brand {
  order: 0 !important;
}

#appShell > nav.tabs > button[data-tab] {
  order: 1 !important;
  flex: 0 0 auto !important;
}

#appShell > nav.tabs > #userMenuWrap {
  order: 2 !important;
  margin-top: auto !important;
}

/* --- 2026-03 Fix v20: Final polish --- */
/* Dashboard KPI border mapping (final) */
.cards .card[data-metric="total"] { border-top: 2px solid #E4D4DA !important; }
.cards .card[data-metric="nieGeprueft"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="langeNichtGeprueft"] { border-top: 2px solid #AD093D !important; }
.cards .card[data-metric="noBuyback"] { border-top: 2px solid #C4C2C2 !important; }
.cards .card[data-metric="kiPending"] { border-top: 2px solid #69839A !important; }

/* Preise action column: sticky and readable */
#effective .prices-table-layout {
  display: block !important;
  overflow-x: auto !important;
}

#effective .prices-table-wrap {
  display: block !important;
  overflow-x: auto !important;
}

#effective .prices-actions-wrap {
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  z-index: 8 !important;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

#effective #pricesActionTable,
#effective #pricesActionTable th,
#effective #pricesActionTable td {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

#effective #pricesActionTable th,
#effective #pricesActionTable td,
#effective #pricesActionTable .col-action {
  position: sticky !important;
  right: 0 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  z-index: 9 !important;
}

#effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: stretch !important;
}

#effective #pricesActionTable .price-action-btn,
#effective #pricesActionTable .reviewed-badge {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Landing center alignment */
#landing .landing-side-left,
#landing .landing-side-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#landing .landing-side-content {
  margin: 0 auto !important;
}

#landing .landing-card {
  width: min(380px, 90%) !important;
  margin: 0 auto !important;
}

/* Landing DE/FR pills standalone (no shared frame) */
#landing .landing-lang-toggle {
  display: inline-flex !important;
  gap: 6px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#landing #landingLangDe,
#landing #landingLangFr {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  color: #c4adb8 !important;
}

#landing #landingLangDe.active,
#landing #landingLangFr.active {
  background: none !important;
  border: none !important;
  color: #ad093d !important;
}

#landing #landingLangDe:not(.active),
#landing #landingLangFr:not(.active) {
  background: none !important;
  border: none !important;
  color: #c4adb8 !important;
}

/* Sidebar avatar exact circle */
#userBadge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* --- 2026-03 Fix v21: Prices action row inline --- */
#effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

#effective #pricesActionTable .price-action-btn,
#effective #pricesActionTable .reviewed-badge {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* --- 2026-03 Fix v22: Preise table/action alignment restore --- */
#effective .prices-table-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 140px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

#effective .prices-table-wrap {
  display: block !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#effective .prices-actions-wrap {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  z-index: 3 !important;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  border-left: 1px solid #E4D4DA !important;
  background: #fff !important;
}

#effective #pricesActionTable {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  table-layout: fixed !important;
}

#effective #pricesActionTable th,
#effective #pricesActionTable td,
#effective #pricesActionTable .col-action {
  position: static !important;
  right: auto !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
}

#effective #pricesActionTable .price-action-btn,
#effective #pricesActionTable .reviewed-badge {
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- 2026-03 Fix v23: Preise seam + corner alignment --- */
#effective .prices-table-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 140px !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
}

#effective .prices-table-wrap,
#effective .prices-actions-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

#effective .prices-actions-wrap {
  border-left: 1px solid #E4D4DA !important;
}

#effective #pricesTable,
#effective #pricesActionTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

#effective #pricesTable thead tr,
#effective #pricesActionTable thead tr,
#effective #pricesTable tbody tr,
#effective #pricesActionTable tbody tr {
  border: 0 !important;
}

#effective #pricesActionTable th,
#effective #pricesActionTable td {
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
  border-bottom: 0 !important;
}

#effective #pricesActionTable thead tr:first-child th {
  border-top: 0 !important;
}

#effective #pricesActionTable .action-col-head,
#effective #pricesActionTable .action-col-filter,
#effective #pricesActionTable td.col-action {
  border-radius: 0 !important;
}

/* remove decorative tail causing bottom misalignment */
#effective .prices-actions-wrap::after {
  display: none !important;
  content: none !important;
}

/* --- 2026-03 Fix v24: Row height/line alignment (SKU MPB vs Aktion) --- */
#effective #pricesTable thead tr:first-child th,
#effective #pricesActionTable thead tr:first-child th {
  vertical-align: middle !important;
}

#effective #pricesTable .filter-row th,
#effective #pricesActionTable .filter-row th {
  height: 52px !important;
  min-height: 52px !important;
  vertical-align: middle !important;
}

#effective #pricesTable tbody tr,
#effective #pricesActionTable tbody tr {
  height: 48px !important;
  min-height: 48px !important;
}

#effective #pricesTable tbody tr td,
#effective #pricesActionTable tbody tr td {
  vertical-align: middle !important;
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
}

#effective #pricesActionTable tbody tr:first-child td,
#effective #pricesTable tbody tr:first-child td {
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
}

#effective #pricesActionTable .action-cell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#effective #pricesActionTable .action-cell-inner {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- 2026-03 Fix v25: Unified action column in main prices table --- */
#effective .prices-table-layout {
  display: block !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
}

#effective .prices-actions-wrap {
  display: none !important;
}

#effective .prices-table-wrap {
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#effective #pricesTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
}

#effective #pricesTable th.col-action,
#effective #pricesTable td.col-action {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  position: sticky !important;
  right: 0 !important;
  z-index: 6 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  vertical-align: middle !important;
}

#effective #pricesTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

#effective #pricesTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
}

#effective #pricesTable .price-action-btn,
#effective #pricesTable .reviewed-badge {
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- 2026-03 Fix v26: Restore sticky action column --- */
#effective .prices-table-layout {
  overflow: visible !important;
}

#effective .prices-table-wrap {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#effective #pricesTable th.col-action {
  position: sticky !important;
  right: 0 !important;
  z-index: 20 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#effective #pricesTable td.col-action {
  position: sticky !important;
  right: 0 !important;
  z-index: 15 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#effective #pricesTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

/* --- 2026-03 Fix v27: Sticky action column hard (single table, Safari-safe) --- */
#effective .prices-table-layout,
#effective .prices-table-wrap {
  overflow: visible !important;
}

#effective .prices-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#effective #pricesTable {
  width: max-content !important;
  min-width: 100% !important;
}

#effective #pricesTable thead th:last-child,
#effective #pricesTable tbody td:last-child,
#effective #pricesTable th.col-action,
#effective #pricesTable td.col-action {
  position: -webkit-sticky !important;
  position: sticky !important;
  right: 0 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#effective #pricesTable thead th:last-child,
#effective #pricesTable th.col-action {
  z-index: 30 !important;
}

#effective #pricesTable tbody td:last-child,
#effective #pricesTable td.col-action {
  z-index: 20 !important;
}

#effective #pricesTable tr.manual-price-row td:last-child,
#effective #pricesTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

/* --- 2026-03 Fix v28: Ensure action/buttons + extended info visibility --- */
/* Never clip action controls */
#effective #pricesTable th.col-action,
#effective #pricesTable td.col-action {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
}

#effective #pricesTable .action-cell-inner {
  gap: 8px !important;
}

#effective #pricesTable .price-action-btn,
#effective #pricesTable .reviewed-badge {
  width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Keep all extended columns visible when toggle is active/default */
body.show-extended-prices #pricesTable th:nth-child(n+8),
body.show-extended-prices #pricesTable td:nth-child(n+8) {
  display: table-cell !important;
}

/* --- 2026-03 Fix v29: Final sticky action column lock --- */
#appShell #effective .prices-table-wrap {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#appShell #effective #pricesTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
}

#appShell #effective #pricesTable thead th.col-action,
#appShell #effective #pricesTable tbody td.col-action,
#appShell #effective #pricesTable thead th:last-child,
#appShell #effective #pricesTable tbody td:last-child {
  position: -webkit-sticky !important;
  position: sticky !important;
  right: 0 !important;
  left: auto !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#appShell #effective #pricesTable thead th.col-action,
#appShell #effective #pricesTable thead th:last-child {
  z-index: 50 !important;
}

#appShell #effective #pricesTable tbody td.col-action,
#appShell #effective #pricesTable tbody td:last-child {
  z-index: 40 !important;
}

#appShell #effective #pricesTable tbody tr.manual-price-row td.col-action,
#appShell #effective #pricesTable tbody tr.manual-price-row td:last-child {
  background: #f9f4f7 !important;
}

/* --- 2026-03 Fix v30: Extended mode visibility + sticky guarantee --- */
#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action {
  display: table-cell !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  right: 0 !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#appShell #effective #pricesTable thead th.col-action {
  z-index: 80 !important;
}

#appShell #effective #pricesTable tbody td.col-action {
  z-index: 70 !important;
}

#appShell #effective #pricesTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

/* When extended is active, all extended columns + action must stay visible */
body.show-extended-prices #pricesTable th:nth-child(n+8),
body.show-extended-prices #pricesTable td:nth-child(n+8),
body.show-extended-prices #pricesTable th.col-action,
body.show-extended-prices #pricesTable td.col-action {
  display: table-cell !important;
}

/* --- 2026-03 Fix v31: Never hide action column in extended mode --- */
#effective #pricesTable th.col-action,
#effective #pricesTable td.col-action {
  display: table-cell !important;
}

body.show-extended-prices #pricesTable th.col-action,
body.show-extended-prices #pricesTable td.col-action {
  display: table-cell !important;
}

/* --- 2026-03 Fix v32: JS-pinned action column (disable sticky conflicts) --- */
#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action,
#appShell #effective #pricesTable thead th:last-child,
#appShell #effective #pricesTable tbody td:last-child {
  position: relative !important;
  right: auto !important;
  left: auto !important;
}

/* --- 2026-03 Fix v33: Final sticky action column (normal + extended) --- */
#appShell #effective .prices-table-layout {
  display: block !important;
  overflow: visible !important;
}

#appShell #effective .prices-table-wrap {
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#appShell #effective #pricesTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
}

#appShell #effective #pricesTable thead th.col-action,
#appShell #effective #pricesTable tbody td.col-action {
  display: table-cell !important;
  position: -webkit-sticky !important;
  position: sticky !important;
  right: 0 !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  transform: none !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
}

#appShell #effective #pricesTable thead th.col-action {
  z-index: 96 !important;
}

#appShell #effective #pricesTable tbody td.col-action {
  z-index: 92 !important;
}

#appShell #effective #pricesTable tbody tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

#appShell #effective #pricesTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#appShell #effective #pricesTable .action-cell-inner > * {
  width: 100% !important;
}

body.show-extended-prices #appShell #effective #pricesTable thead th.col-action,
body.show-extended-prices #appShell #effective #pricesTable tbody td.col-action {
  display: table-cell !important;
  position: -webkit-sticky !important;
  position: sticky !important;
}

/* --- 2026-03 Fix v34: Dedicated sticky action rail (always visible incl. extended) --- */
#appShell #effective .prices-table-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 176px !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#appShell #effective .prices-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#appShell #effective .prices-actions-wrap {
  display: block !important;
  overflow: hidden !important;
  border-left: 1px solid #E4D4DA !important;
  background: #fff !important;
}

#appShell #effective #pricesActionTable {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
}

#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  background: #fff !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

#appShell #effective #pricesActionTable .action-col-head {
  z-index: 3 !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > * {
  width: 100% !important;
}

#appShell #effective #pricesActionTable .price-action-btn,
#appShell #effective #pricesActionTable .reviewed-badge {
  width: 100% !important;
  white-space: nowrap !important;
}

/* --- 2026-03 Fix v35: Width + line alignment polish (SKU Zumstein + Aktion) --- */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 196px !important;
}

#appShell #effective #pricesTable th.col-sku-zs,
#appShell #effective #pricesTable td.col-sku-zs {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
}

#appShell #effective #pricesTable td.col-sku-zs input {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesActionTable {
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
}

#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesActionTable .action-cell {
  padding: 10px 12px !important;
}

#appShell #effective #pricesActionTable .price-action-btn,
#appShell #effective #pricesActionTable .reviewed-badge {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
}

#appShell #effective #pricesTable thead tr:first-child th,
#appShell #effective #pricesActionTable thead tr:first-child th {
  height: auto !important;
  min-height: 56px !important;
}

#appShell #effective #pricesTable thead tr.filter-row th,
#appShell #effective #pricesActionTable thead tr.filter-row th {
  height: auto !important;
  min-height: 52px !important;
}

#appShell #effective #pricesTable tbody tr,
#appShell #effective #pricesActionTable tbody tr {
  height: auto !important;
  min-height: 72px !important;
}

#appShell #effective .prices-actions-wrap::after {
  display: none !important;
  content: none !important;
}

#appShell #effective #pricesActionTable tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* --- 2026-03 Fix v39: absolute final override for action alignment --- */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 250px !important;
}

#appShell #effective #pricesTable,
#appShell #effective #pricesActionTable {
  table-layout: fixed !important;
}

#appShell #effective #pricesTable th,
#appShell #effective #pricesTable td,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  vertical-align: middle !important;
  height: auto !important;
  min-height: 0 !important;
}

#appShell #effective #pricesActionTable,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td,
#appShell #effective #pricesActionTable .action-col-head,
#appShell #effective #pricesActionTable .action-col-filter,
#appShell #effective #pricesActionTable td.action-cell {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesActionTable td.action-cell {
  padding: 8px 12px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  height: 100% !important;
  overflow: visible !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* --- 2026-03 Fix v38: Definitive row/button alignment override --- */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 250px !important;
}

#appShell #effective #pricesActionTable,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td,
#appShell #effective #pricesActionTable .action-col-head,
#appShell #effective #pricesActionTable .action-col-filter,
#appShell #effective #pricesActionTable td.action-cell {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Let JS sync set exact matched heights for each row/header/filter */
#appShell #effective #pricesTable thead tr:first-child th,
#appShell #effective #pricesActionTable thead tr:first-child th,
#appShell #effective #pricesTable thead tr.filter-row th,
#appShell #effective #pricesActionTable thead tr.filter-row th,
#appShell #effective #pricesTable tbody tr,
#appShell #effective #pricesActionTable tbody tr,
#appShell #effective #pricesTable tbody tr td,
#appShell #effective #pricesActionTable tbody tr td {
  height: auto !important;
  min-height: 0 !important;
}

#appShell #effective #pricesActionTable td.action-cell {
  padding: 8px 12px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  height: 100% !important;
  overflow: visible !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* --- 2026-03 Fix v36: Final action rail sizing/alignment --- */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 220px !important;
}

#appShell #effective #pricesActionTable,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

#appShell #effective #pricesActionTable .action-cell {
  padding: 10px 14px !important;
}

#appShell #effective #pricesActionTable .price-action-btn,
#appShell #effective #pricesActionTable .reviewed-badge {
  min-height: 54px !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#appShell #effective .prices-actions-wrap {
  overflow: visible !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  overflow: visible !important;
}

/* --- 2026-03 Fix v37: Trade-in row/action alignment (hard final) --- */
#appShell #effective #pricesTable,
#appShell #effective #pricesActionTable {
  table-layout: fixed !important;
}

#appShell #effective #pricesTable th,
#appShell #effective #pricesTable td,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  vertical-align: middle !important;
}

/* Consistent row heights across main + action tables */
#appShell #effective #pricesTable thead tr:first-child th,
#appShell #effective #pricesActionTable thead tr:first-child th {
  height: 56px !important;
  min-height: 56px !important;
}

#appShell #effective #pricesTable thead tr.filter-row th,
#appShell #effective #pricesActionTable thead tr.filter-row th {
  height: 52px !important;
  min-height: 52px !important;
}

#appShell #effective #pricesTable tbody tr,
#appShell #effective #pricesActionTable tbody tr {
  height: 86px !important;
  min-height: 86px !important;
}

/* Keep action header exactly aligned to action column */
#appShell #effective #pricesActionTable .action-col-head,
#appShell #effective #pricesActionTable .action-col-filter,
#appShell #effective #pricesActionTable td.action-cell {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
}

/* Action cell content anchored to its own row */
#appShell #effective #pricesActionTable td.action-cell {
  padding: 8px 12px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  height: 100% !important;
}

/* Buttons fill the cell width minus padding, no clipping */
#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 34px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Remove trailing visual line in action rail */
#appShell #effective #pricesActionTable tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* --- 2026-03 Fix v40: terminal override (must be last) --- */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 250px !important;
}

#appShell #effective #pricesTable,
#appShell #effective #pricesActionTable {
  table-layout: fixed !important;
}

#appShell #effective #pricesTable th,
#appShell #effective #pricesTable td,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  vertical-align: middle !important;
  height: auto !important;
  min-height: 0 !important;
}

#appShell #effective #pricesActionTable,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td,
#appShell #effective #pricesActionTable .action-col-head,
#appShell #effective #pricesActionTable .action-col-filter,
#appShell #effective #pricesActionTable td.action-cell {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesActionTable td.action-cell {
  padding: 8px 12px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  height: 100% !important;
  overflow: visible !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* --- 2026-03 Fix v41: terminal override for clipped action buttons + row alignment --- */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 300px !important;
  width: 100% !important;
  max-width: 100% !important;
}

#appShell #effective .prices-table-wrap {
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#appShell #effective .prices-actions-wrap,
#appShell #effective #pricesActionTable,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td,
#appShell #effective #pricesActionTable .action-col-head,
#appShell #effective #pricesActionTable .action-col-filter,
#appShell #effective #pricesActionTable td.action-cell {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  box-sizing: border-box !important;
}

/* clear all old forced row heights and let JS sync per row */
#appShell #effective #pricesTable thead tr,
#appShell #effective #pricesActionTable thead tr,
#appShell #effective #pricesTable tbody tr,
#appShell #effective #pricesActionTable tbody tr,
#appShell #effective #pricesTable thead th,
#appShell #effective #pricesActionTable thead th,
#appShell #effective #pricesTable tbody td,
#appShell #effective #pricesActionTable tbody td {
  height: auto !important;
  min-height: 0 !important;
  vertical-align: middle !important;
}

#appShell #effective #pricesActionTable td.action-cell {
  padding: 4px 10px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  height: 100% !important;
  overflow: hidden !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- 2026-03 Fix v42: single-table action column for exact line alignment --- */
#appShell #effective .prices-actions-wrap,
#appShell #effective #pricesActionTable {
  display: none !important;
}

#appShell #effective .prices-table-layout {
  display: block !important;
  grid-template-columns: none !important;
}

#appShell #effective .prices-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#appShell #effective #pricesTable {
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action {
  display: table-cell !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  position: sticky !important;
  right: 0 !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  z-index: 30 !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesTable tbody td.col-action {
  z-index: 24 !important;
  padding: 6px 10px !important;
}

#appShell #effective #pricesTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

#appShell #effective #pricesTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  height: 100% !important;
}

#appShell #effective #pricesTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* --- 2026-03 Fix v50: name + image url column sizing --- */
#appShell #effective #pricesTable th.col-name,
#appShell #effective #pricesTable td.col-name {
  width: 520px !important;
  min-width: 520px !important;
  max-width: 520px !important;
}

#appShell #effective #pricesTable td.col-name .price-name-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

#appShell #effective #pricesTable th.col-sku-zs,
#appShell #effective #pricesTable td.col-sku-zs {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

#appShell #effective #pricesTable th.col-image-url,
#appShell #effective #pricesTable td.col-image-url {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}

#appShell #effective #pricesTable td.col-image-url input {
  width: 100% !important;
  min-width: 0 !important;
}

/* Bild-URL ist nicht manuell editierbar — visuell als read-only kennzeichnen
   (gedämpfte Fläche, keine Fokus-/Hover-Box, Cursor not-allowed). Wert
   leitet sich automatisch aus SKU Zumstein ab. */
#appShell #effective #pricesTable td.col-image-url input[readonly] {
  background: #f3eef0 !important;
  border-color: #e5d8de !important;
  color: #6e5460 !important;
  cursor: not-allowed !important;
  user-select: text !important;
}
#appShell #effective #pricesTable td.col-image-url input[readonly]:focus,
#appShell #effective #pricesTable td.col-image-url input[readonly]:hover {
  background: #f3eef0 !important;
  border-color: #e5d8de !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Populated Bild-URL cells open the link on click — override the plain
   read-only "not-allowed" styling above with a pointer cursor + underline
   so it reads as clickable, same idea as any other link. */
#appShell #effective #pricesTable td.col-image-url input[readonly].is-clickable {
  cursor: pointer !important;
  text-decoration: underline;
}
#appShell #effective #pricesTable td.col-image-url input[readonly].is-clickable:hover {
  color: #AD093D !important;
}

/* --- 2026-03 Fix v43: final row-line lock (prices + action column) --- */
#appShell #effective #pricesTable {
  /* sticky right column is reliable with separate table borders */
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#appShell #effective #pricesTable th,
#appShell #effective #pricesTable td {
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesTable thead > tr.filter-row > th {
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesTable tbody > tr > td {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesTable tbody > tr > td.col-action {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

#appShell #effective #pricesTable tbody > tr > td.col-action .action-cell-inner {
  height: auto !important;
  min-height: 0 !important;
  justify-content: center !important;
}

/* keep action column sticky in normal + extended mode */
#appShell #effective #pricesTable thead > tr > th.col-action,
#appShell #effective #pricesTable tbody > tr > td.col-action,
body.show-extended-prices #appShell #effective #pricesTable thead > tr > th.col-action,
body.show-extended-prices #appShell #effective #pricesTable tbody > tr > td.col-action {
  position: -webkit-sticky !important;
  position: sticky !important;
  right: 0 !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  z-index: 40 !important;
  background: #fff !important;
}

/* --- 2026-03 Fix v44: first-render visibility lock for right-side columns --- */
#appShell #effective #pricesTable thead th:nth-child(n+8),
#appShell #effective #pricesTable tbody td:nth-child(n+8),
#appShell #effective #pricesTable thead th.col-action,
#appShell #effective #pricesTable tbody td.col-action {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- 2026-03 Fix v45: permanent right action rail (always visible) --- */
#appShell #effective .prices-table-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  width: 100% !important;
  overflow: hidden !important;
}

#appShell #effective .prices-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-y: hidden !important;
}

body:not(.show-extended-prices) #appShell #effective .prices-table-wrap {
  overflow-x: hidden !important;
}

body.show-extended-prices #appShell #effective .prices-table-wrap {
  overflow-x: auto !important;
}

#appShell #effective .prices-actions-wrap {
  display: block !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  border-left: 1px solid #E4D4DA !important;
  background: #fff !important;
  overflow: hidden !important;
}

#appShell #effective .prices-actions-wrap::after {
  display: none !important;
  content: none !important;
}

#appShell #effective #pricesActionTable {
  display: table !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th,
#appShell #effective #pricesActionTable thead > tr:first-child > th {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesTable thead > tr.filter-row > th,
#appShell #effective #pricesActionTable thead > tr.filter-row > th {
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesTable tbody > tr > td,
#appShell #effective #pricesActionTable tbody > tr > td {
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesActionTable td.action-cell {
  padding: 0 12px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* internal action column stays hidden when using external action rail */
#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action {
  display: none !important;
}

/* --- 2026-03 Fix v46: remove SKU/URL separator + tighter action sizing + row alignment --- */
#appShell #effective #pricesTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* remove the unnecessary vertical divider between SKU Zumstein and Bild URL */
#appShell #effective #pricesTable th.col-sku-zs,
#appShell #effective #pricesTable td.col-sku-zs {
  border-right: 0 !important;
}

#appShell #effective #pricesTable th.col-sku-zs + th,
#appShell #effective #pricesTable td.col-sku-zs + td {
  border-left: 0 !important;
}

/* action rail narrower so buttons are not oversized */
#appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) 220px !important;
}

#appShell #effective .prices-actions-wrap,
#appShell #effective #pricesActionTable,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

/* lock row heights on both tables to keep all horizontal lines on same level */
#appShell #effective #pricesTable thead > tr:first-child > th,
#appShell #effective #pricesActionTable thead > tr:first-child > th {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
}

#appShell #effective #pricesTable thead > tr.filter-row > th,
#appShell #effective #pricesActionTable thead > tr.filter-row > th {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
}

#appShell #effective #pricesTable tbody > tr > td,
#appShell #effective #pricesActionTable tbody > tr > td {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
}

#appShell #effective #pricesActionTable td.action-cell {
  padding: 0 10px !important;
}

#appShell #effective #pricesActionTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesActionTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesActionTable .action-cell-inner > .delete-mini-btn {
  height: 32px !important;
  min-height: 32px !important;
}

/* --- 2026-03 Fix v47: keep sticky, restore compact row spacing/lines --- */
#appShell #effective #pricesTable thead > tr:first-child > th,
#appShell #effective #pricesActionTable thead > tr:first-child > th {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}

#appShell #effective #pricesTable thead > tr.filter-row > th,
#appShell #effective #pricesActionTable thead > tr.filter-row > th {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
}

#appShell #effective #pricesTable tbody > tr > td,
#appShell #effective #pricesActionTable tbody > tr > td {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

#appShell #effective #pricesTable tbody > tr > td,
#appShell #effective #pricesActionTable tbody > tr > td {
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
  vertical-align: middle !important;
}

/* Landing: forgot password action */
#landing .landing-forgot-link {
  margin-top: -2px !important;
  align-self: flex-start !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #7A5060 !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
}

#landing .landing-forgot-link:hover,
#landing .landing-forgot-link:focus-visible {
  color: #AD093D !important;
}

/* --- 2026-03 Fix v60: remove stray dots + force unified prices table alignment --- */
#appShell #effective .prices-actions-wrap,
#appShell #effective #pricesActionTable {
  display: none !important;
}

#appShell #effective .prices-table-layout {
  display: block !important;
  grid-template-columns: none !important;
  overflow: visible !important;
}

#appShell #effective .prices-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#appShell #effective #pricesTable {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th,
#appShell #effective #pricesTable thead > tr.filter-row > th,
#appShell #effective #pricesTable tbody > tr > td {
  vertical-align: middle !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

#appShell #effective #pricesTable thead > tr.filter-row > th {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
}

#appShell #effective #pricesTable tbody > tr > td {
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
}

/* Header checkbox cell: no pseudo text / no stray "..." */
#appShell #effective #pricesTable thead > tr:first-child > th.col-select,
#appShell #effective #pricesTable thead > tr.filter-row > th.col-select,
#appShell #effective #pricesTable tbody > tr > td.col-select {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-align: center !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  color: transparent !important;
  white-space: normal !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th.col-select::before,
#appShell #effective #pricesTable thead > tr:first-child > th.col-select::after,
#appShell #effective #pricesTable thead > tr.filter-row > th.col-select::before,
#appShell #effective #pricesTable thead > tr.filter-row > th.col-select::after {
  content: none !important;
  display: none !important;
}

#appShell #effective #pricesTable th.col-select input[type="checkbox"],
#appShell #effective #pricesTable td.col-select input[type="checkbox"] {
  margin: 0 auto !important;
  display: block !important;
}

/* Action column aligned to same row grid and sticky at right edge */
#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  position: sticky !important;
  right: 0 !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  box-sizing: border-box !important;
  z-index: 24 !important;
}

#appShell #effective #pricesTable th.col-action {
  z-index: 34 !important;
}

#appShell #effective #pricesTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

#appShell #effective #pricesTable td.col-action {
  padding: 10px 12px !important;
}

#appShell #effective #pricesTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
}

#appShell #effective #pricesTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* --- 2026-03 Fix v61: import/search/popup/switcher polish --- */
/* Remove wobble on row hover globally (no horizontal jump) */
tbody tr td {
  transition: background-color 0.15s ease !important;
}

tbody tr:hover td {
  padding-left: 10px !important;
}

/* Import step: Tabellenblatt selector should be larger */
#fixedSheetSelect {
  min-width: 280px !important;
  width: auto !important;
}

/* Suggestions table action buttons: cleaner placement */
#suggestionsBody td:last-child {
  vertical-align: middle !important;
}

#suggestionsBody td:last-child .ki-live-badge {
  margin-bottom: 8px !important;
}

#suggestionsBody td:last-child .btn-main,
#suggestionsBody td:last-child .btn-subtle {
  min-width: 160px !important;
}

/* Assistant button/panel spacing */
#openAssistantBtn.assistant-fab {
  top: 20px !important;
  right: 24px !important;
}

#openAssistantBtn.assistant-fab.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

#assistantPanel.assistant-panel {
  padding: 16px 16px 16px 16px !important;
}

#assistantPanel .assistant-head-tools {
  padding-right: 8px !important;
}

#closeAssistantBtn {
  margin-right: 8px !important;
}

/* Small, consistent switchers in form/tool rows */
.cond-toggle-item > input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 30px !important;
  height: 16px !important;
  min-width: 30px !important;
  min-height: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #C9A8B5 !important;
  background: #EFE8EB !important;
  position: relative !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.cond-toggle-item > input[type="checkbox"]::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.15s ease !important;
}

.cond-toggle-item > input[type="checkbox"]:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

.cond-toggle-item > input[type="checkbox"]:checked::after {
  left: 15px !important;
}

/* Global fix: regular checkboxes inside cond-toggle rows must stay square (no slider knob) */
.cond-toggle-item > input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border: 1px solid #B88FA0 !important;
  border-radius: 3px !important;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.cond-toggle-item > input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled)::after {
  content: none !important;
}

.cond-toggle-item > input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

.cond-toggle-item > input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* --- 2026-03 Fix v48: single divider + strict compact row geometry --- */
#appShell #effective #pricesTable,
#appShell #effective #pricesActionTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th,
#appShell #effective #pricesActionTable thead > tr:first-child > th {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 12px !important;
}

#appShell #effective #pricesTable thead > tr.filter-row > th,
#appShell #effective #pricesActionTable thead > tr.filter-row > th {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 10px !important;
}

#appShell #effective #pricesTable tbody > tr > td,
#appShell #effective #pricesActionTable tbody > tr > td {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 0 10px !important;
}

/* avoid double-thick separator at table/action boundary */
#appShell #effective #pricesTable thead > tr > th:last-child,
#appShell #effective #pricesTable tbody > tr > td:last-child {
  border-right: 0 !important;
}

#appShell #effective .prices-actions-wrap {
  border-left: 1px solid #E4D4DA !important;
}

#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  border-left: 0 !important;
}

/* --- 2026-03 Fix v49: single-table sticky action column (final alignment) --- */
#appShell #effective .prices-actions-wrap,
#appShell #effective #pricesActionTable {
  display: none !important;
}

#appShell #effective .prices-table-layout {
  display: block !important;
  grid-template-columns: none !important;
  overflow: visible !important;
}

#appShell #effective .prices-table-wrap {
  overflow-y: hidden !important;
}

body.show-extended-prices #appShell #effective .prices-table-wrap {
  overflow-x: auto !important;
}

body:not(.show-extended-prices) #appShell #effective .prices-table-wrap {
  overflow-x: hidden !important;
}

#appShell #effective #pricesTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
}

#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action {
  display: table-cell !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  position: sticky !important;
  right: 0 !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  z-index: 100 !important;
  vertical-align: middle !important;
}

#appShell #effective #pricesTable thead th.col-action {
  z-index: 110 !important;
}

#appShell #effective #pricesTable tbody td.col-action {
  z-index: 105 !important;
}

#appShell #effective #pricesTable .action-cell-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 6px !important;
}

#appShell #effective #pricesTable .action-cell-inner > .price-action-btn,
#appShell #effective #pricesTable .action-cell-inner > .reviewed-badge,
#appShell #effective #pricesTable .action-cell-inner > .delete-mini-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Fix: clip table overflow so sticky right:0 binds to .prices-table-wrap scroll container, not the table itself */
#appShell #effective #pricesTable {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

/* Fix: clip layout to border-radius so separator line reaches corners cleanly and backgrounds don't bleed out */
#appShell #effective .prices-table-layout {
  overflow: clip !important;
}

/* Fix: padding-right on wrap creates 14px gap right of sticky col-action; remove it */
#appShell #effective .prices-table-wrap {
  padding-right: 0 !important;
}

/* Sidebar brand fine-tune: move PRICING TOOL slightly right */
#appShell > nav.tabs .sidebar-brand p {
  padding-left: 8px !important;
}

/* Prices: No Buyback must stay clickable in its own column */
#appShell #effective .prices-actions-wrap,
#appShell #effective #pricesActionTable {
  display: none !important;
  pointer-events: none !important;
}

#appShell #effective #pricesTable th.col-no-buyback,
#appShell #effective #pricesTable td.col-no-buyback {
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

#appShell #effective #pricesTable th.col-reviewed-at,
#appShell #effective #pricesTable td.col-reviewed-at {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

#appShell #effective #pricesTable td.col-no-buyback input[type="checkbox"] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Prices table: No Buyback checkbox must be clearly visible and square */
#appShell #effective #pricesTable td.col-no-buyback input[type="checkbox"],
#appShell #effective #pricesTable .filter-row th.col-no-buyback input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border: 1px solid #C9A8B5 !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

#appShell #effective #pricesTable td.col-no-buyback input[type="checkbox"]:checked,
#appShell #effective #pricesTable .filter-row th.col-no-buyback input[type="checkbox"]:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#appShell #effective #pricesTable td.col-no-buyback input[type="checkbox"]:checked::after,
#appShell #effective #pricesTable .filter-row th.col-no-buyback input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

/* Hard reset for row-level No Buyback checkboxes (prevents oversized icon/square) */
#appShell #effective #pricesTable input[id^="price-no-buyback-"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: 1px solid #C9A8B5 !important;
  border-radius: 2px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  line-height: 14px !important;
  vertical-align: middle !important;
  position: relative !important;
  display: inline-block !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

#appShell #effective #pricesTable input[id^="price-no-buyback-"]:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#appShell #effective #pricesTable input[id^="price-no-buyback-"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 5px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 1.8px 1.8px 0 !important;
  transform: rotate(45deg) !important;
  background: none !important;
}

/* Prices width lock: compact mode must fully fit, extended mode may scroll */
body:not(.show-extended-prices) #appShell #effective .prices-table-wrap {
  overflow-x: hidden !important;
}

body:not(.show-extended-prices) #appShell #effective #pricesTable {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

body:not(.show-extended-prices) #appShell #effective #pricesTable th.col-name,
body:not(.show-extended-prices) #appShell #effective #pricesTable td.col-name {
  width: auto !important;
  min-width: 300px !important;
  max-width: none !important;
}

body:not(.show-extended-prices) #appShell #effective #pricesTable th.col-reviewed-at,
body:not(.show-extended-prices) #appShell #effective #pricesTable td.col-reviewed-at {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

body:not(.show-extended-prices) #appShell #effective #pricesTable th.col-no-buyback,
body:not(.show-extended-prices) #appShell #effective #pricesTable td.col-no-buyback {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

body:not(.show-extended-prices) #appShell #effective #pricesTable th.col-action,
body:not(.show-extended-prices) #appShell #effective #pricesTable td.col-action {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
}

body.show-extended-prices #appShell #effective #pricesTable {
  width: max-content !important;
  min-width: 100% !important;
}

/* Fix scroll layering: No Buyback must not overlap sticky action column */
#appShell #effective #pricesTable th.col-no-buyback,
#appShell #effective #pricesTable td.col-no-buyback {
  position: static !important;
  z-index: auto !important;
}

#appShell #effective #pricesTable th.col-action {
  z-index: 260 !important;
}

#appShell #effective #pricesTable td.col-action {
  z-index: 250 !important;
}

#appShell #effective #pricesTable td.col-action .action-cell-inner,
#appShell #effective #pricesTable td.col-action .price-action-btn,
#appShell #effective #pricesTable td.col-action .reviewed-badge,
#appShell #effective #pricesTable td.col-action .delete-mini-btn {
  position: relative !important;
  z-index: 251 !important;
}

#appShell #effective #pricesTable td.col-action .action-cell-inner > .hint {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

/* No Buyback must scroll normally (only action column is sticky) */
body.show-extended-prices #appShell #effective #pricesTable th.col-no-buyback,
body.show-extended-prices #appShell #effective #pricesTable td.col-no-buyback {
  position: static !important;
  right: auto !important;
  inset-inline-end: auto !important;
  z-index: auto !important;
}

/* Global checkbox visibility pass (except custom toggle switches) */
#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled),
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  border: 1px solid #B88FA0 !important;
  border-radius: 3px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  position: relative !important;
  vertical-align: middle !important;
}

#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked,
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked::after,
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):focus-visible,
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.12) !important;
}

/* Final checkbox normalization (prevents oversized gray/red blocks) */
#appShell input[type="checkbox"],
#landing input[type="checkbox"] {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  background-clip: padding-box !important;
}

#appShell th input[type="checkbox"],
#landing th input[type="checkbox"] {
  transform: none !important;
}

/* Final: all checkboxes unified and clearly visible (including imports/settings) */
#appShell input[type="checkbox"],
#landing input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  flex: 0 0 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #B88FA0 !important;
  border-radius: 3px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

#appShell input[type="checkbox"]:checked,
#landing input[type="checkbox"]:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#appShell input[type="checkbox"]:checked::after,
#landing input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  background: none !important;
}

/* Preise: short white-check animation on "Geprüft" click */
#appShell #effective #pricesTable .price-action-btn.is-review-animating {
  color: #fff !important;
  position: relative !important;
  animation: priceReviewedButtonPop 0.5s ease !important;
}

@keyframes priceReviewedButtonPop {
  0% {
    transform: scale(0.96);
    opacity: 0.9;
  }
  35% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Assistant quick-help (top-right) */
#appShell main {
  position: relative;
}

#openAssistantBtn.assistant-fab {
  position: fixed !important;
  top: 16px !important;
  right: 18px !important;
  z-index: 360 !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  background: #fff !important;
  color: #7A5060 !important;
  border: 1px solid #E4D4DA !important;
  font-family: inherit !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

#assistantPanel.assistant-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 420px !important;
  max-width: min(100vw, 420px) !important;
  height: 100vh !important;
  background: #fff !important;
  border-left: 1px solid #E4D4DA !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  padding: 14px !important;
  z-index: 361 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -4px 0 24px rgba(30,12,19,0.08) !important;
}

#assistantPanel .assistant-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#assistantPanel .assistant-panel-head h3 {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1E0C13 !important;
}

#assistantQuestionInput {
  width: 100% !important;
  min-height: 92px !important;
  resize: vertical !important;
  margin: 0 !important;
}

#assistantAnswer.assistant-answer {
  margin-top: 10px !important;
  border-top: 1px solid rgba(228, 212, 218, 0.5) !important;
  padding-top: 10px !important;
  white-space: pre-wrap !important;
  color: #1E0C13 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Sidebar footer compact mode: icons only + inline language */
#userFooterName {
  display: none !important;
}

#userFooterRow {
  gap: 8px !important;
}

#userSettingsDirectBtn,
#userLogoutDirectBtn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#userSettingsDirectBtn:hover,
#userLogoutDirectBtn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

#footerLangToggle.landing-lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 4px !important;
  padding: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  margin-left: auto !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
}

#footerLangToggle.landing-lang-btn.active {
  background: #AD093D !important;
  border-color: #AD093D !important;
  color: #fff !important;
}

/* Assistant panel as chat */
#assistantPanel.assistant-panel {
  padding: 14px !important;
}

#assistantPanel.hidden {
  display: none !important;
}

#assistantPanel .assistant-panel-head {
  margin-bottom: 10px !important;
}

#assistantMessages.assistant-messages {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 280px !important;
  overflow-y: auto !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  padding: 8px !important;
  background: #fff !important;
}

.assistant-msg {
  display: flex !important;
  margin-bottom: 8px !important;
}

.assistant-msg-user {
  justify-content: flex-end !important;
}

.assistant-msg-assistant {
  justify-content: flex-start !important;
}

.assistant-msg-bubble {
  max-width: 90% !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: pre-wrap !important;
}

.assistant-msg-user .assistant-msg-bubble {
  background: #F5E8ED !important;
  border: 1px solid #E4D4DA !important;
  color: #1E0C13 !important;
}

.assistant-msg-assistant .assistant-msg-bubble {
  background: #fff !important;
  border: 1px solid #E4D4DA !important;
  color: #1E0C13 !important;
}

/* Footer controls: no JU popup, proportional spacing, low-color SW style */
#userMenu,
#userMenu.hidden,
#userMenu:not(.hidden) {
  display: none !important;
}

#userFooterRow {
  display: grid !important;
  grid-template-columns: 36px auto 28px 28px !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 8px !important;
  width: auto !important;
}

#userBadge {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

#footerLangToggle.landing-lang-btn,
#footerLangToggle.landing-lang-btn.active {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin-left: 0 !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

#userSettingsDirectBtn,
#userLogoutDirectBtn {
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,0.76) !important;
}

#userSettingsDirectBtn:hover,
#userLogoutDirectBtn:hover,
#userBadge:hover,
#footerLangToggle.landing-lang-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.52) !important;
}

/* Dashboard audit filters: remove white box, keep CI-flat styling */
#dashboard > .dashboard-audit-head {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#dashboard > .dashboard-audit-head .audit-filters {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 12px !important;
}

#dashboard > .dashboard-audit-head .audit-filters select,
#dashboard > .dashboard-audit-head .audit-filters button {
  min-height: 32px !important;
  padding: 0 14px !important;
  background: rgba(245, 232, 237, 0.42) !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
}

/* Prices table header cleanup: remove stray "..." and align all header lines */
#appShell #effective #pricesTable thead > tr:first-child > th,
#appShell #effective #pricesActionTable thead > tr:first-child > th {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  vertical-align: middle !important;
  line-height: 1.1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th.col-select {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th.col-select::before,
#appShell #effective #pricesTable thead > tr:first-child > th.col-select::after {
  content: none !important;
  display: none !important;
}

#appShell #effective #pricesTable thead > tr:first-child > th.col-select > input[type="checkbox"] {
  display: block !important;
  margin: 0 auto !important;
  width: 18px !important;
  height: 18px !important;
}

.assistant-compose {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 10px !important;
  align-items: stretch !important;
}

.assistant-head-tools {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 6px !important;
  align-items: center !important;
  width: min(250px, 100%) !important;
}

#assistantSessionSelect {
  width: 100% !important;
  min-width: 0 !important;
}

#closeAssistantBtn {
  min-width: 0 !important;
  padding: 8px 10px !important;
}

#effective #pricesTable .col-select {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  text-align: center !important;
}

#effective #pricesTable .col-select input[type="checkbox"] {
  margin: 0 !important;
}

#assistantQuestionInput {
  min-height: 52px !important;
  max-height: 130px !important;
  margin: 0 !important;
}

#assistantAskBtn,
body #assistantPanel #assistantAskBtn.assistant-send-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#assistantAskBtn:hover,
body #assistantPanel #assistantAskBtn.assistant-send-btn:hover {
  background: transparent !important;
  color: #AD093D !important;
  transform: none !important;
}

#assistantAskBtn:disabled,
body #assistantPanel #assistantAskBtn.assistant-send-btn:disabled {
  background: transparent !important;
  color: #D6BFC8 !important;
  cursor: not-allowed !important;
}

/* Final checkbox normalization: no pseudo knob/circle on square checkboxes */
#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled),
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 2px solid #B88FA0 !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transform: none !important;
}

#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled)::before,
#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled)::after,
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled)::before,
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled)::after {
  content: none !important;
  display: none !important;
}

#appShell input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked,
#landing input[type="checkbox"]:not(#manualProductNoBuyback):not(#hideNoBuybackRows):not(#showAllConditionPrices):not(#showMarketPriceOverview):not(#market-prices-enabled):checked {
  background-color: #AD093D !important;
  border-color: #AD093D !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2 6.3 11.5 13 4.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
}

/* Assistant panel: session sidebar + compact controls */
#assistantPanel.assistant-panel {
  width: min(100vw, 680px) !important;
  max-width: 680px !important;
  padding: 12px !important;
}

#assistantPanel .assistant-panel-head {
  align-items: center !important;
}

#assistantPanel .assistant-head-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-right: 0 !important;
}

#assistantPanel #assistantNewChatBtn {
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn {
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  border: none !important;
  background: transparent !important;
  color: #7A5060 !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn:hover {
  background: #F5E8ED !important;
  color: #AD093D !important;
}

#assistantPanel .assistant-layout {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 12px !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

#assistantPanel .assistant-sessions-pane {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #fff !important;
  padding: 8px !important;
  overflow: visible !important;
}

#assistantPanel .assistant-sessions-pane h4 {
  margin: 0 0 8px 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #7A5060 !important;
}

#assistantPanel .assistant-session-list {
  overflow-y: auto !important;
  overflow-x: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-top: 2px !important;
}

#assistantPanel .assistant-session-row {
  display: grid !important;
  grid-template-columns: 1fr 24px !important;
  align-items: stretch !important;
  gap: 6px !important;
}

#assistantPanel .assistant-session-row.active .assistant-session-item {
  border-color: #AD093D !important;
  background: #F5E8ED !important;
  color: #1E0C13 !important;
}

#assistantPanel .assistant-session-item {
  width: 100% !important;
  text-align: left !important;
  border: 1px solid #E4D4DA !important;
  background: #fff !important;
  color: #7A5060 !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  transform: none !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-session-item:hover,
#assistantPanel .assistant-session-item:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-session-item.active {
  border-color: #AD093D !important;
  background: #F5E8ED !important;
  color: #1E0C13 !important;
}

#assistantPanel .assistant-session-delete {
  width: 24px !important;
  min-width: 24px !important;
  height: auto !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #7A5060 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 14px !important;
  transform: none !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-session-delete:hover {
  color: #AD093D !important;
  border-color: #AD093D !important;
  background: #F5E8ED !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Assistant hard override: prevent global button hover transform/scale from clipping rows */
#assistantPanel button,
#assistantPanel button:hover,
#assistantPanel button:active,
#assistantPanel button:focus,
#assistantPanel button:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-session-row {
  overflow: visible !important;
}

#assistantPanel .assistant-session-item,
#assistantPanel .assistant-session-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
}

#assistantPanel .assistant-session-item {
  justify-content: flex-start !important;
  line-height: 1.25 !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 0 !important;
  right: -2px !important;
  margin-top: 0 !important;
}

#assistantPanel .assistant-chat-pane {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#assistantPanel .assistant-chat-pane #assistantMessages.assistant-messages {
  flex: 1 1 auto !important;
  min-height: 240px !important;
}

#appShell > nav.tabs > button[data-tab="newwareFeed"] {
  white-space: normal !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
}

/* Footer language toggle: subtle text-only label */
#footerLangToggle {
  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 6px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

#footerLangToggle:hover {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
}

#footerLangToggle.active {
  color: rgba(255,255,255,0.75) !important;
  background: transparent !important;
}

@media (max-width: 900px) {
  #assistantPanel.assistant-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #assistantPanel .assistant-layout {
    grid-template-columns: 1fr !important;
  }
  #assistantPanel .assistant-sessions-pane {
    max-height: 180px !important;
  }
}

/* FINAL OVERRIDES: sidebar alignment + assistant collapsed chat list */
#appShell > nav.tabs .sidebar-brand {
  padding-left: 20px !important;
  padding-right: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#appShell > nav.tabs .sidebar-brand img {
  margin-left: -8px !important;
}

#appShell > nav.tabs .sidebar-brand p {
  padding-left: 0 !important;
  margin-top: 6px !important;
  text-align: left !important;
  align-self: stretch !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

#userFooterRow {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

#footerLangToggle {
  margin-right: 2px !important;
}

#userSettingsDirectBtn {
  margin-left: 0 !important;
}

#assistantPanel .assistant-panel-head {
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#assistantPanel .assistant-head-tools {
  display: none !important;
}

/* --- 2026-03 Final polish: detail panel spacing + suggestion actions + stable switches --- */
#dashboardDetailWrap {
  top: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  border: 1px solid #E4D4DA !important;
  border-left: 1px solid #E4D4DA !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

#dashboardDetailWrap .dashboard-audit-head {
  padding: 16px 20px !important;
}

#closeDashboardDetailBtn {
  margin-right: 6px !important;
}

#suggestionsBody td:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-right: 18px !important;
}

#suggestionsBody td:last-child .ki-live-badge,
#suggestionsBody td:last-child .btn-main,
#suggestionsBody td:last-child .btn-subtle {
  margin-left: auto !important;
}

#effective .price-toggles-row .cond-toggle-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: 14px !important;
  white-space: nowrap !important;
}

#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows,
#showMarketPriceOverview,
#market-prices-enabled,
#aiMatchingEnabled,
#internalFtpSecure,
#internalFtpEnabled,
#ftpSecure,
#newwareSettingsEnabled,
#newwareSettingsExportEnabled,
#newwareOnlyActiveActions {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 34px !important;
  height: 18px !important;
  min-width: 34px !important;
  min-height: 18px !important;
  border-radius: 999px !important;
  border: 1px solid #C9A8B5 !important;
  background: #EFE8EB !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after,
#showMarketPriceOverview::after,
#market-prices-enabled::after,
#aiMatchingEnabled::after,
#internalFtpSecure::after,
#internalFtpEnabled::after,
#ftpSecure::after,
#newwareSettingsEnabled::after,
#newwareSettingsExportEnabled::after,
#newwareOnlyActiveActions::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.14s ease !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked,
#showMarketPriceOverview:checked,
#market-prices-enabled:checked,
#aiMatchingEnabled:checked,
#internalFtpSecure:checked,
#internalFtpEnabled:checked,
#ftpSecure:checked,
#newwareSettingsEnabled:checked,
#newwareSettingsExportEnabled:checked,
#newwareOnlyActiveActions:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#manualProductNoBuyback:checked::after,
#showAllConditionPrices:checked::after,
#hideNoBuybackRows:checked::after,
#showMarketPriceOverview:checked::after,
#market-prices-enabled:checked::after,
#aiMatchingEnabled:checked::after,
#internalFtpSecure:checked::after,
#internalFtpEnabled:checked::after,
#ftpSecure:checked::after,
#newwareSettingsEnabled:checked::after,
#newwareSettingsExportEnabled:checked::after,
#newwareOnlyActiveActions:checked::after {
  left: 17px !important;
}

/* --- 2026-03 Final v93: hard overrides for login, switches, detail panel and import actions --- */
#landing .landing-card {
  border: 1.8px solid rgba(173, 9, 61, 0.28) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: 0 18px 40px rgba(30, 12, 19, 0.12) !important;
}

#landing #tokenFlowCard input,
#landing #tokenFlowCard input:focus,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  background: #fff !important;
  border: 1.4px solid #D6A9BA !important;
  box-shadow: inset 0 0 0 1px #E8C8D4 !important;
  -webkit-box-shadow: inset 0 0 0 1px #E8C8D4 !important;
  color: #4B2A38 !important;
  -webkit-text-fill-color: #4B2A38 !important;
}

#dashboardDetailWrap {
  top: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  border: 1.5px solid #E4D4DA !important;
  border-radius: 12px !important;
}

#closeDashboardDetailBtn {
  right: 6px !important;
  top: 8px !important;
}

#openAssistantBtn.assistant-fab {
  bottom: 14px !important;
  right: 14px !important;
}

#appShell.detail-panel-open #openAssistantBtn.assistant-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Import table action buttons: back to single row, shifted right */
#suggestionsBody td:last-child {
  display: table-cell !important;
  text-align: right !important;
  padding-right: 26px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#suggestionsBody td:last-child .ki-live-badge {
  display: inline-flex !important;
  margin: 0 0 8px auto !important;
}

#suggestionsBody td:last-child .btn-main,
#suggestionsBody td:last-child .btn-subtle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 154px !important;
  margin-left: 8px !important;
  line-height: 1 !important;
}

#suggestionsBody td:last-child .btn-main:first-of-type,
#suggestionsBody td:last-child .btn-subtle:first-of-type {
  margin-left: 0 !important;
}

/* My Account + Permissions layout */
#selfAccountSection .section-title,
#roleAccessEditor .section-title {
  display: block !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

#selfAccountSection .self-account-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
}

#selfAccountSection .self-account-grid input,
#selfAccountSection .self-account-grid button {
  width: 100% !important;
}

#roleAccessEditor .role-access-actions {
  margin-top: 10px !important;
  justify-content: flex-start !important;
}

/* Switchers: one consistent style for selected toggle ids */
#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows,
#aiMatchingEnabled,
#internalFtpSecure,
#internalFtpEnabled,
#ftpSecure,
#newwareSettingsEnabled,
#newwareSettingsExportEnabled,
#newwareOnlyActiveActions {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 36px !important;
  height: 20px !important;
  min-width: 36px !important;
  min-height: 20px !important;
  border-radius: 999px !important;
  border: 1px solid #C9A8B5 !important;
  background: #EFE8EB !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after,
#aiMatchingEnabled::after,
#internalFtpSecure::after,
#internalFtpEnabled::after,
#ftpSecure::after,
#newwareSettingsEnabled::after,
#newwareSettingsExportEnabled::after,
#newwareOnlyActiveActions::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left .16s ease !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked,
#aiMatchingEnabled:checked,
#internalFtpSecure:checked,
#internalFtpEnabled:checked,
#ftpSecure:checked,
#newwareSettingsEnabled:checked,
#newwareSettingsExportEnabled:checked,
#newwareOnlyActiveActions:checked {
  background: #AD093D !important;
  border-color: #AD093D !important;
}

#manualProductNoBuyback:checked::after,
#showAllConditionPrices:checked::after,
#hideNoBuybackRows:checked::after,
#aiMatchingEnabled:checked::after,
#internalFtpSecure:checked::after,
#internalFtpEnabled:checked::after,
#ftpSecure:checked::after,
#newwareSettingsEnabled:checked::after,
#newwareSettingsExportEnabled:checked::after,
#newwareOnlyActiveActions:checked::after {
  left: 19px !important;
}

/* --- 2026-03 Final v105 (EOF): force login white+border, assistant sidebar pill, import action right-align --- */

/* A) Login/logout inputs: always white fill + visible border, incl. Safari/Chrome autofill */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm,
/* removed broad email type selector */
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  border-radius: 10px !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body #landing #tokenFlowCard input:focus,
html body #landing #tokenFlowCard input:focus {
  background: #ffffff !important;
  border-color: #b30d46 !important;
  box-shadow: 0 0 0 2px rgba(179, 13, 70, 0.12) !important;
  -webkit-box-shadow: 0 0 0 2px rgba(179, 13, 70, 0.12) !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowPassword:-internal-autofill-selected, html body #landing #tokenFlowPasswordConfirm:-internal-autofill-selected {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* B) "Hast du Fragen?" button: left sidebar, slightly higher, tab-like but more prominent */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 10px !important;
  right: auto !important;
  bottom: 154px !important;
  top: auto !important;
  z-index: 220 !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #a40d41 !important;
  background: linear-gradient(180deg, #bf0d4a 0%, #9f083a 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px rgba(106, 10, 49, 0.22) !important;
}

html body #appShell #openAssistantBtn.assistant-fab:hover {
  background: linear-gradient(180deg, #ca0f50 0%, #ab0a41 100%) !important;
  color: #ffffff !important;
}

/* C) Import actions: whole action block more right, AKTION aligned over Bearbeiten, KI label left */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 248px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 108px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 138px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  justify-self: start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* --- 2026-03 Final v108: hard lock for landing, assistant button, import actions, master-data overlap --- */

/* Landing should look like offline: no card frame, square layout */
html body #landing .landing-card {
  width: min(430px, 94%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Keep only tokenFlowCard fields bordered and white (new landing uses borderless style) */
html body #landing #tokenFlowCard input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  border-radius: 10px !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* "Hast du Fragen?" should match backup button form; only color highlighted */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 12px !important;
  right: auto !important;
  bottom: 112px !important;
  top: auto !important;
  z-index: 220 !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid #ad093d !important;
  background: #ad093d !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #appShell #openAssistantBtn.assistant-fab:hover {
  background: #bf0d4a !important;
  border-color: #bf0d4a !important;
  color: #ffffff !important;
}

/* Import action area: move right and align "Aktion" with "Bearbeiten" start */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 340px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 204px !important;
  min-width: 560px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 132px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  justify-self: start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Master-data columns/rows: prevent overlap in all widths */
html body .grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

html body .grid-3 > div {
  min-width: 0 !important;
  max-width: none !important;
}

html body #groups .record-row[id^="group-row-"],
html body #catalog .record-row[id^="catalog-row-"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

html body #classes .record-row[id^="class-row-"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

html body #groups .record-row[id^="group-row-"] input,
html body #catalog .record-row[id^="catalog-row-"] input,
html body #classes .record-row[id^="class-row-"] input {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1260px) {
  html body .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* --- 2026-03 Final v110: landing bg neutral + assistant tab style + import action alignment --- */

/* A) Landing background: neutral gray/white instead of pink */
html body #landing {
  background: linear-gradient(180deg, #f5f6f8 0%, #edf0f4 100%) !important;
}

html body #landing::before,
html body #landing::after {
  background: rgba(255, 255, 255, 0.62) !important;
}

html body #landing .landing-side-right {
  background: #f3f4f7 !important;
}

/* keep input look stable for tokenFlowCard only (landing-auth-row uses borderless style) */
html body #landing #tokenFlowCard input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  border-radius: 10px !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* B) "Hast du Fragen?" in sidebar: same geometry family as tabs, stronger magenta */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 8px !important;
  right: auto !important;
  bottom: 92px !important;
  top: auto !important;
  z-index: 220 !important;
  width: calc(200px - 16px) !important;
  min-width: calc(200px - 16px) !important;
  max-width: calc(200px - 16px) !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid #8f0a35 !important;
  background: #ad093d !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body #appShell #openAssistantBtn.assistant-fab:hover {
  background: #bf0d4a !important;
  border-color: #bf0d4a !important;
  color: #ffffff !important;
}

/* C) Import: action block right + title alignment to "Bearbeiten" */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 204px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 28px !important;
  min-width: 560px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  min-width: 122px !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: 64px !important;
  gap: 8px !important;
}

/* --- 2026-03 Final v107: online parity (landing frame), assistant tab-style, import action alignment --- */

/* 1) Landing page card must always be visible online like local */
html body #landing .landing-card {
  width: min(430px, 94%) !important;
  margin: 0 auto !important;
  padding: 24px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1.8px solid rgba(173, 9, 61, 0.26) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px rgba(41, 9, 23, 0.12) !important;
}

/* 2) "Hast du Fragen?" same button form as tab-buttons, magenta-highlighted */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 12px !important;
  right: auto !important;
  bottom: 108px !important;
  top: auto !important;
  z-index: 220 !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 11px !important;
  border: 1px solid #ad093d !important;
  background: #ad093d !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #appShell #openAssistantBtn.assistant-fab:hover {
  border-color: #bf0d4a !important;
  background: #bf0d4a !important;
  color: #ffffff !important;
}

/* 3) Import: action cluster moved right; header aligned with "Bearbeiten" */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 292px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 160px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 122px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 10px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  justify-self: start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* --- 2026-03 Final v103: login autofill white + assistant left/higher + import action alignment --- */

/* 1) Login/logout fields: white background with clearly visible border in all states */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm,
/* removed broad email type selector */
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cf9bb1 !important;
  box-shadow: inset 0 0 0 1px rgba(207, 155, 177, 0.1) !important;
  -webkit-text-fill-color: #4f2337 !important;
  color: #4f2337 !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  border: 1.5px solid #cf9bb1 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset, inset 0 0 0 1px rgba(207, 155, 177, 0.1) !important;
  box-shadow: 0 0 0 1000px #ffffff inset, inset 0 0 0 1px rgba(207, 155, 177, 0.1) !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* 2) "Hast du Fragen?" in left sidebar area, slightly higher, non-overlapping */
html body #openAssistantBtn.assistant-fab {
  left: 14px !important;
  right: auto !important;
  bottom: 98px !important;
  top: auto !important;
  z-index: 180 !important;
  max-width: 136px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: #fff7fb !important;
  border: 1px solid #cf9bb1 !important;
  color: #7a2e4d !important;
  box-shadow: none !important;
}

/* 3) Import action block: shift whole block right and align "Aktion" with "Bearbeiten" */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 192px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 46px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 142px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* --- 2026-03 Final v104: enforce user-requested import/login/assistant positions --- */

/* Login + logout fields: white fill, visible border, no pink autofill tint */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm,
/* removed broad email type selector */
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #c98fa7 !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  box-shadow: none !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active {
  border: 2px solid #c98fa7 !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* Assistant button: keep in sidebar, higher, no overlap with bottom nav */
html body #appShell #openAssistantBtn.assistant-fab {
  left: 10px !important;
  right: auto !important;
  bottom: 132px !important;
  top: auto !important;
  z-index: 140 !important;
  max-width: 132px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: #fff7fb !important;
  border: 1px solid #c98fa7 !important;
  color: #7a2e4d !important;
  box-shadow: none !important;
}

/* Import action block: shift right and keep header aligned over Bearbeiten */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 230px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 84px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 132px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  justify-self: start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
}

/* --- 2026-03 Final v102 (EOF winner): login border/bg + import action align + stable switches + assistant sidebar button --- */

/* Import action area: keep KI badge left, move action header/buttons a bit right */
html body #importSuggestionsPanel thead tr th:last-child {
  text-align: left !important;
  padding-left: 176px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 6px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 128px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 8px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  margin: 0 !important;
  justify-self: start !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-left: 18px !important;
}

/* Switches: draw white knob via background gradient (works even if pseudo-rules collide) */
html body #appShell #manualProductNoBuyback,
html body #appShell #showAllConditionPrices,
html body #appShell #hideNoBuybackRows,
html body #appShell #aiMatchingEnabled,
html body #appShell #internalFtpSecure,
html body #appShell #internalFtpEnabled,
html body #appShell #ftpSecure,
html body #appShell #newwareSettingsEnabled,
html body #appShell #newwareSettingsExportEnabled,
html body #appShell #newwareOnlyActiveActions {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  border: 1px solid #c7a5b4 !important;
  border-radius: 999px !important;
  background-color: #efe6eb !important;
  background-image: radial-gradient(circle at 10px 50%, #fff 0 8px, transparent 8.2px) !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body #appShell #manualProductNoBuyback::before,
html body #appShell #showAllConditionPrices::before,
html body #appShell #hideNoBuybackRows::before,
html body #appShell #aiMatchingEnabled::before,
html body #appShell #internalFtpSecure::before,
html body #appShell #internalFtpEnabled::before,
html body #appShell #ftpSecure::before,
html body #appShell #newwareSettingsEnabled::before,
html body #appShell #newwareSettingsExportEnabled::before,
html body #appShell #newwareOnlyActiveActions::before,
html body #appShell #manualProductNoBuyback::after,
html body #appShell #showAllConditionPrices::after,
html body #appShell #hideNoBuybackRows::after,
html body #appShell #aiMatchingEnabled::after,
html body #appShell #internalFtpSecure::after,
html body #appShell #internalFtpEnabled::after,
html body #appShell #ftpSecure::after,
html body #appShell #newwareSettingsEnabled::after,
html body #appShell #newwareSettingsExportEnabled::after,
html body #appShell #newwareOnlyActiveActions::after {
  content: none !important;
}

html body #appShell #manualProductNoBuyback:checked,
html body #appShell #showAllConditionPrices:checked,
html body #appShell #hideNoBuybackRows:checked,
html body #appShell #aiMatchingEnabled:checked,
html body #appShell #internalFtpSecure:checked,
html body #appShell #internalFtpEnabled:checked,
html body #appShell #ftpSecure:checked,
html body #appShell #newwareSettingsEnabled:checked,
html body #appShell #newwareSettingsExportEnabled:checked,
html body #appShell #newwareOnlyActiveActions:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
  background-image: radial-gradient(circle at calc(100% - 10px) 50%, #fff 0 8px, transparent 8.2px) !important;
}

/* Assistant button in sidebar style (tab-like), not overlapping bottom options */
html body #openAssistantBtn.assistant-fab {
  left: 10px !important;
  right: auto !important;
  bottom: 72px !important;
  top: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  max-width: 140px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #d9b8c6 !important;
  background: #ffffff !important;
  color: #8d3355 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  z-index: 140 !important;
}

html body #openAssistantBtn.assistant-fab:hover {
  border-color: #c896ad !important;
  background: #fff5fa !important;
  color: #7b2448 !important;
}

/* --- 2026-03 Final v96: user-admin layout + import action align + login background + switch stability --- */
#landing .landing-split,
#landing .landing-side-right {
  background: transparent !important;
}

#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background: #fff2f7 !important;
  border: 2px solid #c984a2 !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  border: 2px solid #c984a2 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff2f7 inset !important;
  box-shadow: 0 0 0 1000px #fff2f7 inset !important;
}

#selfAccountSection .self-account-grid,
#userAdminSection > .actions.import-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 170px !important;
  gap: 10px !important;
  align-items: center !important;
}

#roleAccessEditor {
  display: block !important;
}

#roleAccessEditor .section-title {
  display: block !important;
  margin-bottom: 10px !important;
}

#roleAccessEditor #roleAccessGrid {
  width: 100% !important;
  margin-bottom: 10px !important;
}

#roleAccessEditor .role-access-actions {
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin-top: 10px !important;
}

#importSuggestionsPanel thead th:last-child {
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 0 !important;
}

#suggestionsBody td.suggestion-action-cell {
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 6px !important;
}

#suggestionsBody .suggestion-action-row {
  justify-content: flex-start !important;
  gap: 8px !important;
}

#suggestionsBody .suggestion-action-row .ki-live-badge {
  margin: 0 6px 0 0 !important;
  align-self: center !important;
}

#suggestionsBody .suggestion-action-buttons {
  justify-content: flex-start !important;
  gap: 6px !important;
}

#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows,
#aiMatchingEnabled,
#internalFtpSecure,
#internalFtpEnabled,
#ftpSecure,
#newwareSettingsEnabled,
#newwareSettingsExportEnabled,
#newwareOnlyActiveActions {
  display: inline-block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  border: 1px solid #c7a5b4 !important;
  background-color: #efe6eb !important;
  border-radius: 999px !important;
  width: 40px !important;
  height: 22px !important;
  position: relative !important;
  vertical-align: middle !important;
  outline: none !important;
}

#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after,
#aiMatchingEnabled::after,
#internalFtpSecure::after,
#internalFtpEnabled::after,
#ftpSecure::after,
#newwareSettingsEnabled::after,
#newwareSettingsExportEnabled::after,
#newwareOnlyActiveActions::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.15s ease !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked,
#aiMatchingEnabled:checked,
#internalFtpSecure:checked,
#internalFtpEnabled:checked,
#ftpSecure:checked,
#newwareSettingsEnabled:checked,
#newwareSettingsExportEnabled:checked,
#newwareOnlyActiveActions:checked {
  background-color: #ad093d !important;
  border-color: #ad093d !important;
}

#manualProductNoBuyback:checked::after,
#showAllConditionPrices:checked::after,
#hideNoBuybackRows:checked::after,
#aiMatchingEnabled:checked::after,
#internalFtpSecure:checked::after,
#internalFtpEnabled:checked::after,
#ftpSecure:checked::after,
#newwareSettingsEnabled:checked::after,
#newwareSettingsExportEnabled:checked::after,
#newwareOnlyActiveActions:checked::after {
  left: 20px !important;
}

/* --- 2026-03 Final v97: assistant button moved to left sidebar zone --- */
#openAssistantBtn.assistant-fab {
  left: 14px !important;
  right: auto !important;
  bottom: 14px !important;
  top: auto !important;
  z-index: 320 !important;
  border: 1px solid #7d2a4b !important;
  background: linear-gradient(180deg, #b10a3e 0%, #930732 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(74, 10, 35, 0.24) !important;
}

#openAssistantBtn.assistant-fab:hover {
  background: linear-gradient(180deg, #c30c45 0%, #9e0836 100%) !important;
  color: #ffffff !important;
  border-color: #8f2f53 !important;
}

/* --- 2026-03 Final v98: hard fallback for login bg, import actions, safari switches --- */
#landing {
  background: linear-gradient(165deg, #f2e6ed 0%, #f8eef3 52%, #f1e4eb 100%) !important;
}

#landing .landing-side-right,
#landing .landing-split {
  background: transparent !important;
}

#landing .landing-card {
  background: rgba(255, 255, 255, 0.95) !important;
}

#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background: #fdf1f7 !important;
  border: 2px solid #c98ba5 !important;
  box-shadow: inset 0 0 0 1px rgba(201, 139, 165, 0.22) !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  border: 2px solid #c98ba5 !important;
  -webkit-box-shadow: 0 0 0 1000px #fdf1f7 inset !important;
  box-shadow: 0 0 0 1000px #fdf1f7 inset !important;
}

#importSuggestionsPanel thead th:last-child,
#importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
}

#importSuggestionsPanel tbody td:last-child {
  padding-left: 8px !important;
  padding-right: 4px !important;
}

#importSuggestionsPanel tbody td:last-child .ki-live-badge {
  margin-left: 0 !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

#importSuggestionsPanel tbody td:last-child .btn-main,
#importSuggestionsPanel tbody td:last-child .btn-subtle {
  margin-left: 0 !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* Robust switch rendering (no pseudo dependency) */
#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows,
#aiMatchingEnabled,
#internalFtpSecure,
#internalFtpEnabled,
#ftpSecure,
#newwareSettingsEnabled,
#newwareSettingsExportEnabled,
#newwareOnlyActiveActions {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  border: 1px solid #c7a5b4 !important;
  border-radius: 999px !important;
  background-color: #efe6eb !important;
  background-image: radial-gradient(circle at 10px 50%, #ffffff 0 8px, transparent 8.2px) !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}

#manualProductNoBuyback::before,
#showAllConditionPrices::before,
#hideNoBuybackRows::before,
#aiMatchingEnabled::before,
#internalFtpSecure::before,
#internalFtpEnabled::before,
#ftpSecure::before,
#newwareSettingsEnabled::before,
#newwareSettingsExportEnabled::before,
#newwareOnlyActiveActions::before,
#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after,
#aiMatchingEnabled::after,
#internalFtpSecure::after,
#internalFtpEnabled::after,
#ftpSecure::after,
#newwareSettingsEnabled::after,
#newwareSettingsExportEnabled::after,
#newwareOnlyActiveActions::after {
  content: none !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked,
#aiMatchingEnabled:checked,
#internalFtpSecure:checked,
#internalFtpEnabled:checked,
#ftpSecure:checked,
#newwareSettingsEnabled:checked,
#newwareSettingsExportEnabled:checked,
#newwareOnlyActiveActions:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
  background-image: radial-gradient(circle at calc(100% - 10px) 50%, #ffffff 0 8px, transparent 8.2px) !important;
}

/* --- 2026-03 Final v99: small sidebar assistant button --- */
#openAssistantBtn.assistant-fab {
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 120px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 140 !important;
}

/* --- 2026-03 Final v100: definitive overrides for login + import actions + switches --- */

/* Login: keep the same visible look as first load */
#landing,
#landing .landing-side-right,
#landing .landing-split {
  background-color: transparent !important;
}

#landing .landing-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.8px solid rgba(173, 9, 61, 0.28) !important;
}

#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background: #fff4f9 !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #cb8ea7 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(203, 142, 167, 0.2) !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
}

#landing #tokenFlowCard input:focus,
#landing #tokenFlowCard input:focus {
  border-color: #ad093d !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.13), inset 0 0 0 1px rgba(173, 9, 61, 0.16) !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  border: 2px solid #cb8ea7 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff4f9 inset, inset 0 0 0 1px rgba(203, 142, 167, 0.2) !important;
  box-shadow: 0 0 0 1000px #fff4f9 inset, inset 0 0 0 1px rgba(203, 142, 167, 0.2) !important;
}

/* Import actions: left aligned, header aligned to button start, badge further left */
#importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 14px !important;
}

#suggestionsBody td.suggestion-action-cell,
#suggestionsBody td:last-child {
  text-align: left !important;
  padding-left: 14px !important;
  padding-right: 8px !important;
}

#suggestionsBody .suggestion-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

#suggestionsBody .suggestion-action-row .ki-live-badge {
  margin: 0 16px 0 0 !important;
  min-width: 120px !important;
  justify-content: flex-start !important;
}

#suggestionsBody .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Switches: robust circle knob in both states */
#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows,
#aiMatchingEnabled,
#internalFtpSecure,
#internalFtpEnabled,
#ftpSecure,
#newwareSettingsEnabled,
#newwareSettingsExportEnabled,
#newwareOnlyActiveActions {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background-color: #f1e7ec !important;
  background-image: none !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
}

#manualProductNoBuyback::before,
#showAllConditionPrices::before,
#hideNoBuybackRows::before,
#aiMatchingEnabled::before,
#internalFtpSecure::before,
#internalFtpEnabled::before,
#ftpSecure::before,
#newwareSettingsEnabled::before,
#newwareSettingsExportEnabled::before,
#newwareOnlyActiveActions::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: left 0.14s ease !important;
}

#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after,
#aiMatchingEnabled::after,
#internalFtpSecure::after,
#internalFtpEnabled::after,
#ftpSecure::after,
#newwareSettingsEnabled::after,
#newwareSettingsExportEnabled::after,
#newwareOnlyActiveActions::after {
  content: none !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked,
#aiMatchingEnabled:checked,
#internalFtpSecure:checked,
#internalFtpEnabled:checked,
#ftpSecure:checked,
#newwareSettingsEnabled:checked,
#newwareSettingsExportEnabled:checked,
#newwareOnlyActiveActions:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
}

#manualProductNoBuyback:checked::before,
#showAllConditionPrices:checked::before,
#hideNoBuybackRows:checked::before,
#aiMatchingEnabled:checked::before,
#internalFtpSecure:checked::before,
#internalFtpEnabled:checked::before,
#ftpSecure:checked::before,
#newwareSettingsEnabled:checked::before,
#newwareSettingsExportEnabled:checked::before,
#newwareOnlyActiveActions:checked::before {
  left: 19px !important;
}

/* --- 2026-03 Final v101: targeted fixes requested by user --- */

/* 1) Login inputs: border must remain visible on autofill + logout states */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input {
  background: #fff5f9 !important;
  border: 2px solid #bf7f9a !important;
  outline: 1px solid rgba(191, 127, 154, 0.35) !important;
  outline-offset: -1px !important;
  box-shadow: inset 0 0 0 1px rgba(191, 127, 154, 0.18) !important;
  -webkit-text-fill-color: #4f2337 !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active {
  border: 2px solid #bf7f9a !important;
  outline: 1px solid rgba(191, 127, 154, 0.4) !important;
  outline-offset: -1px !important;
  -webkit-box-shadow: 0 0 0 1000px #fff5f9 inset, inset 0 0 0 1px rgba(191, 127, 154, 0.18) !important;
  box-shadow: 0 0 0 1000px #fff5f9 inset, inset 0 0 0 1px rgba(191, 127, 154, 0.18) !important;
  -webkit-text-fill-color: #4f2337 !important;
}

/* 2) "Hast du Fragen?" button: move up in sidebar zone so it does not cover bottom options */
html body #openAssistantBtn.assistant-fab {
  left: 10px !important;
  right: auto !important;
  bottom: 74px !important;
  top: auto !important;
  max-width: 124px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: #f7eef2 !important;
  border: 1px solid #c696a9 !important;
  color: #7a2e4d !important;
  box-shadow: none !important;
  z-index: 140 !important;
}

html body #openAssistantBtn.assistant-fab:hover {
  background: #f2e2ea !important;
  color: #6b2342 !important;
  border-color: #b57f95 !important;
}

/* 3) Import action alignment: "Aktion" over Bearbeiten, KI badge clearly further left */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 154px !important; /* aligns header with start of Bearbeiten button */
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 8px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 136px auto !important; /* badge column + buttons */
  align-items: center !important;
  justify-content: start !important;
  gap: 10px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  margin: 0 !important;
  justify-self: start !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 4) Switches: enforce white knob in both states */
html body #appShell #manualProductNoBuyback,
html body #appShell #showAllConditionPrices,
html body #appShell #hideNoBuybackRows,
html body #appShell #aiMatchingEnabled,
html body #appShell #internalFtpSecure,
html body #appShell #internalFtpEnabled,
html body #appShell #ftpSecure,
html body #appShell #newwareSettingsEnabled,
html body #appShell #newwareSettingsExportEnabled,
html body #appShell #newwareOnlyActiveActions {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid #c7a5b4 !important;
  background-color: #efe6eb !important;
  background-image: none !important;
  position: relative !important;
  padding: 0 !important;
}

html body #appShell #manualProductNoBuyback::before,
html body #appShell #showAllConditionPrices::before,
html body #appShell #hideNoBuybackRows::before,
html body #appShell #aiMatchingEnabled::before,
html body #appShell #internalFtpSecure::before,
html body #appShell #internalFtpEnabled::before,
html body #appShell #ftpSecure::before,
html body #appShell #newwareSettingsEnabled::before,
html body #appShell #newwareSettingsExportEnabled::before,
html body #appShell #newwareOnlyActiveActions::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  transition: left 0.14s ease !important;
}

html body #appShell #manualProductNoBuyback::after,
html body #appShell #showAllConditionPrices::after,
html body #appShell #hideNoBuybackRows::after,
html body #appShell #aiMatchingEnabled::after,
html body #appShell #internalFtpSecure::after,
html body #appShell #internalFtpEnabled::after,
html body #appShell #ftpSecure::after,
html body #appShell #newwareSettingsEnabled::after,
html body #appShell #newwareSettingsExportEnabled::after,
html body #appShell #newwareOnlyActiveActions::after {
  content: none !important;
}

html body #appShell #manualProductNoBuyback:checked,
html body #appShell #showAllConditionPrices:checked,
html body #appShell #hideNoBuybackRows:checked,
html body #appShell #aiMatchingEnabled:checked,
html body #appShell #internalFtpSecure:checked,
html body #appShell #internalFtpEnabled:checked,
html body #appShell #ftpSecure:checked,
html body #appShell #newwareSettingsEnabled:checked,
html body #appShell #newwareSettingsExportEnabled:checked,
html body #appShell #newwareOnlyActiveActions:checked {
  background-color: #ad093d !important;
  border-color: #ad093d !important;
}

html body #appShell #manualProductNoBuyback:checked::before,
html body #appShell #showAllConditionPrices:checked::before,
html body #appShell #hideNoBuybackRows:checked::before,
html body #appShell #aiMatchingEnabled:checked::before,
html body #appShell #internalFtpSecure:checked::before,
html body #appShell #internalFtpEnabled:checked::before,
html body #appShell #ftpSecure:checked::before,
html body #appShell #newwareSettingsEnabled:checked::before,
html body #appShell #newwareSettingsExportEnabled:checked::before,
html body #appShell #newwareOnlyActiveActions:checked::before {
  left: 20px !important;
}

/* --- 2026-03 Final v95: Safari/Chrome autofill visibility on landing inputs --- */
#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background-color: #fff4f8 !important;
  background: #fff4f8 !important;
  border: 2px solid #cf8ea8 !important;
  color: #4d2235 !important;
  -webkit-text-fill-color: #4d2235 !important;
  box-shadow: inset 0 0 0 1px rgba(207, 142, 168, 0.22) !important;
  -webkit-box-shadow: inset 0 0 0 1px rgba(207, 142, 168, 0.22) !important;
}

#landing #tokenFlowCard input:focus,
#landing #tokenFlowCard input:focus {
  background: #fff7fa !important;
  border-color: #ad093d !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.12), inset 0 0 0 1px rgba(173, 9, 61, 0.16) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.12), inset 0 0 0 1px rgba(173, 9, 61, 0.16) !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #4d2235 !important;
  caret-color: #4d2235 !important;
  border: 2px solid #cf8ea8 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff4f8 inset, inset 0 0 0 1px rgba(207, 142, 168, 0.22) !important;
  box-shadow: 0 0 0 1000px #fff4f8 inset, inset 0 0 0 1px rgba(207, 142, 168, 0.22) !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* --- 2026-03 Final v92: detail panel, assistant overlap, login autofill, switchers --- */
#dashboardDetailWrap {
  top: 22px !important;
  right: 22px !important;
  bottom: 22px !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#dashboardDetailWrap .dashboard-audit-head {
  position: relative !important;
  padding: 14px 20px 10px 20px !important;
  min-height: 54px !important;
}

#closeDashboardDetailBtn {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #7A5060 !important;
  border-radius: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#closeDashboardDetailBtn:hover {
  color: #AD093D !important;
  background: transparent !important;
}

#appShell.detail-panel-open #openAssistantBtn.assistant-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

#openAssistantBtn.assistant-fab {
  bottom: 20px !important;
  right: 20px !important;
  z-index: 20 !important;
}

#landing .landing-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1.6px solid rgba(173, 9, 61, 0.24) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgba(30, 12, 19, 0.10) !important;
  padding: 22px !important;
}

#landing #tokenFlowCard input,
#landing #tokenFlowCard input:focus {
  background: #fff !important;
  color: #4B2A38 !important;
  -webkit-text-fill-color: #4B2A38 !important;
  border: 1px solid #DAB8C5 !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #4B2A38 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  border: 1px solid #DAB8C5 !important;
}

.cond-toggle-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.cond-toggle-item > input[type="checkbox"] {
  width: 36px !important;
  height: 20px !important;
  min-width: 36px !important;
  min-height: 20px !important;
  border-radius: 999px !important;
}

.cond-toggle-item > input[type="checkbox"]::after {
  width: 16px !important;
  height: 16px !important;
  left: 1px !important;
}

.cond-toggle-item > input[type="checkbox"]:checked::after {
  left: 17px !important;
}

#assistantPanel .assistant-head-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#assistantPanel .assistant-intro {
  margin: 4px 0 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #7A5060 !important;
}

#assistantPanel .assistant-quick-tools {
  margin-top: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#assistantPanel .assistant-quick-tools .btn-subtle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(122,80,96,0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#assistantPanel .assistant-quick-tools .btn-subtle svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.4 !important;
}

#assistantPanel .assistant-quick-tools .btn-subtle:hover {
  background: transparent !important;
  color: #AD093D !important;
}

#assistantPanel #assistantToggleSessionsBtn.assistant-toggle-sessions-btn svg {
  transition: transform 0.2s ease !important;
}

#assistantPanel #assistantToggleSessionsBtn.assistant-toggle-sessions-btn.is-collapsed svg {
  transform: scaleX(-1) !important;
}

#assistantPanel #assistantToggleSessionsBtn.assistant-toggle-sessions-btn {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
}

#assistantPanel #assistantToggleSessionsBtn.assistant-toggle-sessions-btn:hover {
  color: #AD093D !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin-left: auto !important;
  align-self: flex-start !important;
  position: relative !important;
  right: -1px !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn:hover {
  background: transparent !important;
  color: #AD093D !important;
}

#assistantPanel.sessions-collapsed .assistant-layout {
  grid-template-columns: 1fr !important;
}

#assistantPanel.sessions-collapsed .assistant-sessions-pane {
  display: none !important;
}

/* Footer bottom-left: strict equal spacing */
#userMenuWrap.sidebar-user {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#userFooterRow {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 36px 36px 36px 36px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
}

#userFooterRow > * {
  margin: 0 !important;
}

#userBadge {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

#footerLangToggle {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#userSettingsDirectBtn,
#userLogoutDirectBtn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* FINAL LOCK: assistant hover + x alignment */
#assistantPanel button,
#assistantPanel button:hover,
#assistantPanel button:active,
#assistantPanel button:focus,
#assistantPanel button:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

#assistantPanel .assistant-sessions-pane,
#assistantPanel .assistant-session-list,
#assistantPanel .assistant-session-row {
  overflow: visible !important;
}

#assistantPanel .assistant-session-row {
  display: grid !important;
  grid-template-columns: 1fr 24px !important;
  align-items: stretch !important;
  gap: 6px !important;
}

#assistantPanel .assistant-session-item,
#assistantPanel .assistant-session-delete {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}

#assistantPanel .assistant-session-item {
  justify-content: flex-start !important;
  line-height: 1.25 !important;
}

#assistantPanel .assistant-session-delete {
  justify-content: center !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
  align-self: flex-start !important;
  position: static !important;
  justify-self: end !important;
  z-index: 2 !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn:hover {
  background: transparent !important;
  color: #AD093D !important;
}

#assistantPanel .assistant-panel-head {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 8px !important;
  padding-right: 0 !important;
}

/* default collapsed: show sessions pane only when explicitly opened */
#assistantPanel .assistant-layout {
  grid-template-columns: 1fr !important;
}

#assistantPanel .assistant-sessions-pane {
  display: none !important;
}

#assistantPanel:not(.sessions-open) .assistant-sessions-pane {
  display: none !important;
}

#assistantPanel.sessions-open .assistant-layout {
  grid-template-columns: 220px 1fr !important;
}

#assistantPanel.sessions-open .assistant-sessions-pane {
  display: flex !important;
}

/* Assistant final micro-alignment */
#assistantPanel .assistant-panel-head {
  align-items: end !important;
}

#assistantPanel #closeAssistantBtn.assistant-close-btn {
  align-self: end !important;
  margin-bottom: 2px !important;
}

#assistantPanel .assistant-session-row {
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
}

#assistantPanel .assistant-session-delete {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin-top: 10px !important;
  margin-right: 2px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  justify-content: center !important;
}

#assistantPanel .assistant-session-delete:hover {
  border: none !important;
  background: transparent !important;
  color: #AD093D !important;
}

/* FINAL: close X anchored to whole assistant window (top-right) */
#assistantPanel.assistant-panel {
  position: fixed !important;
}

#assistantPanel.assistant-panel #closeAssistantBtn.assistant-close-btn {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  margin: 0 !important;
  align-self: auto !important;
  justify-self: auto !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  z-index: 20 !important;
}

#assistantPanel.assistant-panel #closeAssistantBtn.assistant-close-btn:hover {
  background: transparent !important;
  color: #AD093D !important;
}

#assistantPanel.assistant-panel .assistant-panel-head {
  padding-right: 36px !important;
}

/* Landing login fields: keep clear contrast after logout/autofill (Safari/Chrome) */
#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background: #fff8fc !important;
  border: 1.5px solid #d79ab1 !important;
  color: #5a1d36 !important;
  -webkit-text-fill-color: #5a1d36 !important;
  box-shadow: 0 0 0 1000px #fff8fc inset !important;
}

#landing .landing-form input::placeholder,
#landing #tokenFlowCard input::placeholder {
  color: #8f5b72 !important;
  opacity: 1 !important;
}

#landing #tokenFlowCard input:focus,
#landing #tokenFlowCard input:focus {
  background: #fff !important;
  border-color: #ad093d !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.14) !important;
  outline: none !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #5a1d36 !important;
  caret-color: #5a1d36 !important;
  transition: background-color 9999s ease-out 0s !important;
  box-shadow: 0 0 0 1000px #fff8fc inset !important;
  border: 1.5px solid #d79ab1 !important;
}

/* Final: assistant button should never overlap top form/actions */
#openAssistantBtn.assistant-fab {
  top: auto !important;
  bottom: 22px !important;
  right: 22px !important;
  z-index: 220 !important;
}

/* Final: make master-data inputs wider so full text is visible */
#groups .record-row[id^="group-row-"] {
  grid-template-columns: minmax(260px, 1.45fr) minmax(200px, 1fr) max-content max-content max-content max-content !important;
}

#catalog .record-row[id^="catalog-row-"] {
  grid-template-columns: minmax(260px, 1.45fr) minmax(200px, 1fr) max-content max-content max-content max-content !important;
}

#classes .record-row[id^="class-row-"] {
  grid-template-columns: minmax(320px, 1fr) max-content max-content max-content max-content !important;
}

/* --- 2026-03 Final v94: consolidated hard overrides (login, admin, import, detail, switches) --- */

/* Login fields: always visible border/background, including Safari autofill/logout states */
#landing .landing-card {
  border: 1.8px solid rgba(173, 9, 61, 0.28) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background: #fff !important;
  border: 1.8px solid #cc8fa9 !important;
  color: #4d2235 !important;
  -webkit-text-fill-color: #4d2235 !important;
  box-shadow: inset 0 0 0 1px rgba(204, 143, 169, 0.22) !important;
}

#landing #tokenFlowCard input:focus,
#landing #tokenFlowCard input:focus {
  border-color: #ad093d !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.12), inset 0 0 0 1px rgba(173, 9, 61, 0.18) !important;
  outline: none !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #4d2235 !important;
  caret-color: #4d2235 !important;
  border: 1.8px solid #cc8fa9 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset, inset 0 0 0 1px rgba(204, 143, 169, 0.22) !important;
  box-shadow: 0 0 0 1000px #fff inset, inset 0 0 0 1px rgba(204, 143, 169, 0.22) !important;
}

/* User admin layout */
#selfAccountSection {
  display: block !important;
}

#selfAccountSection .section-title {
  display: block !important;
  margin-bottom: 10px !important;
}

#selfAccountSection .self-account-grid,
#userAdminSection > .actions.import-card {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

#selfAccountSection .self-account-grid input,
#selfAccountSection .self-account-grid button,
#userAdminSection > .actions.import-card input,
#userAdminSection > .actions.import-card select,
#userAdminSection > .actions.import-card button {
  width: 100% !important;
  min-height: 42px !important;
}

#roleAccessEditor {
  display: block !important;
}

#roleAccessEditor .section-title {
  display: block !important;
  margin-bottom: 10px !important;
}

#roleAccessEditor #roleAccessGrid {
  width: 100% !important;
}

#roleAccessEditor .role-access-actions {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 12px !important;
}

.user-admin-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.user-admin-meta .hint {
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Suggestions action alignment */
#importSuggestionsPanel thead th:last-child {
  text-align: right !important;
  padding-right: 20px !important;
}

#suggestionsBody td.suggestion-action-cell {
  text-align: right !important;
  padding-right: 16px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* --- PHO-24: compact sizing/padding for Benutzerverwaltung --- */
#userAdminPanel #userAdminSection > .actions.import-card {
  grid-template-columns: minmax(128px, 1fr) minmax(156px, 1.2fr) minmax(116px, 0.9fr) auto !important;
  gap: 0.5rem !important;
  padding: 0.58rem 0.64rem !important;
}

#newUserUsername { min-width: 122px !important; }
#newUserEmail { min-width: 148px !important; }
#newUserRole { min-width: 112px !important; }

#userAdminPanel #userAdminSection > .actions.import-card input,
#userAdminPanel #userAdminSection > .actions.import-card select,
#userAdminPanel #userAdminSection > .actions.import-card button {
  min-height: 34px !important;
  padding: 0.34rem 0.56rem !important;
}

#createUserBtn {
  min-width: 136px !important;
  min-height: 34px !important;
}

#userAdminPanel .user-admin-card {
  padding: 0.62rem 0.68rem !important;
  gap: 0.55rem !important;
}

#userAdminPanel .user-admin-actions {
  gap: 0.35rem !important;
}

#userAdminPanel .user-admin-actions-group {
  gap: 0.32rem !important;
}

#userAdminPanel .user-admin-actions button {
  min-width: 98px !important;
  min-height: 30px !important;
  padding: 0.3rem 0.5rem !important;
}

#suggestionsBody .suggestion-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#suggestionsBody .suggestion-action-row .ki-live-badge {
  margin-right: auto !important;
  margin-left: 0 !important;
}

#suggestionsBody .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#suggestionsBody .suggestion-action-buttons .btn-main,
#suggestionsBody .suggestion-action-buttons .btn-subtle {
  min-width: 118px !important;
}

/* Detail panel: stronger border, more inner spacing, close X fully right */
#dashboardDetailWrap {
  top: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  border: 2px solid #e1c6d2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
}

#dashboardDetailWrap .dashboard-audit-head {
  padding: 14px 18px !important;
  min-height: 58px !important;
}

#closeDashboardDetailBtn {
  position: absolute !important;
  top: 10px !important;
  right: 8px !important;
  margin: 0 !important;
}

/* Popup panel: wider so all columns fit */
#dashboardDetailWrap {
  width: 500px !important;
  max-width: calc(100vw - 20px) !important;
}

#appShell.detail-panel-open main {
  margin-right: 500px !important;
}

/* Header: title + close on same row, title truncates if too long */
#dashboardDetailWrap .dashboard-audit-head {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 44px 14px 20px !important;
  min-height: 50px !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
}

#dashboardDetailWrap .dashboard-audit-head h3 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#closeDashboardDetailBtn {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.dashboard-detail-scroll {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

#dashboardDetailWrap table {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  table-layout: fixed !important;
}

#dashboardDetailWrap table thead th {
  white-space: nowrap !important;
  vertical-align: bottom !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Column widths: SKU MPB | Name | Aktion */
#dashboardDetailWrap table th:nth-child(1),
#dashboardDetailWrap table td:nth-child(1) {
  width: 90px !important;
}
#dashboardDetailWrap table th:nth-child(2),
#dashboardDetailWrap table td:nth-child(2) {
  /* name – takes all remaining space */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#dashboardDetailWrap table th:nth-child(3),
#dashboardDetailWrap table td:nth-child(3) {
  width: 80px !important;
  text-align: center !important;
}

/* Keep assistant button from overlapping content panels */
#openAssistantBtn.assistant-fab {
  right: 12px !important;
  bottom: 12px !important;
  z-index: 200 !important;
}

#appShell.detail-panel-open #openAssistantBtn.assistant-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Stable custom switches */
#manualProductNoBuyback,
#showAllConditionPrices,
#hideNoBuybackRows,
#aiMatchingEnabled,
#internalFtpSecure,
#internalFtpEnabled,
#ftpSecure,
#newwareSettingsEnabled,
#newwareSettingsExportEnabled,
#newwareOnlyActiveActions {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid #c7a5b4 !important;
  background-color: #efe6eb !important;
  vertical-align: middle !important;
  position: relative !important;
  margin: 0 6px 0 0 !important;
  padding: 0 !important;
}

#manualProductNoBuyback::after,
#showAllConditionPrices::after,
#hideNoBuybackRows::after,
#aiMatchingEnabled::after,
#internalFtpSecure::after,
#internalFtpEnabled::after,
#ftpSecure::after,
#newwareSettingsEnabled::after,
#newwareSettingsExportEnabled::after,
#newwareOnlyActiveActions::after {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.14s ease !important;
}

#manualProductNoBuyback:checked,
#showAllConditionPrices:checked,
#hideNoBuybackRows:checked,
#aiMatchingEnabled:checked,
#internalFtpSecure:checked,
#internalFtpEnabled:checked,
#ftpSecure:checked,
#newwareSettingsEnabled:checked,
#newwareSettingsExportEnabled:checked,
#newwareOnlyActiveActions:checked {
  background-color: #ad093d !important;
  border-color: #ad093d !important;
}

#manualProductNoBuyback:checked::after,
#showAllConditionPrices:checked::after,
#hideNoBuybackRows:checked::after,
#aiMatchingEnabled:checked::after,
#internalFtpSecure:checked::after,
#internalFtpEnabled:checked::after,
#ftpSecure:checked::after,
#newwareSettingsEnabled:checked::after,
#newwareSettingsExportEnabled:checked::after,
#newwareOnlyActiveActions:checked::after {
  left: 19px !important;
}

/* --- 2026-03 Final v106 (TRUE EOF): lock login/assistant/import requested layout --- */

/* A) Login/logout inputs: white fill + visible border always */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm,
/* removed broad email type selector */
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  border-radius: 10px !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowPassword:-internal-autofill-selected, html body #landing #tokenFlowPasswordConfirm:-internal-autofill-selected {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* B) Assistant button: sidebar, a bit higher, tab-like style */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 10px !important;
  right: auto !important;
  bottom: 154px !important;
  top: auto !important;
  z-index: 220 !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid #a40d41 !important;
  background: linear-gradient(180deg, #bf0d4a 0%, #9f083a 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px rgba(106, 10, 49, 0.22) !important;
}

/* C) Import actions: move action block right, align title over Bearbeiten */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 248px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 108px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 138px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  justify-self: start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* --- 2026-03 Final v109 (TRUE EOF): lock requested UI exactly --- */

/* Landing: same as offline, square/no frame around whole card */
html body #landing .landing-card {
  width: min(430px, 94%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Inputs only: white + visible border in default/logout/autofill */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm,
/* removed broad email type selector */
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  border-radius: 10px !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowPassword:-internal-autofill-selected, html body #landing #tokenFlowPasswordConfirm:-internal-autofill-selected {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* Sidebar button: same geometry as subtle tab buttons, magenta highlight */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 12px !important;
  right: auto !important;
  bottom: 112px !important;
  top: auto !important;
  z-index: 220 !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid #ad093d !important;
  background: #ad093d !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

html body #appShell #openAssistantBtn.assistant-fab:hover {
  background: #bf0d4a !important;
  border-color: #bf0d4a !important;
  color: #ffffff !important;
}

/* Import action area: push right + align header with Bearbeiten */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 340px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 204px !important;
  min-width: 560px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 132px auto !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  justify-self: start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Master-data: no overlap */
html body .grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

html body .grid-3 > div {
  min-width: 0 !important;
  max-width: none !important;
}

html body #groups .record-row[id^="group-row-"],
html body #catalog .record-row[id^="catalog-row-"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

html body #classes .record-row[id^="class-row-"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

html body #groups .record-row[id^="group-row-"] input,
html body #catalog .record-row[id^="catalog-row-"] input,
html body #classes .record-row[id^="class-row-"] input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 1260px) {
  html body .grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* --- 2026-03 Final v111 (EOF lock): landing bg neutral + assistant tab + import alignment --- */

/* A) Landing background neutral gray/white */
html body #landing {
  background: linear-gradient(180deg, #f5f6f8 0%, #edf0f4 100%) !important;
}

html body #landing::before,
html body #landing::after {
  background: rgba(255, 255, 255, 0.62) !important;
}

html body #landing .landing-side-right {
  background: #f3f4f7 !important;
}

/* keep login/logout/autofill inputs white with visible border */
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input,
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm,
/* removed broad email type selector */
html body #landing #tokenFlowPassword, html body #landing #tokenFlowPasswordConfirm {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  border-radius: 10px !important;
  color: #4f2337 !important;
  -webkit-text-fill-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowCard input:-webkit-autofill,
html body #landing #tokenFlowCard input:-webkit-autofill:hover,
html body #landing #tokenFlowCard input:-webkit-autofill:focus,
html body #landing #tokenFlowCard input:-webkit-autofill:active,
html body #landing #tokenFlowPassword:-internal-autofill-selected, html body #landing #tokenFlowPasswordConfirm:-internal-autofill-selected {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #cc95ad !important;
  -webkit-text-fill-color: #4f2337 !important;
  caret-color: #4f2337 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* B) Sidebar "Hast du Fragen?": tab-like, full sidebar width, stronger magenta */
html body #appShell #openAssistantBtn.assistant-fab {
  position: fixed !important;
  left: 8px !important;
  right: auto !important;
  bottom: 92px !important;
  top: auto !important;
  z-index: 220 !important;
  width: calc(200px - 16px) !important;
  min-width: calc(200px - 16px) !important;
  max-width: calc(200px - 16px) !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid #8f0a35 !important;
  background: #ad093d !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body #appShell #openAssistantBtn.assistant-fab:hover {
  background: #bf0d4a !important;
  border-color: #bf0d4a !important;
  color: #ffffff !important;
}

/* C) Import action area right + title aligned to "Bearbeiten" start */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 204px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 28px !important;
  min-width: 560px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .ki-live-badge {
  min-width: 122px !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-left: 64px !important;
  gap: 8px !important;
}
/* --- 2026-03 Assistant Sidebar Tab (replaces floating "Hast du Fragen?") --- */
#openAssistantBtn.sidebar-assistant-tab {
  width: calc(100% - 24px) !important;
  margin: 10px 12px 10px !important;
  margin-top: auto !important;
  border: 1px solid #8f0531 !important;
  background: linear-gradient(180deg, #ef1a69 0%, #bf0845 100%) !important;
  color: #fff;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  border-radius: 8px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 18px rgba(164, 7, 59, 0.24) !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  z-index: auto !important;
}

#openAssistantBtn.sidebar-assistant-tab:hover {
  background: linear-gradient(180deg, #f22571 0%, #cc0b4c 100%) !important;
  box-shadow: 0 10px 22px rgba(164, 7, 59, 0.3) !important;
}

#openAssistantBtn.sidebar-assistant-tab.is-hidden {
  display: none !important;
}

/* --- 2026-03 Login input surface: grey like background, border always visible (incl. autofill) --- */
#landing #tokenFlowCard input,
#landing #tokenFlowCard input {
  background: #f2edf0 !important;
  background-color: #f2edf0 !important;
  border: 2px solid #cc95ad !important;
  color: #5a2236 !important;
  -webkit-text-fill-color: #5a2236 !important;
  caret-color: #5a2236 !important;
}

#landing #tokenFlowCard input:focus,
#landing #tokenFlowCard input:focus {
  background: #f2edf0 !important;
  background-color: #f2edf0 !important;
  border-color: #b95f84 !important;
  -webkit-text-fill-color: #5a2236 !important;
  box-shadow: 0 0 0 1px rgba(173, 9, 61, 0.12) !important;
}

#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active,
#landing #tokenFlowCard input:-webkit-autofill,
#landing #tokenFlowCard input:-webkit-autofill:hover,
#landing #tokenFlowCard input:-webkit-autofill:focus,
#landing #tokenFlowCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #5a2236 !important;
  -webkit-box-shadow: 0 0 0 1000px #f2edf0 inset !important;
  box-shadow: 0 0 0 1000px #f2edf0 inset !important;
  border: 2px solid #cc95ad !important;
}

/* --- 2026-03 Sidebar KI final lock (EOF) --- */
#appShell > nav.tabs > #openAssistantBtn.sidebar-assistant-tab {
  order: 3 !important;
  margin-top: auto !important;
  margin-bottom: 8px !important;
  align-self: stretch !important;
}

#appShell > nav.tabs > #userMenuWrap.sidebar-user,
#appShell > nav.tabs > #userMenuWrap {
  order: 4 !important;
  margin-top: 0 !important;
}

/* --- 2026-03 KI Assistant tab fixed color (no hover-only effect) --- */
#appShell > nav.tabs > #openAssistantBtn.sidebar-assistant-tab,
#appShell > nav.tabs > #openAssistantBtn.sidebar-assistant-tab:hover,
#appShell > nav.tabs > #openAssistantBtn.sidebar-assistant-tab:focus,
#appShell > nav.tabs > #openAssistantBtn.sidebar-assistant-tab:active {
  background: #b70740 !important;
  border-color: #8f0531 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* --- Preise table column sorting --- */
#effective #pricesTable thead tr:first-child th.sortable-th {
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
}

#effective #pricesTable thead tr:first-child th.sortable-th:hover {
  background: rgba(173, 9, 61, 0.06) !important;
}

#effective #pricesTable thead tr:first-child th.sortable-th.sort-active {
  color: #ad093d !important;
}

#effective #pricesTable thead tr:first-child th.sortable-th .sort-indicator {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-left: 6px !important;
  font-size: 8px !important;
  opacity: 0.45;
  vertical-align: middle !important;
  line-height: 1 !important;
}

#effective #pricesTable thead tr:first-child th.sortable-th.sort-active .sort-indicator {
  opacity: 1 !important;
  color: #ad093d !important;
}

/* --- Intro Tour --- */
.intro-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}

.intro-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 12, 18, 0.48);
}

.intro-tour-focus {
  position: absolute;
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(23, 12, 18, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.intro-tour-card {
  position: absolute;
  pointer-events: auto;
  background: #fff;
  border: 1px solid #e7d2db;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(24, 13, 18, 0.24);
  padding: 14px 14px 12px 14px;
}

.intro-tour-step {
  margin: 0 0 6px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f5b70;
}

.intro-tour-title {
  margin: 0 0 6px 0;
  color: #4f2035;
  font-size: 18px;
  font-weight: 700;
}

.intro-tour-text {
  margin: 0;
  color: #5d3448;
  font-size: 14px;
  line-height: 1.4;
}

.intro-tour-inline-lang-link {
  -webkit-appearance: none;
  appearance: none;
  border: none !important;
  background: transparent !important;
  display: inline;
  color: #7e2e4f;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none !important;
  outline: none;
}

.intro-tour-inline-lang-link:visited,
.intro-tour-inline-lang-link:hover,
.intro-tour-inline-lang-link:active,
.intro-tour-inline-lang-link:focus-visible {
  color: #7e2e4f;
}

.intro-tour-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.intro-tour-actions .btn-subtle,
.intro-tour-actions .btn-main {
  min-height: 34px;
  padding: 8px 12px;
}

.intro-tour-target-active {
  position: relative !important;
  z-index: 12010 !important;
}

/* Keep sidebar layout stable when assistant panel opens */
#appShell > nav.tabs > #openAssistantBtn.sidebar-assistant-tab.is-hidden {
  display: inline-flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Approval notifications: magenta unread dot on user badge */
#userBadge.has-notifications,
.user-badge.has-notifications,
#userBadge.has-security-alert,
.user-badge.has-security-alert {
  position: relative;
  overflow: visible !important;
}

#userBadge.has-notifications::after,
.user-badge.has-notifications::after {
  content: none !important;
  display: none !important;
}

#userBadge.has-security-alert::before,
.user-badge.has-security-alert::before {
  content: '!' !important;
  position: absolute !important;
  top: -8px !important;
  right: -5px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #b70740 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

#userAdminPanel .login-security-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#userAdminPanel .login-security-head,
#userAdminPanel .login-security-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#userAdminPanel .login-security-list,
#userAdminPanel .login-security-alerts {
  display: grid !important;
  gap: 8px !important;
}

#userAdminPanel #loginSecuritySummary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

#userAdminPanel #loginSecuritySummary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid #e4d4da !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #5e4350 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#userAdminPanel #loginSecuritySummary strong {
  color: #1e0c13 !important;
  font-weight: 800 !important;
}

#userAdminPanel .login-security-row,
#userAdminPanel .login-security-alert {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 14px !important;
  align-items: center !important;
  border: 1px solid #e4d4da !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  background: #fff !important;
}

#userAdminPanel .login-security-row.is-locked,
#userAdminPanel .login-security-alert.is-unread {
  border-color: rgba(183, 7, 64, 0.34) !important;
  background: rgba(183, 7, 64, 0.045) !important;
}

#userAdminPanel .login-security-row strong,
#userAdminPanel .login-security-row span,
#userAdminPanel .login-security-alert strong,
#userAdminPanel .login-security-alert span,
#userAdminPanel .login-security-alert small {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#userAdminPanel .login-security-row strong {
  color: #b70740 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#userAdminPanel .login-security-count {
  color: #1e0c13 !important;
  font-weight: 800 !important;
  text-align: right !important;
}

#userAdminPanel .login-security-lock {
  color: #b70740 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: right !important;
}

#userAdminPanel .login-security-alert-head {
  color: #8a6674 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

@media (max-width: 760px) {
  #userAdminPanel .login-security-row,
  #userAdminPanel .login-security-alert {
    grid-template-columns: 1fr !important;
  }
  #userAdminPanel .login-security-count,
  #userAdminPanel .login-security-lock {
    text-align: left !important;
  }
}

/* Role access table: avoid double borders and keep action controls readable */
#roleAccessEditor .role-access-table-wrap {
  padding: 0 !important;
  border: 1px solid #e4d4da !important;
  border-radius: 10px !important;
  overflow: auto !important;
}

#roleAccessEditor .role-access-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 0 !important;
}

#roleAccessEditor .role-access-table th,
#roleAccessEditor .role-access-table td {
  border: 0 !important;
  border-bottom: 1px solid #e4d4da !important;
  white-space: nowrap !important;
}

#roleAccessEditor .role-access-table th + th,
#roleAccessEditor .role-access-table td + td {
  border-left: 1px solid #e4d4da !important;
}

#roleAccessEditor .role-access-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

#roleAccessEditor .role-access-table th,
#roleAccessEditor .role-access-table td {
  vertical-align: middle !important;
}

#roleAccessEditor .role-access-table th:first-child,
#roleAccessEditor .role-access-table td:first-child {
  text-align: left !important;
  padding-left: 14px !important;
}

#roleAccessEditor .role-access-table th:not(:first-child),
#roleAccessEditor .role-access-table td:not(:first-child) {
  text-align: center !important;
}

#roleAccessEditor .role-access-table input[type="checkbox"][data-role-access="1"] {
  display: block !important;
  margin: 0 auto !important;
}

#roleAccessEditor .role-access-add-row {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

#roleAccessEditor .role-access-add-row .role-access-add-input {
  grid-column: 1 / 2 !important;
  width: 100% !important;
  min-height: 42px !important;
}

#roleAccessEditor .role-access-add-row .role-access-add-btn {
  grid-column: 2 / 3 !important;
  width: 100% !important;
  min-height: 42px !important;
}

@media (max-width: 1100px) {
  #roleAccessEditor .role-access-add-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 700px) {
  #roleAccessEditor .role-access-add-row {
    grid-template-columns: 1fr !important;
  }

  #roleAccessEditor .role-access-add-row .role-access-add-input,
  #roleAccessEditor .role-access-add-row .role-access-add-btn {
    grid-column: auto !important;
  }
}

/* CTO Fix: Alignment and One-Line layout for Benutzerverwaltung (PHO-15) */
#roleAccessEditor .role-access-table-wrap {
  border: 0 !important; /* Remove border to align with header text */
  border-radius: 0 !important;
}

#roleAccessEditor .role-access-table th:first-child,
#roleAccessEditor .role-access-table td:first-child {
  padding-left: 0 !important; /* Start text at the same position as headers */
}

.user-admin-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  padding: 10px 14px !important;
}

.user-admin-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  flex: 1 !important;
}

.user-admin-identity {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: auto !important;
  flex: 0 0 auto !important;
}

.user-admin-name {
  white-space: nowrap !important;
}

.user-admin-mail {
  margin: 0 !important;
  white-space: nowrap !important;
}

.user-admin-meta {
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px !important;
  flex-wrap: nowrap !important;
  flex: 1 !important;
}

.user-admin-actions {
  margin-top: 0 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.user-admin-actions button {
  min-width: auto !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
}

/* Ensure section titles also align */
#userAdminPanel .section-title {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Final refined layout for Benutzerverwaltung - Ensures alignment, proper spacing, and responsive wrapping */

#userAdminPanel {
  padding: 0 !important; /* Align with other tab-panels which have 0 padding */
  overflow-x: hidden !important;
}

#userAdminPanel .dashboard-audit-head {
  padding: 0 !important; /* Match other tabs' header alignment */
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 2rem !important;
}

#userAdminPanel .import-card,
#userAdminPanel .user-admin-card {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.9rem !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(196, 194, 194, 0.5) !important;
  border-radius: 14px !important;
}

/* For list items, allow wrapping but keep actions distinct */
#userAdminPanel .user-admin-card {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
}

#userAdminPanel .actions,
#userAdminPanel .self-account-grid,
#userAdminPanel .role-access-add-row,
#userAdminPanel .user-admin-top,
#userAdminPanel .user-admin-meta,
#userAdminPanel .user-admin-identity,
#userAdminPanel .user-admin-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; /* Allow items to wrap on smaller screens */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

#userAdminPanel .actions > *,
#userAdminPanel .self-account-grid > *,
#userAdminPanel .role-access-add-row > *,
#userAdminPanel .user-admin-top > *,
#userAdminPanel .user-admin-meta > *,
#userAdminPanel .user-admin-identity > *,
#userAdminPanel .user-admin-actions > * {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

#userAdminPanel input, 
#userAdminPanel select {
  min-width: 120px !important; /* Slightly smaller min-width */
  max-width: 100% !important;
  width: auto !important;
}

#userAdminPanel button {
  width: auto !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

#userAdminPanel .user-admin-top {
  flex: 1 1 280px !important;
}

#userAdminPanel .user-admin-actions {
  flex: 1 1 340px !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
}

#userAdminPanel .user-admin-actions button {
  min-height: 32px !important;
  padding: 0.4rem 0.65rem !important;
  font-size: 0.84rem !important;
}

#userAdminPanel .user-admin-actions .btn-admin-long {
  white-space: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

@media (max-width: 1120px) {
  #userAdminPanel .user-admin-actions {
    justify-content: flex-start !important;
  }
}

#newUserUsername { min-width: 140px !important; }
#newUserEmail { min-width: 180px !important; }
#newUserRole { min-width: 120px !important; }





/* --- Toasts --- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000003; /* above landing (999999), logout (1000000), reset modal (1000001) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 20px;
  border-radius: var(--radius-md, 6px);
  background: #fff;
  color: var(--text, #1E0C13);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: toast-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-left: 4px solid var(--primary, #AD093D);
}

.toast.toast-error {
  border-left-color: #e53935;
  background: #fffafa;
}

.toast.toast-success {
  border-left-color: #43a047;
}

.toast.toast-warning {
  border-left-color: #fb8c00;
}

.toast.hide {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

.toast-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.5;
  padding: 0;
  line-height: 1;
  color: inherit;
  transition: opacity 0.2s;
}
.toast-close-btn:hover {
  opacity: 1;
}

/* --- Sticky Table Headers --- */
.tab-panel table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  box-shadow: inset 0 -1px 0 var(--color-border, #E4D4DA);
}
.tab-panel .table-wrap,
.tab-panel .dashboard-detail-scroll {
  max-height: calc(100vh - 280px);
  overflow: auto;
  position: relative;
}

/* --- Tab Transitions --- */
.tab-panel {
  transition: opacity 0.15s ease-in-out;
}
.tab-panel.fade-out {
  opacity: 0;
}

/* --- Unsaved Changes Indicator --- */
tr.dirty {
  background-color: var(--surface-soft, #FDF7FA) !important;
}
tr.dirty td {
  border-bottom: 1px solid var(--color-primary, #AD093D);
}

/* --- Loading Button --- */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.48s linear infinite;
  display: inline-block;
}

tr.is-saving {
  opacity: 0.7;
  pointer-events: none;
}

/* --- PHO-23: Benutzerverwaltung UI compaction and consistency --- */
#userAdminPanel #selfAccountSection {
  padding: 0.65rem 0.75rem !important;
  gap: 0.55rem !important;
}

#userAdminPanel #selfAccountSection .section-title {
  margin-bottom: 0.3rem !important;
}

#userAdminPanel #selfAccountSection .self-account-grid {
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.2fr) minmax(130px, 0.85fr) auto !important;
  gap: 0.55rem !important;
  align-items: center !important;
}

#userAdminPanel #selfAccountSection .self-account-grid input {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0.48rem 0.65rem !important;
}

#userAdminPanel #selfAccountSection .self-account-grid button {
  min-height: 34px !important;
  padding: 0.45rem 0.7rem !important;
}

#userAdminPanel #userAdminSection > .actions.import-card {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.35fr) minmax(130px, 0.9fr) auto !important;
  gap: 0.6rem !important;
  align-items: center !important;
}

#newUserUsername,
#newUserEmail,
#newUserRole {
  min-width: 0 !important;
  width: 100% !important;
}

#createUserBtn {
  min-width: 165px !important;
}

#roleAccessEditor .role-access-table-wrap {
  border: 1px solid #e4d4da !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: auto !important;
}

#roleAccessEditor .role-access-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #fdf8fa !important;
  padding-top: 0.58rem !important;
  padding-bottom: 0.58rem !important;
}

#roleAccessEditor .role-access-table td {
  padding-top: 0.52rem !important;
  padding-bottom: 0.52rem !important;
}

#roleAccessEditor .role-access-table tbody tr:hover td {
  background: #fff7fa !important;
}

#roleAccessEditor .role-access-table td:last-child {
  min-width: 128px !important;
}

#roleAccessEditor .role-access-table button[data-role-delete] {
  min-height: 30px !important;
  min-width: 96px !important;
  padding: 0.3rem 0.6rem !important;
}

#userAdminPanel .user-admin-card {
  align-items: center !important;
  padding: 0.72rem 0.78rem !important;
  gap: 0.8rem !important;
}

#userAdminPanel .user-admin-top {
  flex: 1 1 320px !important;
  gap: 0.55rem !important;
}

#userAdminPanel .user-admin-identity {
  gap: 0.35rem !important;
}

#userAdminPanel .user-admin-meta {
  gap: 0.42rem !important;
}

#userAdminPanel .user-admin-actions {
  flex: 1 1 360px !important;
  justify-content: flex-end !important;
  gap: 0.45rem !important;
}

#userAdminPanel .user-admin-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-wrap: nowrap !important;
}

#userAdminPanel .user-admin-actions-primary {
  padding-right: 0.15rem !important;
  margin-right: 0.15rem !important;
  border-right: 1px solid #eadbe1 !important;
}

#userAdminPanel .user-admin-actions button {
  min-height: 31px !important;
  min-width: 108px !important;
  padding: 0.36rem 0.6rem !important;
  font-size: 0.83rem !important;
}

#userAdminPanel .user-admin-actions .btn-admin-long {
  min-width: 148px !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  #userAdminPanel .user-admin-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 1024px) {
  #userAdminPanel #selfAccountSection .self-account-grid,
  #userAdminPanel #userAdminSection > .actions.import-card {
    grid-template-columns: 1fr 1fr !important;
  }

  #userAdminPanel #selfAccountSection .self-account-grid button,
  #createUserBtn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #userAdminPanel .user-admin-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 700px) {
  #userAdminPanel #selfAccountSection .self-account-grid,
  #userAdminPanel #userAdminSection > .actions.import-card {
    grid-template-columns: 1fr !important;
  }

  #userAdminPanel .user-admin-actions-group {
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  #userAdminPanel .user-admin-actions-primary {
    border-right: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}

/* PHO-23 follow-up: match button/font scale and loosen button grouping */
#userAdminPanel .btn-main,
#userAdminPanel .btn-subtle,
#userAdminPanel button {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

#userAdminPanel input,
#userAdminPanel select {
  font-size: 0.9rem !important;
}

#userAdminPanel .role-access-table th,
#userAdminPanel .role-access-table td {
  font-size: 0.84rem !important;
}

#userAdminPanel .role-access-table th {
  letter-spacing: 0.06em !important;
}

#userAdminPanel .user-admin-actions {
  gap: 0.65rem !important;
  row-gap: 0.5rem !important;
}

#userAdminPanel .user-admin-actions-group {
  gap: 0.55rem !important;
}

#userAdminPanel .user-admin-actions button {
  min-width: 102px !important;
  min-height: 30px !important;
  padding: 0.32rem 0.58rem !important;
}

#userAdminPanel .user-admin-actions .btn-admin-long {
  min-width: 136px !important;
}

/* --- PHO-24 final override: compact sizing/padding for Benutzerverwaltung --- */
#userAdminPanel #userAdminSection > .actions.import-card {
  grid-template-columns: minmax(128px, 1fr) minmax(156px, 1.2fr) minmax(116px, 0.9fr) auto !important;
  gap: 0.5rem !important;
  padding: 0.58rem 0.64rem !important;
}

#newUserUsername { min-width: 122px !important; }
#newUserEmail { min-width: 148px !important; }
#newUserRole { min-width: 112px !important; }

#userAdminPanel #userAdminSection > .actions.import-card input,
#userAdminPanel #userAdminSection > .actions.import-card select,
#userAdminPanel #userAdminSection > .actions.import-card button {
  min-height: 34px !important;
  padding: 0.34rem 0.56rem !important;
}

#createUserBtn {
  min-width: 136px !important;
  min-height: 34px !important;
}

#userAdminPanel .user-admin-card {
  padding: 0.62rem 0.68rem !important;
  gap: 0.55rem !important;
}

#userAdminPanel .user-admin-actions {
  gap: 0.35rem !important;
}

#userAdminPanel .user-admin-actions-group {
  gap: 0.32rem !important;
}

#userAdminPanel .user-admin-actions button {
  min-width: 98px !important;
  min-height: 30px !important;
  padding: 0.3rem 0.5rem !important;
}

#effective .market-price-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #5a4a52;
  font-size: 11px;
  line-height: 1.3;
}

#effective .market-price-badge.is-stale {
  background: #fff2df;
  color: #8a4d00;
}

#effective .market-price-panel {
  width: 100%;
  padding: 8px;
  border: 1px solid #e4d4da;
  border-radius: 8px;
  background: #fff;
}

#effective .market-price-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* --- Market Price Detail UI (Premium CI Redesign) --- */
.market-price-header { margin-bottom: 16px; border-bottom: 1px solid #f0e5ea; padding-bottom: 12px; }
.market-price-headline { display: flex; align-items: center; gap: 12px; }
.mp-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; line-height: 1.1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mp-badge.is-sold { background: #fdf2f5; color: #ad093d; border: 1px solid #f6dadd; }
.mp-badge.is-active { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.mp-stats { font-size: 14px; font-weight: 600; color: #321924; }
.market-price-chart-wrap { margin-bottom: 20px; }
.market-price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; padding-bottom: 16px; }
.market-price-card { background: #fff; border: 1px solid #e8dce1; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: all 150ms ease; box-shadow: 0 2px 8px rgba(0,0,0,0.015); }
.market-price-card:hover { border-color: #d8c2cb; box-shadow: 0 4px 12px rgba(0,0,0,0.04); transform: translateY(-1px); }
.mp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mp-card-title { font-family: 'Futura PT', Futura, 'Trebuchet MS', sans-serif; font-size: 14px; font-weight: 600; color: #1a0a10; line-height: 1.35; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
.mp-card-price { font-size: 15px; font-weight: 800; color: #ad093d; white-space: nowrap; background: #fdf2f5; padding: 4px 10px; border-radius: 8px; border: 1px solid #f6dadd; }
.mp-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; }
.mp-card-details { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-meta-tag { font-size: 11px; font-weight: 500; color: #64748b; background: #f8fafc; padding: 3px 8px; border-radius: 6px; border: 1px solid #f1f5f9; }
.mp-link { font-size: 11px; font-weight: 600; color: #ad093d; text-decoration: none; transition: opacity 150ms ease; }
.mp-link:hover { text-decoration: underline; opacity: 0.8; }
.mp-btn { background: #fff !important; border: 1px solid #ad093d !important; color: #ad093d !important; font-weight: 600 !important; transition: all 150ms ease !important; }
.mp-btn:hover { background: #ad093d !important; color: #fff !important; }
#effective .market-price-error { color: #9a2626; }

.market-price-detail-card {
  width: min(920px, 95vw) !important;
  max-height: 88vh !important;
  overflow: hidden !important;
}

.market-price-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0e5ea;
}

.market-price-detail-body {
  margin-top: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#appShell #effective #pricesTable th.col-market-overview,
#appShell #effective #pricesTable td.col-market-overview {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  vertical-align: middle !important;
}

.market-overview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.market-overview-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
}

.market-overview-badge.is-missing {
  background: #fde9eb;
  color: #9c1f2f;
}

.market-overview-badge.is-disabled {
  background: #e8edf6;
  color: #405877;
}

.market-overview-badge.is-ebay {
  background: #f1f1f1;
  color: #5d4f56;
}

.market-overview-badge.is-ricardo {
  background: #ffeeda;
  color: #9a5a00;
}

.market-price-detail-card {
  width: 900px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important;
}

.market-price-detail-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
}

.market-price-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

.market-price-card {
  background: #fff;
  border: 1px solid #ecdbe3;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(173, 9, 61, 0.04);
}

.market-price-card:hover {
  border-color: #ad093d;
  box-shadow: 0 4px 12px rgba(173, 9, 61, 0.08);
  transform: translateY(-2px);
}

.mp-card-top {
  margin-bottom: 12px;
}

.mp-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #331d27;
  line-height: 1.4;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-card-price {
  font-size: 18px;
  font-weight: 800;
  color: #ad093d;
  background: #fffafa;
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-block;
}

.mp-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #f9f0f4;
  padding-top: 12px;
}

.mp-tag-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.mp-card-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#refreshMarketPriceDetailBtn {
  background: #fff !important;
  border: 1px solid #ad093d !important;
  color: #ad093d !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
}

#refreshMarketPriceDetailBtn:hover {
  background: #ad093d !important;
  color: #fff !important;
}

.btn-compact {
  padding: 2px 8px !important;
  min-height: 24px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
}

.market-trend-chart-wrap {
  margin: 8px 0 12px;
}

.market-trend-chart {
  width: 100%;
  height: auto;
  border: 1px solid #ecd9e2;
  border-radius: 12px;
}

.marketplace-settings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px !important;
  align-items: end;
  width: 100%;
}

.marketplace-settings-grid .market-setting-wide {
  grid-column: 1 / -1;
}

.marketplace-settings-grid .market-setting-actions {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  grid-column: 1 / -1;
  margin-top: 2px;
}

.marketplace-settings-grid .cond-toggle-item {
  min-width: 0 !important;
}

.marketplace-settings-grid .cond-toggle-item input,
.marketplace-settings-grid .cond-toggle-item select {
  width: 100%;
}

#market-prices-enabled {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background-color: #f1e7ec !important;
  position: relative !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
}

#market-prices-enabled::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.14s ease !important;
}

#market-prices-enabled::after {
  content: none !important;
}

#market-prices-enabled:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
}

#market-prices-enabled:checked::before {
  left: 19px !important;
}

#showMarketPriceOverview {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background-color: #f1e7ec !important;
  position: relative !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
}

#showMarketPriceOverview::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.14s ease !important;
}

#showMarketPriceOverview::after {
  content: none !important;
}

#showMarketPriceOverview:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
}

#showMarketPriceOverview:checked::before {
  left: 19px !important;
}

html body #appShell #showMarketPriceOverview {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid #c8a6b4 !important;
  background: #f1e7ec !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
}

html body #appShell #showMarketPriceOverview::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: left 0.14s ease !important;
}

html body #appShell #showMarketPriceOverview::after {
  content: none !important;
}

html body #appShell #showMarketPriceOverview:checked {
  border-color: #ad093d !important;
  background: #ad093d !important;
}

html body #appShell #showMarketPriceOverview:checked::before {
  left: 19px !important;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
}

/* PHO-50: one shared toggle component path for Prices + Settings controls */
html body #appShell input[type="checkbox"].toggle-switch,
html body #landing input[type="checkbox"].toggle-switch {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background-color: #f1e7ec !important;
  background-image: none !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
}

html body #appShell input[type="checkbox"].toggle-switch::before,
html body #landing input[type="checkbox"].toggle-switch::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: left 0.14s ease !important;
}

html body #appShell input[type="checkbox"].toggle-switch::after,
html body #landing input[type="checkbox"].toggle-switch::after {
  content: none !important;
  display: none !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked,
html body #landing input[type="checkbox"].toggle-switch:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked::before,
html body #landing input[type="checkbox"].toggle-switch:checked::before {
  left: 20px !important;
}

html body #appShell input[type="checkbox"]:not(.toggle-switch),
html body #landing input[type="checkbox"]:not(.toggle-switch) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 2px solid #B88FA0 !important;
  border-radius: 3px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* PHO-53 final: enforce identical slider geometry across all core pricing toggles */
html body #appShell #manualProductNoBuyback,
html body #appShell #showAllConditionPrices,
html body #appShell #hideNoBuybackRows,
html body #appShell #showMarketPriceOverview,
html body #appShell #market-prices-enabled {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background-color: #f1e7ec !important;
  background-image: none !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
}

html body #appShell #manualProductNoBuyback::before,
html body #appShell #showAllConditionPrices::before,
html body #appShell #hideNoBuybackRows::before,
html body #appShell #showMarketPriceOverview::before,
html body #appShell #market-prices-enabled::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: left 0.14s ease !important;
}

html body #appShell #manualProductNoBuyback::after,
html body #appShell #showAllConditionPrices::after,
html body #appShell #hideNoBuybackRows::after,
html body #appShell #showMarketPriceOverview::after,
html body #appShell #market-prices-enabled::after {
  content: none !important;
  display: none !important;
}

html body #appShell #manualProductNoBuyback:checked,
html body #appShell #showAllConditionPrices:checked,
html body #appShell #hideNoBuybackRows:checked,
html body #appShell #showMarketPriceOverview:checked,
html body #appShell #market-prices-enabled:checked {
  border-color: #ad093d !important;
  background-color: #ad093d !important;
}

html body #appShell #manualProductNoBuyback:checked::before,
html body #appShell #showAllConditionPrices:checked::before,
html body #appShell #hideNoBuybackRows:checked::before,
html body #appShell #showMarketPriceOverview:checked::before,
html body #appShell #market-prices-enabled:checked::before {
  left: 19px !important;
}

/* PHO-54 final: unify all slider-style toggles to the market-prices reference */
html body #appShell input[type="checkbox"].toggle-switch,
html body #landing input[type="checkbox"].toggle-switch {
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background: #f1e7ec !important;
  background-image: none !important;
  box-shadow: none !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

html body #appShell input[type="checkbox"].toggle-switch::before,
html body #landing input[type="checkbox"].toggle-switch::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transform: none !important;
  transition: left 0.14s ease !important;
}

html body #appShell input[type="checkbox"].toggle-switch::after,
html body #landing input[type="checkbox"].toggle-switch::after {
  content: none !important;
  display: none !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked,
html body #landing input[type="checkbox"].toggle-switch:checked {
  border-color: #ad093d !important;
  background: #ad093d !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked::before,
html body #landing input[type="checkbox"].toggle-switch:checked::before {
  left: 20px !important;
}

#effective .price-toggles-row .cond-toggle-item,
.marketplace-settings-grid .cond-toggle-item.market-setting-wide {
  gap: 8px !important;
}

#effective .market-overview-badges {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

#effective .market-overview-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

#effective .market-overview-badge.is-ebay {
  background: rgba(31, 102, 194, 0.09) !important;
  border-color: rgba(31, 102, 194, 0.24) !important;
  color: #1f66c2 !important;
}

#effective .market-overview-badge.is-missing {
  background: rgba(173, 9, 61, 0.08) !important;
  border-color: rgba(173, 9, 61, 0.18) !important;
  color: #ad093d !important;
}

#effective .market-overview-badge.is-disabled {
  background: rgba(64, 88, 119, 0.1) !important;
  border-color: rgba(64, 88, 119, 0.2) !important;
  color: #405877 !important;
}

#effective .market-overview-badge.is-loading {
  background:
    linear-gradient(90deg, rgba(173, 9, 61, 0.08), rgba(31, 102, 194, 0.14), rgba(173, 9, 61, 0.08)) !important;
  background-size: 220% 100% !important;
  border-color: rgba(31, 102, 194, 0.18) !important;
  color: #5a2236 !important;
  animation: marketBadgeLoading 1.1s ease-in-out infinite !important;
}

@keyframes marketBadgeLoading {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


#appShell #effective #pricesTable th.col-market-overview,
#appShell #effective #pricesTable td.col-market-overview {
  width: 172px !important;
  min-width: 172px !important;
  max-width: 172px !important;
  vertical-align: middle !important;
}

.marketplace-provider-list {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e4d4da !important;
}

.marketplace-provider-list-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.marketplace-provider-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.marketplace-provider-row {
  display: grid !important;
  grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.marketplace-provider-row .cond-toggle-item {
  margin: 0 !important;
}

.market-provider-active-pill {
  margin-left: 2px;
}

/* Checkbox only for API settings -> marketplace connections */
#master #marketplaceApiSettingsWrap .marketplace-enable-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  display: inline-block !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
  vertical-align: middle !important;
  transition: border-color 120ms ease, background-color 120ms ease !important;
}

#master #marketplaceApiSettingsWrap .marketplace-enable-checkbox:checked {
  border-color: #ad093d !important;
  background: #ad093d !important;
}

#master #marketplaceApiSettingsWrap .marketplace-enable-checkbox:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -56%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #appShell input[type="checkbox"].toggle-switch,
html body #landing input[type="checkbox"].toggle-switch,
html body #appShell #manualProductNoBuyback,
html body #appShell #showAllConditionPrices,
html body #appShell #hideNoBuybackRows,
html body #appShell #showMarketPriceOverview,
html body #appShell #market-prices-enabled {
  overflow: hidden !important;
}

html body #appShell input[type="checkbox"].toggle-switch::after,
html body #landing input[type="checkbox"].toggle-switch::after,
html body #appShell input[type="checkbox"].toggle-switch:checked::after,
html body #landing input[type="checkbox"].toggle-switch:checked::after,
html body #appShell #manualProductNoBuyback::after,
html body #appShell #manualProductNoBuyback:checked::after,
html body #appShell #showAllConditionPrices::after,
html body #appShell #showAllConditionPrices:checked::after,
html body #appShell #hideNoBuybackRows::after,
html body #appShell #hideNoBuybackRows:checked::after,
html body #appShell #showMarketPriceOverview::after,
html body #appShell #showMarketPriceOverview:checked::after,
html body #appShell #market-prices-enabled::after,
html body #appShell #market-prices-enabled:checked::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* PHO-55 final: use the Marktpreise toggle geometry as the single source of truth */
html body #appShell #showMarketPriceOverview,
html body #appShell #showAllConditionPrices,
html body #appShell #hideNoBuybackRows,
html body #appShell #manualProductNoBuyback,
html body #appShell #market-prices-enabled,
html body #appShell .marketplace-provider-row input[type="checkbox"].toggle-switch,
html body #appShell .cond-toggle-item > input[type="checkbox"].toggle-switch {
  all: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  min-height: 22px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background: #f1e7ec !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  accent-color: transparent !important;
  cursor: pointer !important;
}

html body #appShell #showMarketPriceOverview::before,
html body #appShell #showAllConditionPrices::before,
html body #appShell #hideNoBuybackRows::before,
html body #appShell #manualProductNoBuyback::before,
html body #appShell #market-prices-enabled::before,
html body #appShell .marketplace-provider-row input[type="checkbox"].toggle-switch::before,
html body #appShell .cond-toggle-item > input[type="checkbox"].toggle-switch::before {
  content: '' !important;
  position: absolute !important;
  top: 1px !important;
  left: 1px !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
  transition: left 0.14s ease !important;
}

html body #appShell #showMarketPriceOverview::after,
html body #appShell #showAllConditionPrices::after,
html body #appShell #hideNoBuybackRows::after,
html body #appShell #manualProductNoBuyback::after,
html body #appShell #market-prices-enabled::after,
html body #appShell .marketplace-provider-row input[type="checkbox"].toggle-switch::after,
html body #appShell .cond-toggle-item > input[type="checkbox"].toggle-switch::after,
html body #appShell #showMarketPriceOverview:checked::after,
html body #appShell #showAllConditionPrices:checked::after,
html body #appShell #hideNoBuybackRows:checked::after,
html body #appShell #manualProductNoBuyback:checked::after,
html body #appShell #market-prices-enabled:checked::after,
html body #appShell .marketplace-provider-row input[type="checkbox"].toggle-switch:checked::after,
html body #appShell .cond-toggle-item > input[type="checkbox"].toggle-switch:checked::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #appShell #showMarketPriceOverview:checked,
html body #appShell #showAllConditionPrices:checked,
html body #appShell #hideNoBuybackRows:checked,
html body #appShell #manualProductNoBuyback:checked,
html body #appShell #market-prices-enabled:checked,
html body #appShell .marketplace-provider-row input[type="checkbox"].toggle-switch:checked,
html body #appShell .cond-toggle-item > input[type="checkbox"].toggle-switch:checked {
  border-color: #ad093d !important;
  background: #ad093d !important;
}

html body #appShell #showMarketPriceOverview:checked::before,
html body #appShell #showAllConditionPrices:checked::before,
html body #appShell #hideNoBuybackRows:checked::before,
html body #appShell #manualProductNoBuyback:checked::before,
html body #appShell #market-prices-enabled:checked::before,
html body #appShell .marketplace-provider-row input[type="checkbox"].toggle-switch:checked::before,
html body #appShell .cond-toggle-item > input[type="checkbox"].toggle-switch:checked::before {
  left: 19px !important;
}

/* PHO-56 final polish: smaller SKU Zumstein field + balanced role access spacing */
#effective .manual-product-main-row {
  grid-template-columns: minmax(240px, 1.45fr) minmax(150px, 0.72fr) 132px auto auto auto !important;
  gap: 14px !important;
}

#effective #manualProductSkuZumstein {
  min-width: 0 !important;
  max-width: 100% !important;
}

#effective #toggleManualBulkBtn {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
  min-width: 280px !important;
}

.marketplace-provider-row {
  grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.9fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) auto auto auto !important;
}

#newApiConnectionType {
  min-width: 132px !important;
}

#master .section-title {
  display: block !important;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}

#master .api-section-tools {
  margin-bottom: 12px !important;
}

.ai-default-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#newApiConnectionType,
#newAiConnectionName {
  min-height: 42px !important;
}

#roleAccessEditor .role-access-table-wrap {
  padding: 0 !important;
  border: 1px solid #e4d4da !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  overflow: auto !important;
}

#roleAccessEditor .role-access-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

#roleAccessEditor .role-access-table th,
#roleAccessEditor .role-access-table td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

#roleAccessEditor .role-access-table th:first-child,
#roleAccessEditor .role-access-table td:first-child {
  padding-left: 14px !important;
}

#roleAccessEditor .role-access-table th:last-child,
#roleAccessEditor .role-access-table td:last-child {
  padding-right: 14px !important;
  text-align: center !important;
  min-width: 140px !important;
}

#roleAccessEditor .role-access-table button[data-role-delete] {
  margin: 0 auto !important;
}

#appShell #effective #pricesTable .price-sku-cell {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}

#appShell #effective #pricesTable .price-approval-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  margin-left: 5px !important;
  border-radius: 50% !important;
  background: #AD093D !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.18) !important;
  animation: approvalPulse 1.8s ease-in-out infinite !important;
  vertical-align: middle !important;
}

@keyframes approvalPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* X-Button zum Entfernen einer Benachrichtigung: nur das X, kein Rand/Hintergrund.
   Muss .btn-subtle border:...!important schlagen, daher !important + hohe Spezifität. */
body #appShell #myRequestsBody .notif-dismiss-btn,
body #appShell #myRequestsBody .notif-dismiss-btn:hover,
body #appShell #myRequestsBody .notif-dismiss-btn:focus,
body #appShell #myRequestsBody .notif-dismiss-btn:focus-visible {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 2px 6px !important;
  min-width: 0 !important;
  height: auto !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
}
body #appShell #myRequestsBody .notif-dismiss-btn:hover {
  color: var(--primary) !important;
}

/* Dialog-Aktionen direkt unter dem Formular, linksbündig */
#uiDialogForm:not(.hidden) + #uiDialogActions {
  margin-top: 0.5rem;
  justify-content: flex-start;
}

/* Final role matrix stabilization */
#userAdminPanel {
  overflow-x: visible !important;
}

#roleAccessEditor {
  gap: 14px !important;
}

#roleAccessEditor .section-title {
  margin-bottom: 8px !important;
}

#roleAccessEditor .role-access-add-row {
  display: grid !important;
  grid-template-columns: minmax(240px, 420px) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 10px 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
}

#roleAccessEditor .role-access-add-input {
  min-width: 240px !important;
  width: 100% !important;
}

#roleAccessEditor .role-access-table-wrap {
  width: 100% !important;
  overflow: auto !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

#roleAccessEditor .role-access-table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#roleAccessEditor .role-access-table th,
#roleAccessEditor .role-access-table td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  text-align: center !important;
  border-bottom: 1px solid #E4D4DA !important;
  white-space: nowrap !important;
  background: #FFFFFF !important;
}

#roleAccessEditor .role-access-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  color: #1E0C13 !important;
}

#roleAccessEditor .role-access-table th:first-child,
#roleAccessEditor .role-access-table td:first-child {
  text-align: left !important;
  min-width: 140px !important;
  background: #FFFFFF !important;
}

#roleAccessEditor .role-access-table th + th,
#roleAccessEditor .role-access-table td + td {
  border-left: 1px solid #E4D4DA !important;
}

#roleAccessEditor .role-access-table th:last-child,
#roleAccessEditor .role-access-table td:last-child {
  min-width: 132px !important;
  text-align: center !important;
}

#roleAccessEditor .role-access-table tbody tr:hover td,
#roleAccessEditor .role-access-table tbody tr:hover td:first-child {
  background: #FDF7FA !important;
}

#roleAccessEditor .role-access-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

#roleAccessEditor .role-access-table td:last-child .hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
}

#roleAccessEditor .role-access-action-cell {
  text-align: center !important;
}

#roleAccessEditor .role-access-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 96px !important;
  margin: 0 auto !important;
}

#roleAccessEditor .role-access-action-lock {
  min-width: 44px !important;
  color: #7A5060 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

@media (max-width: 900px) {
  #roleAccessEditor .role-access-add-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
}

/* PHO-57 final toggle normalization: one geometry for all slider controls */
html body #appShell .cond-toggle-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body #appShell .cond-toggle-item.is-disabled {
  opacity: 0.65 !important;
}

html body #appShell input[type="checkbox"].toggle-switch,
html body #landing input[type="checkbox"].toggle-switch {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 24px !important;
  min-width: 40px !important;
  min-height: 24px !important;
  box-sizing: border-box !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background: #f1e7ec !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  accent-color: transparent !important;
}

html body #appShell input[type="checkbox"].toggle-switch::before,
html body #landing input[type="checkbox"].toggle-switch::before {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  transition: left 0.15s ease !important;
  box-sizing: border-box !important;
}

html body #appShell .cond-toggle-item > input[type="checkbox"]::after,
html body #landing .cond-toggle-item > input[type="checkbox"]::after,
html body #appShell input[type="checkbox"].toggle-switch::after,
html body #landing input[type="checkbox"].toggle-switch::after {
  content: none !important;
  display: none !important;
}

html body #appShell .cond-toggle-item > input[type="checkbox"]:checked,
html body #landing .cond-toggle-item > input[type="checkbox"]:checked,
html body #appShell input[type="checkbox"].toggle-switch:checked,
html body #landing input[type="checkbox"].toggle-switch:checked {
  border-color: #ad093d !important;
  background: #ad093d !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked::before,
html body #landing input[type="checkbox"].toggle-switch:checked::before {
  left: 20px !important;
}

/* Freigabe-Queue collapsible */
.freigabe-queue-details > summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 0 !important;
}

.freigabe-queue-details > summary::-webkit-details-marker,
.freigabe-queue-details > summary::marker {
  display: none !important;
}

.freigabe-queue-details > summary::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 2px solid #AD093D !important;
  border-bottom: 2px solid #AD093D !important;
  transform: rotate(-45deg) !important;
  transition: transform 0.15s ease !important;
  flex-shrink: 0 !important;
  margin-bottom: -1px !important;
}

.freigabe-queue-details[open] > summary::before {
  transform: rotate(45deg) !important;
}

.freigabe-queue-details > summary h3 {
  margin: 0 !important;
  display: inline !important;
}

.freigabe-queue-details[open] > summary {
  margin-bottom: 0.5rem !important;
}

.freigabe-queue-content {
  margin-bottom: 0.5rem !important;
}

@keyframes pending-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.pending-approval-pulse {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 15px !important;
  height: 15px !important;
  padding: 0 4px !important;
  border-radius: 8px !important;
  background: #AD093D !important;
  color: #fff !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  animation: pending-pulse 1.4s ease-in-out infinite !important;
  line-height: 1 !important;
}

.pending-approval-pulse.hidden {
  display: none !important;
}

/* Final switch consistency pass (all toggles same magenta + centered white knob) */
html body #appShell .cond-toggle-item.is-disabled {
  opacity: 1 !important;
}

/* 
   GOD-RULE: UNIFIED TOGGLE COMPONENT v6 (Force Refresh)
   Targets specific IDs to override late-stage conflicting rules.
*/
html body #appShell input[type="checkbox"].toggle-switch,
html body #appShell #manualProductNoBuyback,
html body #appShell #showAllConditionPrices,
html body #appShell #hideNoBuybackRows,
html body #appShell #showMarketPriceOverview,
html body #appShell #market-prices-enabled,
html body #appShell .cond-toggle-item > input[type="checkbox"],
html body #landing input[type="checkbox"].toggle-switch {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 40px !important;
  height: 24px !important;
  min-width: 40px !important;
  min-height: 24px !important;
  border: 1px solid #c8a6b4 !important;
  border-radius: 999px !important;
  background: #f1e7ec !important;
  position: relative !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked,
html body #appShell #manualProductNoBuyback:checked,
html body #appShell #showAllConditionPrices:checked,
html body #appShell #hideNoBuybackRows:checked,
html body #appShell #showMarketPriceOverview:checked,
html body #appShell #market-prices-enabled:checked {
  background: #ad093d !important;
  border-color: #ad093d !important;
}

html body #appShell input[type="checkbox"].toggle-switch::before,
html body #appShell #manualProductNoBuyback::before,
html body #appShell #showAllConditionPrices::before,
html body #appShell #hideNoBuybackRows::before,
html body #appShell #showMarketPriceOverview::before,
html body #appShell #market-prices-enabled::before,
html body #landing input[type="checkbox"].toggle-switch::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important; /* Visual adjustment for perfect centering */
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: left 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transform: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body #appShell input[type="checkbox"].toggle-switch:checked::before,
html body #appShell #manualProductNoBuyback:checked::before,
html body #appShell #showAllConditionPrices:checked::before,
html body #appShell #hideNoBuybackRows:checked::before,
html body #appShell #showMarketPriceOverview:checked::before,
html body #appShell #market-prices-enabled:checked::before {
  left: 19px !important; /* Total 40. 19 + 18 ball + 3 offset = 40. */
}

/* ====================================================
   Sticky thead: Preise tab (v1 – 2026-04)
   overflow-y stays auto so sticky works; max-height
   contains the table within the viewport.
   ==================================================== */
#appShell #effective .prices-table-layout {
  overflow: visible !important;
}

#appShell #effective .prices-table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--topbar-height) - 240px) !important;
}

/* Legacy Sticky Rules Purged — Unified by Block at 16345+ */
#appShell #effective #pricesTable thead tr.filter-row th.col-action {
  background: #f9f4f7 !important; /* Ensure filter row matches across tables */
}
#appShell #effective #pricesTable thead tr.filter-row th:last-child {
  z-index: 94 !important;
  position: sticky !important;
  top: 56px !important;
  right: 0 !important;
}

/* ====================================================
   Sticky thead: Neuwarenfeed tab (v1 – 2026-04)
   ==================================================== */
#appShell #newwareFeed .table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--topbar-height) - 260px) !important;
}

#appShell #newwareFeed .table-wrap table thead tr:first-child th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 #E4D4DA !important;
}

#appShell #newwareFeed .table-wrap table thead tr.newware-filter-row th {
  position: sticky !important;
  top: 44px !important;
  z-index: 9 !important;
  background: #f9f4f7 !important;
  box-shadow: 0 1px 0 #E4D4DA !important;
}

#effective > h2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

#effective .table-tools.price-toggles-row {
  position: sticky !important;
  top: 46px !important;
  z-index: 99 !important;
}

#effective .prices-pagination {
  position: sticky;
  bottom: 0;
  background: transparent;
  padding: 8px 0;
}

#effective .prices-pagination .cond-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#effective #pricesPageSize {
  width: 88px;
  min-width: 88px;
}

/* ====================================================
   Sidebar collapse toggle (v141 – 2026-04)
   ==================================================== */

/* Toggle tab button — always fixed, rides the sidebar edge */
#sidebarToggleBtn {
  position: fixed !important;
  left: var(--sidebar-width) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #1E0C13 !important;
  border: 1px solid rgba(228, 212, 218, 0.22) !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 90 !important;
  transition: left 0.25s ease, background 0.15s, color 0.15s !important;
}

#sidebarToggleBtn:hover {
  background: #AD093D !important;
  color: #fff !important;
}

/* Sidebar nav transition */
#appShell > nav.tabs {
  transition: transform 0.25s ease !important;
}

/* Topbar + main transitions */
#appShell > .topbar {
  transition: left 0.25s ease !important;
}

#appShell > main {
  transition: margin-left 0.25s ease !important;
}

/* ---- Collapsed state ---- */
#appShell.sidebar-collapsed > nav.tabs {
  transform: translateX(calc(-1 * var(--sidebar-width))) !important;
}

#appShell.sidebar-collapsed > .topbar {
  left: 0 !important;
}

#appShell.sidebar-collapsed > main {
  left: 0 !important;
}

#appShell.sidebar-collapsed #sidebarToggleBtn {
  left: 0 !important;
}

/* Flip chevron arrow when collapsed */
#appShell.sidebar-collapsed #sidebarToggleBtn svg {
  transform: rotate(180deg) !important;
}

/* ====================================================
   No-scroll layout + sticky headers (2026-04)
   Kein vertikales Page-Scroll; nur innerhalb der Tabellen
   ==================================================== */

/* Prevent document body from scrolling */
html, body {
  overflow: hidden !important;
  height: 100dvh !important;
}

#appShell {
  overflow: hidden !important;
  height: 100dvh !important;
}

/* Main fills exact remaining viewport height below topbar */
main {
  position: absolute !important;
  top: var(--topbar-height) !important;
  bottom: 0 !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Any active tab panel fills main (simple tabs scroll within their panel) */
.tab-panel.active {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Preise, Neuwarenfeed, Import: no tab-level scroll — table fills remaining space */
#effective.tab-panel.active,
#newwareFeed.tab-panel.active,
#suggestions.tab-panel.active {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* All direct children don't grow/shrink; only the designated table area does */
#effective.tab-panel.active > *,
#newwareFeed.tab-panel.active > *,
#suggestions.tab-panel.active > * {
  flex: 0 0 auto !important;
}

/* ---- Preise (#effective) ---- */

/* Remove old sticky positioning from h2 and toolbar (page doesn't scroll anymore) */
#effective > h2 {
  position: static !important;
}
#effective .table-tools.price-toggles-row {
  position: static !important;
}

/* Table layout fills remaining space */
#effective.tab-panel.active > .prices-table-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Remove old max-height; table wraps fill the layout height */
#effective .prices-table-wrap {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
}
#effective .prices-actions-wrap {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* Pagination stays below table, always visible */
#effective .prices-pagination {
  flex-shrink: 0 !important;
  position: static !important;
  background: transparent !important;
  padding: 8px 0 !important;
}

/* Sticky header rows within prices-table-wrap scroll container */
#effective #pricesTable thead tr:first-child th {
  position: sticky !important;
  top: 0 !important;
  z-index: 52 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 #E4D4DA !important;
}
#effective #pricesTable thead tr.filter-row th {
  position: sticky !important;
  top: 56px !important;
  z-index: 51 !important;
  background: #f9f4f7 !important;
  box-shadow: 0 1px 0 rgba(228, 212, 218, 0.5) !important;
}
#effective #pricesActionTable thead tr:first-child th {
  position: sticky !important;
  top: 0 !important;
  z-index: 52 !important;
  background: #fff !important;
}
#effective #pricesActionTable thead tr.filter-row th {
  position: sticky !important;
  top: 56px !important;
  z-index: 51 !important;
  background: #f9f4f7 !important;
}

/* ---- Neuwarenfeed (#newwareFeed) ---- */

/* Remove old sticky from h2 and action cards */
#newwareFeed > h2 {
  position: static !important;
}
#newwareFeed .actions.import-card.auto-fetch-row,
#newwareFeed .actions.import-card.newware-feed-status-card {
  position: static !important;
}

/* Remove old max-height hack; table-wrap fills remaining space */
#appShell #newwareFeed .table-wrap {
  max-height: none !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* Pagination stays at bottom */
#newwareFeed .newware-pagination {
  flex-shrink: 0 !important;
}

/* Sticky header rows within newware table-wrap (overrides existing rules, adjusted z-index) */
#appShell #newwareFeed .table-wrap table thead tr:first-child th {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 #E4D4DA !important;
}
#appShell #newwareFeed .table-wrap table thead tr.newware-filter-row th {
  position: sticky !important;
  top: 44px !important;
  z-index: 11 !important;
  background: #f9f4f7 !important;
  box-shadow: 0 1px 0 rgba(228, 212, 218, 0.5) !important;
}

/* ---- Import / KI Vorschläge (#suggestions) ---- */

/* importSuggestionsPanel fills remaining space in its flex context */
#suggestions.tab-panel.active > #importSuggestionsPanel {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}
#suggestions #importSuggestionsPanel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#suggestions #importSuggestionsPanel > *:not(.pagination) {
  flex: 0 0 auto !important;
}

/* The new wrapper around the suggestions table fills remaining space */
.suggestions-table-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* Sticky thead in suggestions table */
.suggestions-table-wrap table thead tr th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 #E4D4DA !important;
}

/* Import-Paginator: direkt am Bildrand fixiert */
/* Die .pagination ist jetzt direktes Kind von #suggestions (nicht mehr in #importSuggestionsPanel) */

/* --- 2026-04-16 FINAL FIX FOR STICKY HEADERS --- */

body #appShell #effective #pricesTable thead tr:first-child {
  background: #fff !important;
}

body #appShell #effective #pricesTable thead tr:first-child th {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important; 
  background: #fff !important;
}

/* Ensure any padding in containers above the table is also white */
body #appShell #effective .prices-table-wrap,
body #appShell #effective .prices-table-layout {
  background-color: #fff !important;
}


body #appShell #effective #pricesTable thead tr.filter-row th {
  height: 52px !important;
  
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 998 !important; 
  background: #f9f4f7 !important;
}

/* Pseudo-Elemente, um Subpixel-Spalten/Lücken beim Scrollen absolut luftdicht zu machen */
body #appShell #effective #pricesTable thead tr:first-child th::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  bottom: 0 !important;
  left: -1px !important;
  right: -1px !important;
  background: #fff !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body #appShell #effective #pricesTable thead tr.filter-row th::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  bottom: 0 !important;
  left: -1px !important;
  right: -1px !important;
  background: #f9f4f7 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body #appShell #effective #pricesTable thead tr:first-child th.col-action {
  z-index: 1000 !important;
  background: #fff !important;
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
}

body #appShell #effective #pricesTable thead tr.filter-row th.col-action {
  z-index: 999 !important;
  background: #f9f4f7 !important;
  position: sticky !important;
  right: 0 !important;
  top: 56px !important;
}

body #appShell #effective #pricesTable tbody td.col-action {
  position: sticky !important;
  right: 0 !important;
  z-index: 900 !important; 
  background: #fff !important;
}

body #appShell #effective #pricesTable tbody tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

/* ====================================================
   Paginatoren: fixed am unteren Bildrand (2026-04-16)
   Gilt für Preise, Neuwarenfeed und Import/KI-Vorschläge
   ==================================================== */

/* Paginatoren: Einheitliches Design als "Fixed Footer" via Flexbox.
   Gilt für Preise, Neuwarenfeed und Import/KI-Vorschläge.
   Eliminiert Überlappung komplett, da der Container vor der Leiste endet. */
#effective.tab-panel.active .pagination.prices-pagination,
#newwareFeed.tab-panel.active .pagination.newware-pagination,
#suggestions.tab-panel.active .pagination.suggestions-pagination {
  position: relative !important;
  z-index: 200 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-top: 1px solid rgba(228, 212, 218, 0.8) !important;
  box-shadow: 0 -4px 12px rgba(30, 12, 19, 0.04) !important;
  backdrop-filter: blur(10px) !important;
}

/* Wenn Sidebar eingeklappt: left auf 0 */
#appShell.sidebar-collapsed #effective.tab-panel.active .pagination.prices-pagination,
#appShell.sidebar-collapsed #newwareFeed.tab-panel.active .pagination.newware-pagination,
#appShell.sidebar-collapsed #suggestions.tab-panel.active .pagination.suggestions-pagination {
  left: 0 !important;
}

/* Tabellen-Wrapper füllen den verfügbaren Platz im Flex-Container aus */
#effective .prices-table-wrap,
#effective .prices-actions-wrap,
#newwareFeed .table-wrap,
#suggestions .suggestions-table-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#appShell #newwareFeed .table-wrap {
  padding-bottom: 0 !important;
}

.suggestions-table-wrap {
  padding-bottom: 0 !important;
}

/* Alle Tabs: einheitlich 28 px Innen-Abstand — Titel und Content links-aligniert,
   genug Platz für den Sidebar-Einklapp-Button. */
#dashboard.active,
#master.active,
#export.active,
#imports.active,
#newwareFeed.active,
#suggestions.active,
#backup.active {
  padding: 28px !important;
}

/* Benutzerverwaltung: überschreibt das alte padding:0 (Zeile 14005) */
#userAdminPanel.active {
  padding: 28px !important;
  overflow-x: hidden !important;
}

/* Neuwarenfeed + Import/KI-Vorschläge: Tabellen-Wapper füllt volle Breite des Panels
   (kein negativer Margin nötig — Content soll mit Titel aligned bleiben) */
#appShell #newwareFeed.active .table-wrap,
#appShell #suggestions.active .suggestions-table-wrap {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  height: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  margin-bottom: 0 !important;
}

#master.active {
  overflow-y: auto !important;
  padding-bottom: 0 !important;
}

/* ====================================================
   Section-Toggle-Rows: Freigabe-Queue + Manuelles Produkt
   Kein Box-Rahmen; schlanke Zeile mit › Pfeil in Magenta
   ==================================================== */

/* "Letzter Export" Hinweis ausblenden */
#newwareExportIntervalsHint {
  display: none !important;
}

/* ---- Preise: Anfrage-Hinweis für Benutzer ohne Bearbeitungsrecht ---- */
#effective #pricesTable .price-request-hint {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #378add;
  background: rgba(55, 138, 221, 0.08);
  border: 1px solid rgba(55, 138, 221, 0.22);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  letter-spacing: 0.01em;
}

/* Container: kein Box-Styling, null Abstand */
.section-toggle-row {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Summary: keine eigenen Abstände */
.section-toggle-row .freigabe-queue-details > summary {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}

/* Details-Element selbst: keine Margins */
.section-toggle-row .freigabe-queue-details {
  margin: 0 !important;
  padding: 0 !important;
}

/* Altes ::before-Chevron und ::after vom summary entfernen */
.section-toggle-row .freigabe-queue-details > summary::before,
.section-toggle-row .freigabe-queue-details > summary::after {
  display: none !important;
  content: none !important;
}

/* H3: inline-block damit ::after direkt dahinter folgt */
.section-toggle-row .freigabe-queue-details > summary h3 {
  display: inline !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: #1E0C13 !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  line-height: 1.4 !important;
  position: relative !important;
}

/* Strich links am h3 – kürzer und näher */
.section-toggle-row .freigabe-queue-details > summary h3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 11px !important;
  height: 1px !important;
  background: #AD093D !important;
  transform: translateY(-50%) !important;
}

/* › Pfeil direkt nach dem h3-Text – garantiert auf Textebene */
.section-toggle-row .freigabe-queue-details > summary h3::after {
  content: ' ›' !important;
  color: #AD093D !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  transition: display 0.15s ease !important;
  display: inline !important;
}

/* Drehung beim Öffnen: leider kein ::after-transform auf open state via CSS ohne JS-Klasse */
/* Wir nutzen stattdessen einfaches statisches › – kein Drehen */

/* Geöffneter Inhalt: kleiner Abstand vom Titel */
.section-toggle-row .freigabe-queue-details[open] > summary {
  margin-bottom: 6px !important;
}

/* Manual-Product-Details: Inhalt bekommt einen leichten Card-Style */
.manual-product-details > .manual-product-card {
  background: #fff !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 4px rgba(30,12,19,0.05) !important;
}

/* ====================================================
   Preise tab — final tuning (v167, 2026-04)
   - Box füllt verfügbare Höhe, mit konstantem Abstand zum Paginator
   - Kompaktere Header- und Body-Zeilen
   - Quadratische Icon-Action-Buttons (Löschen / Geprüft / Marktdaten)
   - Manual-Highlight zieht sich bis zur linken Kante
   ==================================================== */

/* Section als Flex-Spalte: Tabelle wächst, Paginator bleibt unten mit Gap
   NUR wenn aktiver Tab — sonst überschreibt es display:none der inaktiven Panels */
/* Kein height:100% / min-height:500px mehr auf #effective (JS verwaltet das Layout) */
#appShell #effective.active {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* prices-table-layout: kein Strecken — Höhe folgt dem Inhalt (JS setzt display:block inline) */
#appShell #effective .prices-table-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}
/* Wrap: max-height begrenzt, damit bei vielen Zeilen gescrollt werden kann */
#appShell #effective .prices-table-wrap {
  height: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}
#appShell #effective .prices-actions-wrap {
  height: 100% !important;
  overflow-y: auto !important;
}
#appShell #effective .prices-pagination {
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}

/* Basistabelle & Zell-Reset für feine Linien */
#appShell #effective #pricesTable,
#appShell #effective #pricesActionTable {
  border-collapse: separate !important; /* Separate for sticky shadows better control? No, collapse for clean lines. */
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
}
#appShell #effective #pricesTable th,
#appShell #effective #pricesTable td,
#appShell #effective #pricesActionTable th,
#appShell #effective #pricesActionTable td {
  border: none !important;
  border-bottom: 1px solid rgba(228, 212, 218, 0.4) !important; /* Unified fine line */
  box-shadow: none !important;
}

/* Header-Zeilen kompakter & absolut synchron */
#appShell #effective #pricesTable thead tr:first-child th,
#appShell #effective #pricesActionTable thead tr:first-child th {
  padding: 0 12px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: table-cell !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
  border-bottom: 2px solid #E4D4DA !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100000 !important;
  transform: translate3d(0,0,0) !important;
}
#appShell #effective #pricesTable thead tr.filter-row th,
#appShell #effective #pricesActionTable thead tr.filter-row th {
  padding: 0 4px !important;
  height: 42px !important;
  min-height: 42px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(228, 212, 218, 0.6) !important;
  background-color: #f9f4f7 !important;
  background: #f9f4f7 !important; /* Unified background color for filter row */
  position: sticky !important;
  top: 50px !important;
  z-index: 90000 !important;
  transform: translate3d(0,0,0) !important;
}


/* Body-Zeilen kompakter */
#appShell #effective #pricesTable tbody td,
#appShell #effective #pricesActionTable tbody td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 1.05rem !important;
}
#appShell #effective #pricesTable tbody tr,
#appShell #effective #pricesActionTable tbody tr {
  height: auto !important;
}
#appShell #effective #pricesTable tbody td input[type="text"],
#appShell #effective #pricesTable tbody td input:not([type]) {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  min-height: 26px !important;
  font-size: 1.05rem !important;
}

/* Action-Cell: 3 Buttons nebeneinander — höhere Spezifität nötig wegen alter .action-cell-inner
   Regeln bei 8290-8298 (flex-direction:column; > * width:100%) */
#appShell #effective #pricesTable td.action-cell .action-cell-inner.action-cell-inner-icons,
#appShell #effective #pricesActionTable td.action-cell .action-cell-inner.action-cell-inner-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  padding: 0 12px !important;
  width: 100% !important;
}

/* Override der children width:100% Regel (0,3,1,0) — wir brauchen > 0,3,1,0 */
#appShell #effective #pricesTable td.action-cell .action-cell-inner.action-cell-inner-icons > *,
#appShell #effective #pricesActionTable td.action-cell .action-cell-inner.action-cell-inner-icons > * {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Quadratische Icon-Buttons — 30px */
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  flex: 0 0 30px !important;
  box-sizing: border-box !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon svg,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.btn-main,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.btn-main {
  background: #ad093d !important;
  border-color: #ad093d !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  flex: 0 0 60px !important;
  height: 30px !important;
  aspect-ratio: auto !important;
  color: #fff !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.btn-main:hover,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.btn-main:hover {
  background: #8c0731 !important;
  border-color: #8c0731 !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.btn-subtle,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.btn-subtle {
  background: #fff !important;
  color: #5b1f33 !important;
  border: 1px solid #E4D4DA !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.btn-subtle:hover,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.btn-subtle:hover {
  background: #f7e8ee !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.delete-mini-btn,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.delete-mini-btn {
  color: #b00020 !important;
  border-color: #f0c4cf !important;
}
#appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.delete-mini-btn:hover,
#appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.delete-mini-btn:hover {
  background: #fdecf1 !important;
  color: #8a0019 !important;
}

/* Action-Cell und Spaltenbreite minimieren */
#appShell #effective #pricesTable td.col-action,
#appShell #effective #pricesActionTable td.col-action,
#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesActionTable th.col-action {
  width: 1% !important;
  white-space: nowrap !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Zeilenfarbe über volle Breite: background auf TR (nicht nur TD) füllt die gesamte
   Reihenbreite inkl. beider Kartenränder. Tabelle ist 100% breit → TR-Hintergrund
   reicht von links bis rechts ans Kartenende. */
/* Zeilenfarbe über volle Breite: background auf TR (nicht nur TD) füllt die gesamte
   Reihenbreite inkl. beider Kartenränder. Tabelle ist 100% breit → TR-Hintergrund
   reicht von links bis rechts ans Kartenende. */
#appShell #effective #pricesTable tbody tr.manual-price-row,
#appShell #effective #pricesTable tbody tr.manual-price-row td,
#appShell #effective #pricesActionTable tbody tr.manual-price-row,
#appShell #effective #pricesActionTable tbody tr.manual-price-row td {
  background: #f9f4f7 !important;
}
/* Normale Zeilen: explizit weiss, damit kein Durchscheinen passiert */
#appShell #effective #pricesTable tbody tr:not(.manual-price-row),
#appShell #effective #pricesTable tbody tr:not(.manual-price-row) td,
#appShell #effective #pricesActionTable tbody tr:not(.manual-price-row),
#appShell #effective #pricesActionTable tbody tr:not(.manual-price-row) td {
  background: #ffffff !important;
}

/* ====================================================
   Preise tab — Vollbild-Nutzung (v190, 2026-04)
   Setzt auf das saubere absolute-main Layout (Zeile 15875+).
   Entfernt Padding-Lücken, zwingt Layout & Wrap auf volle Breite.
   ==================================================== */

/* Main: weniger Padding + KEIN doppeltes margin-left (Zeile 3595 setzt margin-left:
   sidebar-width ZUSÄTZLICH zum absoluten left:sidebar-width — das schiebt main um
   die Sidebar-Breite ein zweites Mal nach rechts und erzeugt den grossen grauen
   Streifen zwischen Sidebar und Inhalt). */
#appShell > main,
body main {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 14px 16px 12px 16px !important;
}
/* Wenn Sidebar eingeklappt: main beginnt am linken Bildschirmrand */
#appShell.sidebar-collapsed > main {
  margin-left: 0 !important;
}

/* Hintergrund: main zeigt --ci-bg (#F6F6F6) als Seitenhintergrund; Karten sind weiss.
   Kein eigener Hintergrund auf #effective nötig — transparent erbt den grauen Ton. */
#appShell > main {
  background: var(--ci-bg, #F6F6F6) !important;
}

/* Preise-Tab: identisches Padding wie #master.active (28px) → Titel und Links-Abstand
   identisch wie Stammdaten. Tabelle wird separat bis auf die Kanten ausgezogen.
   padding-bottom: 64px → Abstand zwischen Tabellen-Karte und fixer Pagination-Bar
   (Pagination ist ~46px hoch; 64px Puffer ergibt ~18px sichtbaren Abstand). */
#appShell > main > #effective.active,
#appShell > main > #newwareFeed.active,
#appShell > main > #suggestions.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 28px 0 28px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Preise-Titel: KEIN Override — erbt von .tab-panel > h2 (22 px), gleich wie Stammdaten */

/* Toggles-Zeile: Abstand kommt von der späteren Regel weiter unten */

/* Layout: füllt den restlichen Platz im Flex-Container (#effective mit padding 28px).
   Tabelle startet links-bündig mit dem Titel — kein negativer Margin nötig. */
#appShell #effective.active .prices-table-layout {
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Wrap füllt Layout vollständig */
#appShell #effective.active .prices-table-wrap {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Pagination: immer am unteren Ende, kein Strecken, Abstand unten wie Seiten-Padding */
#appShell #effective .prices-pagination {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-bottom: 16px !important;
}

/* Header-Zeilen kompakter — höhere Spez. (body #appShell) nötig um Zeile 16058/16078
   (height: 56px/52px) zu schlagen */
body #appShell #effective #pricesTable {
  font-family: "Futura PT", var(--font-family-system), sans-serif !important;
  color: #5A2236 !important;
}
body #appShell #effective #pricesTable thead tr:first-child th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 44px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  line-height: 1.1 !important;
  color: #5A2236 !important;
}
body #appShell #effective #pricesTable thead tr.filter-row th {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  top: 48px !important;
  background: #f9f4f7 !important;
}
body #appShell #effective #pricesTable thead tr.filter-row th.col-action {
  top: 48px !important;
  background: #f9f4f7 !important;
}
body #appShell #effective #pricesTable thead th,
body #appShell #effective #pricesTable tbody td {
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 8px !important;
}
/* Checkboxen bleiben zentriert */
body #appShell #effective #pricesTable th:first-child,
body #appShell #effective #pricesTable td:first-child,
body #appShell #effective #pricesTable th.col-no-buyback,
body #appShell #effective #pricesTable td.col-no-buyback {
  text-align: center !important;
  padding-left: 0 !important;
}

/* Body-Zeilen kompakter */
body #appShell #effective #pricesTable tbody td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: #5A2236 !important;
}
body #appShell #effective #pricesTable tbody td span,
body #appShell #effective #pricesTable tbody td input,
body #appShell #effective #pricesTable tbody td select,
body #appShell #effective #pricesTable .price-value-cell,
body #appShell #effective #pricesTable .col-sku input,
body #appShell #effective #pricesTable .col-sku-zs input,
body #appShell #effective #pricesTable .price-name-input,
body #appShell #effective #pricesTable .price-manual-vk-input {
  font-size: 0.75rem !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #5A2236 !important;
}

/* Explicit Action Background Force (v191) */
body #appShell #effective #pricesTable tbody tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}
body #appShell #effective #pricesTable tbody tr:not(.manual-price-row) td.col-action {
  background: #ffffff !important;
}

/* Tabellen-Karte: Layout als visueller Rahmen (overflow:visible, kein Clip).
   box-shadow 0 0 0 1px = Rand der border-radius folgt. */
#appShell #effective.active .prices-table-layout {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(228, 212, 218, 0.5) !important;
  background: transparent !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* Wrap: overflow auto (nicht hidden, nicht clip-path!) damit:
   1. Tabelle horizontal scrollbar ist (Erweiterte Preise)
   2. position:sticky right:0 korrekt funktioniert (scroll-container = dieser Wrap)
   3. CSS-Spec clippt Inhalt automatisch an border-radius wenn overflow != visible
   padding-bottom: 64px → letzte Zeile scrollt über fixe Pagination-Bar hinaus sichtbar */
#appShell #effective.active .prices-table-wrap {
  border-radius: 8px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  clip-path: none !important;
  border: none !important;
  padding: 0 !important;
}
/* Vertikale Scrollleiste verstecken — Inhalt scrollt weiterhin per Maus/Trackpad.
   Ohne diesen Fix entsteht zwischen der sticky-right AKTION-Spalte und dem
   rechten Kartenrand ein Spalt in Breite der Scrollbar. */
#appShell #effective.active .prices-table-wrap::-webkit-scrollbar {
  width: 0 !important;
}
#appShell #effective.active .prices-table-wrap {
  scrollbar-width: none !important;
}

/* Tabelle füllt volle Breite, kein Margin.
   min-width:100% → Zeilen-Hintergründe reichen bis zur rechten Karte-Kante
   auch wenn wenige Spalten sichtbar sind (kein Farbbruch vor AKTION-Spalte). */
#appShell #effective.active #pricesTable {
  margin: 0 !important;
  min-width: 100% !important;
  border-left: none !important;
  border-right: none !important;
}

/* Erste Spalte: kein linker Rand */
#appShell #effective.active #pricesTable thead th:first-child,
#appShell #effective.active #pricesTable tbody td:first-child {
  border-left: none !important;
}

/* Abstand Tabelle → fixe Pagination (56px Puffer bereits via Zeile 16173 padding-bottom) */
#appShell #effective.active .prices-pagination {
  margin-top: 0 !important;
}

/* Mehr Abstand zwischen "Manuelles Produkt erfassen" und Schalter-Zeile */
#appShell #effective.active .table-tools.price-toggles-row,
#appShell #effective.active .price-toggles-row {
  margin-top: 20px !important;
  margin-bottom: 8px !important;
}

/* Pagination: gleiche Position wie Neuwarenfeed/Import (standard Rule Zeile 16144).
   Kein spezieller Override mehr — Preise-Pagination ist identisch zu anderen Tabs. */

/* Aktionsspalte: Breite passt sich automatisch dem Inhalt an (width:1% + nowrap).
   Immer sichtbar dank sticky-right. Hoher z-index gegen Überlagerung beim Scroll. */
#appShell #effective #pricesTable th.col-action,
#appShell #effective #pricesTable td.col-action,
#appShell #effective #pricesActionTable th.col-action,
#appShell #effective #pricesActionTable td.col-action {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  padding: 0 !important;
  position: sticky !important;
  right: 0 !important;
  z-index: 200 !important;
  background-color: #ffffff !important; /* Standartmässig weiss */
  box-shadow: -1px 0 0 rgba(228, 212, 218, 0.4) !important; /* Vertikale Trennlinie als Schatten um Breite nicht zu ändern */
}
/* "Aktion"-Header-Text: normale Schriftgrösse */
#appShell #effective #pricesTable thead tr:first-child th.col-action,
#appShell #effective #pricesActionTable thead tr:first-child th.col-action {
  z-index: 110000 !important; /* Höchster Z-Index für Titel-Ecke */
  top: 0 !important;
  right: 0 !important;
  background-color: #ffffff !important;
  transform: translate3d(0,0,0) !important;
}
#appShell #effective #pricesTable thead tr.filter-row th.col-action,
#appShell #effective #pricesActionTable thead tr.filter-row th.col-action {
  z-index: 105000 !important; /* Zweithöchster für Filter-Ecke */
  top: 50px !important;
  right: 0 !important;
  background-color: #f9f4f7 !important;
  transform: translate3d(0,0,0) !important;
}
/* Manual-Row: Aktionsspalte rosa wie der Rest der Zeile */
#appShell #effective #pricesTable tr.manual-price-row td.col-action,
#appShell #effective #pricesActionTable tr.manual-price-row td.col-action {
  background: #f9f4f7 !important;
}

/* ---- Kompakte Inputs in Filter- und Datenzeilen (v190) ----
   HTML-Inputs haben natürliche Höhe ~30px. Ohne explizite Höhe bestimmen sie
   die Zeilenhöhe, unabhängig vom height-Wert auf TR/TH. */
/* Filter-Zeile: Inputs auf Zeilenhöhe (20px) schrumpfen */
body #appShell #effective #pricesTable .filter-row th input,
body #appShell #effective #pricesTable .filter-row th select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border: 1px solid #e4d4da !important;
  border-radius: 4px !important;
  background: #ffffff !important;
}
body #appShell #effective #pricesTable .filter-row th input:focus,
body #appShell #effective #pricesTable .filter-row th select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}
/* Datenzeilen: Eingabefelder (Name, SKU, Manueller VK) kompakt */
body #appShell #effective #pricesTable tbody td input[type="text"],
body #appShell #effective #pricesTable tbody td input[type="number"],
body #appShell #effective #pricesTable tbody td input:not([type="checkbox"]),
body #appShell #effective #pricesTable tbody td select {
  text-align: left !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 0.75rem !important;
  font-family: inherit !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border: 1px solid #e4d4da !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body #appShell #effective #pricesTable tbody td input[type="text"]:hover,
body #appShell #effective #pricesTable tbody td input:not([type="checkbox"]):hover,
body #appShell #effective #pricesTable tbody td select:hover {
  background: #e9e9e9 !important;
  border-color: rgba(173, 9, 61, 0.1) !important;
}
body #appShell #effective #pricesTable tbody td input[type="text"]:focus,
body #appShell #effective #pricesTable tbody td input:not([type="checkbox"]):focus,
body #appShell #effective #pricesTable tbody td select:focus {
  background: #fff !important;
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(173, 9, 61, 0.1) !important;
}

/* ---- Doppelte Linie unter Filterzeile entfernen (v190) ----
   filter-row TH hat box-shadow (Linie unten) UND tbody tr:first-child td
   hat border-top — beides liegt an derselben Pixelgrenze → sichtbare Doppellinie.
   Der border-top der ersten Datenzeile wird entfernt; die Trennlinie kommt
   ausschliesslich vom box-shadow der Filter-Row. */
body #appShell #effective #pricesTable tbody tr:first-child td {
  border-top: none !important;
}

/* ---- Schatten bei "Weitere Felder" entfernen (v190) ---- */
.manual-product-details > .manual-product-card {
  box-shadow: none !important;
}

/* ---- Dynamische Tabellenhöhe (v189) ----
   Karte ist nur so gross wie der Inhalt benötigt.
   Bei wenigen Produkten: kleine Karte, Rest des Panels grau.
   Bei vielen Produkten: Karte wächst bis max. Viewport-Höhe, dann scrollbar.

   flex: 0 1 auto  → Layout nimmt Inhaltsgrösse (kein forced fill-screen).
   max-height auf dem Wrap begrenzt Wachstum auf den verfügbaren Viewport-Bereich:
   100dvh - Topbar - #effective-Padding (28+64) - Titel+Toggles (ca. 120px) - Buffer.
   height: auto auf dem Wrap → Wrap wächst mit Inhalt, nicht immer 100% vom Layout. */
#appShell #effective.active .prices-table-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}
#appShell #effective.active .prices-table-wrap,
#appShell #effective.active .prices-actions-wrap {
  height: 100% !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* FINAL COLOR SYNC: Filter-Zeile & Header über beide Tabellen
   Garantiert, dass die horizontale Hintergrundfarbe absolut durchlaufend ist. */
#appShell #effective #pricesActionTable thead tr:first-child th {
  background-color: #ffffff !important;
}

#appShell #effective #pricesTable thead tr.filter-row th,
#appShell #effective #pricesActionTable thead tr.filter-row th {
  background-color: #f9f4f7 !important;
}

/* Export Tab: Weissen Hintergrund der Button-Leiste entfernen (v191) */
#export .actions {
  background: transparent !important;
  border: none !important;
  padding: 10px 0 !important;
}

/* ====================================================
   BUGFIX: Filter-Zeile scrollt + Pagination-Abstand (2026-04-17)
   ==================================================== */

/* 1. thead als EINHEIT sticky machen — beseitigt den top:48px-Schätzfehler.
   Vorher: jede th-Zelle individuell sticky mit top:48px, was nicht immer
   mit der tatsächlich gerenderten Header-Höhe übereinstimmt.
   Jetzt: der gesamte thead (Header-Zeile + Filter-Zeile) klebt gemeinsam
   am oberen Rand — kein Pixel-Offset nötig. */
body #appShell #effective #pricesTable thead {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 300 !important;
}

/* th-Zellen: kein eigenes vertikales Sticky mehr (thead übernimmt es).
   position:relative bleibt erhalten damit die ::before-Gap-Fill-Pseudos
   (top:-3px) korrekt relativ zur Zelle positioniert werden. */
body #appShell #effective #pricesTable thead th {
  position: relative !important;
  top: auto !important;
}

/* Aktionsspalte: rechts-sticky innerhalb des sticky thead beibehalten.
   top:auto = keine vertikale Stickiness eigene; das übernimmt thead. */
body #appShell #effective #pricesTable thead th.col-action {
  position: -webkit-sticky !important;
  position: sticky !important;
  right: 0 !important;
  top: auto !important;
}

/* 2. Scroll-Puffer: letzte Zeile kann vollständig oberhalb der
   Pagination-Leiste sichtbar scrollen. (padding: 0 in Zeile 16713
   hatte den ursprünglich geplanten Puffer irrtümlich entfernt.) */
body #appShell #effective.active .prices-table-wrap {
  padding-bottom: 64px !important;
}

/* ====================================================
   BUGFIX: Aktionsspalte Hintergrund + Pagination (2026-04-17 v2)
   ==================================================== */

/* Aktionsspalte in thead: background:inherit war transparent und
   liess Daten-Zeilen-Buttons dahinter durchscheinen.
   Explizite Farben setzen, damit der thead deckend ist. */
body #appShell #effective #pricesTable thead tr:first-child th.col-action {
  background-color: #fff !important;
}
body #appShell #effective #pricesTable thead tr.filter-row th.col-action {
  background-color: #f9f4f7 !important;
}

/* Pagination: fixiert am unteren Bildrand (position:relative wurde zurückgesetzt
   auf fixed, damit sie durchgängig von Sidebar-Rand bis rechts läuft). */
#appShell #effective.active .pagination.prices-pagination,
#appShell #newwareFeed.active .pagination.newware-pagination,
#appShell #suggestions.active .pagination.suggestions-pagination {
  position: fixed !important;
  bottom: 0 !important;
  left: var(--sidebar-width, 200px) !important;
  right: 0 !important;
  z-index: 500 !important;
  margin: 0 !important;
  padding: 10px 24px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid rgba(228, 212, 218, 0.6) !important;
  box-shadow: 0 -2px 8px rgba(30, 12, 19, 0.06) !important;
  backdrop-filter: blur(8px) !important;
}

/* Sidebar eingeklappt: Pagination beginnt am linken Bildrand */
#appShell.sidebar-collapsed #effective.active .pagination.prices-pagination,
#appShell.sidebar-collapsed #newwareFeed.active .pagination.newware-pagination,
#appShell.sidebar-collapsed #suggestions.active .pagination.suggestions-pagination {
  left: 0 !important;
}

/* Scroll-Puffer für Neuwarenfeed + Import, damit letzte Zeilen
   nicht hinter der fixen Pagination-Leiste verschwinden */
#appShell #newwareFeed.active .table-wrap,
#appShell #suggestions.active .suggestions-table-wrap {
  padding-bottom: 64px !important;
}

/* Fixe Pagination: Tab-Panel-Höhe endet oberhalb der Pagination-Leiste,
   damit die Tabelle nicht dahinter verschwindet */
body #appShell #effective.active {
  padding-bottom: 60px !important;
}
body #appShell #newwareFeed.active {
  padding-bottom: 60px !important;
}
body #appShell #suggestions.active {
  padding-bottom: 60px !important;
}

/* ====================================================
   BUGFIX: Adaptive Kartenhöhe + Sticky thead (main v195)

   A) Karte füllt Viewport obwohl wenige Produkte vorhanden
      → Zeile 16880 flex:1 1 0 + Zeile 16888 height:100% zwingen Vollhöhe.
      Fix: flex:0 1 auto + height:auto + max-height:100%
   B) Leerzeile / Padding-Lücke unterhalb der letzten Produktzeile
      → padding-bottom:64px (Zeile 16949) erzeugt weissen Leerraum.
      Fix: padding-bottom:0 auf dem Wrap; Abstand kommt von panel padding-bottom:90px
   C) Ghost-Icons über Header beim Scrollen
      → thead z-index:300 < tbody td.col-action z-index:900
      Fix: thead z-index:1000, th.col-action z-index:1001
   D) AKTION-Spalten-Header unsichtbar
      → sticky right:0 in sticky-thead ohne z-index
      Fix: sticky + z-index:1001 + opaker Hintergrund
   ==================================================== */

/* 1. Layout: Inhaltsgrösse statt Vollhöhe */
body #appShell #effective.active .prices-table-layout {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

/* 2. Wrap: Höhe = Inhalt, deckelt an parent, kein internes Padding */
body #appShell #effective.active .prices-table-wrap {
  height: auto !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Panel-Abstand zur fixen Pagination vergrössern (60→90px) */
body #appShell #effective.active {
  padding-bottom: 90px !important;
}

/* 4. thead als Einheit sticky, z-index:1000 > tbody td.col-action (900) */
body #appShell #effective #pricesTable thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: #fff !important;
}

/* 5. th-Zellen: kein eigenes vertikales Sticky (thead übernimmt) */
body #appShell #effective #pricesTable thead th {
  position: static !important;
  top: auto !important;
}

/* 6. AKTION-Spalte: sticky-right + z-index:1001 + opaker Hintergrund */
body #appShell #effective #pricesTable thead tr:first-child th.col-action {
  position: sticky !important;
  right: 0 !important;
  top: auto !important;
  z-index: 1001 !important;
  background-color: #fff !important;
}
body #appShell #effective #pricesTable thead tr.filter-row th.col-action {
  position: sticky !important;
  right: 0 !important;
  top: auto !important;
  z-index: 1001 !important;
  background-color: #f9f4f7 !important;
}

/* 7. Sekundäre Aktions-Tabelle ausblenden (belt-and-suspenders zu JS) */
body #appShell #effective .prices-actions-wrap,
body #appShell #effective #pricesActionTable {
  display: none !important;
}

/* Landing refresh 2026-04-18 */
html body #landing {
  display: block !important;
  min-height: 100vh !important;
  background: #f3f3f3 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body #landing::before,
html body #landing::after {
  display: none !important;
}

html body #landing .landing-corner-right {
  top: 22px !important;
  right: 28px !important;
  z-index: 5 !important;
}

html body #landing .landing-lang-toggle {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  box-shadow: none !important;
}

html body #landing .landing-lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 2px 4px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: color 150ms ease !important;
  color: #c4adb8 !important;
}

html body #landing .landing-lang-btn.active {
  border: none !important;
  background: none !important;
  color: #ad093d !important;
}

html body #landing .landing-lang-btn:not(.active) {
  color: #c4adb8 !important;
}

html body #landing .landing-lang-btn:hover {
  border: none !important;
  background: none !important;
  color: #ad093d !important;
}

html body #landing .landing-split {
  display: grid !important;
  grid-template-columns: 53% 47% !important;
  min-height: 100vh !important;
}

html body #landing .landing-side {
  min-height: 100vh !important;
}

html body #landing .landing-side-left {
  background: linear-gradient(145deg, #9f173f 0%, #741f3f 60%, #5b1d39 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 64px !important;
}

html body #landing .landing-side-content {
  width: min(520px, 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body #landing .landing-side-logo {
  display: block !important;
  width: min(320px, 100%) !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
}

html body #landing .landing-side-title,
html body #landing .landing-side-subtitle,
html body #landing .landing-side-accent,
html body #landing .landing-side-claim {
  display: none !important;
}

html body #landing .landing-side-right {
  background: #f3f3f3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 42px 42px 42px 30px !important;
}

html body #landing .landing-card {
  width: min(480px, 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body #landing .landing-card::after {
  display: none !important;
}

html body #landing .landing-form-accent {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 400px !important;
  height: 3px !important;
  background: #e7dde2 !important;
  margin: 0 0 46px !important;
}

html body #landing .landing-form-accent::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 33.33% !important;
  background: #ad093d !important;
  transition: width 420ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

html body #landing .landing-form-accent.step-2::before {
  width: 66.67% !important;
}

html body #landing .landing-form-accent.step-3::before {
  width: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #landing .landing-form-accent::before {
    transition: none !important;
  }
}

html body #landing .landing-brand {
  margin-bottom: 22px !important;
}

html body #landing .landing .brand-kicker,
html body #landing .landing-brand .brand-kicker {
  margin: 0 0 8px !important;
  font-size: 11px !important;
  color: #7a5060 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

html body #landing .landing-brand h1 {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.06 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1e0c13 !important;
}

html body #landing #landingHint {
  margin: 0 0 20px !important;
  font-size: 13px !important;
  color: #7a5060 !important;
}

html body #landing .landing-form {
  margin-top: 0 !important;
  gap: 16px !important;
}

html body #landing .landing-auth-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  border-bottom: 1px solid #d8d8dd !important;
  padding-bottom: 2px !important;
}

html body #landing .landing-step-label {
  margin: 0 !important;
  color: #5a2236 !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

html body #landing #tokenFlowCard input,
html body #landing #tokenFlowCard input {
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1e0c13 !important;
  -webkit-text-fill-color: #1e0c13 !important;
  font-size: 18px !important;
  min-height: 48px !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  line-height: 1.2 !important;
}

html body #landing .landing-auth-row input {
  flex: 1 1 auto !important;
  width: auto !important;
}

html body #landing .landing-form input::placeholder,
html body #landing #tokenFlowCard input::placeholder {
  color: #b3adb3 !important;
}

html body #landing #landingUsername::placeholder,
html body #landing #landingPassword::placeholder {
  color: #9CA3AF !important;
  -webkit-text-fill-color: #9CA3AF !important;
  opacity: 1 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

html body #landing #tokenFlowCard input:focus,
html body #landing #tokenFlowCard input:focus {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

html body #landing #landingPassword {
  margin-top: 3px !important;
}

html body #landing .landing-auth-row:focus-within {
  border-bottom-color: #ad093d !important;
}

html body #landing .landing-form-link,
html body #landing #landingLoginBtn {
  margin-top: 0 !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ad093d !important;
  text-align: left !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

html body #landing .landing-form-link:hover,
html body #landing #landingLoginBtn:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html body #landing .landing-reset-links {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

html body #landing .landing-forgot-text {
  margin-top: 4px !important;
  color: #7a5060 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
}

html body #landing .landing-reset-link {
  margin-top: 4px !important;
  min-height: auto !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  color: #ad093d !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

html body #landing .landing-reset-link:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

@media (max-width: 1040px) {
  html body #landing .landing-split {
    grid-template-columns: 1fr !important;
  }

  html body #landing .landing-side-left {
    min-height: 42vh !important;
    padding: 42px 26px 24px !important;
  }

  html body #landing .landing-side-right {
    min-height: 58vh !important;
    padding: 24px 24px 36px !important;
  }

  html body #landing .landing-side-logo {
    width: min(240px, 100%) !important;
  }

  html body #landing #tokenFlowCard input,
  html body #landing #tokenFlowCard input {
    font-size: 17px !important;
  }

  html body #landing .landing-lang-btn {
    font-size: 12px !important;
    padding: 3px 4px !important;
  }
}

/* Final hard override: landing credential inputs must stay borderless + 2-step visibility */
html body #landing .landing-auth-row > #landingUsername,
html body #landing .landing-auth-row > #landingPassword,
html body #landing .landing-auth-row > #landingUsername:focus,
html body #landing .landing-auth-row > #landingPassword:focus,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:hover,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:hover,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:focus,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:focus {
  flex: 1 1 auto !important;
  width: auto !important;
  min-height: 48px !important;
  line-height: 1.2 !important;
  font-family: "Futura PT", Futura, "Trebuchet MS", sans-serif !important;
  font-size: 18px !important;
  color: #1e0c13 !important;
  background: transparent !important;
  -webkit-text-fill-color: #1e0c13 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 !important;
}

html body #landing .landing-auth-row > #landingUsername::placeholder,
html body #landing .landing-auth-row > #landingPassword::placeholder {
  color: #b3adb3 !important;
}

html body #landing .landing-auth-row > #landingPassword.hidden {
  display: none !important;
}

html body #landing .landing-auth-row > #landingPassword:not(.hidden) {
  display: block !important;
}

/* Landing final polish v201 */
html body #landing .landing-auth-row {
  align-items: center !important;
}

html body #landing .landing-auth-row > #landingUsername,
html body #landing .landing-auth-row > #landingPassword,
html body #landing .landing-auth-row > #landingUsername:focus,
html body #landing .landing-auth-row > #landingPassword:focus,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:hover,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:hover,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:focus,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:focus,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:active,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:active {
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: #1e0c13 !important;
}

html body #landing .landing-auth-row > #landingUsername:-webkit-autofill,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:hover,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:hover,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:focus,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:focus,
html body #landing .landing-auth-row > #landingUsername:-webkit-autofill:active,
html body #landing .landing-auth-row > #landingPassword:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
}

html body #landing #landingLoginBtn,
html body #landing .landing-form-link {
  align-self: center !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}

/* ====================================================
   Landing Input: Rand + Hintergrund entfernen (v202)
   Inputs sollen rahmenlos und transparent sein — nur die
   Unterlinie von .landing-auth-row bleibt sichtbar.
   Alle Zustände (normal, focus, autofill) explizit abgedeckt.
   ==================================================== */
html body #landing #landingUsername,
html body #landing #landingPassword,
html body #landing #landingUsername:focus,
html body #landing #landingPassword:focus,
html body #landing #landingUsername:hover,
html body #landing #landingPassword:hover,
html body #landing #landingUsername:active,
html body #landing #landingPassword:active,
html body #landing #landingUsername:-webkit-autofill,
html body #landing #landingPassword:-webkit-autofill,
html body #landing #landingUsername:-webkit-autofill:hover,
html body #landing #landingPassword:-webkit-autofill:hover,
html body #landing #landingUsername:-webkit-autofill:focus,
html body #landing #landingPassword:-webkit-autofill:focus,
html body #landing #landingUsername:-webkit-autofill:active,
html body #landing #landingPassword:-webkit-autofill:active {
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Autofill-Hintergrundfarbe via Inset-Shadow auf transparent setzen
   (einzige zuverlässige Methode für Chrome/Safari Autofill) */
html body #landing #landingUsername:-webkit-autofill,
html body #landing #landingPassword:-webkit-autofill,
html body #landing #landingUsername:-webkit-autofill:hover,
html body #landing #landingPassword:-webkit-autofill:hover,
html body #landing #landingUsername:-webkit-autofill:focus,
html body #landing #landingPassword:-webkit-autofill:focus,
html body #landing #landingUsername:-webkit-autofill:active,
html body #landing #landingPassword:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #1e0c13 !important;
  transition: background-color 9999s ease 0s !important;
}

/* ── Landing language switcher — plain text, no button chrome ──────── */
.landing-lang-item {
  display: inline;
  border: none;
  background: none;
  box-shadow: none;
  padding: 2px 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: #c4adb8;
  transition: color 150ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.landing-lang-item.active {
  color: #ad093d;
}

.landing-lang-item:hover {
  color: #ad093d;
}
/* ====================================================
/* ====================================================
/* ====================================================
/* ====================================================
   EMIL KOWALSKI: FINAL TYPOGRAPHIC SCALE (v750)
   - Scope: Universal Refinement
   - Aesthetic: High-Contrast / Bold-Minimal
   ==================================================== */

:root {
  --nx-brand: #AD093D !important;
  --nx-muted: #71717A !important;
  --nx-line: #E2E8F0 !important;
}

/* 1. Global Reset */
.nx-portal * {
  all: unset !important;
  box-sizing: border-box !important;
  font-family: 'Futura', 'Trebuchet MS', Arial, sans-serif !important;
}

.nx-portal {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: white !important;
  z-index: 999999 !important;
}

/* 2. Brand Side */
.nx-brand {
  background: linear-gradient(135deg, #AD093D 0%, #5A2236 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nx-logo-img { height: 50px !important; filter: brightness(0) invert(1) !important; margin-right: 2rem !important; }
.nx-logo-text { font-size: 2.2rem !important; font-weight: 700 !important; color: white !important; }

/* 3. Auth Side */
.nx-auth {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: white !important;
  padding: 80px !important;
  color: #111 !important;
}

.nx-progress-line {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--nx-brand) !important;
  z-index: 1000 !important;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.nx-top { position: absolute !important; top: 2rem !important; right: 2rem !important; }
.nx-lang-switcher { display: flex !important; gap: 1rem !important; }

.nx-lang-btn {
  color: var(--nx-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  opacity: 0.4 !important;
}

.nx-lang-btn.active { color: var(--nx-brand) !important; opacity: 1 !important; }

.nx-center { width: 100% !important; max-width: 480px !important; }

/* 4. Typography Scale */
.nx-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #111 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.25em !important;
  margin-bottom: 4rem !important;
  display: block !important;
}

.nx-field-wrap {
  display: flex !important;
  align-items: flex-end !important;
  border-bottom: 2px solid var(--nx-line) !important;
  padding-bottom: 12px !important;
  margin-top: 1rem !important;
}

.nx-input {
  flex-grow: 1 !important;
  font-size: 1rem !important;
  color: #111 !important;
  background: transparent !important;
  letter-spacing: 0 !important;
}

.nx-input::placeholder { color: #D1D5DB !important; }

.nx-link {
  color: var(--nx-brand) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin-left: 1rem !important;
  padding-bottom: 4px !important;
}

.nx-footer {
  margin-top: 4.5rem !important;
  font-size: 14px !important;
  color: var(--nx-muted) !important;
}

.nx-bold-link {
  color: var(--nx-brand) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-left: 4px !important;
}

.nx-back {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--nx-muted) !important;
  cursor: pointer !important;
  margin-bottom: 2rem !important;
  opacity: 0.6 !important;
  transition: opacity 150ms ease, color 150ms ease !important;
}

.nx-back:hover {
  opacity: 1 !important;
  color: var(--nx-brand) !important;
}

/* ── Progress track + bar ────────────────────────────────────────────────── */
#landing .nx-progress-track {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #E2E8F0 !important;
  border-radius: 1px !important;
  margin-bottom: 3rem !important;
  position: relative !important;
  overflow: visible !important;
}
#nxProgress {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: #AD093D !important;
  border-radius: 1px !important;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ── Input font size — matches body, avoids jarring scale gap with buttons ── */
#landing .nx-input {
  font-size: 1rem !important;
}

/* ── Shared muted gray for labels/placeholders ──────────────────────────── */
/* Same gray as: PHOTO VISION ZUMSTEIN, placeholders, Passwort vergessen, Zurück */
:root { --nx-ui-gray: #9CA3AF !important; }

/* ── Heading block (right side) ──────────────────────────────────────────── */
#landing .nx-heading-block {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 3rem !important;
}
#landing .nx-eyebrow {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #9CA3AF !important;
  margin-bottom: 0.5rem !important;
}
#landing .nx-main-title {
  display: block !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #1a0a10 !important;
  line-height: 1 !important;
}

/* ── Placeholders — same size as input so text doesn't jump when typing ──── */
#landingUsername::placeholder,
#landingPassword::placeholder {
  color: #9CA3AF !important;
  -webkit-text-fill-color: #9CA3AF !important;
  opacity: 1 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* ── Buttons vertically centered — simpler and reliable across both steps ── */
#landing .nx-field-wrap {
  align-items: center !important;
}
#landing .nx-link,
#landing .nx-link-back {
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* ── Action links (WEITER, LOGIN) ────────────────────────────────────────── */
#landing .nx-link {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ── Back button — same style as .nx-link but gray ──────────────────────── */
#landing .nx-link-back {
  color: #9CA3AF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  padding-bottom: 0 !important;
  margin-right: 1rem !important;
  transition: color 150ms ease !important;
}
#landing .nx-link-back:hover {
  color: #6B7280 !important;
}

/* ── Footer text — must be block (all:unset resets display→inline) ───────── */
#landing .nx-footer {
  display: block !important;
  margin-top: 2rem !important;
  color: #9CA3AF !important;
  font-size: 14px !important;
}
html body #landing .nx-footer {
  display: block !important;
  margin-top: 2rem !important;
  padding-top: 0 !important;
  color: #9CA3AF !important;
  font-size: 14px !important;
}

/* ── Inner layout elements ─────────────────────────────────────────────── */
#landing .nx-logo-wrap {
  display: flex !important;
  align-items: center !important;
}
#landing .nx-top {
  position: absolute !important;
  top: 2rem !important;
  right: 2rem !important;
  display: flex !important;
}
#landing .nx-lang-switcher {
  display: flex !important;
  gap: 1rem !important;
}
#landing .nx-center {
  display: block !important;
  width: 100% !important;
  max-width: 480px !important;
}
#landing .nx-field-wrap {
  display: flex !important;
  align-items: center !important;
  border-bottom: 2px solid #E2E8F0 !important;
  padding-bottom: 12px !important;
  padding-top: 12px !important;
  margin-top: 1rem !important;
}

/* ── Step visibility — ID-Selektoren (1,0,0) schlagen all:unset (0,1,1) ── */
#nxStep1            { display: block !important; }
#nxStep2            { display: none  !important; }
#nxStep2.hidden:not(.nx-active) { display: none !important; }
#nxStep1.nx-hidden  { display: none  !important; }
#nxStep2.nx-active  { display: block !important; }
#landing[data-login-step="token"] #nxStep1,
#landing[data-login-step="token"] #nxStep2 {
  display: none !important;
}
#landing[data-login-step="token"] .nx-footer {
  display: none !important;
}

#landing #tokenFlowCard {
  display: block !important;
}
#landing #tokenFlowCard.hidden {
  display: none !important;
}
#landing .nx-token-title {
  display: none !important;
}
#landing #tokenFlowPassword,
#landing #tokenFlowPassword:focus,
#landing #tokenFlowPassword:hover,
#landing #tokenFlowPassword:active,
#landing #tokenFlowPasswordConfirm,
#landing #tokenFlowPasswordConfirm:focus,
#landing #tokenFlowPasswordConfirm:hover,
#landing #tokenFlowPasswordConfirm:active,
html body #landing #tokenFlowPassword,
html body #landing #tokenFlowPassword:focus,
html body #landing #tokenFlowPassword:hover,
html body #landing #tokenFlowPassword:active,
html body #landing #tokenFlowPasswordConfirm,
html body #landing #tokenFlowPasswordConfirm:focus,
html body #landing #tokenFlowPasswordConfirm:hover,
html body #landing #tokenFlowPasswordConfirm:active {
  flex-grow: 1 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #5a2236 !important;
  -webkit-text-fill-color: #5a2236 !important;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 22.08px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
#landing #tokenFlowPassword::placeholder,
#landing #tokenFlowPasswordConfirm::placeholder,
html body #landing #tokenFlowPassword::placeholder,
html body #landing #tokenFlowPasswordConfirm::placeholder {
  color: #b3adb3 !important;
  -webkit-text-fill-color: #b3adb3 !important;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 22.08px !important;
  opacity: 1 !important;
}
#landing #tokenFlowSubmitBtn {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  color: var(--nx-brand) !important;
  cursor: pointer !important;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  margin-left: 1rem !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Canonical login-step state: prevents accidental 1-step rendering */
#landing[data-login-step="1"] #nxStep1 { display: block !important; }
#landing[data-login-step="1"] #nxStep2 { display: none !important; }
#landing[data-login-step="2"] #nxStep1 { display: none !important; }
#landing[data-login-step="2"] #nxStep2 { display: block !important; }

/* ── Grid container self — (1,0,0) beats all:unset (0,1,0) ─────────────── */
#landing {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: white !important;
}
/* (1,1,0) beats (1,0,0) — allows updateAuthUI to hide landing after login */
#landing.hidden {
  display: none !important;
}

/* ── Grid-Layout erzwingen — ID (1,1,0) schlägt all:unset (0,1,1) ──────── */
#landing .nx-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 1 !important;
  align-self: stretch !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #AD093D 0%, #5A2236 100%) !important;
}
#landing .nx-auth {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 2 !important;
  align-self: stretch !important;
  min-height: 100vh !important;
  background: white !important;
  position: relative !important;
  padding: 80px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Portal Sidebar & AppShell Layout (new HTML structure)
   ══════════════════════════════════════════════════════════════════════════ */

#appShell:not(.hidden) {
  display: flex !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.portal-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sidebar-width, 200px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #1E0C13 !important;
  border-right: 1px solid rgba(228, 212, 218, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 0 18px !important;
  z-index: 80 !important;
  overflow-y: auto !important;
}

/* ── Main content area ───────────────────────────────────────────────────── */
.portal-main-view {
  margin-left: var(--sidebar-width, 200px) !important;
  flex: 1 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.sidebar-top {
  padding: 14px 16px 10px !important;
}

.sidebar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sidebar-logo img {
  width: 96px !important;
  max-width: 96px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
}

.sidebar-logo span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.38) !important;
}

/* ── Nav groups ──────────────────────────────────────────────────────────── */
.sidebar-nav-group {
  margin-top: 20px !important;
  padding: 0 !important;
}

.sidebar-nav-group.spacer {
  margin-top: auto !important;
}

.nav-section-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.28) !important;
  padding: 0 20px 4px !important;
  display: block !important;
}

.sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
}

/* ── Nav buttons ─────────────────────────────────────────────────────────── */
.nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,0.46) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 120ms, color 120ms !important;
  box-shadow: none !important;
  outline: none !important;
}

.nav-btn i {
  font-style: normal !important;
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.nav-btn span {
  display: block !important;
}

.nav-btn.active {
  border-left-color: #AD093D !important;
  background: rgba(173,9,61,0.18) !important;
  color: #fff !important;
}

.nav-btn:not(.active):hover {
  background: rgba(173,9,61,0.08) !important;
  color: rgba(255,255,255,0.75) !important;
}

/* ── User footer ─────────────────────────────────────────────────────────── */
.sidebar-user {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px 0 !important;
  border-top: 1px solid rgba(228,212,218,0.12) !important;
  margin-top: 8px !important;
}

.user-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(173,9,61,0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

.user-meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.user-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.user-role {
  font-size: 9px !important;
  color: rgba(255,255,255,0.38) !important;
  letter-spacing: 0.06em !important;
}

.logout-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 4px !important;
  border-radius: 4px !important;
  transition: color 150ms !important;
  flex-shrink: 0 !important;
}

.logout-btn:hover {
  color: rgba(255,255,255,0.75) !important;
}

/* ── nx-portal: suppress is-loading layout changes on <span> login button ──
   login() adds is-loading which fires a ::after spinner (inline-block, 16px wide)
   that widens the LOGIN span and shifts ZURÜCK left. Suppress the geometry. */
#landing #landingLoginBtn.is-loading {
  background: none !important;
  color: var(--nx-brand, #AD093D) !important;
  box-shadow: none !important;
  opacity: 0.45 !important;
}
#landing #landingLoginBtn.is-loading::after {
  display: none !important;
}

/* ── nx-portal: strip browser/global input chrome from nx-input fields ──
   Global rule "input { border-radius:12px; border:1px solid #d4d4d4 }" bleeds in.
   Override to borderless, transparent, flush — only the nx-field-wrap underline shows. */
#landing .nx-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#landing .nx-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
}

/* ── nx-portal: hide the old "Bitte Zugangsdaten eingeben" hint message ── */
#landing #landingHint {
  display: none !important;
}

/* ── Prices table: remove double line between sort header and filter row ──
   Only the filter row's border-bottom acts as the single section divider. */
#pricesTable thead tr:first-child th,
#pricesActionTable thead tr:first-child th {
  border-bottom: none !important;
}

/* ── Prices table filter row: flat inputs, no rounded chrome ──────────────
   Global "input { border-radius:12px; border:1px solid #d4d4d4 }" makes filter
   inputs look wider than data cells. Strip to a simple flat border. */
#pricesTable .filter-row input,
#pricesTable .filter-row select {
  border-radius: 3px !important;
  border: 1px solid #E4D4DA !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   nx-portal: Login animations & transitions
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Landing page entrance ─────────────────────────────────────────────────── */
@keyframes nxAuthFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nxBrandSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
#landing .nx-brand {
  animation: nxBrandSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
#landing .nx-center {
  animation: nxAuthFadeIn 0.24s 0.04s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* ── Step directional transitions (Direction A+C) ──────────────────────────── */
@keyframes nxStepIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nxStepOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-12px); }
}
@keyframes nxStepOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}
@keyframes nxStepInFromRight {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nxStepInFromLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Step 1: exit left when going forward */
#nxStep1.nx-exiting {
  display: block !important;
  animation: nxStepOutLeft 0.09s cubic-bezier(0.4, 0, 1, 1) both !important;
}
/* Step 2: entrance from right (forward) */
#nxStep2.nx-active {
  animation: nxStepInFromRight 0.12s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
/* Step 2: exit right when going back — after nx-active in CSS so it wins at same specificity */
#nxStep2.nx-exiting-back {
  display: block !important;
  animation: nxStepOutRight 0.09s cubic-bezier(0.4, 0, 1, 1) both !important;
}
/* Step 1: entrance from left (going back) */
#nxStep1.nx-entering-back {
  animation: nxStepInFromLeft 0.12s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* ── Login exit animation for nx-portal layout ─────────────────────────────── */
#landing.landing-exit {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#landing.landing-exit .nx-auth {
  transform: translateY(-6px) !important;
  transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#landing.landing-exit .nx-brand {
  transform: scale(0.97) translateX(-4px) !important;
  transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ── Logout -> Login return animation (match logout timing) ──────────────── */
#landing.nx-return-soft .nx-center {
  animation: nxLogoutFadeIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

#nxLogout.nx-leaving {
  opacity: 0 !important;
  pointer-events: none !important;
}
#nxLogout.nx-leaving img,
#nxLogout.nx-leaving p {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  #landing.nx-return-soft .nx-center {
    animation: none !important;
  }
  #nxLogout.nx-leaving img,
  #nxLogout.nx-leaving p {
    transition: none !important;
    transform: none !important;
  }
  #nxLogout.nx-leaving {
    transition: none !important;
  }
}

/* ── Password reset modal: strip global input chrome ──────────────────────── */
#nxResetInput {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-box-shadow: none !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #1a0a10 !important;
}
#nxResetInput:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
#nxResetInput::placeholder {
  color: #9CA3AF !important;
}

/* ── Inline login error message ────────────────────────────────────────────── */
.nx-login-error {
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #AD093D !important;
  line-height: 1.4 !important;
  animation: nxStepInFromRight 0.12s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* ── Field shake on wrong password ─────────────────────────────────────────── */
@keyframes nxShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}
.nx-shake {
  animation: nxShake 0.22s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

/* ── Logout screen ─────────────────────────────────────────────────────────── */
@keyframes nxLogoutFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#nxLogout {
  animation: nxLogoutFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  opacity: 1;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
#nxLogout img {
  animation: nxAuthFadeIn 0.4s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#nxLogout p {
  animation: nxAuthFadeIn 0.4s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Backup restore progress screen ───────────────────────────────────────── */
body.restore-progress-active {
  overflow: hidden;
}

.restore-progress-screen {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #AD093D 0%, #5A2236 100%);
  animation: nxLogoutFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.restore-progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.45rem !important;
  width: min(560px, calc(100vw - 48px)) !important;
  text-align: center !important;
}

.restore-progress-title {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-family: 'Futura PT', Futura, 'Trebuchet MS', sans-serif;
  font-size: clamp(30px, 3.4vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

.restore-progress-text {
  min-height: 1.5em !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: 'Futura PT', Futura, 'Trebuchet MS', sans-serif;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

.restore-progress-dots {
  position: relative;
  width: 132px;
  height: 16px;
}

.restore-progress-dots span {
  position: absolute;
  top: 4px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #FFFFFF;
  opacity: 0;
  animation: restoreDotTravel 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.restore-progress-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.restore-progress-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes restoreDotTravel {
  0% {
    transform: translateX(0) scale(0.76);
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  72% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(124px) scale(0.76);
    opacity: 0;
  }
}

.restore-progress-retry {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  font-family: 'Futura PT', Futura, 'Trebuchet MS', sans-serif;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  min-width: 0 !important;
  padding: 0.55rem 0.35rem !important;
  text-transform: uppercase !important;
}

.restore-progress-retry:hover {
  background: transparent !important;
  opacity: 0.72 !important;
}

.restore-progress-error .restore-progress-dots {
  display: none !important;
}

.restore-progress-error .restore-progress-title {
  font-size: clamp(32px, 3.6vw, 50px) !important;
}

.restore-progress-error .restore-progress-text {
  max-width: 520px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(16px, 1.45vw, 20px) !important;
  letter-spacing: 0.035em !important;
  text-transform: none !important;
}

.restore-progress-error .restore-progress-retry {
  color: #FFFFFF !important;
}

/* Premium Checkbox Styling - Isolated to prevent regressions */
html body #appShell input[type="checkbox"].premium-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #c8a6b4 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 8px 0 0 !important;
  transition: all 0.2s ease !important;
}

html body #appShell input[type="checkbox"].premium-checkbox:checked {
  background-color: #ad093d !important;
  border-color: #ad093d !important;
}

html body #appShell input[type="checkbox"].premium-checkbox:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

html body #appShell input[type="checkbox"].premium-checkbox:hover {
  border-color: #ad093d !important;
  box-shadow: 0 0 4px rgba(173, 9, 61, 0.2) !important;
}

/* ====================================================
   Final QA fixes (2026-04-21)
   ==================================================== */

/* 1) Login: avoid jitter on Weiter/Zurueck transitions */
#landing #nxStep1.nx-exiting,
#landing #nxStep2.nx-exiting-back,
#landing #nxStep1.nx-entering-back,
#landing #nxStep2.nx-active {
  animation: none !important;
  transform: none !important;
}

/* 2) Pending approval + manual product: remove visual double line */
#effective .section-toggle-row .freigabe-queue-details > summary h3::after {
  content: none !important;
  display: none !important;
}
#effective .section-toggle-row .freigabe-queue-details > summary h3 {
  margin-bottom: 8px !important;
}
#effective #pendingApprovalCard .freigabe-queue-details[open] > summary {
  margin-bottom: 8px !important;
}
#effective #pendingApprovalCard .freigabe-queue-content {
  margin: 0 !important;
  padding: 4px 0 10px !important;
  border: 0 !important;
}
#effective #pendingApprovalCard #refreshPendingApprovalBtn {
  margin-top: 2px !important;
}
#effective #pendingApprovalCard table {
  margin-top: 0 !important;
  border-top: 0 !important;
}
#effective #pendingApprovalCard thead th {
  border-top: 0 !important;
}
#effective .manual-product-details[open] > summary {
  margin-bottom: 8px !important;
}

#effective .price-request-submit {
  background: #AD093D !important;
  border-color: #AD093D !important;
  color: #fff !important;
  box-shadow: none !important;
}

#effective .price-request-submit-sm {
  min-width: 34px !important;
  height: 28px !important;
  padding: 0 8px !important;
}

#effective .price-request-submit-sm svg {
  width: 14px !important;
  height: 14px !important;
}

#effective .price-request-submit:hover {
  background: #8f0732 !important;
  border-color: #8f0732 !important;
  transform: translateY(-1px);
}

.request-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(64, 88, 119, 0.1);
  color: #405877;
}

.request-status-pill.is-pending {
  background: rgba(173, 9, 61, 0.08);
  color: #AD093D;
}

.request-status-pill.is-approved {
  background: rgba(26, 92, 54, 0.1);
  color: #1a5c36;
}

.request-status-pill.is-rejected {
  background: rgba(133, 35, 35, 0.1);
  color: #852323;
}

#effective #pendingApprovalCard table,
#effective #myRequestsCard table {
  overflow: hidden !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(228, 212, 218, 0.9) !important;
  background: #fff !important;
}

#effective #pendingApprovalCard thead th,
#effective #myRequestsCard thead th {
  background: #fff !important;
  color: #1E0C13 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#effective #pendingApprovalCard tbody td,
#effective #myRequestsCard tbody td {
  background: #fff7fa !important;
  font-size: 12px !important;
  color: #241018 !important;
  vertical-align: middle !important;
}

#effective #myRequestsCard tbody tr.is-unread-request td {
  background: #fff0f5 !important;
}

#effective #pendingApprovalCard td .approval-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#effective #pendingApprovalCard td .approval-actions button {
  margin: 0 !important;
}

#effective #pendingApprovalCard .pending-approval-pulse,
#effective #myRequestsCard .pending-approval-pulse {
  margin-left: 12px !important;
}

#effective .manual-product-details > .manual-product-card {
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  padding-top: 6px !important;
}
#effective .manual-product-main-row {
  margin-top: 2px !important;
}

/* 3) Prices table: keep Name filter width aligned with data rows */
#appShell #effective #pricesTable th.col-name,
#appShell #effective #pricesTable td.col-name,
#appShell #effective #pricesTable thead tr.filter-row th:nth-child(3) {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
}
#appShell #effective #pricesTable thead tr.filter-row th.col-name,
#appShell #effective #pricesTable tbody td.col-name {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#appShell #effective #pricesTable thead tr.filter-row th.col-name {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
}
#appShell #effective #pricesTable thead tr.filter-row th:nth-child(3) input,
#appShell #effective #pricesTable thead tr.filter-row th.col-name input,
#appShell #effective #pricesTable td.col-name .price-name-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 4) Specific column & input dimension overrides */

/* SKU (Import): 130px */
body #appShell #effective #pricesTable th.col-sku-mpb,
body #appShell #effective #pricesTable td.col-sku-mpb { width: 130px !important; min-width: 130px !important; max-width: 130px !important; padding: 0 8px !important; font-family: monospace; font-size: 11px; color: #666; vertical-align: middle; }

/* SKU Zumstein: 170px */
body #appShell #effective #pricesTable th.col-sku-zs,
body #appShell #effective #pricesTable td.col-sku-zs { width: 170px !important; min-width: 170px !important; max-width: 170px !important; padding: 0 4px !important; box-sizing: border-box !important; }
body #appShell #effective #pricesTable .col-sku-zs .price-sku-cell { display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; gap: 0 !important; }
body #appShell #effective #pricesTable .col-sku-zs input { width: 100% !important; height: 28px !important; flex: 1 1 auto !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; }

/* Manual VK: 148x32 */
body #appShell #effective #pricesTable th.col-manual-vk,
body #appShell #effective #pricesTable td.col-manual-vk { width: 156px !important; min-width: 156px !important; max-width: 156px !important; padding: 0 4px !important; }
body #appShell #effective #pricesTable .col-manual-vk input { width: 100% !important; height: 32px !important; box-sizing: border-box !important; display: block !important; }

/* Zuletzt geprüft: 170x32 */
body #appShell #effective #pricesTable th.col-reviewed-at,
body #appShell #effective #pricesTable td.col-reviewed-at { width: 178px !important; min-width: 178px !important; max-width: 178px !important; padding: 0 4px !important; }
body #appShell #effective #pricesTable .col-reviewed-at input { width: 100% !important; height: 32px !important; box-sizing: border-box !important; display: block !important; }

/* Other Extended Fields: 28px height */
body #appShell #effective #pricesTable th.col-image-url,
body #appShell #effective #pricesTable td.col-image-url { width: 250px !important; min-width: 250px !important; max-width: 250px !important; padding: 0 4px !important; }
body #appShell #effective #pricesTable th.col-group,
body #appShell #effective #pricesTable td.col-group { width: 160px !important; min-width: 160px !important; max-width: 160px !important; padding: 0 4px !important; }
body #appShell #effective #pricesTable th.col-catalog,
body #appShell #effective #pricesTable td.col-catalog { width: 160px !important; min-width: 160px !important; max-width: 160px !important; padding: 0 4px !important; }
body #appShell #effective #pricesTable th.col-class,
body #appShell #effective #pricesTable td.col-class { width: 120px !important; min-width: 120px !important; max-width: 120px !important; padding: 0 4px !important; }
body #appShell #effective #pricesTable th.col-import-ts,
body #appShell #effective #pricesTable td.col-import-ts { width: 150px !important; min-width: 150px !important; max-width: 150px !important; padding: 0 4px !important; }

/* Force default 28px height for all remaining column inputs/selects */
body #appShell #effective #pricesTable td[class^="col-"] input,
body #appShell #effective #pricesTable td[class^="col-"] select,
body #appShell #effective #pricesTable th[class^="col-"] input,
body #appShell #effective #pricesTable th[class^="col-"] select {
  width: 100% !important;
  height: 28px !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* Re-override the 32px ones because of the catch-all above */
body #appShell #effective #pricesTable .col-manual-vk input,
body #appShell #effective #pricesTable .col-reviewed-at input {
  height: 32px !important;
}

/* KI-Vorschläge: Status-Badges */
.suggestion-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.suggestion-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.suggestion-badge.badge-warn {
  background: #fde2e2;
  color: #8b1f1f;
  border: 1px solid #f3b3b3;
}
.suggestion-badge.badge-ok {
  background: #def7e3;
  color: #1f6b2c;
  border: 1px solid #b3e0bd;
}
.classification-hints-card textarea {
  width: 100%;
  min-height: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #d0d4dc;
  resize: vertical;
}

/* Suggestion action row: button alignment fix
   Older rules apply margin-left:64px to .suggestion-action-buttons assuming a
   preceding badge slot. When no badges are present (e.g. SKU Zumstein found,
   nothing missing) the buttons get pushed right awkwardly. Reset margin and
   re-introduce spacing only when a badge sibling is present. */
html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}
html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  margin-left: 0 !important;
}
html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badges + .suggestion-action-buttons {
  margin-left: 12px !important;
}

/* Import suggestions action alignment: final winner rule.
   Keep one reserved badge lane so Bearbeiten/Uebernehmen/Loeschen start at
   exactly the same x-position whether warning badges are present or not. */
html body #importSuggestionsPanel table thead tr th:last-child {
  text-align: left !important;
  padding-left: 175px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 10px !important;
  min-width: 640px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  display: grid !important;
  grid-template-columns: 175px repeat(3, 138px) !important;
  align-items: center !important;
  justify-content: start !important;
  column-gap: 12px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badges {
  grid-column: 1 !important;
  display: inline-flex !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badges.is-empty {
  visibility: hidden !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons {
  display: contents !important;
  margin-left: 0 !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons > button {
  width: 138px !important;
  min-width: 138px !important;
  max-width: 138px !important;
  margin: 0 !important;
}

/* KI suggestions scroll/empty-state final layout.
   Avoid the orphan scrollbar/padding track when no rows are visible. */
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap {
  padding-bottom: 0 !important;
  scrollbar-gutter: stable;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.is-empty {
  padding-bottom: 0 !important;
  overflow: hidden !important;
  scrollbar-gutter: auto;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.is-empty table {
  margin-bottom: 0 !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.is-empty tbody {
  display: none !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.is-empty #suggestionsEmpty {
  display: flex !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) {
  overflow-y: auto !important;
  overflow-x: auto !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) #suggestionsEmpty {
  display: none !important;
}

/* Import result footer: keep standalone buttons compact, not in a full white card. */
body #appShell #suggestions.active #importStepResults .actions.import-finish-actions,
body #appShell #suggestions.active .actions.import-finish-actions {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.clarifications-section {
  margin-top: 16px;
}

.clarifications-table-wrap {
  max-height: min(360px, 42vh);
  overflow: auto;
  border: 1px solid rgba(207, 155, 177, 0.45);
  border-radius: 8px;
  background: #fff;
}

.clarifications-table-wrap table {
  margin: 0;
}

.clarifications-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

/* Preise: right padding on the tab-panel so the table-layout box doesn't
   touch the viewport edge. Existing rules force width: 100% on the layout,
   so margin-right alone doesn't visually shrink it — padding the parent
   does. Matches the visual gap between two adjacent filter inputs. */
body #appShell #effective.tab-panel.active {
  padding-right: 28px !important;
}

/* --- Tabellenfix: inner-scroll architecture for KI Vorschläge / Neuwarenfeed / Backup ---
   Same pattern as Preise: tab-panel is flex column with overflow hidden, the
   table-wrap fills remaining space and scrolls internally, thead is sticky
   relative to the wrap. The global `table { overflow: hidden }` must be
   overridden with `overflow: clip` so sticky thead is not trapped inside the table. */

#appShell #importSuggestionsPanel .suggestions-table-wrap > table {
  overflow-x: clip !important;
  overflow-y: clip !important;
}

/* Backup: replicate Preise/Newware/Import architecture */
#backup.tab-panel.active {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#backup.tab-panel.active > * {
  flex: 0 0 auto !important;
}

#appShell #backup .table-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}

/* Watertight sticky thead: also paint thead + tr with white background so
   no content shows through gaps between sticky cells. */
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead,
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr {
  background: #fff !important;
}

body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 #E4D4DA !important;
}

body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::before {
  content: "" !important;
  position: absolute !important;
  top: -3px !important;
  bottom: 0 !important;
  left: -1px !important;
  right: -1px !important;
  background: #fff !important;
  z-index: -1 !important;
}

/* KI Vorschläge: badge polish (ALL CAPS + alignment) */
#suggestionsBody td.suggestion-action-cell .suggestion-badge {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* ====================================================
   Tabellenfix v2 (2026-04-29)
   - Backup tab needs the same outer-container treatment as Preise/Newware/Import
     so the table-wrap actually has a constrained height for sticky to engage.
   - Newwarenfeed: pin both thead rows to fixed heights so the filter-row
     `top: 44px` offset matches the first row's actual height (no 6 px overlap
     and no body show-through between them).
   - Import (KI Vorschläge): bump thead z-index well above any inline button
     z-index, and extend the seal pseudo upward so action-cell content can't
     leak above the sticky header at the bottom of the scroll range.
   ==================================================== */

/* Backup: same container chain as the other inner-scroll tabs */
#appShell > main > #backup.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 28px 0 28px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Import / KI Vorschläge: thead must always cover any body cell content,
   including the wide multi-button action cell. Push z-index up and
   extend the upward seal so nothing peeks through at the top of the wrap. */
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead,
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr {
  position: relative !important;
  z-index: 9000 !important;
}
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
  z-index: 9000 !important;
  background: #fff !important;
}
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::before {
  top: -8px !important;
  bottom: -1px !important;
  background: #fff !important;
}
/* Body cells in suggestions never establish a stacking context above thead. */
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > tbody td.suggestion-action-cell,
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > tbody td.suggestion-action-cell * {
  z-index: auto !important;
}

/* ====================================================
   Import suggestions responsive action layout (2026-04-29)
   The action column uses a reserved badge lane plus fixed-width buttons.
   On smaller windows the table must stay horizontally scrollable instead of
   squeezing badges into the button area.
   ==================================================== */

html body #importSuggestionsPanel .suggestions-table-wrap > table {
  min-width: 1640px !important;
}

html body #importSuggestionsPanel table thead tr th:last-child {
  min-width: 680px !important;
  width: 680px !important;
  padding-left: 176px !important;
  box-sizing: border-box !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  min-width: 680px !important;
  width: 680px !important;
  max-width: 680px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  grid-template-columns: 176px 138px 138px 138px !important;
  column-gap: 12px !important;
  width: max-content !important;
  min-width: 626px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badges {
  width: 176px !important;
  max-width: 176px !important;
  min-width: 176px !important;
  align-self: center !important;
  overflow: hidden !important;
  row-gap: 3px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badge {
  max-width: 172px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
  line-height: 1.05 !important;
  padding: 4px 8px !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons > button {
  width: 138px !important;
  min-width: 138px !important;
  max-width: 138px !important;
}

/* KI Vorschläge: stronger visual separation between header and rows. */
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
  background: #fff !important;
  border-bottom: 2px solid #d8bec8 !important;
  box-shadow: 0 8px 14px rgba(66, 25, 42, 0.07) !important;
}

body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:first-child > td {
  border-top: 8px solid #faf7f9 !important;
}

/* ====================================================
   Neuwarenfeed + Backup table cleanup (2026-04-30)
   One shared sticky-table contract for the two simple scroll tables. This
   replaces the previous v3/v4/v5 experiments so the header, body and footer
   no longer fight across several stacked overrides.
   ==================================================== */
body #appShell #newwareFeed.active,
body #appShell #backup.active {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body #appShell #newwareFeed.active {
  padding-bottom: 76px !important;
}

body #appShell #backup.active {
  padding-bottom: 28px !important;
}

body #appShell #newwareFeed.active > *:not(.table-wrap):not(.pagination),
body #appShell #backup.active > *:not(.table-wrap):not(#backupEmpty) {
  flex: 0 0 auto !important;
}

body #appShell #newwareFeed.active > .table-wrap,
body #appShell #backup.active > .table-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #e4d4da !important;
  border-radius: 6px !important;
  isolation: isolate !important;
}

body #appShell #newwareFeed.active > .table-wrap {
  margin-top: 0 !important;
}

body #appShell #backup.active > .table-wrap {
  margin-top: 12px !important;
}

body #appShell #newwareFeed.active > .table-wrap::before,
body #appShell #backup.active > .table-wrap::before {
  display: none !important;
  content: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table,
body #appShell #backup.active > .table-wrap > table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead,
body #appShell #backup.active > .table-wrap > table > thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 70000 !important;
  background: #fff !important;
  box-shadow: 0 2px 0 #d8bec8, 0 10px 18px rgba(255, 255, 255, 0.96) !important;
  transform: translateZ(0) !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr,
body #appShell #backup.active > .table-wrap > table > thead > tr {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  background: #fff !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr.newware-filter-row {
  background: #f9f4f7 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #fff !important;
  box-shadow: inset 0 -1px 0 #e4d4da !important;
  transform: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr.newware-filter-row > th {
  background: #f9f4f7 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead th::before,
body #appShell #backup.active > .table-wrap > table > thead th::before {
  display: none !important;
  content: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > tbody,
body #appShell #backup.active > .table-wrap > table > tbody,
body #appShell #newwareFeed.active > .table-wrap > table > tbody td,
body #appShell #backup.active > .table-wrap > table > tbody td,
body #appShell #newwareFeed.active > .table-wrap > table > tbody input,
body #appShell #backup.active > .table-wrap > table > tbody button {
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}

body #appShell #newwareFeed.active .pagination.newware-pagination {
  position: fixed !important;
  bottom: 0 !important;
  left: var(--sidebar-width, 200px) !important;
  right: 0 !important;
  z-index: 80000 !important;
}

body #appShell.sidebar-collapsed #newwareFeed.active .pagination.newware-pagination {
  left: 0 !important;
}

/* ====================================================
   Scroll-table edge cleanup (2026-04-30)
   Keep the table cards visually inside the tab padding and make Import use
   one sticky header layer instead of per-cell shadows.
   ==================================================== */
body #appShell #newwareFeed.active,
body #appShell #suggestions.active,
body #appShell #backup.active {
  box-sizing: border-box !important;
  gap: 12px !important;
}

body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #e4d4da !important;
  border-radius: 6px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap {
  padding: 0 !important;
  margin: 0 !important;
  isolation: isolate !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 70000 !important;
  background: #fff !important;
  box-shadow: 0 2px 0 #d8bec8, 0 10px 18px rgba(255, 255, 255, 0.96) !important;
  transform: translateZ(0) !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr {
  position: relative !important;
  z-index: auto !important;
  background: #fff !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 #e4d4da !important;
  transform: none !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead th::before {
  display: none !important;
  content: none !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:first-child > td {
  border-top: 0 !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody button {
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}

/* ====================================================
   Scroll-table line consistency + top mask (2026-04-30)
   A sticky zero-height mask sits below thead but above tbody, preventing
   scrolled content from bleeding into the top edge. Separators use one
   stable 1px line instead of stacked borders/shadows.
   ==================================================== */
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  border: 1px solid #e4d4da !important;
  box-shadow: none !important;
}

body #appShell #newwareFeed.active > .table-wrap::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::before,
body #appShell #backup.active > .table-wrap::before {
  content: "" !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  z-index: 69000 !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 22px #fff !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead,
body #appShell #backup.active > .table-wrap > table > thead {
  box-shadow: 0 1px 0 #d8bec8 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > tbody > tr:first-child > td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:first-child > td,
body #appShell #backup.active > .table-wrap > table > tbody > tr:first-child > td {
  border-top: 0 !important;
}

/* ====================================================
   Final table frame polish (2026-04-30)
   - Tables fill the whole card width, so Import does not stop short on the
     right on wide screens.
   - The sticky header paints above itself and owns the single separator line.
   - Last body row does not add a second bottom line over the card border.
   ==================================================== */
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  border-color: #dfc9d2 !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}

body #appShell #newwareFeed.active > .table-wrap > table,
body #appShell #backup.active > .table-wrap > table {
  width: 100% !important;
  min-width: 100% !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
  width: max(100%, 1640px) !important;
  min-width: max(100%, 1640px) !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead,
body #appShell #backup.active > .table-wrap > table > thead {
  overflow: visible !important;
  box-shadow: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::before,
body #appShell #backup.active > .table-wrap > table > thead::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -28px !important;
  height: 28px !important;
  background: #fff !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead::after,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::after,
body #appShell #backup.active > .table-wrap > table > thead::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: #d8bec8 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr,
body #appShell #backup.active > .table-wrap > table > thead > tr {
  z-index: 2 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  box-shadow: none !important;
  border-bottom: 0 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > tbody > tr:last-child > td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:last-child > td,
body #appShell #backup.active > .table-wrap > table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

/* ====================================================
   Simple table frame reset (2026-04-30)
   Final override: no masks and no shadow-lines. A single outline frames the
   card, while table cells own the row separators. This prevents thick edges
   and scroll-dependent line flicker.
   ==================================================== */
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  border: 0 !important;
  outline: 1px solid #dfc9d2 !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
  background: #fff !important;
  scrollbar-gutter: auto !important;
}

body #appShell #newwareFeed.active > .table-wrap::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::before,
body #appShell #backup.active > .table-wrap::before,
body #appShell #newwareFeed.active > .table-wrap > table > thead::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::before,
body #appShell #backup.active > .table-wrap > table > thead::before,
body #appShell #newwareFeed.active > .table-wrap > table > thead::after,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::after,
body #appShell #backup.active > .table-wrap > table > thead::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table,
body #appShell #backup.active > .table-wrap > table {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead,
body #appShell #backup.active > .table-wrap > table > thead {
  background: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #dfc9d2 !important;
  box-shadow: none !important;
  background: #fff !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr.newware-filter-row > th {
  background: #f9f4f7 !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > tbody td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody td,
body #appShell #backup.active > .table-wrap > table > tbody td {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #eadbe1 !important;
  box-shadow: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > tbody > tr:last-child > td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:last-child > td,
body #appShell #backup.active > .table-wrap > table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

/* ====================================================
   Unified single-line table frame (2026-04-30, v805)
   Applies the same clean outline-based frame to all four scroll-tables
   (Preise, Import, Neuwarenfeed, Backup). One line on every edge — no
   doubling at the top/bottom/sides, and no flicker while scrolling.

   Strategy:
   1. The wrap owns the outer frame via outline (drawn inside, sits in
      front of any sticky content so it stays visible during scroll).
   2. The thead's bottom border owns the divider under the header.
   3. tbody td's bottom border owns the row separator. Last row has none
      (the wrap outline closes the bottom edge).
   4. No left/right cell borders, no header box-shadow, no pseudo-line
      shims. Anything from earlier rules is reset.
   ==================================================== */

/* Outer frame on the wrap (Preise uses .prices-table-wrap, the others
   use .table-wrap or .suggestions-table-wrap). A real border (not outline)
   so it cannot be clipped or hidden when the wrap scrolls. */
body #appShell #effective.active .prices-table-wrap,
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  border: 1px solid #dfc9d2 !important;
  border-radius: 8px !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

/* Drop the secondary card border on Preise so the wrap outline is the
   only visible frame (was producing a doubled line on the right where
   the layout border met the outline). */
body #appShell #effective.active .prices-table-layout {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Reset every wrap/thead pseudo-element seam (left over from older
   sticky-mask experiments) so they cannot paint a second line. */
body #appShell #effective.active .prices-table-wrap::before,
body #appShell #effective.active .prices-table-wrap::after,
body #appShell #effective #pricesTable > thead::before,
body #appShell #effective #pricesTable > thead::after,
body #appShell #newwareFeed.active > .table-wrap::before,
body #appShell #newwareFeed.active > .table-wrap::after,
body #appShell #newwareFeed.active > .table-wrap > table > thead::before,
body #appShell #newwareFeed.active > .table-wrap > table > thead::after,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::after,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::after,
body #appShell #backup.active > .table-wrap::before,
body #appShell #backup.active > .table-wrap::after,
body #appShell #backup.active > .table-wrap > table > thead::before,
body #appShell #backup.active > .table-wrap > table > thead::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

/* Tables: no own border, separate spacing so cell borders are crisp. */
body #appShell #effective #pricesTable,
body #appShell #newwareFeed.active > .table-wrap > table,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table,
body #appShell #backup.active > .table-wrap > table {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
}

/* thead: opaque, no shadow, no own border (the th cells own the divider). */
body #appShell #effective #pricesTable > thead,
body #appShell #newwareFeed.active > .table-wrap > table > thead,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead,
body #appShell #backup.active > .table-wrap > table > thead {
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header cells: only the bottom border survives. The first-row top edge
   is closed by the wrap outline, so no top border is drawn. */
body #appShell #effective #pricesTable > thead > tr:first-child > th,
body #appShell #effective #pricesTable > thead > tr.filter-row > th,
body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #dfc9d2 !important;
  box-shadow: none !important;
}

/* Sort header (first row) keeps a white background; filter rows keep
   their tinted background to match the existing visual language. */
body #appShell #effective #pricesTable > thead > tr:first-child > th,
body #appShell #newwareFeed.active > .table-wrap > table > thead > tr:first-child > th,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr:first-child > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  background: #fff !important;
}

body #appShell #effective #pricesTable > thead > tr.filter-row > th,
body #appShell #newwareFeed.active > .table-wrap > table > thead > tr.newware-filter-row > th {
  background: #f9f4f7 !important;
}

/* Body cells: a single bottom border per row, nothing else. */
body #appShell #effective #pricesTable > tbody > tr > td,
body #appShell #newwareFeed.active > .table-wrap > table > tbody > tr > td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr > td,
body #appShell #backup.active > .table-wrap > table > tbody > tr > td {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #eadbe1 !important;
  box-shadow: none !important;
}

/* The last row stops drawing its own bottom border so the wrap outline
   is the only line at the bottom edge. */
body #appShell #effective #pricesTable > tbody > tr:last-child > td,
body #appShell #newwareFeed.active > .table-wrap > table > tbody > tr:last-child > td,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:last-child > td,
body #appShell #backup.active > .table-wrap > table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

/* Kill the scrollbar-track top border on Preise — it produced an extra
   horizontal line just above the bottom edge whenever the table was
   horizontally scrollable. */
body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar-track {
  border-top: 0 !important;
}

/* Per-th opaque seal — prevents body cells from showing through subpixel
   gaps between sticky header cells while scrolling. Same technique as the
   Preise table (~line 16282), now applied to Import / Neuwarenfeed /
   Backup as well. The ::before paints a white rectangle that bleeds 3px
   above and 1px to each side of the th, so any subpixel anti-aliasing
   seam is covered. position: relative on the th itself anchors it. */
body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
body #appShell #backup.active > .table-wrap > table > thead > tr > th {
  position: relative !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr > th::before,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::before,
body #appShell #backup.active > .table-wrap > table > thead > tr > th::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -3px !important;
  bottom: 0 !important;
  left: -1px !important;
  right: -1px !important;
  background: #fff !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body #appShell #newwareFeed.active > .table-wrap > table > thead > tr.newware-filter-row > th::before {
  background: #f9f4f7 !important;
}

/* Suggestion badge ("keine Artikelnummer gefunden" / "keine Stammdaten
   gefunden") — pill hugs its text and stays on a single line.
   Earlier rules clamped .suggestion-badges to 176px and the badge to
   172px with overflow:hidden, which clipped the text — undo that here. */
html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badges {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badge,
body #appShell #importSuggestionsPanel .suggestion-badge {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: -moz-max-content !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: center !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

/* Action cell: stop forcing a wide column. Earlier rules pinned the
   suggestion-action-cell to 680px which forced the whole Import table
   wider than the viewport, causing a horizontal scrollbar even when the
   window had plenty of room. Let the cell size to its content; the row
   will wrap badge + buttons naturally on narrow viewports. */
html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-row {
  width: auto !important;
  min-width: 0 !important;
  grid-template-columns: none !important;
}

/* Hide the horizontal scrollbar on all four scroll-tables when the
   content fits — overflow-x: auto only paints when content overflows,
   so this also keeps the scrollbar usable on a genuinely narrow
   viewport. */
body #appShell #effective.active .prices-table-wrap,
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Preise: collapse the empty 176px grid column reserved for the (now
   permanently hidden) action sidebar. Without this fix the layout
   reserves dead space on the right of the rounded frame, which showed
   up as the "Abweichung oben rechts" the user reported. */
body #appShell #effective .prices-table-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Import header: an earlier rule still painted a 2px border + box-shadow
   under the header and an 8px gap-border above the first row. That gave
   a visible doubled line near the header when scrolling. Reset to a
   single 1px divider — same as the other three tables. */
body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
  border-bottom: 1px solid #dfc9d2 !important;
  box-shadow: none !important;
}

body #appShell #importSuggestionsPanel .suggestions-table-wrap > table > tbody > tr:first-child > td {
  border-top: 0 !important;
}

/* ====================================================
   Scrollbars on the four scroll-tables
   - Horizontal: hidden (the layout is sized so the table fits; on
     genuinely narrow viewports trackpad/shift-wheel still scrolls).
   - Vertical: thin, transparent track, semi-transparent thumb, so the
     bar barely registers next to the sticky header. The sticky thead /
     filter row paints over the top of the track, so the visible thumb
     effectively starts under the header as the table scrolls.
   ==================================================== */
body #appShell #effective.active .prices-table-wrap,
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #backup.active > .table-wrap {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(173, 9, 61, 0.55) transparent !important;
  scrollbar-gutter: auto !important;
  overflow-x: hidden !important;     /* hard kill horizontal scrollbar + drift */
  overflow-y: auto !important;
}

body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(173, 9, 61, 0.55) transparent !important;
  scrollbar-gutter: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar,
body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar,
body #appShell #backup.active > .table-wrap::-webkit-scrollbar {
  width: 8px !important;
  height: 0 !important;          /* hide horizontal scrollbar */
  background: transparent !important;
}

body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar:horizontal,
body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar:horizontal,
body #appShell #backup.active > .table-wrap::-webkit-scrollbar:horizontal {
  height: 0 !important;
  display: none !important;
}

body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar-track,
body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar-track,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-track,
body #appShell #backup.active > .table-wrap::-webkit-scrollbar-track {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar-thumb,
body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar-thumb,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-thumb,
body #appShell #backup.active > .table-wrap::-webkit-scrollbar-thumb {
  background: rgba(173, 9, 61, 0.55) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}

body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar-thumb:hover,
body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar-thumb:hover,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-thumb:hover,
body #appShell #backup.active > .table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(173, 9, 61, 0.85) !important;
}

/* Sticky thead/filter-row paints over the top of the scrollbar gutter so
   the vertical scrollbar visually starts under the header. The thead's
   white background needs to extend right past the table's right edge
   (the 8px scrollbar gutter). A box-shadow on the right of the thead
   would be clipped by overflow:auto, so we use a sticky pseudo on the
   wrap that overlays the gutter at the top. */
body #appShell #effective.active .prices-table-wrap,
body #appShell #newwareFeed.active > .table-wrap,
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
body #appShell #backup.active > .table-wrap {
  position: relative !important;
}

/* ====================================================
   Final tweaks (2026-04-30, v810)
   ==================================================== */

/* Import: kill the 1640px table min-width so the table fits in the viewport
   and the horizontal scrollbar disappears. The action column is no longer
   forced to 680px (handled in earlier override); the table now sizes to
   its natural content. */
html body #importSuggestionsPanel .suggestions-table-wrap > table {
  min-width: 0 !important;
  width: 100% !important;
}

html body #importSuggestionsPanel table thead tr th:last-child {
  min-width: 0 !important;
  width: auto !important;
  padding-left: 0 !important;
}

/* Import wrap: action row is now stacked vertically (badge above
   buttons), so the cell is narrow enough that the table fits in any
   reasonable viewport. Hide the horizontal scrollbar definitively. */
body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Import: let the action buttons size to their text instead of being
   locked to 138 px. Combined with the JS-side removal of inline widths,
   the action cell now shrinks to content (~100 px per button), which
   keeps the table inside the viewport on standard window widths. */
html body #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons > button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 6px 14px !important;
}

/* Import: force the table to honour the wrap width and let the action
   cell wrap badge ↔ buttons onto two lines whenever the row would
   otherwise overflow. table-layout: fixed + 100% lets the browser
   distribute the wrap width across columns and lets the action row's
   flex-wrap kick in instead of pushing the table wider than the wrap. */
html body #importSuggestionsPanel .suggestions-table-wrap > table {
  table-layout: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Import: allow long text in the data cells to ellipsize so a single
   wide cell can't push the table beyond the wrap width. */
html body #importSuggestionsPanel tbody td:not(.suggestion-action-cell) {
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Import: cap the action cell so it can't expand past ~430 px. The
   action row (flex-wrap: wrap) will then break the badge onto its own
   line above the buttons rather than pushing the table sideways. */
html body #importSuggestionsPanel tbody td.suggestion-action-cell,
html body #importSuggestionsPanel tbody td:last-child {
  max-width: 430px !important;
  width: 430px !important;
}

/* Import: shift the badge slightly left inside the action cell so the pill
   sits closer to the percentage column on its left rather than near the
   buttons on its right. */
body #appShell #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-badges {
  margin-left: -8px !important;
  padding-left: 0 !important;
}

/* Backup: the new <th class="backup-action-col"> has no label — make sure
   the (now empty) header still paints opaque white so it seals the top
   right corner cleanly. */
body #appShell #backup.active > .table-wrap > table > thead > tr > th.backup-action-col {
  background: #fff !important;
}

/* Backup: push the row buttons to the right edge of the action cell. */
body #appShell #backup.active > .table-wrap > table > tbody > tr > td.backup-action-cell {
  text-align: right !important;
  white-space: nowrap !important;
}

body #appShell #backup.active > .table-wrap > table > tbody > tr > td.backup-action-cell > button {
  margin-left: 6px !important;
}

/* ====================================================
   Uniform bottom spacing between table-wrap and pagination across
   Preise / Newwarenfeed / Import. Pagination is fixed at the bottom of
   the viewport (~46 px tall); we reserve 70 px on each tab so there is
   a consistent ~24 px visual gap between the table frame and the
   pagination bar.
   Backup has no pagination, so it gets the same 24 px gap directly to
   the viewport edge.
   ==================================================== */
body #appShell #effective.active,
body #appShell #newwareFeed.active,
body #appShell #suggestions.active {
  padding-bottom: 70px !important;
}

body #appShell #backup.active {
  padding-bottom: 24px !important;
}

/* Drop the inner scroll-buffer on the wraps — with overflow-x:hidden the
   buffer just shows up as empty white space below the last row. */
body #appShell #newwareFeed.active .table-wrap,
body #appShell #suggestions.active .suggestions-table-wrap {
  padding-bottom: 0 !important;
}

/* ====================================================
   Import responsive layout (2026-04-30, v814)
   On narrow screens the KI Vorschläge table becomes a card list. This
   keeps every value reachable without exposing a horizontal scrollbar,
   and gives warning badges their own line above the row actions.
   ==================================================== */
@media (max-width: 1280px) {
  body #appShell #suggestions.active #importSuggestionsPanel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(110px, 150px) !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .table-tools > input,
  body #appShell #suggestions.active #importSuggestionsPanel .table-tools > select,
  body #appShell #suggestions.active #importSuggestionsPanel .table-tools > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-width: 100% !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar:horizontal {
    display: none !important;
    height: 0 !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    display: none !important;
  }

  body #appShell #suggestions.active #suggestionsBody,
  body #appShell #suggestions.active #suggestionsBody > tr,
  body #appShell #suggestions.active #suggestionsBody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eadbe1 !important;
    background: #fff !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr:last-child {
    border-bottom: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td {
    border: 0 !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:first-child {
    padding-bottom: 8px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell) {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: baseline !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2)::before {
    content: "SKU";
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3)::before {
    content: "SKU Zumstein";
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4)::before {
    content: "Name";
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5)::before {
    content: "Vorschlag Gruppe";
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6)::before {
    content: "Vorschlag Katalog";
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7)::before {
    content: "Treffer";
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell)::before {
    color: #8f6f7d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell {
    padding-top: 10px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges.is-empty {
    display: none !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badge {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }
}

@media (max-width: 720px) {
  body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    grid-template-columns: 1fr !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell) {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* Medium Import widths: keep the real table layout and keep badges inline
   for as long as possible. The card rules above still win below 760px. */
@media (min-width: 761px) and (max-width: 1280px) {
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    display: table-header-group !important;
  }

  body #appShell #suggestions.active #suggestionsBody {
    display: table-row-group !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr {
    display: table-row !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border-bottom: 1px solid #eadbe1 !important;
    padding: 11px 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr:last-child > td {
    border-bottom: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell)::before {
    content: none !important;
    display: none !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:first-child,
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:first-child {
    width: 38px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2),
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2) {
    width: 84px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3),
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3) {
    width: 108px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
    width: 150px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5),
  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
    width: 138px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 94px !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
  body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges.is-empty {
    display: none !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badge {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}

/* ====================================================
   Import definitive responsive table (2026-04-30, v816)
   Keep the normal table for broad/medium widths. Only switch to cards
   once the available width is genuinely too small. Badges stay inline
   with actions until the action column itself can no longer fit them.
   ==================================================== */
html body #appShell #suggestions.active #importSuggestionsPanel,
html body #appShell #suggestions.active #importSuggestionsPanel * {
  box-sizing: border-box !important;
}

html body #appShell #suggestions.active #importSuggestionsPanel {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
  display: table-header-group !important;
}

html body #appShell #suggestions.active #suggestionsBody {
  display: table-row-group !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr {
  display: table-row !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
  display: table-cell !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell)::before {
  content: none !important;
  display: none !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:first-child,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:first-child {
  width: 42px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2) {
  width: 110px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3) {
  width: 140px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
  width: 185px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
  width: 560px !important;
  max-width: 560px !important;
  overflow: visible !important;
  white-space: normal !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges.is-empty {
  display: none !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badge {
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
}

@media (max-width: 1500px) {
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2) {
    width: 82px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3) {
    width: 105px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 135px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    width: 455px !important;
    max-width: 455px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    gap: 6px 8px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    gap: 8px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

@media (max-width: 1180px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(145px, 190px) minmax(105px, 135px) !important;
    gap: 8px !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > input,
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > select,
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:first-child,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:first-child {
    width: 34px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2) {
    width: 62px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3) {
    width: 82px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 86px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    width: 350px !important;
    max-width: 350px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: grid !important;
    flex: 1 1 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    width: 100% !important;
  }
}

@media (max-width: 860px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    grid-template-columns: 1fr 1fr !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > input {
    grid-column: 1 / -1 !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
    display: block !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    display: none !important;
  }

  html body #appShell #suggestions.active #suggestionsBody,
  html body #appShell #suggestions.active #suggestionsBody > tr,
  html body #appShell #suggestions.active #suggestionsBody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eadbe1 !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td {
    border: 0 !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell) {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2)::before {
    content: "SKU" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3)::before {
    content: "SKU Zumstein" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4)::before {
    content: "Name" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5)::before {
    content: "Vorschlag Gruppe" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6)::before {
    content: "Vorschlag Katalog" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7)::before {
    content: "Treffer" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell)::before {
    display: block !important;
    color: #8f6f7d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell {
    padding-top: 10px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badge {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools,
  html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell),
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* ====================================================
   Import narrow cleanup (2026-04-30, v817)
   The table header is only useful while it has enough room. Below that
   width rows become compact cards with explicit labels, and badges stay
   pill-sized instead of turning into full-width banners.
   ==================================================== */
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

@media (min-width: 1041px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 220px !important;
  }
}

@media (max-width: 1040px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) minmax(110px, 140px) !important;
    gap: 8px !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > input,
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > select,
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > button {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    display: none !important;
  }

  html body #appShell #suggestions.active #suggestionsBody,
  html body #appShell #suggestions.active #suggestionsBody > tr,
  html body #appShell #suggestions.active #suggestionsBody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eadbe1 !important;
    background: #fff !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr:last-child {
    border-bottom: 0 !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td {
    border: 0 !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:first-child {
    padding-bottom: 8px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell) {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: baseline !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2)::before {
    content: "SKU" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3)::before {
    content: "SKU Zumstein" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4)::before {
    content: "Name" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5)::before {
    content: "Vorschlag Gruppe" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6)::before {
    content: "Vorschlag Katalog" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7)::before {
    content: "Trefferquote" !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell)::before {
    display: block !important;
    color: #8f6f7d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.13em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell {
    padding-top: 10px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges.is-empty {
    display: none !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badge {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 640px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    grid-template-columns: 1fr 1fr !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools > input {
    grid-column: 1 / -1 !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:not(:first-child):not(.suggestion-action-cell) {
    grid-template-columns: 1fr !important;
    row-gap: 2px !important;
  }
}

@media (max-width: 420px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .table-tools {
    grid-template-columns: 1fr !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    width: 100% !important;
  }
}

/* ====================================================
   Import compact labels + Preise bottom seam (2026-04-30, v819)
   ==================================================== */
html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5)::before {
  content: "Gruppe" !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6)::before {
  content: "Katalog" !important;
}

html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td,
html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action,
html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action .action-cell-inner {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action .action-cell-inner::before,
html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action .action-cell-inner::after {
  display: none !important;
  content: none !important;
}

/* ====================================================
   Preise single bottom edge + Import width balance (2026-04-30, v820)
   ==================================================== */
/* The bottom edge lives on the fixed-height LAYOUT box (always visible at the
   bottom of the viewport), NOT on the last row (which is inside the scroll
   container and only appears when scrolled to the very bottom). The last row
   carries no bottom border, so scrolling down never adds a second line. */
html body #appShell #effective.active .prices-table-wrap {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
html body #appShell #effective.active .prices-table-layout {
  border-bottom: 1px solid #dfc9d2 !important;
  box-shadow: none !important;
}

html body #appShell #effective.active #pricesTable {
  margin-bottom: 0 !important;
}

html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action .action-cell-inner {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
  width: 300px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5) {
  width: 120px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
  width: 120px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
  width: 125px !important;
}

@media (max-width: 1500px) {
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
    width: 250px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
    width: 105px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 112px !important;
  }
}

@media (max-width: 1180px) and (min-width: 1041px) {
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
    width: 220px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
    width: 88px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 100px !important;
  }
}

/* ====================================================
   Auto-hiding horizontal/vertical table scrollbars (2026-04-30, v821)
   Tables may overflow horizontally when columns need their space. The
   scrollbars remain usable, but fade visually after scrolling.
   ==================================================== */
html body #appShell #effective.active .prices-table-wrap,
html body #appShell #newwareFeed.active > .table-wrap,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
html body #appShell #backup.active > .table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

html body #appShell #effective.active .prices-table-wrap.table-scroll-active,
html body #appShell #newwareFeed.active > .table-wrap.table-scroll-active,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active,
html body #appShell #backup.active > .table-wrap.table-scroll-active {
  scrollbar-color: rgba(173, 9, 61, 0.58) transparent !important;
}

html body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar,
html body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar,
html body #appShell #backup.active > .table-wrap::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  background: transparent !important;
}

html body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar:horizontal,
html body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar:horizontal,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar:horizontal,
html body #appShell #backup.active > .table-wrap::-webkit-scrollbar:horizontal {
  display: block !important;
  height: 8px !important;
}

html body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar-track,
html body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar-track,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-track,
html body #appShell #backup.active > .table-wrap::-webkit-scrollbar-track {
  background: transparent !important;
  border: 0 !important;
}

html body #appShell #effective.active .prices-table-wrap::-webkit-scrollbar-thumb,
html body #appShell #newwareFeed.active > .table-wrap::-webkit-scrollbar-thumb,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-thumb,
html body #appShell #backup.active > .table-wrap::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
  transition: background-color 220ms ease !important;
}

html body #appShell #effective.active .prices-table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #newwareFeed.active > .table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #backup.active > .table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #effective.active .prices-table-wrap:hover::-webkit-scrollbar-thumb,
html body #appShell #newwareFeed.active > .table-wrap:hover::-webkit-scrollbar-thumb,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap:hover::-webkit-scrollbar-thumb,
html body #appShell #backup.active > .table-wrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(173, 9, 61, 0.58) !important;
}

/* Same scrollbar behavior without relying on the active tab class. This
   catches tables that are initialized while hidden and activated later. */
html body #appShell #effective .prices-table-wrap,
html body #appShell #newwareFeed > .table-wrap,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap,
html body #appShell #backup > .table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}

html body #appShell #effective .prices-table-wrap.table-scroll-active,
html body #appShell #newwareFeed > .table-wrap.table-scroll-active,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active,
html body #appShell #backup > .table-wrap.table-scroll-active {
  scrollbar-color: rgba(173, 9, 61, 0.72) transparent !important;
}

html body #appShell #effective .prices-table-wrap::-webkit-scrollbar,
html body #appShell #newwareFeed > .table-wrap::-webkit-scrollbar,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar,
html body #appShell #backup > .table-wrap::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  background: transparent !important;
}

html body #appShell #effective .prices-table-wrap::-webkit-scrollbar:horizontal,
html body #appShell #newwareFeed > .table-wrap::-webkit-scrollbar:horizontal,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar:horizontal,
html body #appShell #backup > .table-wrap::-webkit-scrollbar:horizontal {
  display: block !important;
  height: 10px !important;
}

html body #appShell #effective .prices-table-wrap::-webkit-scrollbar-thumb,
html body #appShell #newwareFeed > .table-wrap::-webkit-scrollbar-thumb,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-thumb,
html body #appShell #backup > .table-wrap::-webkit-scrollbar-thumb {
  background-color: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-clip: content-box !important;
}

html body #appShell #effective .prices-table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #newwareFeed > .table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #backup > .table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #effective .prices-table-wrap:hover::-webkit-scrollbar-thumb,
html body #appShell #newwareFeed > .table-wrap:hover::-webkit-scrollbar-thumb,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:hover::-webkit-scrollbar-thumb,
html body #appShell #backup > .table-wrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(173, 9, 61, 0.72) !important;
}

/* Import: make overflow real instead of clipping the action buttons. */
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100% !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
  display: table !important;
  table-layout: fixed !important;
  width: max-content !important;
  min-width: 2240px !important;
  max-width: none !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
  width: 760px !important;
  max-width: 760px !important;
  overflow: visible !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
  flex: 0 0 auto !important;
}

@media (max-width: 1040px) {
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Import scroll hardening: keep horizontal overflow reachable and visible
   at the bottom of the table viewport when actions exceed the screen. */
html body #appShell #suggestions #importSuggestionsPanel {
  overflow-x: visible !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) {
  overflow-x: scroll !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  padding-bottom: 10px !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) > table {
  width: 2240px !important;
  min-width: 2240px !important;
  max-width: none !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty)::-webkit-scrollbar {
  height: 12px !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty)::-webkit-scrollbar:horizontal {
  display: block !important;
  height: 12px !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty).table-scroll-active::-webkit-scrollbar-thumb,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty):hover::-webkit-scrollbar-thumb {
  background-color: rgba(173, 9, 61, 0.82) !important;
}

@media (max-width: 1040px) {
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) {
    overflow-x: hidden !important;
    padding-bottom: 0 !important;
  }

  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) > table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Import suggestions: warnings stay with the product name so they remain
   visible even when the action buttons sit in the horizontal overflow area. */
html body #appShell #suggestions #suggestionsBody .suggestion-name-stack {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px 10px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td:nth-child(4) {
  overflow: visible !important;
  white-space: normal !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-name-text {
  display: inline-block !important;
  flex: 1 1 180px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-name-stack .suggestion-badges {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  max-width: 100% !important;
  width: auto !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-name-stack .suggestion-badges.is-empty {
  display: none !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-name-stack .suggestion-badge {
  max-width: min(100%, 260px) !important;
}

/* Import suggestions: keep all row actions visible at the right edge. */
html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
  background: #fff !important;
  box-shadow: -1px 0 0 #dfc9d2 !important;
  max-width: 470px !important;
  min-width: 470px !important;
  position: sticky !important;
  right: 0 !important;
  width: 470px !important;
  z-index: 24 !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
  z-index: 35 !important;
}

html body #appShell #suggestions #suggestionsBody > tr:nth-child(even) > td.suggestion-action-cell {
  background: #fff7fa !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
  justify-content: flex-end !important;
  width: 100% !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-badges.is-empty {
  display: none !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
  display: grid !important;
  flex: 1 1 100% !important;
  gap: 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
  min-width: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  width: 100% !important;
}

@media (max-width: 1180px) and (min-width: 1041px) {
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    max-width: 420px !important;
    min-width: 420px !important;
    width: 420px !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    gap: 8px !important;
  }
}

@media (max-width: 1040px) {
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    box-shadow: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    width: 100% !important;
  }
}

/* Import suggestions final desktop geometry: fit the useful columns into the
   viewport instead of forcing a 2240px table that hides title or actions. */
@media (min-width: 1041px) {
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) {
    overflow-x: auto !important;
  }

  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) > table,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
    max-width: none !important;
    min-width: 1540px !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(1),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(1) {
    width: 48px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2) {
    width: 120px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3) {
    width: 140px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
    width: 360px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5) {
    width: 210px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
    width: 210px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
    width: 145px !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    max-width: 360px !important;
    min-width: 360px !important;
    width: 360px !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    gap: 8px !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 0.95fr) !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button {
    font-size: 11px !important;
    letter-spacing: 1.6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* Import suggestions: final placement and action cleanup. */
html body #appShell #suggestions #suggestionsBody .suggestion-sku-zumstein-stack {
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-sku-zumstein-stack .suggestion-badges {
  display: inline-flex !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: auto !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-sku-zumstein-stack .suggestion-badge {
  max-width: 100% !important;
  white-space: normal !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-name-stack {
  display: block !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-name-text {
  display: block !important;
  max-width: 100% !important;
}

@media (min-width: 1041px) {
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
    background: inherit !important;
    box-shadow: -1px 0 0 #dfc9d2 !important;
    max-width: 390px !important;
    min-width: 390px !important;
    overflow: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 390px !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr:nth-child(odd) > td.suggestion-action-cell {
    background: #fff !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr:nth-child(even) > td.suggestion-action-cell {
    background: #fff7fa !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
    display: block !important;
    width: 100% !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    display: grid !important;
    gap: 7px !important;
    grid-template-columns: 105px 118px 92px !important;
    justify-content: end !important;
    justify-items: stretch !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-main,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-subtle,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-main,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-subtle,
  html body #appShell #importSuggestionsPanel tbody td:last-child .suggestion-action-buttons > .btn-main,
  html body #appShell #importSuggestionsPanel tbody td:last-child .suggestion-action-buttons > .btn-subtle {
    box-sizing: border-box !important;
    font-size: 10px !important;
    letter-spacing: 1.35px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 6px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
  }
}

/* Import suggestions: actions are part of Trefferquote, not a clipped right
   sticky column. This keeps all buttons visible and removes pink sticky seams. */
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
  table-layout: fixed !important;
}

html body #appShell #suggestions #suggestionsBody > tr,
html body #appShell #suggestions #suggestionsBody > tr > td {
  background: #fff !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
  box-shadow: none !important;
  max-width: none !important;
  min-width: 0 !important;
  position: static !important;
  right: auto !important;
  width: 430px !important;
}

html body #appShell #suggestions #suggestionsBody > tr > td:nth-child(7),
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
  width: 430px !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-confidence-actions {
  align-items: center !important;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-confidence-actions > span {
  white-space: nowrap !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-confidence-actions .suggestion-action-buttons,
html body #appShell #suggestions.active #suggestionsBody .suggestion-confidence-actions .suggestion-action-buttons {
  display: grid !important;
  gap: 7px !important;
  grid-template-columns: 96px 112px 84px !important;
  justify-content: end !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-confidence-actions .suggestion-action-buttons > .btn-main,
html body #appShell #suggestions #suggestionsBody .suggestion-confidence-actions .suggestion-action-buttons > .btn-subtle,
html body #appShell #suggestions.active #suggestionsBody .suggestion-confidence-actions .suggestion-action-buttons > .btn-main,
html body #appShell #suggestions.active #suggestionsBody .suggestion-confidence-actions .suggestion-action-buttons > .btn-subtle {
  box-sizing: border-box !important;
  font-size: 10px !important;
  height: 36px !important;
  letter-spacing: 1.15px !important;
  line-height: 1 !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-sku-zumstein-stack {
  gap: 4px !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-sku-zumstein-stack .suggestion-badges {
  display: block !important;
  line-height: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body #appShell #suggestions #suggestionsBody .suggestion-sku-zumstein-stack .suggestion-badge {
  display: block !important;
  font-size: 9px !important;
  line-height: 1 !important;
  max-width: 150px !important;
  overflow: hidden !important;
  padding: 4px 7px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 1041px) {
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) > table,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
    min-width: 1460px !important;
    width: 100% !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
    width: 300px !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
    width: 190px !important;
  }
}

/* Import suggestions: classic table layout with horizontal overflow.
   Badges stay in SKU Zumstein; actions stay in their own right-side column. */
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) {
  overflow-x: auto !important;
  overflow-y: auto !important;
  padding-bottom: 10px !important;
  scrollbar-width: thin !important;
}

html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:not(.is-empty) > table,
html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
  max-width: none !important;
  min-width: 2020px !important;
  table-layout: fixed !important;
  width: 2020px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr,
html body #appShell #suggestions.active #suggestionsBody > tr > td {
  background: #fff !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(1),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(1) {
  width: 50px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2) {
  width: 150px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3) {
  width: 220px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4) {
  width: 460px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5),
html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6) {
  width: 240px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7),
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7) {
  width: 140px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:last-child {
  background: #fff !important;
  box-shadow: none !important;
  max-width: 520px !important;
  min-width: 520px !important;
  overflow: visible !important;
  position: static !important;
  right: auto !important;
  width: 520px !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row {
  align-items: center !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
  display: grid !important;
  align-items: center !important;
  gap: 12px !important;
  grid-template-columns: 140px 150px 120px !important;
  justify-content: end !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-main,
html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-subtle,
html body #appShell #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons > .btn-main,
html body #appShell #importSuggestionsPanel tbody td.suggestion-action-cell .suggestion-action-buttons > .btn-subtle {
  box-sizing: border-box !important;
  font-size: 11px !important;
  height: auto !important;
  letter-spacing: 1.5px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 11px 8px 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

html body #appShell #suggestions.active #suggestionsBody .suggestion-sku-zumstein-stack {
  gap: 4px !important;
}

html body #appShell #suggestions.active #suggestionsBody .suggestion-sku-zumstein-stack .suggestion-badges {
  display: block !important;
  line-height: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body #appShell #suggestions.active #suggestionsBody .suggestion-sku-zumstein-stack .suggestion-badge {
  display: block !important;
  font-size: 9px !important;
  line-height: 1 !important;
  max-width: 150px !important;
  overflow: hidden !important;
  padding: 4px 7px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #appShell #suggestions.active #suggestionsBody input[id^="sugg-name-"] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
}

@media (min-width: 1041px) {
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table {
    display: table !important;
  }

  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    display: table-header-group !important;
  }

  html body #appShell #suggestions.active #suggestionsBody {
    display: table-row-group !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr {
    display: table-row !important;
    height: auto !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td {
    color: #1f1118 !important;
    display: table-cell !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: hidden !important;
    position: static !important;
    transform: none !important;
    vertical-align: middle !important;
    visibility: visible !important;
    white-space: nowrap !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td::before {
    content: none !important;
    display: none !important;
  }

  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell {
    overflow: visible !important;
  }
}

/* ====================================================
   KI Vorschläge: visibility + auto-hide horizontal scroll (2026-04-30, v832)
   Final override that wins over earlier conflicting blocks. Goal:
   1. tbody rows are ALWAYS visible (no display:block / visibility:hidden /
      opacity:0 leaking from cards-mode or hide overrides).
   2. Wrap shows a horizontal scrollbar only when the table actually overflows,
      auto-hidden when idle (initTableScrollbarAutoHide → .table-scroll-active).
   3. Table sizes naturally to its column widths so narrow viewports get a
      scrollbar instead of clipped/empty data rows.
   Only applies above the cards-mode breakpoint (>1280px), so the responsive
   card layout below 1280px is preserved.
   ==================================================== */
@media (min-width: 1281px) {
  /* Wrap: vertical scroll always, horizontal only when needed. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important;
  }

  /* Auto-hide scrollbar: only the .table-scroll-active class (added by JS on
     scroll/wheel/pointerenter, removed after 1.4 s) shows a coloured thumb. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap:hover,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:hover {
    scrollbar-color: rgba(173, 9, 61, 0.72) transparent !important;
  }

  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
  }
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar:horizontal {
    display: block !important;
    height: 10px !important;
  }
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar-thumb {
    background-color: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background-clip: content-box !important;
    transition: background-color 220ms ease !important;
  }
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap.table-scroll-active::-webkit-scrollbar-thumb,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap:hover::-webkit-scrollbar-thumb {
    background-color: rgba(173, 9, 61, 0.72) !important;
  }

  /* Table: fills the wrap width (= constant right margin regardless of
     viewport) and falls back to horizontal scroll below 1900 px. Per-column
     min-widths below keep the layout readable; extra horizontal space is
     distributed to the data columns instead of leaving an empty band on
     the right. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    min-width: 1900px !important;
    max-width: none !important;
  }

  /* Convert hard-coded column widths (50/150/220/340/240/240/140/520) to
     min-widths so columns can grow proportionally on wide viewports.
     The first and last columns stay clamped to keep the action grid stable. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
  html body #appShell #suggestions.active #suggestionsBody > tr > td,
  html body #appShell #suggestions #suggestionsBody > tr > td {
    width: auto !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(1),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(1) {
    min-width: 50px !important;
    max-width: 50px !important;
    width: 50px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(2),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(2) {
    min-width: 150px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(3),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(3) {
    min-width: 220px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(4),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(4) {
    min-width: 340px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(5),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(5),
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(6),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(6) {
    min-width: 240px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(7),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(7) {
    min-width: 120px !important;
    max-width: 160px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th:nth-child(8),
  html body #appShell #suggestions.active #suggestionsBody > tr > td:nth-child(8),
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell {
    min-width: 460px !important;
    max-width: 560px !important;
    width: 520px !important;
  }

  /* tbody/tr/td: must be visible. Overrides any leftover display:block,
     opacity:0, visibility:hidden, height:0, transform from cards-mode rules. */
  html body #appShell #suggestions.active #suggestionsBody,
  html body #appShell #suggestions #suggestionsBody {
    display: table-row-group !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html body #appShell #suggestions.active #suggestionsBody > tr,
  html body #appShell #suggestions #suggestionsBody > tr {
    display: table-row !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    background: #fff !important;
  }
  html body #appShell #suggestions.active #suggestionsBody > tr > td,
  html body #appShell #suggestions #suggestionsBody > tr > td {
    display: table-cell !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    color: #1f1118 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #eadbe1 !important;
  }
  /* Kill the cards-mode pseudo labels above the breakpoint. */
  html body #appShell #suggestions.active #suggestionsBody > tr > td::before,
  html body #appShell #suggestions #suggestionsBody > tr > td::before {
    content: none !important;
    display: none !important;
  }
  /* Action cell needs visible overflow so dropdown buttons render fully. */
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell {
    overflow: visible !important;
    white-space: nowrap !important;
  }

  /* ====================================================
     Safari fix (2026-04-30, v833): the existing thead carries
     `transform: translateZ(0)`, a `z-index: 70000`, and a `box-shadow` with
     `rgba(255,255,255,0.96)`. WebKit promotes the thead to its own
     compositing layer and the white shadow paints OVER the body rows,
     making them invisible (the rows are in the DOM with the right text
     and dark colour — they are just optically masked).
     Reset the thead to a simple sticky layer that works in Safari and
     Chrome alike: no transform, no white shadow, modest z-index.
     ==================================================== */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #fff !important;
    box-shadow: 0 1px 0 #d8bec8 !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr {
    background: #fff !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th {
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: auto !important;
  }
  /* Disable any thead pseudo-elements that paint white over the body. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::before,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead::after,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::before,
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::after,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead::before,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead::after,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::before,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead > tr > th::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
  }
  /* Wrap and tbody must NOT carry a transform either, or Safari nests two
     compositing layers and produces the same hide-behind-thead artefact. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap,
  html body #appShell #suggestions.active #suggestionsBody,
  html body #appShell #suggestions #suggestionsBody {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }

  /* Bottom breathing room so the last row's CTAs (BEARBEITEN / ÜBERNEHMEN /
     LÖSCHEN) are not clipped at the wrap's overflow boundary on hover. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap {
    padding-bottom: 24px !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* tbody itself gets bottom padding via a phantom row alternative —
     extra spacer at the end of the scroll area so focus rings on the
     last row's buttons are never clipped by the wrap edge. */
  html body #appShell #suggestions.active #suggestionsBody > tr:last-child > td,
  html body #appShell #suggestions #suggestionsBody > tr:last-child > td {
    padding-bottom: 16px !important;
  }

  /* Action cell: enough vertical breathing room so the 44 px buttons sit
     comfortably with hover/focus rings showing. With 16 px top + 16 px
     bottom + 44 px button = 76 px row. Earlier 12 px padding left only
     0.5 px clearance which read as clipping. */
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell {
    overflow: visible !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* Force a minimum row height so all cells in a row align to the action
     row height, even when other cells are shorter. Without this the row
     can collapse to the tallest data cell and only the action cell is
     padded — making the buttons look pinched against borders. */
  html body #appShell #suggestions.active #suggestionsBody > tr,
  html body #appShell #suggestions #suggestionsBody > tr {
    min-height: 76px !important;
    height: 76px !important;
  }
  /* Buttons themselves: cap height so they don't grow to fill the row via
     grid-item stretch and crowd the cell padding. */
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-main,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-subtle,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-main,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > .btn-subtle {
    height: 40px !important;
    max-height: 40px !important;
    align-self: center !important;
  }
}

/* ====================================================
   Responsive scroll instead of card-mode at medium widths (v833).
   The original CSS jumps to a card layout below 1280 px which is jarring on
   common laptop widths (1280-1440 px). Lift the breakpoint to 960 px so the
   classic table with horizontal scroll handles 960-1810 px smoothly, and
   the card layout only kicks in on real narrow screens (<960 px).
   ==================================================== */
@media (min-width: 961px) and (max-width: 1280px) {
  /* Re-enable the table, header and rows that the older 1280 cards-mode
     block tries to hide (display:block on tbody/tr/td, display:none on
     thead). These selectors must beat both the old cards-mode rules AND
     the existing min-width:761px override block. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table {
    display: table !important;
    table-layout: fixed !important;
    width: 2020px !important;
    min-width: 2020px !important;
    max-width: none !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap > table > thead,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap > table > thead {
    display: table-header-group !important;
  }
  html body #appShell #suggestions.active #suggestionsBody,
  html body #appShell #suggestions #suggestionsBody {
    display: table-row-group !important;
  }
  html body #appShell #suggestions.active #suggestionsBody > tr,
  html body #appShell #suggestions #suggestionsBody > tr {
    display: table-row !important;
    padding: 0 !important;
  }
  html body #appShell #suggestions.active #suggestionsBody > tr > td,
  html body #appShell #suggestions #suggestionsBody > tr > td {
    display: table-cell !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eadbe1 !important;
    color: #1f1118 !important;
  }
  html body #appShell #suggestions.active #suggestionsBody > tr > td::before,
  html body #appShell #suggestions #suggestionsBody > tr > td::before {
    content: none !important;
    display: none !important;
  }
  /* Wrap: enable horizontal scroll for the natural table width. */
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap {
    overflow-x: auto !important;
    overflow-y: auto !important;
    padding-bottom: 14px !important;
  }
  html body #appShell #suggestions.active #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar:horizontal,
  html body #appShell #suggestions #importSuggestionsPanel .suggestions-table-wrap::-webkit-scrollbar:horizontal {
    display: block !important;
    height: 10px !important;
  }
}

/* ====================================================
   KI Vorschläge: button clipping ULTRA fix (v843).
   v842 added 16 px padding + 76 px row min-height + 40 px button cap, but
   earlier rules with the same specificity (e.g. `height: 40px` at line
   ~21696, plus button base styles producing 44 px via padding) keep
   winning by source order or by setting a different property. This block
   uses higher specificity (extra `:not(:empty)` qualifier on td bumps it
   from (0,4,3,4) to (0,4,4,4)) and at the same time the LATEST source
   position so it wins source-order ties.
   Math: padding-top 18 + button 38 + padding-bottom 18 = 74 px content,
   inside a 80 px row with 3 px clearance top + bottom for hover/focus.
   ==================================================== */
@media (min-width: 961px) {
  html body #appShell #suggestions #suggestionsBody > tr:not(:empty) > td.suggestion-action-cell:not(:empty),
  html body #appShell #suggestions.active #suggestionsBody > tr:not(:empty) > td.suggestion-action-cell:not(:empty) {
    overflow: visible !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    vertical-align: middle !important;
  }
  html body #appShell #suggestions #suggestionsBody > tr:not(:empty),
  html body #appShell #suggestions.active #suggestionsBody > tr:not(:empty) {
    min-height: 80px !important;
    height: 80px !important;
  }
  html body #appShell #suggestions #suggestionsBody > tr:not(:empty) > td:not(:empty),
  html body #appShell #suggestions.active #suggestionsBody > tr:not(:empty) > td:not(:empty) {
    height: 80px !important;
    min-height: 80px !important;
    vertical-align: middle !important;
  }
  /* Button height locked to 38 px so the grid's stretch-default doesn't
     pull them up to 44 px. Plus align-self center keeps them mid-row. */
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button.btn-main,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button.btn-subtle,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button.btn-main,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons > button.btn-subtle {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 38px !important;
    align-self: center !important;
  }
  /* Action row & buttons container: no extra vertical bounds, center
     content vertically. */
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-row,
  html body #appShell #suggestions #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons,
  html body #appShell #suggestions.active #suggestionsBody > tr > td.suggestion-action-cell .suggestion-action-buttons {
    align-items: center !important;
    overflow: visible !important;
  }
}
/* Testumgebungen */
#appShell.environment-test-active > nav.tabs {
  background: #123b34 !important;
  border-right-color: rgba(18, 59, 52, 0.2) !important;
}

#appShell.environment-test-active > nav.tabs .sidebar-brand p::after {
  content: "TEST";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #d8f3dc;
  color: #123b34;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.environment-global-banner {
  position: fixed;
  top: 10px;
  left: calc(var(--sidebar-width, 200px) + 18px);
  right: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid rgba(18, 59, 52, 0.22);
  border-radius: 8px;
  background: #d8f3dc;
  color: #123b34;
  box-shadow: 0 10px 30px rgba(18, 59, 52, 0.16);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.environment-global-banner strong {
  font-weight: 900;
}

.environment-global-banner span {
  font-weight: 700;
  text-transform: none;
}

#appShell.environment-test-active .topbar-page-name {
  color: #123b34;
}

.environment-status-card,
.environment-create-card {
  align-items: flex-start;
}

.environment-current-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.environment-badge,
.environment-row-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.environment-badge.is-production {
  background: #edf2f7;
  color: #334155;
}

.environment-badge.is-test,
.environment-row-active {
  background: #d8f3dc;
  color: #123b34;
}

.environment-row-active {
  margin-left: 8px;
}

/* ============================================================
   Assistant panel — design refresh + fix bottom cutoff
   ============================================================ */

/* Raise panel above fixed pagination (z-index 500) so the chat
   list isn't clipped at the bottom on Preise/Neuwarenfeed/Import. */
body #assistantPanel.assistant-panel {
  z-index: 620 !important;
  width: min(100vw, 720px) !important;
  max-width: 720px !important;
  padding: 18px 18px 16px !important;
  background: #ffffff !important;
  border-left: 1px solid #EAD8DE !important;
  box-shadow: -10px 0 32px rgba(30, 12, 19, 0.10) !important;
}

/* Visual separator between panel and pagination strip beneath.
   The panel covers full height; an extra bottom border seals the seam. */
body #assistantPanel.assistant-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  pointer-events: none;
}

/* Backdrop behind panel for clear separation from underlying page */
body #assistantPanel.assistant-panel::before {
  content: "";
  position: fixed;
  inset: 0;
  right: 720px;
  background: rgba(30, 12, 19, 0.18);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 900px) {
  body #assistantPanel.assistant-panel::before {
    right: 0;
  }
}

/* Head: cleaner typography + proper vertical alignment */
body #assistantPanel .assistant-panel-head {
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  padding-right: 40px !important;
  border-bottom: 1px solid #F0E2E7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
}

body #assistantPanel .assistant-panel-head h3 {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  color: #1E0C13 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

body #assistantPanel .assistant-head-main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
}

body #assistantPanel #closeAssistantBtn.assistant-close-btn {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  align-self: center !important;
}

body #assistantPanel .assistant-quick-tools {
  display: inline-flex !important;
  gap: 4px !important;
}

body #assistantPanel .assistant-quick-tools button.btn-subtle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #7A5060 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body #assistantPanel .assistant-quick-tools button.btn-subtle:hover {
  background: #F8ECF1 !important;
  color: #AD093D !important;
  border-color: #EAD8DE !important;
}

/* Sessions pane */
body #assistantPanel .assistant-sessions-pane {
  border: 1px solid #EAD8DE !important;
  border-radius: 8px !important;
  background: #FBF7F9 !important;
  padding: 10px 8px !important;
  gap: 4px !important;
}

body #assistantPanel .assistant-sessions-pane h4 {
  margin: 0 4px 8px !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  color: #8a6878 !important;
}

body #assistantPanel .assistant-session-list {
  gap: 4px !important;
  padding-bottom: 4px !important;
}

body #assistantPanel .assistant-session-row {
  grid-template-columns: 1fr 22px !important;
  gap: 4px !important;
}

body #assistantPanel .assistant-session-item {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #4a2230 !important;
  border-radius: 6px !important;
  padding: 7px 9px !important;
  font-size: 11px !important;
  letter-spacing: 0.01em !important;
  min-height: 32px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

body #assistantPanel .assistant-session-item:hover {
  background: #F5E8ED !important;
  color: #1E0C13 !important;
}

body #assistantPanel .assistant-session-row.active .assistant-session-item,
body #assistantPanel .assistant-session-item.active {
  background: #fff !important;
  border-color: #AD093D !important;
  color: #1E0C13 !important;
  font-weight: 600 !important;
}

body #assistantPanel .assistant-session-row.is-draft .assistant-session-item {
  font-style: italic !important;
  color: #8a6878 !important;
}

body #assistantPanel .assistant-session-row.is-draft.active .assistant-session-item {
  color: #1E0C13 !important;
}

body #assistantPanel .assistant-session-delete {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  align-self: center !important;
  margin-top: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #B59AA4 !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

body #assistantPanel .assistant-session-delete:hover {
  background: #F5E8ED !important;
  color: #AD093D !important;
}

/* Chat pane */
body #assistantPanel .assistant-chat-pane {
  gap: 12px !important;
}

body #assistantPanel #assistantMessages.assistant-messages {
  border: 1px solid #EAD8DE !important;
  border-radius: 8px !important;
  padding: 14px !important;
  background: #FBF7F9 !important;
  min-height: 280px !important;
}

body #assistantPanel .assistant-msg {
  margin-bottom: 10px !important;
}

body #assistantPanel .assistant-msg-bubble {
  max-width: 85% !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 2px rgba(30,12,19,0.04) !important;
}

body #assistantPanel .assistant-msg-user .assistant-msg-bubble {
  background: #AD093D !important;
  border-color: #AD093D !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}

body #assistantPanel .assistant-msg-assistant .assistant-msg-bubble {
  background: #fff !important;
  border: 1px solid #EAD8DE !important;
  color: #1E0C13 !important;
  border-bottom-left-radius: 4px !important;
}

/* Compose area */
body #assistantPanel .assistant-compose {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  border: 1px solid #EAD8DE !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 8px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body #assistantPanel .assistant-compose:focus-within {
  border-color: #AD093D !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.10) !important;
}

body #assistantPanel #assistantQuestionInput {
  flex: 1 1 auto !important;
  border: none !important;
  background: transparent !important;
  resize: none !important;
  min-height: 36px !important;
  max-height: 140px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: none !important;
}

body #assistantPanel #assistantQuestionInput:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body #assistantPanel #assistantAskBtn {
  align-self: flex-end !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   Quick-ask popup (⌘K / Ctrl+K) — minimal, floating, draggable
   ============================================================ */
.quick-ask-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  background: transparent;
}

.quick-ask-overlay.hidden {
  display: none;
}

.quick-ask-card {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 92vw);
  max-height: min(620px, calc(100vh - 60px));
  background: #fff;
  border: 1px solid #EAD8DE;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(30, 12, 19, 0.22), 0 2px 6px rgba(30, 12, 19, 0.08);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
  cursor: grab;
  animation: quickAskIn 0.14s ease-out;
  overflow: hidden;
}

.quick-ask-card:active {
  cursor: grabbing;
}

.quick-ask-card.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  user-select: none;
}

@keyframes quickAskIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.quick-ask-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

#quickAskInput {
  flex: 1 1 auto;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  color: #1E0C13;
  padding: 10px 0;
  font-family: inherit;
  min-height: 0 !important;
  letter-spacing: 0 !important;
  resize: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  line-height: 1.5 !important;
  max-height: 200px !important;
  display: block !important;
}

#quickAskInput:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#quickAskInput::placeholder {
  color: #B59AA4;
}

body button.quick-ask-icon-btn,
body button.quick-ask-submit {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  background-image: none !important;
  cursor: pointer !important;
  flex-shrink: 0;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: #7A5060 !important;
}

body button.quick-ask-icon-btn:hover,
body button.quick-ask-submit:hover:not(:disabled),
body button.quick-ask-icon-btn:focus,
body button.quick-ask-submit:focus,
body button.quick-ask-icon-btn:focus-visible,
body button.quick-ask-submit:focus-visible,
body button.quick-ask-icon-btn:active,
body button.quick-ask-submit:active {
  background: #F5E8ED !important;
  background-image: none !important;
  color: #AD093D !important;
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

body button.quick-ask-submit:disabled {
  color: #D6BFC8 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

button.quick-ask-icon-btn svg,
button.quick-ask-submit svg {
  display: block;
  pointer-events: none;
  color: inherit;
}

button.quick-ask-icon-btn svg path,
button.quick-ask-submit svg path {
  stroke: currentColor;
}

.qa-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  line-height: 1 !important;
  color: inherit !important;
  pointer-events: none !important;
}

button.quick-ask-close .qa-glyph {
  font-size: 22px !important;
  font-weight: 300 !important;
}

button.quick-ask-icon-btn .qa-glyph {
  font-size: 18px !important;
  font-weight: 500 !important;
  transform: translateY(-1px);
}

button.quick-ask-submit .qa-glyph {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.quick-ask-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 0 4px 2px;
  cursor: default;
}

.quick-ask-messages.hidden {
  display: none;
}

.quick-ask-msg {
  display: flex;
  width: 100%;
}

.quick-ask-msg-user {
  justify-content: flex-end;
}

.quick-ask-msg-assistant {
  justify-content: flex-start;
}

.quick-ask-bubble {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.quick-ask-msg-user .quick-ask-bubble {
  background: #AD093D;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.quick-ask-msg-assistant .quick-ask-bubble {
  background: #FBF7F9;
  border: 1px solid #F0E2E7;
  color: #1E0C13;
  border-bottom-left-radius: 4px;
}

@media (max-width: 640px) {
  .quick-ask-card {
    bottom: 16px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
  }

  .quick-ask-messages {
    max-height: calc(100vh - 150px);
  }
}

/* Assistant shortcut popup: match the dark sidebar so it stays visible on white tabs. */
body .quick-ask-overlay {
  z-index: 90010 !important;
}

body .quick-ask-card {
  background: #1E0C13 !important;
  border-color: rgba(173, 9, 61, 0.95) !important;
  box-shadow: 0 24px 64px rgba(30, 12, 19, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.07) inset !important;
}

body #quickAskInput {
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

body #quickAskInput::placeholder {
  color: rgba(255, 255, 255, 0.58) !important;
}

body button.quick-ask-icon-btn,
body button.quick-ask-submit {
  color: rgba(255, 255, 255, 0.82) !important;
}

body #quickAskSubmit.quick-ask-submit,
body #quickAskSubmit.quick-ask-submit .qa-glyph {
  color: rgba(255, 255, 255, 0.82) !important;
}

body button.quick-ask-icon-btn:hover,
body button.quick-ask-submit:hover:not(:disabled),
body button.quick-ask-icon-btn:focus,
body button.quick-ask-submit:focus,
body button.quick-ask-icon-btn:focus-visible,
body button.quick-ask-submit:focus-visible,
body button.quick-ask-icon-btn:active,
body button.quick-ask-submit:active {
  background: rgba(173, 9, 61, 0.38) !important;
  color: #ffffff !important;
}

body #quickAskSubmit.quick-ask-submit:hover:not(:disabled),
body #quickAskSubmit.quick-ask-submit:focus,
body #quickAskSubmit.quick-ask-submit:focus-visible,
body #quickAskSubmit.quick-ask-submit:active {
  background: rgba(173, 9, 61, 0.38) !important;
  color: #ffffff !important;
}

body button.quick-ask-submit:disabled {
  color: rgba(255, 255, 255, 0.32) !important;
}

body .quick-ask-msg-user .quick-ask-bubble {
  background: #AD093D !important;
  color: #ffffff !important;
}

body .quick-ask-msg-assistant .quick-ask-bubble {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* Keep the full assistant drawer above the special Neuwarenfeed pagination layer. */
body #assistantPanel.assistant-panel {
  z-index: 90000 !important;
}

/* Final token-flow parity with the visible nx login controls. Keep this at EOF. */
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPassword,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPassword:focus,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPassword:hover,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPassword:active,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPasswordConfirm,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPasswordConfirm:focus,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPasswordConfirm:hover,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPasswordConfirm:active {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #5a2236 !important;
  -webkit-text-fill-color: #5a2236 !important;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 22.08px !important;
  text-transform: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPassword::placeholder,
html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowPasswordConfirm::placeholder {
  color: #b3adb3 !important;
  -webkit-text-fill-color: #b3adb3 !important;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 22.08px !important;
  opacity: 1 !important;
}

html body #landing[data-login-step="token"] #tokenFlowCard #tokenFlowSubmitBtn {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 1rem !important;
  border: 0 !important;
  background: transparent !important;
  color: rgb(173, 9, 61) !important;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  line-height: 12px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

html body #appShell input[data-1p-ignore],
html body #appShell input[data-1p-ignore]:focus,
html body #appShell input[data-1p-ignore]:hover {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Final restore overlay button override */
html body #backupRestoreProgress #backupRestoreRetryBtn.restore-progress-retry {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.45rem 0.2rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  filter: none !important;
  font-family: 'Futura PT', Futura, 'Trebuchet MS', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html body #backupRestoreProgress #backupRestoreRetryBtn.restore-progress-retry:hover,
html body #backupRestoreProgress #backupRestoreRetryBtn.restore-progress-retry:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  opacity: 0.72 !important;
}

#appShell #export .ftp-history-card {
  margin-top: 28px;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  padding: 18px 20px;
  background: #fff;
}
#appShell #export .ftp-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#appShell #export .ftp-history-head h3 { margin: 0; }
#appShell #export .ftp-history-hint {
  margin: 6px 0 14px;
  color: #6b7280;
  font-size: 13px;
}
#appShell #export .ftp-history-wrap {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid #eef0f3;
  border-radius: 8px;
}
#appShell #export .ftp-history-wrap > table {
  width: 100%;
  border-collapse: collapse;
  overflow: clip;
}
#appShell #export .ftp-history-wrap > table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f7f8fa;
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b7280;
  border-bottom: 1px solid #e2e5ea;
}
#appShell #export .ftp-history-wrap > table > tbody > tr > td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f1f4;
  font-size: 14px;
}
#appShell #export .ftp-history-empty {
  text-align: center;
  color: #9aa0aa;
  padding: 24px 12px;
}
#appShell #export .ftp-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
#appShell #export .ftp-status-ok { background: #e7f6ec; color: #1b7a3d; }
#appShell #export .ftp-status-err { background: #fdeaea; color: #b3261e; cursor: help; }
#appShell #export .ftp-history-na { color: #c2c6cd; }
#appShell #export .ftp-history-notes { font-size: 12px; color: #555; }
#appShell #export .ftp-history-notes-cell { max-width: 260px; }
#appShell #export .btn-small {
  padding: 5px 12px;
  font-size: 13px;
}

/* Export filter dropdowns */
#appShell #export .export-filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
#appShell #export .export-filters-label {
  font-size: 13px;
  font-weight: 500;
  color: #555;
}
#appShell #export .export-filter-wrap,
#appShell #effective .export-filter-wrap {
  position: relative;
}
#appShell #export .export-filter-btn,
#appShell #effective .export-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #374151;
  white-space: nowrap;
}
#appShell #export .export-filter-btn:hover,
#appShell #effective .export-filter-btn:hover { background: #f5f7fa; }
#appShell #export .export-filter-btn--active,
#appShell #effective .export-filter-btn--active {
  border-color: #3b6fc9;
  color: #1d4fad;
  background: #eef3fb;
}
#appShell #export .export-filter-arrow,
#appShell #effective .export-filter-arrow {
  font-size: 7px;
  opacity: 0.35;
  color: #98a2b3;
  margin-left: auto;
  padding-left: 6px;
}
/* ─── Floating popover portal ────────────────────────────────────────────
   Both the multiselect checkbox dropdown (.export-filter-panel) and the
   column operator popup (.col-filter-popup) render into #filterPopoverPortal,
   appended directly to <body> (see openFilterPopover() in app.vfinal.js).
   They only exist in the DOM while open, so no display:none/open-class
   toggling is needed here — presence = visible. Position (fixed, top/left)
   is computed and set inline by JS per anchor element. */
#filterPopoverPortal .export-filter-panel,
#filterPopoverPortal .col-filter-popup {
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  border: 1px solid #aab1bd;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .22), 0 2px 8px rgba(16, 24, 40, .12) !important;
  padding: 10px;
  box-sizing: border-box;
}
/* !important throughout: a global `input, select, textarea, button { border:
   1px solid var(--ci-border) !important; border-radius: 0 !important; color:
   var(--ci-panel-dark) !important; background: #fff !important; }` reset
   otherwise wins over any plain-specificity override on these elements. */
#filterPopoverPortal .export-filter-search {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  outline: none;
}
#filterPopoverPortal .export-filter-search:focus {
  border-color: #AD093D !important;
  box-shadow: 0 0 0 2px rgba(173,9,61,.12) !important;
}
#filterPopoverPortal .export-filter-actions {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}
#filterPopoverPortal .export-filter-list {
  max-height: 260px;
  overflow-y: auto;
  margin: 0 -10px;
}
#filterPopoverPortal .export-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}
#filterPopoverPortal .export-filter-item:hover { background: #f5f7fa; }
/* A global `input, select, textarea { padding: 7px 10px !important }` rule
   otherwise pads checkboxes too — since the padding (20px wide, 14px tall)
   exceeds the checkbox's own 14x14px box, the browser grows the box to fit
   the padding, turning it into a squashed rectangle instead of a square. */
#filterPopoverPortal .export-filter-item input[type="checkbox"] {
  cursor: pointer;
  padding: 0 !important;
}
#filterPopoverPortal .btn-link {
  background: none;
  border: none;
  color: #3b6fc9;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

/* Operator popup (text/number/date columns) */
#filterPopoverPortal .col-filter-popup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#filterPopoverPortal .col-filter-op,
#filterPopoverPortal .col-filter-value,
#filterPopoverPortal .col-filter-value2 {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  color: #374151 !important;
  background: #fff !important;
}
/* No up/down spinner on numeric value fields — they add width and aren't
   useful for filter values typed directly. */
#filterPopoverPortal input[type="number"]::-webkit-outer-spin-button,
#filterPopoverPortal input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#filterPopoverPortal input[type="number"] {
  -moz-appearance: textfield;
}
/* Date value fields: match the text/number fields' vertical centering and
   text colour (the browser's default UA style otherwise renders the date
   text baseline-aligned and in its own accent colour). */
#filterPopoverPortal input[type="date"] {
  color: #374151 !important;
  line-height: normal;
  display: flex;
  align-items: center;
}
#filterPopoverPortal input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}
#filterPopoverPortal .col-filter-popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

/* Combined popup (operator condition + value checklist in one panel, opened
   from a single funnel icon) — Neuwarenfeed's Aktionstext/Aktionswert/
   Aktionstyp/Aktionsende columns. Taller than the plain operator popup since
   it stacks both sections. */
#filterPopoverPortal .col-filter-popup--combined {
  max-width: 280px;
}
#filterPopoverPortal .col-filter-popup-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #7c8593;
  margin-bottom: 4px;
}
#filterPopoverPortal .col-filter-popup-divider {
  border-top: 1px solid #e5e7eb;
  margin: 8px 0;
}
#filterPopoverPortal .col-filter-popup-section--checklist .export-filter-list {
  max-height: 200px;
}

/* Preise: Excel-style quick-search + funnel-icon filter cell, used for every
   filter-row column (text/number/date AND the Artikelgruppe/Katalog/Klasse
   multiselect). Input and icon are fused into one bordered "pill" — the icon
   itself has no border of its own, only a thin divider — so it reads as one
   field with a filter affordance, not two separate detached controls. */
#appShell #effective #pricesTable .filter-row th.filter-cell-dropdown,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row th.filter-cell-dropdown {
  /* #pricesTable th has a global `overflow: hidden` for text truncation in
     normal cells; harmless to keep visible here even though the popover no
     longer lives inside this `<th>` (it renders into the body-level portal). */
  overflow: visible;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
/* !important: the global `input { border: 1px solid var(--ci-border)
   !important; background: #fff !important; }` reset otherwise re-adds a
   visible border/background here, breaking the fused input+icon look. */
#appShell #effective #pricesTable .filter-row .col-filter-cell input,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell input {
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell input:focus,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell input:focus {
  outline: none;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell input:disabled,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell input:disabled {
  background: var(--surface-soft) !important;
  color: #98a2b3 !important;
  font-style: italic;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .col-filter-icon,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .col-filter-icon,
#appShell #effective #pricesTable .filter-row .col-filter-cell .export-filter-wrap,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .export-filter-wrap {
  flex: 0 0 auto;
}
/* !important throughout: the codebase has several global button resets
   (border/background AND a separate uppercase-button rule forcing
   `padding: 8px 18px !important; min-height: 34px !important;`) that
   otherwise win over any plain-specificity override on these tiny icon
   buttons. Also: inline <svg> with only HTML width/height attributes (no
   CSS width/height) collapses to 0×0 inside a flex container in most
   browsers — a well-known flexbox/SVG quirk — so the svg needs explicit
   CSS sizing + flex-shrink: 0, not just its width=""/height="" attributes. */
#appShell #effective #pricesTable .filter-row .col-filter-cell .col-filter-icon,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .col-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch !important;
  width: 22px !important;
  min-width: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid #e4e7ec !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #98a2b3;
  cursor: pointer;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .col-filter-icon svg,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .col-filter-icon svg,
#appShell #effective #pricesTable .filter-row .col-filter-cell .export-filter-btn--icon svg,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .export-filter-btn--icon svg {
  display: block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .col-filter-icon:hover,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .col-filter-icon:hover {
  background: #f5f7fa !important;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .col-filter-icon.is-active,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .col-filter-icon.is-active {
  color: #AD093D;
  background: #fdeef2 !important;
}
/* Artikelgruppe/Katalog/Klasse: the funnel is the multiselect trigger button,
   fused into the same pill as its quick-search input. */
#appShell #effective #pricesTable .filter-row .col-filter-cell .export-filter-wrap,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .export-filter-wrap {
  display: flex;
  align-self: stretch;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .export-filter-btn--icon,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .export-filter-btn--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch !important;
  width: 22px !important;
  min-width: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-left: 1px solid #e4e7ec !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #98a2b3;
  cursor: pointer;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .export-filter-btn--icon:hover,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .export-filter-btn--icon:hover {
  background: #f5f7fa !important;
}
#appShell #effective #pricesTable .filter-row .col-filter-cell .export-filter-btn--icon.export-filter-btn--active,
#appShell #newwareFeed #newwareFeedTable .newware-filter-row .col-filter-cell .export-filter-btn--icon.export-filter-btn--active {
  color: #AD093D;
  background: #fdeef2 !important;
}

/* Dashboard extension */
#dashboard .dashboard-lower-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr) !important;
  grid-template-rows: auto minmax(360px, auto) !important;
  gap: 14px !important;
  align-items: start !important;
  margin-top: 4px !important;
}

#dashboard .dashboard-panel {
  border: 1px solid #E4D4DA !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(30, 12, 19, 0.05) !important;
  padding: 18px !important;
}

#dashboard .dashboard-audit-panel {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  min-height: 470px !important;
}

#dashboard .dashboard-audit-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 38px !important;
}

#dashboard #auditWrap {
  min-height: 348px !important;
  max-height: 348px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E4D4DA transparent !important;
}

#dashboard #auditWrap::-webkit-scrollbar {
  width: 8px !important;
}

#dashboard #auditWrap::-webkit-scrollbar-thumb {
  background: #E4D4DA !important;
  border-radius: 999px !important;
}

#dashboard #auditWrap.hidden {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#dashboard .dashboard-stats-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#dashboard .dashboard-stat-tile {
  min-height: 78px !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #fff !important;
  padding: 13px 14px !important;
}

#dashboard .dashboard-stat-tile span,
#dashboard .dashboard-catalog-head p {
  display: block !important;
  color: #8A6674 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-stat-tile strong {
  display: block !important;
  margin-top: 7px !important;
  color: #1E0C13 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

#dashboard .dashboard-stat-tile small {
  display: block !important;
  margin-top: 5px !important;
  overflow: hidden !important;
  color: #8A6674 !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-catalog-panel {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 360px !important;
}

#dashboard .dashboard-catalog-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

#dashboard .dashboard-catalog-head h3,
#dashboard .dashboard-audit-head h3 {
  margin: 0 !important;
  color: #1E0C13 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-catalog-head p {
  margin: 5px 0 0 !important;
  font-size: 9px !important;
}

#dashboard .dashboard-catalog-actions,
#dashboard .dashboard-dim-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#dashboard .dashboard-dim-switch {
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

#dashboard .dashboard-view-chip,
#dashboard .dashboard-dim-switch button {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8A6674 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 0 !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-view-chip.is-active,
#dashboard .dashboard-dim-switch button.is-active {
  border-bottom-color: #AD093D !important;
  color: #AD093D !important;
}

#dashboard .dashboard-catalog-body {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
}

#dashboard .dashboard-donut {
  width: 132px !important;
  height: 132px !important;
  border-radius: 50% !important;
  background: conic-gradient(var(--dashboard-donut)) !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
}

#dashboard .dashboard-donut::after {
  content: "" !important;
  position: absolute !important;
  inset: 24px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

#dashboard .dashboard-donut > div {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
}

#dashboard .dashboard-donut strong {
  display: block !important;
  color: #1E0C13 !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

#dashboard .dashboard-donut span {
  display: block !important;
  margin-top: 4px !important;
  color: #8A6674 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-catalog-list,
#dashboard .dashboard-trend-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

#dashboard .dashboard-line-chart-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#dashboard .dashboard-line-chart-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 2px !important;
}

#dashboard .dashboard-line-chart-head span {
  color: #8A6674 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-line-chart-head strong {
  color: #1E0C13 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

#dashboard .dashboard-line-chart {
  width: 100% !important;
  min-height: 180px !important;
  overflow: visible !important;
}

#dashboard .dashboard-line-grid line {
  stroke: #E4D4DA !important;
  stroke-width: 0.8 !important;
  stroke-dasharray: 3 5 !important;
}

#dashboard .dashboard-line-grid line.zero {
  stroke-dasharray: none !important;
}

#dashboard .dashboard-line {
  fill: none !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  cursor: pointer !important;
  opacity: 0.82 !important;
  transition: opacity 160ms ease, stroke-width 160ms ease !important;
}

#dashboard .dashboard-line:hover {
  opacity: 1 !important;
  stroke-width: 3 !important;
}

#dashboard .dashboard-line-dot {
  pointer-events: none !important;
}

#dashboard .dashboard-line-months {
  position: relative !important;
  height: 16px !important;
  margin: -4px 34px 0 !important;
  color: #8A6674 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-line-months span {
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-line-legend {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px 10px !important;
  max-height: 168px !important;
  overflow-y: auto !important;
  padding-top: 8px !important;
  border-top: 1px solid #F1E7EB !important;
}

#dashboard .dashboard-line-legend-row {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #1E0C13 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  padding: 7px !important;
  text-align: left !important;
}

#dashboard .dashboard-line-legend-row:hover {
  background: #FDF7FA !important;
}

#dashboard .dashboard-line-swatch {
  width: 10px !important;
  height: 10px !important;
  border-radius: 3px !important;
}

#dashboard .dashboard-line-legend-row span:nth-child(2) {
  overflow: hidden !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-line-legend-row strong {
  color: #1E0C13 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

#dashboard .dashboard-catalog-drill {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
}

#dashboard .dashboard-catalog-back {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  color: #8A6674 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-catalog-back:hover {
  color: #AD093D !important;
}

#dashboard .dashboard-catalog-drill-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #F1E7EB !important;
}

#dashboard .dashboard-catalog-drill-head span {
  display: block !important;
  color: #8A6674 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-catalog-drill-head h4 {
  margin: 5px 0 4px !important;
  color: #1E0C13 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-catalog-drill-head p {
  margin: 0 !important;
  color: #8A6674 !important;
  font-size: 12px !important;
}

#dashboard .dashboard-catalog-drill-head b {
  color: #1E0C13 !important;
}

#dashboard .dashboard-catalog-products {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  max-height: 248px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E4D4DA transparent !important;
}

#dashboard .dashboard-catalog-products::-webkit-scrollbar {
  width: 8px !important;
}

#dashboard .dashboard-catalog-products::-webkit-scrollbar-thumb {
  background: #E4D4DA !important;
  border-radius: 999px !important;
}

#dashboard .dashboard-catalog-product {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #1E0C13 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  padding: 10px 8px !important;
  text-align: left !important;
}

#dashboard .dashboard-catalog-product:hover {
  background: #FDF7FA !important;
}

#dashboard .dashboard-catalog-product-main {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#dashboard .dashboard-catalog-product-main strong {
  overflow: hidden !important;
  color: #1E0C13 !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-catalog-product-main small {
  overflow: hidden !important;
  color: #8A6674 !important;
  font-size: 10.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-catalog-product-prices {
  display: grid !important;
  grid-template-columns: auto auto !important;
  gap: 12px !important;
  color: #1E0C13 !important;
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-catalog-product-prices span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

#dashboard .dashboard-catalog-product-prices b {
  color: #8A6674 !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

#dashboard .dashboard-catalog-drill-foot {
  margin: 0 !important;
  color: #8A6674 !important;
  font-size: 11px !important;
}

#dashboard .dashboard-catalog-row,
#dashboard .dashboard-trend-row {
  display: grid !important;
  align-items: center !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #1E0C13 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: left !important;
}

#dashboard .dashboard-catalog-row {
  grid-template-columns: 12px minmax(0, 1fr) auto auto !important;
  gap: 9px !important;
  padding: 8px !important;
}

#dashboard .dashboard-catalog-row:hover,
#dashboard .dashboard-trend-row:hover {
  background: #FDF7FA !important;
}

#dashboard .dashboard-catalog-swatch {
  width: 11px !important;
  height: 11px !important;
  border-radius: 3px !important;
}

#dashboard .dashboard-catalog-name,
#dashboard .dashboard-trend-name {
  overflow: hidden !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-catalog-count,
#dashboard .dashboard-catalog-pct,
#dashboard .dashboard-trend-row strong {
  color: #1E0C13 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

#dashboard .dashboard-catalog-pct {
  color: #8A6674 !important;
  min-width: 34px !important;
  text-align: right !important;
}

#dashboard .dashboard-trend-row {
  grid-template-columns: minmax(0, 130px) 1fr auto !important;
  gap: 12px !important;
  padding: 9px 8px !important;
}

#dashboard .dashboard-trend-bars {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  align-items: end !important;
  gap: 5px !important;
  height: 38px !important;
}

#dashboard .dashboard-trend-bars i {
  display: block !important;
  min-height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: #AD093D !important;
  opacity: 0.74 !important;
}

#dashboard .dashboard-catalog-empty {
  color: #8A6674 !important;
  font-size: 12px !important;
  padding: 18px 0 !important;
}

@media (max-width: 1120px) {
  #dashboard .dashboard-lower-grid {
    grid-template-columns: 1fr !important;
  }

  #dashboard .dashboard-audit-panel,
  #dashboard .dashboard-stats-grid,
  #dashboard .dashboard-catalog-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 720px) {
  #dashboard .dashboard-stats-grid,
  #dashboard .dashboard-catalog-body {
    grid-template-columns: 1fr !important;
  }

  #dashboard .dashboard-donut {
    margin: 0 auto !important;
  }

  #dashboard .dashboard-audit-head,
  #dashboard .dashboard-catalog-head,
  #dashboard .dashboard-catalog-drill-head {
    flex-direction: column !important;
  }

  #dashboard .dashboard-line-legend,
  #dashboard .dashboard-catalog-product,
  #dashboard .dashboard-catalog-product-prices {
    grid-template-columns: 1fr !important;
  }

  #dashboard .dashboard-catalog-product-prices {
    justify-items: start !important;
  }
}

/* Dashboard search preview */
#dashboard .dashboard-search-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-areas:
    "search button"
    "results ." !important;
  position: relative !important;
  align-items: center !important;
  gap: 12px 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#dashboard.dashboard-search-open > .cards {
  display: none !important;
}

#dashboard.dashboard-search-open .dashboard-search-card {
  margin-bottom: 24px !important;
}

#dashboard.dashboard-search-open #dashboardProductSearch {
  border-bottom-color: #fff !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.08) !important;
}

#dashboard .dashboard-search-card input {
  grid-area: search !important;
  flex: initial !important;
  flex-basis: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 56px !important;
  width: 100% !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #1E0C13 !important;
  font-size: 15px !important;
  padding: 15px 18px !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

#dashboard .dashboard-search-card input:focus {
  border-color: #AD093D !important;
  box-shadow: 0 0 0 3px rgba(173, 9, 61, 0.10) !important;
}

#dashboard #dashboardProductSearchBtn {
  grid-area: button !important;
  min-height: 56px !important;
  border-radius: 6px !important;
  padding: 0 28px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.dashboard-search-hint {
  display: none !important;
}

.dashboard-search-hint[data-tone="ready"] {
  color: #5A2236 !important;
}

.dashboard-search-hint[data-tone="error"] {
  color: #AD093D !important;
}

.dashboard-search-suggestions {
  grid-area: results !important;
  grid-column: 1 / 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  position: static !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(360px, 44vh) !important;
  overflow-y: auto !important;
  margin-top: -13px !important;
  padding: 0 !important;
  border: 1px solid #E4D4DA !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: #fff !important;
  box-shadow: 0 18px 34px rgba(30, 12, 19, 0.06) !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E4D4DA transparent !important;
}

.dashboard-search-suggestions::-webkit-scrollbar {
  width: 8px !important;
}

.dashboard-search-suggestions::-webkit-scrollbar-thumb {
  background: #E4D4DA !important;
  border-radius: 999px !important;
}

.dashboard-search-suggestions.hidden {
  display: none !important;
}

.dashboard-search-option {
  display: grid !important;
  grid-template-columns: 7px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 62px !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #F1E7EB !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1E0C13 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.dashboard-search-option::before {
  content: "" !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #AD093D !important;
  opacity: 0.42 !important;
}

.dashboard-search-option:hover,
.dashboard-search-option.is-active {
  border-bottom-color: #F1E7EB !important;
  background: #FDF7FA !important;
}

.dashboard-search-option:hover::before,
.dashboard-search-option.is-active::before {
  opacity: 1 !important;
}

.dashboard-search-option:last-child {
  border-bottom: 0 !important;
}

.dashboard-search-option-main {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.dashboard-search-option-main strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #1E0C13 !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-search-option-main small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #A4959D !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-search-option-prices {
  display: grid !important;
  grid-template-columns: auto auto !important;
  gap: 18px !important;
  color: #1E0C13 !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.dashboard-search-option-prices span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

.dashboard-search-option-prices b {
  color: #8A6674 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.dashboard-search-empty {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
}

.dashboard-search-empty span {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Collapsed "X Treffer" summary shown instead of the full list when a query
   matches more than DASHBOARD_SEARCH_SUMMARY_THRESHOLD products — click to
   expand into the regular option list. Same visual language as the
   "Kein Treffer" empty state (uppercase, letter-spaced, muted) so it reads
   as one seamless family of dropdown states rather than a one-off design.
   Scoped with #dashboard: a global `button:not(.btn-main):not(...):not(...)
   {border: 1px solid ... !important}` reset (8 :not() clauses) has far
   higher specificity than a plain class, so a bare `.dashboard-search-summary`
   rule loses the border/font-weight fight even with !important — prefixing
   with the #dashboard id outranks it regardless of the :not() chain's size. */
#dashboard .dashboard-search-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7A5060 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#dashboard .dashboard-search-summary:hover {
  background: #FDF7FA !important;
}

#dashboard .dashboard-search-summary-text {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#dashboard .dashboard-search-summary-count {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
}

.dashboard-search-summary-digit {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 1ch !important;
  width: 1ch !important;
  min-width: 1ch !important;
  height: 1.2em !important;
  line-height: 1.2em !important;
  overflow: hidden !important;
  vertical-align: -0.18em !important;
  letter-spacing: 0 !important;
}

.dashboard-search-summary-digit-old,
.dashboard-search-summary-digit-new {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.dashboard-search-summary-digit.is-changing .dashboard-search-summary-digit-old {
  animation: dashboardSearchDigitOld 180ms ease-in forwards !important;
}

.dashboard-search-summary-digit.is-changing .dashboard-search-summary-digit-new {
  animation: dashboardSearchDigitNew 220ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards !important;
}

@keyframes dashboardSearchDigitOld {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-105%); opacity: 0; }
}

@keyframes dashboardSearchDigitNew {
  from { transform: translateY(105%); opacity: 0; }
  to { transform: translateY(-100%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-search-summary-digit-old,
  .dashboard-search-summary-digit-new {
    animation: none !important;
    transform: none !important;
  }
}

.dashboard-search-overflow-note {
  padding: 10px 18px !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #A4959D !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  #dashboard .dashboard-search-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "search"
      "button"
      "results" !important;
  }

  #dashboard #dashboardProductSearchBtn {
    width: 100% !important;
  }

  .dashboard-search-suggestions {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    border-top: 1px solid #E4D4DA !important;
    border-radius: 8px !important;
    max-height: min(280px, 42vh) !important;
  }

  .dashboard-search-option {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .dashboard-search-option-prices {
    justify-self: start !important;
  }
}

/* ============================================================
   Dashboard v6 — metric sparklines, interactive donut, audit timeline
   ============================================================ */

/* ---- Metric card foot: delta line + sparkline ---- */
#dashboard .cards .card { padding-bottom: 0.85rem !important; }
#dashboard .dashboard-card-foot {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}
#dashboard .dashboard-card-delta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #8A6674 !important;
}
#dashboard .dashboard-card-delta svg { width: 12px !important; height: 12px !important; flex: none !important; }
#dashboard .dashboard-card-delta.up { color: #30885D !important; }
#dashboard .dashboard-card-delta.warn { color: #AD8909 !important; }
#dashboard .dashboard-card-delta.alert { color: #AD093D !important; }
#dashboard .dashboard-card-spark {
  width: 76px !important;
  height: 30px !important;
  flex: none !important;
  overflow: visible !important;
  color: #AD093D !important;
}
#dashboard .dashboard-card-spark path.line {
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke-dashoffset 1s cubic-bezier(0.2,0.8,0.2,1) 0.2s !important;
}
#dashboard .dashboard-card-spark path.area { opacity: 0.1 !important; }

/* ---- Interactive donut (SVG) ---- */
#dashboard .dashboard-donut-wrap {
  position: relative !important;
  width: 132px !important;
  height: 132px !important;
}
#dashboard .dashboard-donut-svg { width: 132px !important; height: 132px !important; display: block !important; }
#dashboard .dashboard-donut-seg { cursor: pointer !important; }
#dashboard .dashboard-donut-svg.has-hot .dashboard-donut-seg { opacity: 0.28 !important; }
#dashboard .dashboard-donut-svg.has-hot .dashboard-donut-seg.hot {
  opacity: 1 !important;
  stroke-width: 20 !important;
}
#dashboard .dashboard-donut-center {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  pointer-events: none !important;
}
#dashboard .dashboard-donut-label {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #8A6674 !important;
  margin-bottom: 3px !important;
  /* The label sits ABOVE the donut centre, where the ring's inner hole is
     narrower than its full diameter — so keep it well inside (≈48% of the
     wrap) and truncate early. Smaller font + tight tracking buys more chars. */
  max-width: 48% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#dashboard .dashboard-donut-center strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #1E0C13 !important;
  font-variant-numeric: tabular-nums !important;
}
#dashboard .dashboard-donut-sub {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8A6674 !important;
  margin-top: 4px !important;
}
#dashboard .dashboard-catalog-row.is-hot { background: #FDF7FA !important; }

/* ---- Änderungsverlauf v6: collapse + type filters ---- */
#dashboard .dashboard-audit-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#dashboard .audit-collapse-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  color: #8A6674 !important;
  cursor: pointer !important;
  padding: 2px !important;
  transition: color 0.15s ease, transform 0.32s cubic-bezier(0.4,0,0.2,1) !important;
}
#dashboard .audit-collapse-btn:hover { color: #AD093D !important; }
#dashboard .audit-collapse-btn.is-collapsed { transform: rotate(-90deg) !important; }

#dashboard .audit-type-div {
  display: inline-block !important;
  width: 1px !important;
  height: 14px !important;
  background: #E4D4DA !important;
  margin: 0 4px !important;
  align-self: center !important;
}
#dashboard .audit-type-filters {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}
#dashboard .audit-type-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #8A6674 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 5px !important;
  text-transform: uppercase !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}
#dashboard .audit-type-chip:hover { color: #AD093D !important; }
#dashboard .audit-type-chip.is-primary {
  color: #1E0C13 !important;
  font-weight: 700 !important;
  border-bottom-color: #AD093D !important;
}
#dashboard .audit-type-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex: none !important;
}
#dashboard .audit-type-count {
  font-variant-numeric: tabular-nums !important;
  color: #B79AA6 !important;
  font-weight: 700 !important;
}

/* ---- Timeline rows ---- */
#dashboard .audit-tl-row {
  display: grid !important;
  grid-template-columns: 46px 30px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid #F5E8EE !important;
}
#dashboard .audit-tl-row:last-child { border-bottom: none !important; }
#dashboard .audit-tl-row.audit-tl-filtered { display: none !important; }
#dashboard .audit-tl-time {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  font-variant-numeric: tabular-nums !important;
}
#dashboard .audit-tl-user {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #AD093D !important;
  background: #FAEDF2 !important;
  border: 1px solid rgba(173,9,61,0.18) !important;
}
#dashboard .audit-tl-action {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #5A2236 !important;
}
#dashboard .audit-tl-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  margin-right: 8px !important;
  vertical-align: 1px !important;
}

/* ---- Mini preview (collapsed) ---- */
#dashboard .audit-mini { display: none !important; padding-top: 6px !important; }
#dashboard .audit-mini-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #F5E8EE !important;
}
#dashboard .audit-mini-row:last-child { border-bottom: none !important; }
#dashboard .audit-mini-user {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #AD093D !important;
  background: #FAEDF2 !important;
  border: 1px solid rgba(173,9,61,0.15) !important;
  flex: none !important;
}
#dashboard .audit-mini-text {
  flex: 1 !important;
  overflow: hidden !important;
  color: #8A6674 !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ---- Collapsed state behavior ---- */
#dashboard .dashboard-audit-panel.is-collapsed #auditWrap { display: none !important; }
#dashboard .dashboard-audit-panel.is-collapsed .audit-type-filters,
#dashboard .dashboard-audit-panel.is-collapsed #auditMonths,
#dashboard .dashboard-audit-panel.is-collapsed #auditUser,
#dashboard .dashboard-audit-panel.is-collapsed .audit-type-div { display: none !important; }
#dashboard .dashboard-audit-panel.is-collapsed .audit-mini { display: block !important; }
#dashboard .dashboard-audit-panel.is-collapsed { min-height: 0 !important; }

/* Collapsed grid: audit narrow left + stats wide right (row 1), catalog full (row 2) */
#dashboard .dashboard-lower-grid.audit-collapsed {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-audit-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-stats-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-panel {
  grid-column: 1 / span 2 !important;
  grid-row: 2 !important;
}

@media (max-width: 1120px) {
  #dashboard .dashboard-lower-grid.audit-collapsed {
    grid-template-columns: 1fr !important;
  }
  #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-audit-panel,
  #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-stats-grid,
  #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-panel {
    grid-column: 1 !important;
  }
  #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-stats-grid {
    grid-row: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   Dashboard v6 — iteration 2: card sizing, donut size, trend drilldown
   ============================================================ */

/* ---- Metric cards: tight 5-up row like v6 ---- */
#dashboard .cards {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#dashboard .cards .card {
  min-height: 0 !important;
  padding: 15px 16px 14px !important;
}
#dashboard .cards .card h3 {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
#dashboard .cards .card p {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 10px 0 0 !important;
}
@media (max-width: 1180px) {
  #dashboard .cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  #dashboard .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---- Donut: larger ---- */
#dashboard .dashboard-catalog-body {
  grid-template-columns: 172px minmax(0, 1fr) !important;
  gap: 22px !important;
}
#dashboard .dashboard-donut-wrap { width: 158px !important; height: 158px !important; }
#dashboard .dashboard-donut-svg { width: 158px !important; height: 158px !important; }
#dashboard .dashboard-donut-center strong { font-size: 24px !important; }
/* In the wide (collapsed-audit) layout the catalog spans full width */
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-body {
  grid-template-columns: 158px minmax(0, 1fr) !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: 158px !important;
  height: 158px !important;
}

/* ---- Trend (Entwicklung) drilldown ---- */
#dashboard .dashboard-trend-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  min-height: 18px !important;
}
#dashboard .dashboard-trend-crumb {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8A6674 !important;
}
#dashboard .dashboard-trend-hint {
  font-size: 10px !important;
  color: #B79AA6 !important;
  letter-spacing: 0.02em !important;
}
#dashboard .dashboard-line-chart-head {
  align-items: baseline !important;
}
#dashboard .dashboard-line.dim,
#dashboard .dashboard-line-chart.dim .dashboard-line:not(.hot) {
  opacity: 0.13 !important;
}
#dashboard .dashboard-line.hot {
  opacity: 1 !important;
  stroke-width: 2.9 !important;
  filter: drop-shadow(0 0 3px currentColor) !important;
}
#dashboard .dashboard-trend-pt {
  transition: opacity 0.2s ease, r 0.2s ease !important;
}
#dashboard .dashboard-line-chart.dim .dashboard-trend-pt:not(.hot) { opacity: 0.12 !important; }
#dashboard .dashboard-trend-pt.hot { opacity: 1 !important; }
#dashboard .dashboard-line-months.is-clickable span {
  cursor: pointer !important;
  text-decoration: underline dotted !important;
  text-underline-offset: 3px !important;
  transition: color 0.15s ease !important;
}
#dashboard .dashboard-line-months.is-clickable span:hover { color: #AD093D !important; }
#dashboard .dashboard-line-legend-row { cursor: default !important; }
#dashboard .dashboard-line-legend-row.is-hot { background: #FDF7FA !important; }

/* ---- Chart tooltip ---- */
#dashboardChartTip {
  display: none;
  position: fixed;
  z-index: 11000;
  background: #fff;
  border: 1px solid #E4D4DA;
  border-radius: 8px;
  padding: 9px 12px;
  box-shadow: 0 12px 30px rgba(30, 12, 19, 0.14);
  pointer-events: none;
  min-width: 104px;
}
#dashboardChartTip .ct-nm {
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 3px;
}
#dashboardChartTip .ct-v {
  font-size: 19px;
  font-weight: 800;
  color: #1E0C13;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#dashboardChartTip .ct-lb {
  font-size: 10px;
  color: #8A6674;
  margin-top: 3px;
}

/* ============================================================
   Dashboard v6 — iteration 3: fit-to-screen, drawer, polish
   ============================================================ */

/* ---- Fill viewport, no page scroll ---- */
#dashboard.tab-panel.active {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  gap: 10px !important;
  padding: 2px 0 0 !important;
}
#dashboard.tab-panel.active > .dashboard-welcome,
#dashboard.tab-panel.active > .dashboard-search-card,
#dashboard.tab-panel.active > .cards { flex: 0 0 auto !important; }
#dashboard .dashboard-welcome { margin: 0 !important; font-size: 1.8rem !important; line-height: 1.1 !important; }
#dashboard .dashboard-search-card { margin: 0 !important; padding: 0.6rem 0.85rem !important; border-radius: 12px !important; }
#dashboard .dashboard-search-card input,
#dashboard .dashboard-search-card button { min-height: 44px !important; }
#dashboard .cards { margin: 0 !important; gap: 12px !important; }

/* ---- Metric cards: shorter ---- */
#dashboard .cards .card { padding: 11px 14px 10px !important; }
#dashboard .cards .card p { font-size: 26px !important; margin: 7px 0 0 !important; }
#dashboard .dashboard-card-foot { padding-top: 7px !important; }
#dashboard .dashboard-card-spark { height: 26px !important; }

/* ---- Lower grid fills remaining height, panels scroll internally ---- */
#dashboard .dashboard-lower-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E4D4DA transparent !important;
}
#dashboard .dashboard-lower-grid::-webkit-scrollbar { width: 8px !important; }
#dashboard .dashboard-lower-grid::-webkit-scrollbar-thumb { background: #E4D4DA !important; border-radius: 999px !important; }
#dashboard .dashboard-lower-grid.audit-collapsed {
  grid-template-rows: auto auto !important;
  align-content: start !important;
}
#dashboard .dashboard-audit-panel { min-height: 0 !important; }
/* Catalog: content-sized so the donut is always visible; legend scrolls if long */
#dashboard .dashboard-catalog-panel { min-height: 0 !important; }
#dashboard .dashboard-catalog-body { align-items: center !important; }
#dashboard .dashboard-catalog-list { max-height: 220px !important; height: auto !important; overflow-y: auto !important; }
/* Expanded audit: timeline scrolls internally instead of growing the page.
   scrollbar-gutter + padding keep the scrollbar OFF the white row tiles. */
#dashboard #auditWrap {
  max-height: 52vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  padding-right: 10px !important;
}

/* ---- Audit panel: no border when expanded ---- */
#dashboard .dashboard-audit-panel:not(.is-collapsed) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- Collapsed audit: never show the mini preview ---- */
#dashboard .audit-mini,
#dashboard .dashboard-audit-panel.is-collapsed .audit-mini { display: none !important; }

/* ---- Catalog: Bestand/Entwicklung toggle under the subtitle ---- */
#dashboard .dashboard-catalog-head { display: block !important; margin-bottom: 10px !important; }
#dashboard .dashboard-catalog-head-main { display: block !important; }
#dashboard .dashboard-catalog-actions {
  display: inline-flex !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

/* ---- Donut legend: name + values packed close together ---- */
#dashboard .dashboard-catalog-row {
  grid-template-columns: 12px minmax(0, auto) auto auto !important;
  justify-content: start !important;
  gap: 6px 12px !important;
  padding: 6px 8px !important;
}
#dashboard .dashboard-catalog-pct { min-width: 0 !important; text-align: left !important; }

/* ---- Line chart: finer / more filigree ---- */
#dashboard .dashboard-line-chart { min-height: 150px !important; }
#dashboard .dashboard-line {
  stroke-width: 1.3 !important;
  opacity: 0.9 !important;
}
#dashboard .dashboard-line:hover,
#dashboard .dashboard-line.hot {
  stroke-width: 1.7 !important;
  filter: none !important;
}
#dashboard .dashboard-line-grid line { stroke-width: 0.6 !important; }
#dashboard .dashboard-trend-pt.is-end { }

/* ============================================================
   Metric drilldown DRAWER — full-height right panel, blurred page
   ============================================================ */
/* Undo the old layout shift that squeezed the dashboard */
body #appShell.detail-panel-open main {
  margin-right: 0 !important;
  width: auto !important;
  filter: none !important;
  transform: none !important;
}

#dashboardDetailBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000 !important;
  background: rgba(30, 12, 19, 0.30) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  opacity: 1;
  transition: opacity 0.28s ease !important;
}
#dashboardDetailBackdrop.hidden {
  display: block !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body #dashboardDetailWrap {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(560px, 100vw) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 4001 !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: -10px 0 60px rgba(30, 12, 19, 0.20) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body #dashboardDetailWrap.hidden { display: none !important; }
body #dashboardDetailWrap:not(.hidden) {
  transform: translateX(0) !important;
  pointer-events: auto !important;
  animation: dashboardDrawerIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
@keyframes dashboardDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
/* Sticky header inside the drawer */
body #dashboardDetailWrap .dashboard-audit-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  background: #fff !important;
  border-bottom: 1px solid #E4D4DA !important;
  flex: 0 0 auto !important;
}
body #dashboardDetailWrap .dashboard-detail-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
/* Sticky table header inside the drawer */
body #dashboardDetailWrap table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #FAEDF2 !important;
}

/* iteration 3b: tighten catalog header + dims to help short viewports fit */
#dashboard .dashboard-catalog-head { margin-bottom: 8px !important; }
#dashboard .dashboard-catalog-head h3 { font-size: 14px !important; }
#dashboard .dashboard-catalog-head p { margin-top: 3px !important; }
#dashboard .dashboard-catalog-actions { margin-top: 6px !important; }
#dashboard .dashboard-dim-switch { margin-bottom: 8px !important; }
#dashboard .dashboard-catalog-list { max-height: 168px !important; }

/* iteration 3c: extra compaction for short (laptop) viewports */
#dashboard .dashboard-welcome { font-size: 1.6rem !important; }
#dashboard .dashboard-search-card { padding: 0.5rem 0.8rem !important; }
#dashboard .dashboard-search-card input,
#dashboard .dashboard-search-card button { min-height: 40px !important; }
#dashboard .cards .card { padding: 9px 13px 9px !important; }
#dashboard .cards .card p { font-size: 24px !important; margin-top: 6px !important; }
#dashboard .dashboard-card-foot { padding-top: 6px !important; }
#dashboard .dashboard-card-spark { height: 24px !important; }
#dashboard .dashboard-stat-tile { min-height: 0 !important; padding: 10px 13px !important; }
#dashboard .dashboard-stats-grid { gap: 8px !important; }
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg,
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-body { }

/* ============================================================
   Dashboard v6 — iteration 4: breathing room, search, catalog
   separation, bigger donut, drawer polish
   ============================================================ */

/* ---- More breathing room between everything ---- */
#dashboard.tab-panel.active { gap: 16px !important; padding-top: 4px !important; }
#dashboard .cards { gap: 16px !important; }
#dashboard .dashboard-stats-grid { gap: 12px !important; }
#dashboard .dashboard-lower-grid { gap: 16px !important; }
#dashboard .dashboard-lower-grid.audit-collapsed { gap: 16px !important; }
#dashboard .cards .card { padding: 14px 16px 13px !important; }

/* ---- Search: input flush-left with cards, lighter button, clean dropdown ---- */
#dashboard .dashboard-search-card {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  gap: 12px !important;
}
#dashboard .dashboard-search-card input {
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
/* Search button: subtle, not a dominant filled gradient */
#dashboard #dashboardProductSearchBtn {
  background: #fff !important;
  color: var(--pvz-primary, #AD093D) !important;
  border: 1px solid rgba(173, 9, 61, 0.30) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 0 22px !important;
}
#dashboard #dashboardProductSearchBtn:hover {
  background: var(--pvz-surface-tint, #FAEDF2) !important;
  border-color: rgba(173, 9, 61, 0.45) !important;
  transform: none !important;
}
/* Suggestions dropdown: clean floating card, on-brand */
#dashboard .dashboard-search-suggestions {
  margin-top: 6px !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 40px rgba(30, 12, 19, 0.10) !important;
  overflow: hidden !important;
  overflow-y: auto !important;
}
#dashboard .dashboard-search-option:hover,
#dashboard .dashboard-search-option.is-active {
  background: var(--pvz-surface-tint, #FAEDF2) !important;
}

/* ---- Catalog: clear separation of the three control rows ---- */
#dashboard .dashboard-catalog-head { margin-bottom: 12px !important; }
/* Row 1: Bestand / Entwicklung as a segmented pill control */
#dashboard .dashboard-catalog-actions {
  display: inline-flex !important;
  gap: 0 !important;
  margin-top: 10px !important;
  padding: 3px !important;
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-radius: 8px !important;
}
#dashboard .dashboard-catalog-actions .dashboard-view-chip {
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 16px !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
}
#dashboard .dashboard-catalog-actions .dashboard-view-chip.is-active {
  background: #fff !important;
  color: var(--pvz-primary, #AD093D) !important;
  box-shadow: 0 1px 4px rgba(30, 12, 19, 0.10) !important;
  border-bottom-color: transparent !important;
}
/* Row 2: dimension tabs — separated by a divider above */
#dashboard .dashboard-dim-switch {
  margin-bottom: 0 !important;
  padding: 12px 0 10px !important;
  border-top: 1px solid var(--pvz-surface-track, #F5E8EE) !important;
  gap: 16px !important;
}
/* Row 3: breadcrumb — quiet, indented under the tabs */
#dashboard .dashboard-trend-nav,
#dashboard .dashboard-trend-crumb { margin-top: 0 !important; }
#dashboard .dashboard-trend-crumb {
  display: inline-block !important;
  padding-top: 2px !important;
  color: var(--pvz-text-label, #9CA3AF) !important;
}

/* ---- Donut: larger, use the wide space better ---- */
#dashboard .dashboard-donut-wrap,
#dashboard .dashboard-donut-svg { width: 188px !important; height: 188px !important; }
#dashboard .dashboard-donut-center strong { font-size: 28px !important; }
#dashboard .dashboard-catalog-body { grid-template-columns: 188px minmax(0, 1fr) !important; gap: 26px !important; }
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-body {
  grid-template-columns: 224px minmax(0, 1fr) !important;
  gap: 32px !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: 224px !important;
  height: 224px !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-center strong { font-size: 32px !important; }
/* Wide catalog: legend in two columns to use the horizontal space */
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-content: start !important;
  gap: 2px 18px !important;
}

/* ---- Line chart legend: no internal scroll ---- */
#dashboard .dashboard-line-legend { max-height: none !important; overflow: visible !important; }
#dashboard .dashboard-line-chart { min-height: 140px !important; }

/* ---- Änderungsverlauf expanded: clean box, filters under the title ---- */
#dashboard .dashboard-audit-head {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) {
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  box-shadow: 0 10px 28px rgba(30, 12, 19, 0.05) !important;
  background: #fff !important;
  border-radius: 12px !important;
  padding: 18px !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) .audit-filters {
  padding-top: 10px !important;
  border-top: 1px solid var(--pvz-surface-track, #F5E8EE) !important;
  flex-wrap: wrap !important;
}

/* ---- Metric drilldown drawer: sticky header + thead, fuller, bolder ---- */
/* Defeat the global table{overflow:hidden} that traps the sticky thead */
body #dashboardDetailWrap table { overflow: clip !important; }
body #dashboardDetailWrap table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: var(--pvz-surface-tint, #FAEDF2) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  padding: 12px 18px !important;
}
body #dashboardDetailWrap .dashboard-detail-scroll { display: flex !important; flex-direction: column !important; }
body #dashboardDetailWrap table { flex: 1 1 auto !important; }
body #dashboardDetailWrap table tbody td {
  padding: 13px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--pvz-surface-track, #F5E8EE) !important;
}
body #dashboardDetailWrap .dashboard-audit-head h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
}
body #dashboardDetailWrap table tbody tr:hover { background: var(--pvz-surface-soft, #FDF7FA) !important; }

/* ============================================================
   Dashboard v6 — iteration 5: spacing, edges, subtler controls,
   compact collapsed audit, full-height blur, stats tiles
   ============================================================ */

/* ---- More space between tiles + breathing room at the edges ---- */
#dashboard.tab-panel.active {
  gap: 20px !important;
  padding: 12px 24px 8px !important;
}
#dashboard .cards { gap: 20px !important; }
#dashboard .dashboard-stats-grid { gap: 14px !important; }
#dashboard .dashboard-lower-grid,
#dashboard .dashboard-lower-grid.audit-collapsed { gap: 20px !important; }

/* ---- Collapsed Änderungsverlauf: compact chip-like tile ---- */
#dashboard .dashboard-lower-grid.audit-collapsed { grid-template-columns: 230px minmax(0, 1fr) !important; }
#dashboard .dashboard-audit-panel.is-collapsed {
  padding: 12px 14px !important;
  align-self: start !important;
}
#dashboard .dashboard-audit-panel.is-collapsed .dashboard-audit-head { gap: 0 !important; }
#dashboard .dashboard-audit-panel.is-collapsed .dashboard-audit-title { width: 100% !important; justify-content: space-between !important; }
#dashboard .dashboard-audit-panel.is-collapsed h3 { font-size: 13px !important; }

/* ---- Search button: quiet / ghost ---- */
#dashboard #dashboardProductSearchBtn {
  background: transparent !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 0 18px !important;
}
#dashboard #dashboardProductSearchBtn:hover {
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  color: var(--pvz-primary, #AD093D) !important;
  border-color: var(--pvz-border, #E4D4DA) !important;
}

/* ---- Bestand / Entwicklung: quieter segmented control ---- */
#dashboard .dashboard-catalog-actions {
  padding: 2px !important;
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  border: 1px solid var(--pvz-surface-track, #F5E8EE) !important;
  border-radius: 7px !important;
}
#dashboard .dashboard-catalog-actions .dashboard-view-chip {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  padding: 5px 13px !important;
  color: var(--pvz-text-label, #9CA3AF) !important;
}
#dashboard .dashboard-catalog-actions .dashboard-view-chip.is-active {
  background: #fff !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  box-shadow: 0 1px 3px rgba(30, 12, 19, 0.08) !important;
}

/* ---- Backdrop: blur the entire viewport up to the very top ---- */
#dashboardDetailBackdrop { z-index: 8000 !important; }
body #dashboardDetailWrap { z-index: 8001 !important; }

/* ---- Stats tiles: keep value bold, allow longer labels ---- */
#dashboard .dashboard-stat-tile span { font-size: 9.5px !important; letter-spacing: 0.1em !important; }
#dashboard .dashboard-stat-tile strong { font-size: 18px !important; }

/* ============================================================
   Dashboard v6 — iteration 6: true no-scroll (incl. Entwicklung),
   small search button, real floating dropdown, drawer polish
   ============================================================ */

/* ---- Lower grid truly fills; NO internal scroll in any view ---- */
#dashboard .dashboard-lower-grid { overflow: hidden !important; }
#dashboard .dashboard-lower-grid.audit-collapsed {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
}
#dashboard .dashboard-catalog-panel {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
#dashboard #dashboardCatalogMount {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Entwicklung: line chart fills remaining height instead of ballooning */
#dashboard .dashboard-line-chart-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#dashboard .dashboard-line-chart {
  flex: 1 1 0 !important;
  min-height: 60px !important;
  height: auto !important;
  width: 100% !important;
}
#dashboard .dashboard-line-legend {
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Bestand: donut content-sized, slightly smaller wide donut so it fits */
#dashboard .dashboard-catalog-body { flex: 0 0 auto !important; }
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-body {
  grid-template-columns: 200px minmax(0, 1fr) !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: 200px !important;
  height: 200px !important;
}

/* ---- Search button: small, quiet, on-brand ---- */
#dashboard .dashboard-search-card {
  position: relative !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}
#dashboard #dashboardProductSearchBtn {
  align-self: center !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 15px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: 9px !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  background: transparent !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  box-shadow: none !important;
}
#dashboard #dashboardProductSearchBtn:hover {
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  color: var(--pvz-primary, #AD093D) !important;
}

/* ---- Search results: real floating dropdown attached to the field ---- */
#dashboard .dashboard-search-suggestions {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 60 !important;
  max-height: min(360px, 48vh) !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 46px rgba(30, 12, 19, 0.13) !important;
  overflow: hidden !important;
  overflow-y: auto !important;
}
#dashboard .dashboard-search-option { min-height: 54px !important; padding: 11px 16px !important; }

/* ---- Metric drilldown drawer: wider, white header row, columns, subtle action ---- */
body #dashboardDetailWrap { width: min(640px, 100vw) !important; }
body #dashboardDetailWrap .dashboard-audit-head { padding: 13px 22px !important; }
body #dashboardDetailWrap table thead th {
  background: #fff !important;
  border-bottom: 1px solid var(--pvz-border, #E4D4DA) !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  padding: 11px 20px !important;
}
/* SKU wider (single line), action narrow text-link, name gets the rest */
body #dashboardDetailWrap table th:nth-child(1),
body #dashboardDetailWrap table td:nth-child(1) {
  width: 158px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}
body #dashboardDetailWrap table th:nth-child(2),
body #dashboardDetailWrap table td:nth-child(2) {
  width: auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body #dashboardDetailWrap table th:nth-child(3),
body #dashboardDetailWrap table td:nth-child(3) {
  width: 88px !important;
  text-align: right !important;
  padding-right: 22px !important;
}
/* Action: borderless text hint instead of a full button */
body #dashboardDetailWrap .jump-btn {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  color: var(--pvz-primary, #AD093D) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-height: 0 !important;
}
body #dashboardDetailWrap .jump-btn:hover {
  text-decoration: underline !important;
  background: none !important;
}

/* iteration 6b: compact horizontal Entwicklung legend + tighter controls
   so the line chart gets real vertical room even on short viewports */
#dashboard .dashboard-line-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 18px !important;
  align-content: flex-start !important;
  padding-top: 8px !important;
  grid-template-columns: none !important;
}
#dashboard .dashboard-line-legend-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  font-size: 11.5px !important;
}
#dashboard .dashboard-line-legend-row strong { margin-left: 3px !important; }
#dashboard .dashboard-line-chart { min-height: 60px !important; }
/* legend always keeps its space; chart shrinks so nothing is clipped */
#dashboard .dashboard-line-legend { flex: 0 0 auto !important; }
#dashboard .dashboard-line-chart-wrap { overflow: hidden !important; }
/* tighten the catalog control rows a touch to free chart height */
#dashboard .dashboard-dim-switch { padding: 9px 0 8px !important; }
#dashboard .dashboard-catalog-actions { margin-top: 8px !important; }

/* iteration 6c: compact magnifier search button + tighter dropdown attach */
#dashboard #dashboardProductSearchBtn.dashboard-search-btn {
  width: 42px !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  box-shadow: none !important;
}
#dashboard #dashboardProductSearchBtn.dashboard-search-btn:hover {
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  color: var(--pvz-primary, #AD093D) !important;
}
#dashboard #dashboardProductSearchBtn.dashboard-search-btn svg { width: 18px !important; height: 18px !important; }
#dashboard .dashboard-search-suggestions { top: calc(100% + 4px) !important; }

/* iteration 7: collapsed Änderungsverlauf = exactly the stat-tile height */
#dashboard .dashboard-audit-panel.is-collapsed {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
}
#dashboard .dashboard-audit-panel.is-collapsed .audit-filters { display: none !important; }
#dashboard .dashboard-audit-panel.is-collapsed .dashboard-audit-head {
  width: 100% !important;
  flex-direction: row !important;
  gap: 0 !important;
  margin: 0 !important;
}
#dashboard .dashboard-audit-panel.is-collapsed .dashboard-audit-title {
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ============================================================
   Dashboard v6 — iteration 8: connected search dropdown (fewer
   borders + blurred backdrop), dense legend, undistorted chart
   ============================================================ */

/* ---- Search: input + dropdown as ONE connected unit ---- */
#dashboard .dashboard-search-card {
  position: relative !important;
  display: block !important;
}
#dashboard #dashboardProductSearch {
  width: 100% !important;
  padding-right: 46px !important;
}
/* magnifier lives INSIDE the field — no separate bordered button */
#dashboard #dashboardProductSearchBtn.dashboard-search-btn {
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  transform: none !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: var(--pvz-text-label, #9CA3AF) !important;
  box-shadow: none !important;
}
#dashboard #dashboardProductSearchBtn.dashboard-search-btn:hover {
  background: transparent !important;
  color: var(--pvz-primary, #AD093D) !important;
}
/* dropdown hangs directly off the input, same width, shared border */
#dashboard .dashboard-search-suggestions {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 60 !important;
  max-height: min(420px, 56vh) !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 26px 48px rgba(30, 12, 19, 0.14) !important;
  overflow: hidden !important;
  overflow-y: auto !important;
}
/* when open: square the input's bottom so it merges into the dropdown */
body #dashboard.dashboard-search-open #dashboardProductSearch {
  border-radius: 12px 12px 0 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
/* fewer borders: drop the per-row separators, lean on hover + spacing */
#dashboard .dashboard-search-option {
  border-bottom: none !important;
  min-height: 52px !important;
}
#dashboard .dashboard-search-option::before { opacity: 0 !important; }
#dashboard .dashboard-search-option:hover::before,
#dashboard .dashboard-search-option.is-active::before { opacity: 1 !important; }

/* While the search dropdown is open, fully hide the dashboard body. The dropdown
   is absolutely positioned, so correctness must NOT depend on its opaque
   background covering the content behind it: a render-timing race (stylesheet
   not yet applied) or a narrow-width layout collapse (dropdown shrinks, text
   overflows) would otherwise let the dashboard bleed through and look
   "transparent". Hiding the body removes that failure mode entirely. */
body #dashboard.dashboard-search-open > .cards,
body #dashboard.dashboard-search-open .dashboard-lower-grid {
  display: none !important;
}

/* ---- Entwicklung legend: dense, multi-column, no scroll, many items ---- */
#dashboard .dashboard-line-legend {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 1px 18px !important;
  align-content: start !important;
  padding-top: 8px !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
#dashboard .dashboard-line-legend-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 1px 0 !important;
  font-size: 11px !important;
  min-width: 0 !important;
}
#dashboard .dashboard-line-legend-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#dashboard .dashboard-line-legend-row strong { margin-left: auto !important; flex: 0 0 auto !important; }
#dashboard .dashboard-line-swatch { flex: 0 0 auto !important; }

/* ============================================================
   Dashboard v6 — iteration 9: align search preview to the field,
   centre the magnifier, audit = divider not box-in-box
   ============================================================ */

/* ---- Search preview typography matches the search field ---- */
#dashboard .dashboard-search-option-main strong {
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1E0C13 !important;
  letter-spacing: 0 !important;
}
#dashboard .dashboard-search-option-main small {
  text-transform: none !important;
  font-size: 11.5px !important;
  color: var(--pvz-text-label, #9CA3AF) !important;
  letter-spacing: 0.01em !important;
}
#dashboard .dashboard-search-option-prices { font-size: 12.5px !important; color: #1E0C13 !important; }
#dashboard .dashboard-search-option-prices b { color: var(--pvz-text-muted, #7B4A5D) !important; }
/* box border/colour identical to the input */
#dashboard .dashboard-search-suggestions {
  border-color: #E4D4DA !important;
  background: #fff !important;
}
#dashboard .dashboard-search-option { background: transparent !important; }

/* ---- Magnifier vertically centred in the input ---- */
#dashboard #dashboardProductSearchBtn.dashboard-search-btn {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ---- Änderungsverlauf expanded: no box-in-box, just a divider under the
        header; the panel fills down to the bottom, list scrolls inside ---- */
#dashboard .dashboard-audit-panel:not(.is-collapsed) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) .dashboard-audit-head {
  border: none !important;
  border-bottom: 1px solid var(--pvz-border, #E4D4DA) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 0 12px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) .audit-filters {
  border-top: none !important;
  padding-top: 10px !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) #auditWrap {
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-top: 8px !important;
}

/* ============================================================
   Dashboard v6 — iteration 10: kill inner boxes in expanded audit,
   clean unified search unit (one border, no glow, no dot)
   ============================================================ */

/* ---- Expanded Änderungsverlauf: remove ALL inner boxes ---- */
#dashboard .dashboard-audit-panel:not(.is-collapsed) .audit-filters {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 0 !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) #auditWrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#dashboard .dashboard-audit-panel:not(.is-collapsed) #audit,
#dashboard .dashboard-audit-panel:not(.is-collapsed) .dashboard-audit-empty {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---- Search: one clean unified box (input + dropdown), CI-consistent ---- */
#dashboard #dashboardProductSearch {
  border: 1px solid #E4D4DA !important;
  border-radius: 12px !important;
}
#dashboard .dashboard-search-card input:focus {
  border-color: #E4D4DA !important;
  box-shadow: none !important;
}
body #dashboard.dashboard-search-open #dashboardProductSearch {
  position: relative !important;
  z-index: 61 !important;
  border-color: #E4D4DA !important;
  border-bottom-color: transparent !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: none !important;
}
#dashboard .dashboard-search-suggestions {
  border: 1px solid #E4D4DA !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 18px 40px rgba(30, 12, 19, 0.10) !important;
  background: #fff !important;
}
/* rows: drop the leading dot column + separators; calm hover */
#dashboard .dashboard-search-option {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  border-bottom: none !important;
  padding: 12px 18px !important;
}
#dashboard .dashboard-search-option::before { display: none !important; }
#dashboard .dashboard-search-option:hover,
#dashboard .dashboard-search-option.is-active {
  background: #FBF4F7 !important;
}

/* ============================================================
   Dashboard v6 — iteration 11: donut never clips (responsive),
   search even lighter (border + tint)
   ============================================================ */

/* ---- Donut fills available height (flex), never clipped (high specificity) ---- */
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-body,
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-body {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  overflow: hidden !important;
}
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 224px !important;
}
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-svg {
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 188px !important;
}

/* ---- Search: lighter border + barely-there tint ---- */
#dashboard #dashboardProductSearch { border-color: #ECDEE5 !important; }
#dashboard .dashboard-search-card input:focus { border-color: #ECDEE5 !important; box-shadow: none !important; }
body #dashboard.dashboard-search-open #dashboardProductSearch {
  border-color: #ECDEE5 !important;
  border-bottom-color: transparent !important;
}
#dashboard .dashboard-search-suggestions {
  border-color: #ECDEE5 !important;
  box-shadow: 0 16px 38px rgba(30, 12, 19, 0.09) !important;
}
#dashboard .dashboard-search-option:hover,
#dashboard .dashboard-search-option.is-active {
  background: #FCF8FA !important;
}

/* ============================================================
   Dashboard v6 — iteration 12: donut/chart fit (no clip, both modes),
   centred empty state, clean ALLE underline, white search results
   ============================================================ */

/* ---- Catalog fills its cell; donut/chart size to available space ---- */
#dashboard .dashboard-lower-grid.audit-collapsed { align-items: stretch !important; }
#dashboard .dashboard-audit-panel.is-collapsed { align-self: stretch !important; }
#dashboard .dashboard-catalog-panel {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#dashboard #dashboardCatalogMount {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#dashboard .dashboard-catalog-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  align-items: center !important;
  overflow: hidden !important;
}
/* donut = square, fills body height, capped; column auto-sizes to it */
#dashboard .dashboard-lower-grid .dashboard-catalog-body {
  grid-template-columns: auto minmax(0, 1fr) !important;
}
#dashboard .dashboard-lower-grid .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid .dashboard-donut-svg {
  height: 100% !important;
  width: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 224px !important;
}
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-wrap,
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-svg {
  max-height: 188px !important;
}
#dashboard .dashboard-donut-svg { min-height: 0 !important; }

/* ---- Empty audit state centred in the panel ---- */
#dashboard .dashboard-audit-panel:not(.is-collapsed) #auditWrap { display: flex !important; flex-direction: column !important; }
#dashboard .dashboard-audit-panel:not(.is-collapsed) #audit { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; }
#dashboard .dashboard-audit-panel:not(.is-collapsed) #audit .empty-state-block {
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ---- "ALLE" filter underline = clean line like the dim tabs ---- */
#dashboard .audit-type-chip { padding: 4px 0 !important; }
#dashboard .audit-type-filters { gap: 16px !important; }
#dashboard .audit-type-chip.is-primary { border-bottom: 2px solid #AD093D !important; }

/* ---- Search results on WHITE, same design/border as the field ---- */
#dashboard .dashboard-search-suggestions { background: #fff !important; }
#dashboard .dashboard-search-option { background: #fff !important; }
#dashboard .dashboard-search-option:hover,
#dashboard .dashboard-search-option.is-active {
  background: #F7F5F6 !important;
}

/* ============================================================
   Dashboard v6 — iteration 13: compact catalog header so chart +
   FULL legend fit even on short laptops (no clip, no scroll)
   ============================================================ */
#dashboard .dashboard-catalog-head { margin-bottom: 6px !important; }
#dashboard .dashboard-catalog-head h3 { font-size: 13px !important; margin: 0 !important; }
#dashboard .dashboard-catalog-head p { margin: 2px 0 0 !important; font-size: 9px !important; }
#dashboard .dashboard-catalog-actions { margin-top: 6px !important; padding: 2px !important; }
#dashboard .dashboard-catalog-actions .dashboard-view-chip { padding: 4px 11px !important; }
#dashboard .dashboard-dim-switch { padding: 6px 0 5px !important; gap: 14px !important; }
#dashboard .dashboard-trend-nav { margin: 0 !important; }
#dashboard .dashboard-line-chart-head { margin: 0 !important; }
#dashboard .dashboard-line-chart-head strong { font-size: 20px !important; }
#dashboard .dashboard-line-chart { min-height: 44px !important; }

/* ============================================================
   Dashboard v6 — iteration 14: EXPANDED audit mode also fills the
   viewport (was using fixed heights → catalog/donut overflowed)
   ============================================================ */
#dashboard .dashboard-lower-grid:not(.audit-collapsed) {
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
}
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-audit-panel {
  min-height: 0 !important;
  grid-row: 1 / span 2 !important;
}
/* catalog (right, row 2) fills its cell so the donut sizes correctly */
#dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-panel {
  align-self: stretch !important;
  min-height: 0 !important;
}

/* ============================================================
   Dashboard v6 — iteration 15: ROBUST anti-clip. Natural flow +
   scroll fallback instead of forced fit (donut/chart never cut).
   High specificity (body …) to override all earlier flex-fill rules.
   ============================================================ */

/* Dashboard scrolls if content truly exceeds the viewport — never clips */
body #dashboard.tab-panel.active {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #E4D4DA transparent !important;
}
body #dashboard .dashboard-lower-grid { overflow: visible !important; }
body #dashboard .dashboard-catalog-panel { overflow: visible !important; }
body #dashboard #dashboardCatalogMount { overflow: visible !important; }
body #dashboard .dashboard-catalog-body { overflow: visible !important; flex: 0 0 auto !important; }

/* Donut: fixed natural size (no height:100% → can't collapse, can't overflow) */
body #dashboard .dashboard-lower-grid .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid .dashboard-donut-svg,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: 200px !important;
  height: 200px !important;
  aspect-ratio: auto !important;
  max-height: none !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-svg {
  width: 168px !important;
  height: 168px !important;
}
body #dashboard .dashboard-lower-grid .dashboard-catalog-body {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
}

/* Line chart: fixed natural height (never clipped, legend always below it) */
body #dashboard .dashboard-line-chart {
  height: 240px !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}
body #dashboard .dashboard-line-chart-wrap { overflow: visible !important; }

/* Audit timeline keeps internal scroll so 278 entries don't bloat the page */
body #dashboard .dashboard-audit-panel:not(.is-collapsed) #auditWrap {
  max-height: 58vh !important;
  overflow-y: auto !important;
}

/* ============================================================
   Dashboard v6 — iteration 16: catalog card grows with its content
   (donut no longer spills out of the card). Lower grid = natural
   height; page scrolls if needed (works with iteration-15).
   ============================================================ */
body #dashboard .dashboard-lower-grid {
  flex: 0 0 auto !important;
  align-items: start !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) {
  grid-template-rows: auto auto !important;
}
body #dashboard .dashboard-catalog-panel {
  align-self: start !important;
}
/* catalog card sizes to its content so nothing overflows the border */
body #dashboard #dashboardCatalogMount,
body #dashboard .dashboard-catalog-body {
  flex: 0 0 auto !important;
}

/* iteration 17: trim the headroom above the greeting to remove the last bit of scroll */
body #dashboard.tab-panel.active { padding-top: 2px !important; }
body #dashboard .dashboard-welcome { margin: 0 0 2px !important; line-height: 1.05 !important; }

/* ============================================================
   Dashboard v6 — iteration 18: NO scroll (bound to viewport) +
   responsive donut that shrinks to fit (no clip, no spill, no scroll).
   Reverts iteration-15/16 natural-flow. White search results.
   ============================================================ */

/* page never scrolls; everything fits the viewport */
body #dashboard.tab-panel.active { overflow: hidden !important; }
body #dashboard .dashboard-lower-grid {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
body #dashboard .dashboard-audit-panel.is-collapsed { align-self: stretch !important; }
body #dashboard .dashboard-audit-panel:not(.is-collapsed) { min-height: 0 !important; }

/* catalog card fills its cell; donut is RESPONSIVE inside it */
body #dashboard .dashboard-catalog-panel {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body #dashboard #dashboardCatalogMount {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body #dashboard .dashboard-catalog-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: center !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
}
body #dashboard .dashboard-lower-grid .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid .dashboard-donut-svg,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: auto !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 210px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-svg {
  max-height: 168px !important;
}

/* line chart fills available height (no clip) */
body #dashboard .dashboard-line-chart {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
body #dashboard .dashboard-line-chart-wrap { overflow: hidden !important; }

/* audit timeline scrolls internally so it never grows the page */
body #dashboard .dashboard-audit-panel:not(.is-collapsed) #auditWrap {
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* search results: all white like the "no results" state (no tint) */
body #dashboard .dashboard-search-option,
body #dashboard .dashboard-search-option:hover,
body #dashboard .dashboard-search-option.is-active {
  background: #fff !important;
}

/* ============================================================
   Dashboard v6 — iteration 19: donut breathing room (bound to card,
   not legend) + search border like the field, hover = page bg,
   shorter preview rows
   ============================================================ */

/* catalog body = flex row → donut height is bound by the CARD, with padding
   so it never touches/overruns the card edge (no "cut off" look) */
body #dashboard .dashboard-catalog-body {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 10px 0 !important;
  grid-template-columns: none !important;
  overflow: hidden !important;
}
body #dashboard .dashboard-lower-grid .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid .dashboard-donut-svg,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  flex: 0 0 auto !important;
  height: 100% !important;
  width: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 196px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-donut-svg {
  max-height: 158px !important;
}
body #dashboard .dashboard-catalog-list {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-self: center !important;
  max-height: 100% !important;
  overflow: auto !important;
}
/* Small donut view (audit expanded): a concrete max-height so the legend
   actually scrolls when there are many categories (matches the large view).
   scrollbar-gutter + padding keep the bar off the rows. */
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-list {
  max-height: 200px !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  padding-right: 6px !important;
}

/* search dropdown: same flat, subtle border as the field (no shadow) */
body #dashboard .dashboard-search-suggestions {
  box-shadow: none !important;
  border-color: #ECDEE5 !important;
}
/* shorter preview rows */
body #dashboard .dashboard-search-option {
  min-height: 0 !important;
  padding: 8px 16px !important;
}
/* hover = dashboard background colour */
body #dashboard .dashboard-search-option:hover,
body #dashboard .dashboard-search-option.is-active {
  background: #F6F6F6 !important;
}

/* ============================================================
   Dashboard v6 — iteration 20: compact icon view-switcher (saves
   space → bigger Entwicklung chart) + search list refinements
   ============================================================ */

/* Catalog header: title left, compact icon switcher top-right (own row freed) */
body #dashboard .dashboard-catalog-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
body #dashboard .dashboard-catalog-head-main { flex: 1 1 auto !important; min-width: 0 !important; }
body #dashboard .dashboard-catalog-actions {
  margin: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  gap: 2px !important;
  padding: 2px !important;
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  border: 1px solid var(--pvz-surface-track, #F5E8EE) !important;
  border-radius: 8px !important;
}
body #dashboard .dashboard-catalog-actions .dashboard-view-chip {
  width: 30px !important;
  height: 24px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--pvz-text-label, #9CA3AF) !important;
  font-size: 0 !important;
}
body #dashboard .dashboard-catalog-actions .dashboard-view-chip svg { width: 15px !important; height: 15px !important; display: block !important; }
body #dashboard .dashboard-catalog-actions .dashboard-view-chip.is-active {
  background: #fff !important;
  color: var(--pvz-primary, #AD093D) !important;
  box-shadow: 0 1px 3px rgba(30, 12, 19, 0.10) !important;
}

/* Search: grey ONLY on hover (not the default first/active item) */
body #dashboard .dashboard-search-option,
body #dashboard .dashboard-search-option.is-active { background: #fff !important; }
body #dashboard .dashboard-search-option:hover { background: #F6F6F6 !important; }
/* Subtle divider between the search field and the suggestion list (still joined) */
body #dashboard.dashboard-search-open #dashboardProductSearch { border-bottom-color: #F1E9ED !important; }
/* List feel: no separators between results */
body #dashboard .dashboard-search-option { border: none !important; }

/* iteration 21: compact stat tiles → more room for the Entwicklung chart in expanded mode */
body #dashboard .dashboard-stat-tile { padding: 7px 13px !important; }
body #dashboard .dashboard-stat-tile strong { font-size: 16px !important; }
body #dashboard .dashboard-stats-grid { gap: 10px !important; }

/* ============================================================
   Dashboard v6 — iteration 22: trend header (Total + pager), legend
   alignment, no pink hover, top-aligned lists, fixed drawer rows
   ============================================================ */

/* Trend header: back · Total · pager */
body #dashboard .dashboard-trend-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 2px !important;
}
body #dashboard .dashboard-trend-total { display: flex !important; flex-direction: column !important; line-height: 1 !important; }
body #dashboard .dashboard-trend-total-label {
  font-size: 8.5px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
  font-weight: 700 !important; color: var(--pvz-text-label, #9CA3AF) !important; margin-bottom: 2px !important;
}
body #dashboard .dashboard-trend-total strong { font-size: 22px !important; font-weight: 800 !important; color: #1E0C13 !important; }
body #dashboard .dashboard-catalog-back,
body #dashboard .dashboard-trend-pager button {
  width: 24px !important; height: 24px !important; padding: 0 !important;
  border: 1px solid var(--pvz-border, #E4D4DA) !important; border-radius: 7px !important;
  background: #fff !important; color: var(--pvz-primary, #AD093D) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; font-size: 14px !important; line-height: 1 !important;
}
body #dashboard .dashboard-trend-pager { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; }
body #dashboard .dashboard-trend-pager span { font-size: 11px !important; font-variant-numeric: tabular-nums !important; color: var(--pvz-text-muted, #7B4A5D) !important; }

/* Line legend: count right next to the name */
body #dashboard .dashboard-line-legend-row strong { margin-left: 5px !important; }
body #dashboard .dashboard-line-legend-name { flex: 0 1 auto !important; }

/* Donut legend: count + % aligned across rows (tab-stops) */
body #dashboard .dashboard-catalog-row {
  grid-template-columns: 14px minmax(0, 1fr) 26px 44px !important;
  gap: 0 8px !important;
  justify-content: stretch !important;
}
body #dashboard .dashboard-catalog-count { text-align: right !important; }
body #dashboard .dashboard-catalog-pct { text-align: right !important; min-width: 0 !important; }
/* no pink hue when hovering legend rows */
body #dashboard .dashboard-catalog-row:hover,
body #dashboard .dashboard-catalog-row.is-hot { background: transparent !important; }

/* Lists start from the TOP (not vertically centred) when there are few items */
body #dashboard .dashboard-catalog-list { align-self: flex-start !important; }

/* Drawer detail list: top-aligned, equal-height rows */
body #dashboardDetailWrap table { flex: 0 0 auto !important; }
body #dashboardDetailWrap .dashboard-detail-scroll { justify-content: flex-start !important; }
body #dashboardDetailWrap table tbody td {
  height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

/* ============================================================
   Dashboard v6 — iteration 23: visible drawer title, borderless
   arrows, no dotted grid lines
   ============================================================ */

/* Drawer title: was white-on-white → dark, clear, bold */
body #dashboardDetailWrap .dashboard-audit-head h3 {
  color: #1E0C13 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Trend pager + back: plain arrows (no border, no background) */
body #dashboard .dashboard-trend-pager button,
body #dashboard .dashboard-catalog-back {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 4px !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  font-size: 18px !important;
}
body #dashboard .dashboard-trend-pager button:hover,
body #dashboard .dashboard-catalog-back:hover {
  background: transparent !important;
  color: var(--pvz-primary, #AD093D) !important;
}

/* Remove the dotted grid lines under the chart (keep a faint solid baseline) */
body #dashboard .dashboard-line-grid line {
  stroke-dasharray: none !important;
  stroke: transparent !important;
}
body #dashboard .dashboard-line-grid line.zero {
  stroke: #F1E5EA !important;
  stroke-dasharray: none !important;
}

/* ============================================================
   Dashboard v6 — iteration 24: legend centring, axis alignment,
   card accent, audit tiles, empty icon, CI selects, ALLE underline
   ============================================================ */

/* 1) Donut legend vertically centred to the donut */
body #dashboard .dashboard-catalog-list { align-self: center !important; }

/* 2) X-axis labels align with the data points (remove the 34px side margin
      that made the axis narrower/offset vs the SVG) */
body #dashboard .dashboard-line-months { margin-left: 0 !important; margin-right: 0 !important; }

/* 3) "Lange nicht geprüft" card: drop the coloured top strich (grey like the rest) */
body #dashboard .card[data-metric="langeNichtGeprueft"] { border-top-color: var(--ci-border, #E4D4DA) !important; }

/* 4) Änderungsverlauf rows as clean white CI tiles, more left padding */
body #dashboard .audit-tl-row,
body #dashboard .audit-tl-row:last-child {
  background: #fff !important;
  border: 1px solid #ECDEE5 !important;
  border-radius: 10px !important;
  padding: 10px 16px 10px 18px !important;
  gap: 14px !important;
}
body #dashboard #audit { gap: 8px !important; }

/* 5) Empty-state icon: larger / better proportioned */
body #dashboard #audit .empty-state-icon { width: 40px !important; height: 40px !important; }
body #dashboard #audit .empty-state-block { gap: 10px !important; }

/* 6) User / timeframe selects styled like the rest of the app (v6 CI) */
body #dashboard .audit-filters select {
  border: 1px solid var(--ci-border, #E4D4DA) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: #5A2236 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 7px 30px 7px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  min-width: 130px !important;
  cursor: pointer !important;
}

/* 7) "ALLE" active underline = straight line (not rounded) */
body #dashboard .audit-type-chip { border-radius: 0 !important; }
body #dashboard .audit-type-chip.is-primary { border-bottom: 2px solid #AD093D !important; border-radius: 0 !important; }

/* ============================================================
   Dashboard v6 — iteration 25: clean lines (no dots), Total spacing,
   pager lives in the legend bar (only affects the legend)
   ============================================================ */

/* 2) Remove the per-point dots on the trend lines (just clean lines) */
body #dashboard .dashboard-trend-pt { display: none !important; }

/* 1) More space between the dim tabs / title and the "Total · number" */
body #dashboard .dashboard-trend-head { margin-top: 12px !important; }

/* 3/4) Pager sits in the legend bar; the bar is the separator above the legend */
body #dashboard .dashboard-line-legend-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 18px !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid #F1E7EB !important;
}
body #dashboard .dashboard-line-legend {
  border-top: none !important;
  padding-top: 6px !important;
}
body #dashboard .dashboard-line-legend-bar .dashboard-trend-pager { margin: 0 !important; }

/* iteration 25b: fixed legend height → chart never resizes when paging */
body #dashboard .dashboard-line-legend {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  overflow-y: auto !important;
  align-content: start !important;
}

/* iteration 26: show only the END point of each line (current value marker),
   hide the per-label intermediate dots that cluttered under Jan/Feb/days */
body #dashboard .dashboard-trend-pt { display: none !important; }
body #dashboard .dashboard-trend-pt.is-end { display: block !important; }

/* iteration 27: dots belong ON the lines, NOT under the axis labels */
/* show ALL data points again */
body #dashboard .dashboard-trend-pt,
body #dashboard .dashboard-trend-pt.is-end { display: block !important; }
/* remove the dotted underline under clickable Jan/Feb/day labels */
body #dashboard .dashboard-line-months span,
body #dashboard .dashboard-line-months.is-clickable span { text-decoration: none !important; }

/* ============================================================
   Dashboard v6 — iteration 28: legend fills width (dynamic paging),
   no pink legend hover, lower row aligned to the 5 metric cards
   ============================================================ */

/* 1) Legend uses the FULL width (auto-fill columns) before any pager appears */
body #dashboard .dashboard-line-legend {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

/* 2) Remove the pink hover/active background everywhere in the legend */
body #dashboard .dashboard-line-legend-row:hover,
body #dashboard .dashboard-line-legend-row.is-hot { background: transparent !important; }

/* 3) Collapsed lower row (audit chip + stat tiles) aligns with the 5 cards above */
@media (min-width: 1121px) {
  body #dashboard .dashboard-lower-grid.audit-collapsed {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px !important;
    column-gap: 20px !important;
  }
  body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-audit-panel {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }
  body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-stats-grid {
    grid-column: 2 / span 4 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-panel {
    grid-column: 1 / span 5 !important;
    grid-row: 2 !important;
  }
}

/* Dashboard margin view + carousel */
body #dashboard .dashboard-stats-grid {
  position: relative !important;
}
body #dashboard .dashboard-stats-carousel {
  position: absolute !important;
  right: 0 !important;
  top: -28px !important;
  display: inline-flex !important;
  gap: 2px !important;
  align-items: center !important;
  padding: 2px !important;
  background: var(--pvz-surface-soft, #FDF7FA) !important;
  border: 1px solid var(--pvz-surface-track, #F5E8EE) !important;
  border-radius: 8px !important;
}
body #dashboard .dashboard-stats-carousel button {
  width: auto !important;
  height: 22px !important;
  min-width: 52px !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
  background: transparent !important;
  color: var(--pvz-text-label, #9CA3AF) !important;
  cursor: pointer !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
body #dashboard .dashboard-stats-carousel button.is-active {
  background: #fff !important;
  color: var(--pvz-primary, #AD093D) !important;
  box-shadow: 0 1px 3px rgba(30, 12, 19, 0.10) !important;
}
body #dashboard .dashboard-margin-chart-wrap {
  gap: 4px !important;
}
body #dashboard .dashboard-margin-controls {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 0 2px !important;
}
body #dashboard .dashboard-margin-condition-switch {
  margin: 0 !important;
}
body #dashboard .dashboard-margin-total-meta {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--pvz-text-muted, #7B4A5D) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

.price-history-summary {
  display: none;
}
.price-history-table-wrap {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid #ECDEE5;
}
.price-history-events {
  display: grid;
  gap: 10px;
  max-height: 48vh;
  overflow: auto;
  padding-right: 4px;
}
.price-history-event {
  border: 1px solid #ECDEE5;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}
.price-history-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.price-history-event-head::-webkit-details-marker {
  display: none;
}
.price-history-event-head strong {
  display: block;
  color: #1E0C13;
  font-size: 13px;
}
.price-history-event-head span,
.price-history-event-head small {
  color: #8A6674;
  font-size: 11px;
}
.price-history-event-head small {
  flex: 0 0 auto;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-history-event-codes {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #AD093D !important;
  font-size: 12px !important;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price-history-event-details {
  position: relative;
  padding: 0 12px 12px;
}
.price-history-detail-x {
  position: absolute;
  right: 8px;
  top: -36px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: #8A6674;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.price-history-detail-x:hover {
  background: transparent !important;
  color: #AD093D;
}
/* The detail close-× lives inside #marketPriceDetailBody, where a broad
   `button:not(...)` rule (specificity 0,8,1) forces a 1px box border that beats
   the borderless close-button rule (`html body .price-history-detail-x`, 0,1,2).
   An ID-scoped selector (1,1,1 — an ID outranks any number of :not() classes)
   wins decisively, so the × stays borderless and aligned to the event header. */
#marketPriceDetailBody button.price-history-detail-x {
  position: absolute !important;
  top: -40px !important;
  right: 4px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8A6674 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#marketPriceDetailBody button.price-history-detail-x:hover {
  background: transparent !important;
  color: #AD093D !important;
}
.price-history-event[open] .price-history-event-head small {
  display: none;
}
.price-history-change-table {
  margin-top: 6px;
  border: 1px solid #F1E7EB;
}
.price-history-before,
.price-history-after,
.price-history-arrow {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.price-history-before,
.price-history-after {
  min-width: 54px;
  text-align: right;
}
.price-history-arrow {
  min-width: 18px;
  color: #9CA3AF;
  text-align: center;
}
.price-history-load-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.price-history-load-more {
  min-width: 180px;
}
.price-history-table {
  width: 100%;
  border-collapse: collapse;
}
.price-history-table th,
.price-history-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #F1E7EB;
  text-align: left;
  font-size: 12px;
}
.price-history-table th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  color: #5A2236;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-x-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Final action-column override: four icon buttons need real horizontal room. */
html body #appShell #effective #pricesTable th.col-action,
html body #appShell #effective #pricesTable td.col-action,
html body #appShell #effective #pricesActionTable th.col-action,
html body #appShell #effective #pricesActionTable td.col-action {
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  padding: 0 !important;
}
html body #appShell #effective #pricesTable td.action-cell .action-cell-inner.action-cell-inner-icons,
html body #appShell #effective #pricesActionTable td.action-cell .action-cell-inner.action-cell-inner-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  overflow: visible !important;
}
html body #appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon,
html body #appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 30px !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body #appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.btn-main,
html body #appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.btn-main {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  flex-basis: 30px !important;
}
html body #appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon svg,
html body #appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  flex: 0 0 auto !important;
}

/* Final line-chart parity: history and margin reserve identical slots even when
   legend length, pager visibility, or a two-line KPI label differs. */
html body #dashboard .dashboard-catalog-head {
  align-items: start !important;
  min-height: 56px !important;
}
html body #dashboard .dashboard-catalog-kpi {
  justify-content: flex-start !important;
  min-height: 44px !important;
}
html body #dashboard .dashboard-catalog-kpi span {
  line-height: 1.05 !important;
  min-height: 20px !important;
}
html body #dashboard .dashboard-line-chart-wrap,
html body #dashboard .dashboard-margin-chart-wrap {
  display: grid !important;
  gap: 6px !important;
  grid-template-rows: 42px minmax(166px, 1fr) 24px 22px 76px !important;
  min-height: 326px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-trend-head,
html body #dashboard .dashboard-line-chart-wrap > .dashboard-margin-filter-row {
  align-content: start !important;
  grid-row: 1 !important;
  margin: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-chart {
  align-self: stretch !important;
  flex: none !important;
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 166px !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-months {
  flex: none !important;
  grid-row: 3 !important;
  height: 24px !important;
  margin: 0 !important;
  min-height: 24px !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
  flex: none !important;
  grid-row: 4 !important;
  height: 22px !important;
  margin: 0 !important;
  min-height: 22px !important;
  padding-top: 4px !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-legend {
  flex: none !important;
  grid-row: 5 !important;
  height: 76px !important;
  max-height: 76px !important;
  min-height: 76px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend.is-empty,
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar.is-empty {
  display: block !important;
  visibility: hidden !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend.is-empty {
  height: 76px !important;
  max-height: 76px !important;
  min-height: 76px !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar.is-empty {
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
}
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart-wrap,
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap {
  display: flex !important;
  justify-content: center !important;
  min-height: 142px !important;
}
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart,
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap .dashboard-line-chart {
  flex: 0 0 86px !important;
  height: 86px !important;
  min-height: 86px !important;
}

/* Wide dashboard chart safety v2: this block intentionally lives at the very
   end so the compact lower-grid rules cannot hide the legend in wide cards. */
@media (min-width: 1100px) {
  html body #dashboard .dashboard-catalog-panel #dashboardCatalogMount {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap,
  html body #dashboard .dashboard-catalog-panel .dashboard-margin-chart-wrap {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    grid-template-rows: 28px 178px 24px 20px 70px !important;
    height: 346px !important;
    min-height: 346px !important;
    max-height: 346px !important;
    overflow: hidden !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-trend-head,
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-margin-filter-row {
    grid-row: 1 !important;
    min-height: 28px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-chart {
    display: block !important;
    flex: none !important;
    grid-row: 2 !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-months {
    display: block !important;
    grid-row: 3 !important;
    height: 24px !important;
    min-height: 24px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
    display: flex !important;
    grid-row: 4 !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding-top: 2px !important;
    visibility: visible !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend {
    display: grid !important;
    grid-row: 5 !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
    padding-top: 4px !important;
    visibility: visible !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend.is-empty,
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar.is-empty {
    display: block !important;
    visibility: hidden !important;
  }
}

/* Legend rescue v4: override the compact lower-grid display:none rule without
   relying on media queries. */
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap {
  display: grid !important;
  gap: 6px !important;
  grid-template-rows: 28px 178px 24px 20px 70px !important;
  height: 346px !important;
  min-height: 346px !important;
  max-height: 346px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-chart {
  display: block !important;
  grid-row: 2 !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-months {
  display: block !important;
  grid-row: 3 !important;
  height: 24px !important;
  min-height: 24px !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
  display: flex !important;
  grid-row: 4 !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding-top: 2px !important;
  visibility: visible !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend {
  display: grid !important;
  grid-row: 5 !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  padding-top: 4px !important;
  visibility: visible !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend.is-empty,
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar.is-empty {
  display: block !important;
  visibility: hidden !important;
}

/* Dashboard search preview final color parity v2: every result uses the same
   text colors as the active first row. */
html body #dashboard .dashboard-search-option,
html body #dashboard .dashboard-search-option:hover,
html body #dashboard .dashboard-search-option.is-active {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-main strong,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-main strong,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-main strong {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-main small,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-main small,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-main small {
  color: #8A6674 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-prices,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-prices,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-prices {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-prices b,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-prices b,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-prices b {
  color: #8A6674 !important;
}

/* Dashboard search preview final color parity: every result uses the same text
   colors as the active first row. */
html body #dashboard .dashboard-search-option,
html body #dashboard .dashboard-search-option:hover,
html body #dashboard .dashboard-search-option.is-active {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-main strong,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-main strong,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-main strong {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-main small,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-main small,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-main small {
  color: #8A6674 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-prices,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-prices,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-prices {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option .dashboard-search-option-prices b,
html body #dashboard .dashboard-search-option:hover .dashboard-search-option-prices b,
html body #dashboard .dashboard-search-option.is-active .dashboard-search-option-prices b {
  color: #8A6674 !important;
}

/* Wide dashboard chart safety: even when the audit state applies the compact
   lower-grid rules, a wide catalog card must still show the legend. */
@media (min-width: 1100px) {
  html body #dashboard .dashboard-catalog-panel #dashboardCatalogMount {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap,
  html body #dashboard .dashboard-catalog-panel .dashboard-margin-chart-wrap {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    grid-template-rows: 28px 178px 24px 20px 70px !important;
    height: 346px !important;
    min-height: 346px !important;
    max-height: 346px !important;
    overflow: hidden !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-trend-head,
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-margin-filter-row {
    grid-row: 1 !important;
    min-height: 28px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-chart {
    display: block !important;
    flex: none !important;
    grid-row: 2 !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-months {
    display: block !important;
    grid-row: 3 !important;
    height: 24px !important;
    min-height: 24px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
    display: flex !important;
    grid-row: 4 !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding-top: 2px !important;
    visibility: visible !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend {
    display: grid !important;
    grid-row: 5 !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
    padding-top: 4px !important;
    visibility: visible !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend.is-empty,
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar.is-empty {
    display: block !important;
    visibility: hidden !important;
  }
}

/* Dashboard margin/trend finishing pass: fixed legend tab stops and compact total charts. */
body #dashboard .dashboard-margin-total-meta {
  display: none !important;
}
body #dashboard .dashboard-line-legend-row {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) 54px !important;
  align-items: center !important;
  column-gap: 7px !important;
}
body #dashboard .dashboard-line-legend-row .dashboard-line-swatch {
  grid-column: 1 !important;
}
body #dashboard .dashboard-line-legend-row .dashboard-line-legend-name {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body #dashboard .dashboard-line-legend-row strong {
  grid-column: 3 !important;
  justify-self: end !important;
  min-width: 54px !important;
  margin-left: 0 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
body #dashboard .dashboard-line-months span.is-active {
  color: #AD093D !important;
  font-weight: 900 !important;
}
body #dashboard .dashboard-line-legend.is-empty,
body #dashboard .dashboard-line-legend-bar.is-empty {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart {
  flex: 0 0 110px !important;
  height: 110px !important;
  min-height: 110px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart {
  flex: 0 0 72px !important;
  height: 72px !important;
  min-height: 72px !important;
}

/* Dashboard chart layout pass: KPI and filters share the header, legends sit low. */
body #dashboard .dashboard-catalog-panel.is-margin-view > #dashboardCatalogDims {
  display: none !important;
}
body #dashboard .dashboard-margin-headline {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}
body #dashboard .dashboard-margin-headline .dashboard-trend-total {
  flex: 0 0 auto !important;
  min-width: 132px !important;
}
body #dashboard .dashboard-margin-filter-row {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}
body #dashboard .dashboard-margin-filter-row .dashboard-dim-switch,
body #dashboard .dashboard-margin-filter-row .dashboard-margin-condition-switch {
  margin: 0 !important;
}
body #dashboard .dashboard-margin-filter-row .dashboard-dim-switch {
  justify-content: flex-start !important;
}
body #dashboard .dashboard-margin-filter-row .dashboard-margin-condition-switch {
  flex: 0 0 auto !important;
}
body #dashboard .dashboard-line-chart-wrap {
  display: flex !important;
  flex-direction: column !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart-wrap {
  min-height: 300px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 150px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar {
  margin-top: auto !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend {
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  overflow: hidden !important;
  padding-bottom: 4px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-headline {
  margin-bottom: 0 !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) #dashboardCatalogDims,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-filter-row {
  display: none !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-legend,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-legend-bar {
  display: none !important;
}

/* KPI carousel: keep the switcher out of the Neuwaren Export tile. */
body #dashboard .dashboard-stats-grid {
  position: static !important;
}
body #dashboard .dashboard-stats-carousel {
  position: static !important;
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  order: -1 !important;
  margin: 0 0 -4px !important;
  z-index: 1 !important;
}

/* Dashboard unified chart header and tiny carousel controls. */
body #dashboard .dashboard-catalog-head {
  display: grid !important;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
}
body #dashboard .dashboard-catalog-kpi {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 96px !important;
  line-height: 1 !important;
}
body #dashboard .dashboard-catalog-kpi span {
  color: #8A6674 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body #dashboard .dashboard-catalog-kpi strong {
  color: #1E0C13 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}
body #dashboard .dashboard-catalog-head-main {
  min-width: 0 !important;
}
body #dashboard .dashboard-catalog-panel:not(.is-margin-view) #dashboardCatalogDims button[data-dim="total"] {
  display: none !important;
}
body #dashboard .dashboard-donut-center {
  display: flex !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-head {
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr) auto !important;
  gap: 10px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi {
  min-width: 76px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi strong {
  font-size: 18px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi span {
  font-size: 8px !important;
  letter-spacing: 0.06em !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-head-main h3 {
  font-size: 12px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-head-main p {
  font-size: 8px !important;
}
body #dashboard .dashboard-stats-carousel {
  position: absolute !important;
  right: 0 !important;
  top: -18px !important;
  grid-column: auto !important;
  display: inline-flex !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body #dashboard .dashboard-stats-carousel button {
  width: 20px !important;
  min-width: 20px !important;
  height: 18px !important;
  min-height: 18px !important;
  border: 0 !important;
  border-radius: 5px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #9A7B87 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
body #dashboard .dashboard-stats-carousel button:hover {
  background: #FDF7FA !important;
  color: #AD093D !important;
}

/* Latest dashboard alignment pass. */
body #dashboard .dashboard-catalog-head {
  grid-template-columns: 98px minmax(0, 1fr) auto !important;
}
body #dashboard .dashboard-catalog-kpi {
  min-width: 98px !important;
}
body #dashboard .dashboard-margin-headline {
  min-height: 28px !important;
}
body #dashboard .dashboard-margin-filter-row {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart-wrap {
  justify-content: center !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart {
  flex: 0 0 84px !important;
  height: 84px !important;
  min-height: 84px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart-wrap {
  gap: 6px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart {
  min-height: 160px !important;
}
body #dashboard .dashboard-stats-grid {
  position: relative !important;
}
body #dashboard .dashboard-stats-carousel {
  position: absolute !important;
  right: 2px !important;
  top: -22px !important;
  display: inline-flex !important;
  opacity: 0.85 !important;
}
body #dashboard .dashboard-stats-carousel button {
  color: #AD093D !important;
  font-size: 18px !important;
}

/* Carousel + chart parity pass. */
body #dashboard .dashboard-stats-grid,
body #dashboard #dashboardCatalogMount {
  transition: opacity 240ms ease, transform 240ms ease !important;
  will-change: opacity, transform !important;
}
body #dashboard .dashboard-stats-grid.is-carousel-switching,
body #dashboard #dashboardCatalogMount.is-carousel-switching {
  opacity: 0 !important;
  transform: translateY(4px) !important;
}
body #dashboard .dashboard-catalog-kpi strong,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body #dashboard .dashboard-catalog-kpi span,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
body #dashboard .dashboard-line-chart-wrap,
body #dashboard .dashboard-margin-chart-wrap {
  gap: 6px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart-wrap,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-margin-chart-wrap {
  min-height: 318px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-chart,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-margin-chart-wrap .dashboard-line-chart {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 166px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-months {
  flex: 0 0 24px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar {
  flex: 0 0 22px !important;
  margin-top: 0 !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend {
  flex: 0 0 74px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart-wrap,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap {
  justify-content: center !important;
  min-height: 142px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap .dashboard-line-chart {
  flex: 0 0 86px !important;
  height: 86px !important;
  min-height: 86px !important;
}

/* ============================================================
   Dashboard v6 — iteration 29: responsive to the SHOWN sidebar
   (content ~200px narrower) + restore all card borders
   ============================================================ */

/* 4) Restore the right border on the last card (old joined-cards leftover) */
body #dashboard .cards .card:last-child { border-right: 1px solid #E4D4DA !important; }

/* 1+2) Sidebar shown → content ~200px narrower. Below ~1300px the 5-up layout
   gets cramped: keep 5 cards but make them compact (not distorted), and give
   the Änderungsverlauf chip a comfortable width again so the title + chevron fit. */
@media (max-width: 1300px) {
  body #appShell:not(.sidebar-collapsed) #dashboard .cards .card { padding: 9px 10px 8px !important; }
  body #appShell:not(.sidebar-collapsed) #dashboard .cards .card p { font-size: 21px !important; margin-top: 4px !important; }
  body #appShell:not(.sidebar-collapsed) #dashboard .dashboard-card-foot { padding-top: 4px !important; }
  body #appShell:not(.sidebar-collapsed) #dashboard .dashboard-card-spark { display: none !important; }
  body #appShell:not(.sidebar-collapsed) #dashboard .cards .card h3 { font-size: 8px !important; letter-spacing: 0.1em !important; }

  /* Keep the 5-col alignment (audit chip = card width). The chip is narrow now,
     so shrink "Änderungsverlauf" and let it wrap to 2 lines (breaks at <wbr>);
     the chevron stays inside the chip. */
  body #appShell:not(.sidebar-collapsed) #dashboard .dashboard-audit-panel.is-collapsed .dashboard-audit-title {
    align-items: center !important;
    gap: 6px !important;
  }
  body #appShell:not(.sidebar-collapsed) #dashboard .dashboard-audit-panel.is-collapsed h3 {
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }
  body #appShell:not(.sidebar-collapsed) #dashboard .dashboard-audit-panel.is-collapsed #auditCollapseBtn {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   Dashboard v6 — iteration 31: hide filter divider, balanced empty
   icon (no longer portrait/distorted)
   ============================================================ */

/* 1) Remove the divider strich next to "Alle Benutzer" */
body #dashboard .audit-type-div { display: none !important; }

/* 2) Empty-state icon: balanced round "history" glyph instead of the tall
      portrait document (fixes the stretched/too-tall look) */
body #dashboard #audit .empty-state-icon {
  width: 38px !important;
  height: 38px !important;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='%23AD093D' stroke-width='1.4'/%3E%3Cpath d='M12 7.4V12l3.1 1.9' stroke='%23AD093D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   Dashboard v6 — iteration 32: line chart visible in the small
   (expanded) version + smaller donut legend + filters to the right
   ============================================================ */

/* 1) Reclaim space so the line chart is actually visible:
   tighter chart-wrap gaps + shorter fixed legend area */
body #dashboard .dashboard-line-chart-wrap { gap: 4px !important; }
body #dashboard .dashboard-line-legend {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}
body #dashboard .dashboard-line-legend-bar { min-height: 0 !important; margin-top: 4px !important; padding-top: 4px !important; }
body #dashboard .dashboard-trend-head { margin-bottom: 0 !important; }

/* Final parity: fixed header and chart slots for all line chart variants. */
body #dashboard .dashboard-catalog-head {
  min-height: 56px !important;
  align-items: start !important;
}
body #dashboard .dashboard-catalog-kpi {
  min-height: 44px !important;
  justify-content: flex-start !important;
}
body #dashboard .dashboard-catalog-kpi span {
  min-height: 20px !important;
  line-height: 1.05 !important;
  max-width: 96px !important;
}
body #dashboard .dashboard-catalog-kpi strong {
  margin-top: 2px !important;
}
body #dashboard .dashboard-line-chart-wrap,
body #dashboard .dashboard-margin-chart-wrap {
  display: grid !important;
  grid-template-rows: 42px minmax(166px, 1fr) 24px 22px 76px !important;
  gap: 6px !important;
  min-height: 326px !important;
}
body #dashboard .dashboard-line-chart-wrap > .dashboard-trend-head,
body #dashboard .dashboard-line-chart-wrap > .dashboard-margin-filter-row {
  grid-row: 1 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-content: start !important;
}
body #dashboard .dashboard-line-chart-wrap > .dashboard-line-chart {
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 166px !important;
  align-self: stretch !important;
}
body #dashboard .dashboard-line-chart-wrap > .dashboard-line-months {
  grid-row: 3 !important;
  min-height: 24px !important;
  margin: 0 !important;
}
body #dashboard .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
  grid-row: 4 !important;
  min-height: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding-top: 4px !important;
}
body #dashboard .dashboard-line-chart-wrap > .dashboard-line-legend {
  grid-row: 5 !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  overflow: hidden !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend.is-empty,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar.is-empty {
  visibility: hidden !important;
  display: block !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend.is-empty {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar.is-empty {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-head {
  min-height: 48px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi {
  min-height: 38px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-kpi span {
  min-height: 18px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart-wrap,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap {
  display: flex !important;
  min-height: 142px !important;
}

/* 2) Small donut version (expanded audit → narrow column): smaller legend text
   so long category names fit */
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-row {
  font-size: 11px !important;
  gap: 0 6px !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-name { font-size: 11px !important; }
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-count,
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-pct { font-size: 10.5px !important; }
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-row {
  grid-template-columns: 12px minmax(0, 1fr) 22px 38px !important;
}

/* 3) Move the type filters (ALLE · IMPORT · PREIS · KI · EXPORT) to the right */
body #dashboard .audit-filters .audit-type-filters { margin-left: auto !important; }

/* Große Ansicht (Audit eingeklappt): Tab-Stop-Optik — feste Namensspalte, damit
   Anzahl und % zeilenübergreifend bündig stehen, aber kompakt beim Namen bleiben
   (nicht über die ganze breite Spalte gestreckt). Überschuss in leerer Spur rechts.
   Name wird bei Bedarf mit … gekürzt. */
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-row {
  grid-template-columns: 14px 128px 30px 46px minmax(0, 1fr) !important;
  column-gap: 10px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-count,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-pct {
  text-align: right !important;
}

/* ====================================================
   Fixes 2026-06: action-col double line · donut drill hover · back button size
   ==================================================== */

/* 1) Action column (sticky right) separates rows with a per-cell BOTTOM border.
   On the last row that doubled with the new layout bottom border → kill it on
   the last action cell so only the single layout edge remains. Max specificity
   so it beats whatever paints the per-cell separator. */
html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action,
html body #appShell #effective.active #pricesTable > tbody > tr:last-child > td.col-action .action-cell-inner {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* 2) Donut drill-down: hovering a product must not show a pink hue — neutral
   page-grey instead (matches the search/legend hover language). */
body #dashboard .dashboard-catalog-product:hover {
  background: #F6F6F6 !important;
}

/* 3) Smaller "Zurück" back button in both the large and small donut menus
   (was bumped to 18px by the shared trend-pager rule). */
body #dashboard .dashboard-catalog-back {
  font-size: 10px !important;
  gap: 5px !important;
  padding: 0 4px 0 0 !important;
}
body #dashboard .dashboard-catalog-back span[aria-hidden="true"] {
  font-size: 13px !important;
}

/* Drilldown in der kleinen Ansicht (Audit ausgeklappt): der Drill-Container füllt
   den (höhenbegrenzten) Mount, und die Produktliste nimmt die Resthöhe und
   scrollt darin. Vorher hatte die Liste fixe max-height:248px und ragte unten aus
   dem Panel (overflow:hidden) → letztes Produkt abgeschnitten. */
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-drill {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}
body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-catalog-products {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Produktzeilen im Drilldown dürfen NICHT schrumpfen: im Flex-Container wurden
   sie sonst auf min-height (34px) gestaucht, während ihr Inhalt (Titel+SKU, ~50px)
   nach unten überlief und vom Hover-Grau der nächsten Zeile überdeckt wurde.
   Volle Höhe behalten → Container scrollt stattdessen. */
body #dashboard .dashboard-catalog-product {
  flex: 0 0 auto !important;
}

/* "Alle anzeigen" vertikal zur Titelzeile zentrieren (statt oben bündig). */
body #dashboard .dashboard-catalog-drill-head {
  align-items: center !important;
}

/* Final override: the prices action column now contains up to four icon buttons. */
html body #appShell #effective #pricesTable th.col-action,
html body #appShell #effective #pricesTable td.col-action,
html body #appShell #effective #pricesActionTable th.col-action,
html body #appShell #effective #pricesActionTable td.col-action {
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  padding: 0 !important;
}
html body #appShell #effective #pricesTable td.action-cell .action-cell-inner.action-cell-inner-icons,
html body #appShell #effective #pricesActionTable td.action-cell .action-cell-inner.action-cell-inner-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  overflow: visible !important;
}
html body #appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon,
html body #appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon,
html body #appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon.btn-main,
html body #appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon.btn-main {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 30px !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body #appShell #effective #pricesTable td.action-cell .price-action-btn.price-action-icon svg,
html body #appShell #effective #pricesActionTable td.action-cell .price-action-btn.price-action-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  flex: 0 0 auto !important;
}

/* Final line-chart parity v2: keep history and margin in the same physical
   positions after every earlier dashboard override has run. */
html body #dashboard .dashboard-catalog-head {
  align-items: start !important;
  min-height: 56px !important;
}
html body #dashboard .dashboard-catalog-kpi {
  justify-content: flex-start !important;
  min-height: 44px !important;
}
html body #dashboard .dashboard-catalog-kpi span {
  line-height: 1.05 !important;
  min-height: 20px !important;
}
html body #dashboard .dashboard-line-chart-wrap,
html body #dashboard .dashboard-margin-chart-wrap {
  display: grid !important;
  gap: 6px !important;
  grid-template-rows: 42px minmax(166px, 1fr) 24px 22px 76px !important;
  min-height: 326px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-trend-head,
html body #dashboard .dashboard-line-chart-wrap > .dashboard-margin-filter-row {
  align-content: start !important;
  grid-row: 1 !important;
  margin: 0 !important;
  min-height: 42px !important;
  padding: 0 !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-chart {
  align-self: stretch !important;
  flex: none !important;
  grid-row: 2 !important;
  height: 100% !important;
  min-height: 166px !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-months {
  flex: none !important;
  grid-row: 3 !important;
  height: 24px !important;
  margin: 0 !important;
  min-height: 24px !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
  flex: none !important;
  grid-row: 4 !important;
  height: 22px !important;
  margin: 0 !important;
  min-height: 22px !important;
  padding-top: 4px !important;
}
html body #dashboard .dashboard-line-chart-wrap > .dashboard-line-legend {
  flex: none !important;
  grid-row: 5 !important;
  height: 76px !important;
  max-height: 76px !important;
  min-height: 76px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend.is-empty,
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar.is-empty {
  display: block !important;
  visibility: hidden !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend.is-empty {
  height: 76px !important;
  max-height: 76px !important;
  min-height: 76px !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-line-legend-bar.is-empty {
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
}
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart-wrap,
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap {
  display: flex !important;
  justify-content: center !important;
  min-height: 142px !important;
}
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-line-chart,
html body #dashboard .dashboard-lower-grid:not(.audit-collapsed) .dashboard-margin-chart-wrap .dashboard-line-chart {
  flex: 0 0 86px !important;
  height: 86px !important;
  min-height: 86px !important;
}

/* Wide dashboard chart safety v3: final parity override anchored to the last
   chart block so wide history/margin cards always keep a visible legend. */
@media (min-width: 1100px) {
  html body #dashboard .dashboard-catalog-panel #dashboardCatalogMount {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap,
  html body #dashboard .dashboard-catalog-panel .dashboard-margin-chart-wrap {
    display: grid !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    grid-template-rows: 28px 178px 24px 20px 70px !important;
    height: 346px !important;
    min-height: 346px !important;
    max-height: 346px !important;
    overflow: hidden !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-trend-head,
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-margin-filter-row {
    grid-row: 1 !important;
    min-height: 28px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-chart {
    display: block !important;
    flex: none !important;
    grid-row: 2 !important;
    height: 178px !important;
    min-height: 178px !important;
    max-height: 178px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-months {
    display: block !important;
    grid-row: 3 !important;
    height: 24px !important;
    min-height: 24px !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
    display: flex !important;
    grid-row: 4 !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding-top: 2px !important;
    visibility: visible !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend {
    display: grid !important;
    grid-row: 5 !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
    padding-top: 4px !important;
    visibility: visible !important;
  }
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend.is-empty,
  html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar.is-empty {
    display: block !important;
    visibility: hidden !important;
  }
}

/* Legend rescue v4: override the compact lower-grid display:none rule without
   relying on media queries. */
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap {
  display: grid !important;
  gap: 6px !important;
  grid-template-rows: 28px 178px 24px 20px 70px !important;
  height: 346px !important;
  min-height: 346px !important;
  max-height: 346px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-chart {
  display: block !important;
  grid-row: 2 !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: 178px !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-months {
  display: block !important;
  grid-row: 3 !important;
  height: 24px !important;
  min-height: 24px !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar {
  display: flex !important;
  grid-row: 4 !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding-top: 2px !important;
  visibility: visible !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend {
  display: grid !important;
  grid-row: 5 !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  overflow: hidden !important;
  padding-top: 4px !important;
  visibility: visible !important;
}
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend.is-empty,
html body #dashboard .dashboard-catalog-panel .dashboard-line-chart-wrap > .dashboard-line-legend-bar.is-empty {
  display: block !important;
  visibility: hidden !important;
}

/* ============================================================
   Dashboard v6 — Fullsize "Details" overlay: interactive view/dim
   switcher + enlarged Bestand (Donut) / Entwicklung (Trend) / Drilldown.
   The overlay lives inside #dashboard so the base catalog styles apply;
   here we only scale things up and style the new chips.
   ============================================================ */

/* View (Bestand/Entwicklung/Marge) + dimension switcher in the overlay head */
body #dashboard .dashboard-chart-detail-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-self: center !important;
  gap: 8px 16px !important;
  margin: 0 14px 0 auto !important;
}
/* Dimensions-Tabs als flache Underline-Tabs; die Ansicht (Bestand/Entwicklung/
   Marge) nutzt den Icon-Switcher (.dashboard-catalog-actions, wie in der Kachel). */
body #dashboard .dashboard-chart-detail-dims {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
}
/* Flache Underline-Tabs statt umrandeter Pills — passt zum bestehenden CI. */
body #dashboard .dashboard-detail-chip {
  appearance: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #8A6674 !important;
  border-radius: 0 !important;
  padding: 4px 1px !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color .15s ease, border-color .15s ease !important;
}
body #dashboard .dashboard-detail-chip:hover { color: #1E0C13 !important; }
body #dashboard .dashboard-detail-chip.is-active {
  color: #AD093D !important;
  border-bottom-color: #AD093D !important;
}

/* ---- Bestand donut, enlarged ---- */
/* ---- Bestand: Donut oben, Legende darunter über die volle Breite, damit alle
        (auch lange) Namen voll ausgeschrieben werden können (umbruchfähig). ---- */
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 4px 4px 12px !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-donut-wrap,
body #dashboard .dashboard-chart-detail-mount .dashboard-donut-svg {
  width: 260px !important;
  height: 260px !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-donut-center strong { font-size: 42px !important; }
body #dashboard .dashboard-chart-detail-mount .dashboard-donut-label { font-size: 11px !important; max-width: 130px !important; }
body #dashboard .dashboard-chart-detail-mount .dashboard-donut-sub { font-size: 11px !important; }
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  align-content: start !important;
  align-self: stretch !important;
  width: 100% !important;
  gap: 6px 36px !important;
  max-height: none !important;
  overflow: visible !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-row {
  grid-template-columns: 14px minmax(0, 1fr) auto auto !important;
  gap: 2px 12px !important;
  align-items: start !important;
  padding: 7px 8px !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-name {
  font-size: 13px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-swatch { margin-top: 2px !important; }
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-count,
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-pct { font-size: 13px !important; }

/* ---- Entwicklung UND Marge identisch: Chart fix (380px), Legende fließt darunter
        mit vollen Namen, nichts scrollt. Beide Diagramme exakt gleich positioniert. */
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap > .dashboard-line-chart {
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  grid-row: auto !important;
  flex: 0 0 auto !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap > .dashboard-line-months,
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap > .dashboard-line-legend-bar { flex: 0 0 auto !important; }
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap > .dashboard-line-legend {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  align-content: start !important;
  gap: 6px 36px !important;
  max-height: none !important;
  overflow: visible !important;
  grid-row: auto !important;
  flex: 0 0 auto !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap .dashboard-line-legend-name,
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap .dashboard-line-legend-row span:nth-child(2) {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

/* ---- Drilldown (product list), enlarged ---- */
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-drill {
  height: 100% !important;
  min-height: 0 !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-products {
  max-height: calc(100vh - 340px) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-drill-head h4 { font-size: 24px !important; }

/* Dashboard-Kachel: Dimensions-Umschalter komplett ausblenden — die Auswahl
   der Dimension passiert nur noch in der Fullsize-Detailansicht. Die Kachel
   zeigt die Übersicht (Bestand nach Obergruppe / Total-Verlauf). */
body #dashboard #dashboardCatalogDims { display: none !important; }

/* Detailansicht: cleaner — kein Rand unter dem Drill-Titel. */
body #dashboard .dashboard-chart-detail-mount .dashboard-catalog-drill-head {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* Fullsize-Detail: Ansicht-Icon-Switcher unter dem Titel (stabile Position),
   Dimensions-Tabs oben rechts. */
body #dashboard .dashboard-detail-view-switch { margin-top: 12px !important; align-self: flex-start !important; }
body #dashboard .dashboard-chart-detail-controls { align-self: flex-start !important; margin-top: 4px !important; }

/* ============================================================
   Dashboard-Kachel: Platz besser nutzen (wenige Obergruppen).
   ============================================================ */
/* Bestand-Donut auf der (großen) Kachel deutlich größer + zentriert. */
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-wrap,
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-svg {
  width: 248px !important;
  height: 248px !important;
  max-height: none !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-body {
  grid-template-columns: 248px minmax(0, 1fr) !important;
  gap: 56px !important;
  align-items: center !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-donut-center strong { font-size: 40px !important; }
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-list .dashboard-catalog-row {
  padding: 11px 8px !important;
}
body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-name { font-size: 13px !important; }

/* Entwicklung/Marge-Kachel zeigt nur die Total-Linie → keine Legende, Chart füllt
   die Höhe (Y-Achse + X-Achse bleiben). Gilt nur für die Kachel, nicht das Popup. */
body #dashboard #dashboardCatalogMount .dashboard-line-chart-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}
body #dashboard #dashboardCatalogMount .dashboard-line-chart {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
body #dashboard #dashboardCatalogMount .dashboard-trend-head { flex: 0 0 auto !important; }
body #dashboard #dashboardCatalogMount .dashboard-line-months,
body #dashboard #dashboardCatalogMount .dashboard-line-legend-bar { flex: 0 0 auto !important; }
body #dashboard #dashboardCatalogMount .dashboard-line-legend,
body #dashboard #dashboardCatalogMount .dashboard-line-legend-bar { display: none !important; }

/* Marge-Steuerung (Übersicht/Zustände/Dimension + Dimensions-Tabs) im Popup-Header
   statt im Mount → Chart auf gleicher Höhe wie Entwicklung, kein Scrollen. */
body #dashboard .dashboard-chart-detail-controls .dashboard-detail-margin-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px 16px !important;
  margin: 0 !important;
}

/* Entwicklung hat einen (oft leeren) Trend-Head (Zurück-Button) vor dem Chart,
   Marge nicht → das verschob den Chart. Trend-Head aus dem Fluss nehmen, damit
   beide Charts exakt gleich hoch starten. Der Zurück-Button (nur beim Drilldown)
   schwebt oben links. */
body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap { position: relative !important; }
body #dashboard .dashboard-chart-detail-mount .dashboard-trend-head {
  position: absolute !important;
  top: -4px !important;
  left: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
}

/* Sanfte Flächen-"Hue" unter den Linien-Diagrammen (wie bei den Karten-Sparklines). */
#dashboard .dashboard-line-area {
  opacity: 0.1 !important;
  stroke: none !important;
  pointer-events: none !important;
}
#dashboard .dashboard-line-chart.dim .dashboard-line-area { opacity: 0.05 !important; }

/* Pulsierender Magenta-Dot in der Sidebar bei "Preise", aktiv sobald es offene
   Freigaben / ungelesene Anfragen gibt (auch von anderen Tabs aus sichtbar). */
#appShell button[data-tab="effective"] { position: relative !important; }
.nav-notify-dot {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #D6006D !important;
  box-shadow: 0 0 0 0 rgba(214, 0, 109, 0.55) !important;
  animation: nav-notify-pulse 1.6s ease-out infinite !important;
  pointer-events: none !important;
}
.nav-notify-dot.hidden { display: none !important; }
@keyframes nav-notify-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 0, 109, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(214, 0, 109, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 0, 109, 0); }
}

/* Popup-Header: keine Unterstriche unter den aktiven Tabs (aktiv = nur Farbe). */
body #dashboard .dashboard-chart-detail-head .dashboard-detail-chip,
body #dashboard .dashboard-chart-detail-head .dashboard-margin-mode-switch button,
body #dashboard .dashboard-chart-detail-head .dashboard-margin-dims button {
  border-bottom: 0 !important;
  padding-bottom: 2px !important;
}

/* Final UI polish: search preview readability, fullsize chart fit, borderless X controls. */
html body #dashboard .dashboard-search-suggestions {
  background: #fff !important;
  color: #1E0C13 !important;
  border-color: #E4D4DA !important;
  box-shadow: 0 18px 40px rgba(30, 12, 19, 0.1) !important;
}
html body #dashboard .dashboard-search-option,
html body #dashboard .dashboard-search-option:hover,
html body #dashboard .dashboard-search-option.is-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 10px 18px !important;
  background: #fff !important;
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option:hover {
  background: #F7F5F6 !important;
}
html body #dashboard .dashboard-search-option-main,
html body #dashboard .dashboard-search-option-main strong,
html body #dashboard .dashboard-search-option-prices {
  color: #1E0C13 !important;
}
html body #dashboard .dashboard-search-option-main small,
html body #dashboard .dashboard-search-option-prices b {
  color: #8A6674 !important;
}
html body #dashboard .dashboard-search-option-main {
  min-width: 0 !important;
}
html body #dashboard .dashboard-search-option-main strong,
html body #dashboard .dashboard-search-option-main small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body #dashboard .dashboard-search-option-prices {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

html body #dashboard .dashboard-catalog-panel {
  min-height: 0 !important;
  border: 1px solid #E4D4DA !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-lower-grid.audit-collapsed .dashboard-catalog-panel {
  min-height: 0 !important;
}
html body #dashboard #dashboardCatalogMount {
  min-height: 0 !important;
}
html body #dashboard #dashboardCatalogMount .dashboard-line-chart-wrap {
  min-height: 0 !important;
}

html body .dashboard-chart-detail-overlay {
  padding: 34px 26px 46px !important;
}
html body #dashboard .dashboard-chart-detail-panel {
  position: relative !important;
  width: calc(100vw - 56px) !important;
  max-width: none !important;
  height: calc(100vh - 92px) !important;
  max-height: calc(100vh - 92px) !important;
}
html body .dashboard-chart-detail-head {
  padding: 22px 30px 10px !important;
}
html body #dashboard .dashboard-chart-detail-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
}
html body #dashboard .dashboard-chart-detail-mount {
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 18px !important;
  padding-bottom: 24px !important;
}
html body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html body #dashboard .dashboard-chart-detail-mount .dashboard-line-chart-wrap > .dashboard-line-chart {
  height: auto !important;
  min-height: 220px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
html body #dashboard .dashboard-chart-detail-mount .dashboard-line-months {
  border-bottom: 0 !important;
}
html body #dashboard .dashboard-chart-detail-mount .dashboard-line-legend-bar {
  border-top: 0 !important;
  min-height: 0 !important;
}
html body #dashboard .dashboard-chart-detail-mount .dashboard-line-legend {
  flex: 0 0 132px !important;
  height: 132px !important;
  max-height: 132px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-top: 0 !important;
  padding-bottom: 10px !important;
}
html body #dashboard .dashboard-chart-detail-mount .dashboard-line-legend-row {
  min-height: 24px !important;
}

html body button.modal-x-btn,
html body .toast-close-btn,
html body .price-history-detail-x,
html body #closeAssistantBtn.assistant-close-btn,
html body #closeDashboardDetailBtn,
html body #closeDashboardChartDetailBtn.dashboard-chart-detail-close,
html body #closeMarketPriceDetailBtn,
html body #closeUserAdminBtn,
html body #closeImportResultBtn.close-x-only,
html body [data-margin-context-clear] {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #8A6674 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
}
html body button.modal-x-btn:hover,
html body .toast-close-btn:hover,
html body .price-history-detail-x:hover,
html body #closeAssistantBtn.assistant-close-btn:hover,
html body #closeDashboardDetailBtn:hover,
html body #closeDashboardChartDetailBtn.dashboard-chart-detail-close:hover,
html body #closeMarketPriceDetailBtn:hover,
html body #closeUserAdminBtn:hover,
html body #closeImportResultBtn.close-x-only:hover,
html body [data-margin-context-clear]:hover {
  background: transparent !important;
  color: #AD093D !important;
}

html body #dashboard .dashboard-chart-detail-head .dashboard-dim-switch,
html body #dashboard .dashboard-chart-detail-head .dashboard-margin-mode-switch,
html body #dashboard .dashboard-chart-detail-head .dashboard-margin-dims,
html body #dashboard .dashboard-chart-detail-head .dashboard-chart-detail-dims {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
html body #dashboard .dashboard-chart-detail-head .dashboard-dim-switch::before,
html body #dashboard .dashboard-chart-detail-head .dashboard-dim-switch::after,
html body #dashboard .dashboard-chart-detail-head .dashboard-margin-mode-switch::before,
html body #dashboard .dashboard-chart-detail-head .dashboard-margin-mode-switch::after,
html body #dashboard .dashboard-chart-detail-head .dashboard-margin-dims::before,
html body #dashboard .dashboard-chart-detail-head .dashboard-margin-dims::after,
html body #dashboard .dashboard-chart-detail-head .dashboard-chart-detail-dims::before,
html body #dashboard .dashboard-chart-detail-head .dashboard-chart-detail-dims::after {
  content: none !important;
  display: none !important;
}

/* Dashboard card parity: history and margin charts use the same axis slot and
   fill the tall catalog card, but stay read-only in the compact dashboard card. */
html body #dashboard .dashboard-catalog-panel {
  display: flex !important;
  flex-direction: column !important;
}
html body #dashboard #dashboardCatalogMount {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html body #dashboard #dashboardCatalogMount > .dashboard-line-chart-wrap,
html body #dashboard #dashboardCatalogMount > .dashboard-margin-chart-wrap {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html body #dashboard #dashboardCatalogMount > .dashboard-line-chart-wrap > .dashboard-line-chart,
html body #dashboard #dashboardCatalogMount > .dashboard-margin-chart-wrap > .dashboard-line-chart {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
html body #dashboard #dashboardCatalogMount > .dashboard-line-chart-wrap > .dashboard-line-months,
html body #dashboard #dashboardCatalogMount > .dashboard-margin-chart-wrap > .dashboard-line-months {
  flex: 0 0 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
}
html body #dashboard #dashboardCatalogMount .dashboard-line-months,
html body #dashboard #dashboardCatalogMount .dashboard-trend-pt,
html body #dashboard #dashboardCatalogMount circle[fill="transparent"] {
  cursor: default !important;
}

/* --- Per-user collapsible price columns ------------------------------------ */
/* A small grey "–" sits right next to the (bold) sort icon to collapse a column
   to a thin strip; a grey "+" then replaces the header (hover shows the column
   title). The collapse itself is driven by #priceColCollapseStyle (JS-generated);
   these rules style the controls. Grey keeps them visually distinct from data. */
body #appShell #effective #pricesTable .col-collapse-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #9aa0a6 !important;
  opacity: 0.85 !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}
body #appShell #effective #pricesTable .col-collapse-btn:hover {
  color: #5f6368 !important;
  opacity: 1 !important;
}
/* "+" shown only when the column is collapsed (via #priceColCollapseStyle). */
body #appShell #effective #pricesTable .col-expand-btn {
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #9aa0a6 !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 3 !important;
}
body #appShell #effective #pricesTable .col-expand-btn:hover {
  color: #5f6368 !important;
}
.price-column-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 240px;
  padding: 5px 7px;
  border-radius: 5px;
  background: #2B171E;
  box-shadow: 0 3px 10px rgba(43, 23, 30, 0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-2px);
  transition: opacity 60ms ease, transform 60ms ease, visibility 0s linear 60ms;
}
.price-column-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
/* "Show all collapsed columns" control — lives in the header select cell (left of
   SKU, in line with the checkboxes), just below the select-all checkbox. It is
   absolutely positioned and vertically centred so it tracks the title height and
   does NOT jump when toggling "Erweiterte Preise" (which changes the header height).
   Same grey style as the column "+"/"–", a bit larger, no border. The select cell
   is 38px wide with font-size:0/color:transparent, so the button forces its own. */
body #appShell #effective #pricesTable thead > tr:first-child > th.col-select {
  position: relative !important;
  vertical-align: top !important; /* push the select-all checkbox up so the "+" can sit at title height */
}
body #appShell #effective #pricesTable th.col-select .expand-all-columns-btn {
  display: none; /* toggled to block by JS when something is collapsed */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important; /* vertically centred = same height as the column titles */
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  text-align: center !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #9aa0a6 !important;
  cursor: pointer !important;
  overflow: visible !important;
  z-index: 4 !important;
}
body #appShell #effective #pricesTable th.col-select .expand-all-columns-btn:hover {
  color: #5f6368 !important;
}

/* Empty width absorber for heavily collapsed tables. It stays out of the table
   unless the current view contains collapsed columns; JS then lets it consume
   only the unused width so no visible data column is stretched. */
body #appShell #effective #pricesTable .col-collapse-spacer {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Right-edge polish: the prices wrap's classic vertical scrollbar reserved a
   ~10px strip in which table content can never paint, so row lines stopped short
   of the card edge and the header/filter backgrounds didn't continue. Give the
   VERTICAL scrollbar zero width (the table now truly reaches the right edge) and
   render a floating overlay thumb via JS instead (markPricesVerticalScrollThumb),
   matching the app's auto-hide thumb-only design. The horizontal scrollbar keeps
   its 10px height. These selectors must match the `html body #appShell …` custom
   scrollbar block above and come later in the file to win the cascade. */
html body #appShell #effective .prices-table-wrap,
html body #appShell #effective.active .prices-table-wrap {
  background: #fff !important;
  /* The standard scrollbar-width property (set to `thin` !important by both the
     `#effective` and the higher-specificity `#effective.active` custom-scrollbar
     blocks above) makes Chrome ignore all ::-webkit-scrollbar styling, so the
     only way to free the reserved strip is `none`: scrollbars take no layout
     space at all. Both axes get floating JS thumbs instead. */
  scrollbar-width: none !important;
}
/* Floating scroll indicators (overlay, take no layout space). z-index must beat
   the sticky action column (z-index 900) so the vertical thumb isn't painted over
   at the right edge. */
#effective .prices-vscroll-thumb,
#effective .prices-hscroll-thumb {
  position: absolute;
  border-radius: 999px;
  background: rgba(173, 9, 61, 0.58);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  z-index: 1000;
}

/* Pin the action column to a constant width so the (centred) action buttons sit
   in the same position whether or not "Erweiterte Preise" is on. Without this,
   table-layout:fixed lets the column flex (≈168px vs ≈190px), shifting the
   buttons. Keep the whole rail at 170px so its left divider moves together with
   the controls instead of translating only the controls inside a wider cell. */
body #appShell #effective #pricesTable th.col-action,
body #appShell #effective #pricesTable td.col-action,
body #appShell #effective.active #pricesTable th.col-action,
body #appShell #effective.active #pricesTable td.col-action {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  box-sizing: border-box !important;
  border-left: 1px solid #E4D4DA !important;
}
/* Anchor the buttons to a fixed-size box at the scrollport's right edge. The
   table uses width:100% in the regular view and max-content in the extended
   view; centring against the cell alone can otherwise introduce a sub-pixel
   shift when the browser distributes the remaining table width. */
html body #appShell #effective #pricesTable td.action-cell .action-cell-inner.action-cell-inner-icons {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  box-sizing: border-box !important;
  margin: 0 0 0 auto !important;
  padding: 0 8px !important;
  justify-content: center !important;
  transform: none !important;
}
#effective .prices-vscroll-thumb {
  right: 2px;
  width: 6px;
}
#effective .prices-hscroll-thumb {
  height: 6px;
}
#effective .prices-vscroll-thumb.visible,
#effective .prices-hscroll-thumb.visible {
  opacity: 1;
}

/* The dashboard chart should fill the lower card corners instead of ending in
   a rounded white cut-out at the bottom edge. Keep the established top radius. */
html body #dashboard .dashboard-catalog-panel {
  border-radius: 8px 8px 0 0 !important;
}

/* User presence indicator in admin user list */
.user-presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}
.user-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.user-presence--online .user-presence-dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.25);
}
.user-presence--offline .user-presence-dot {
  background: #d1d5db;
}
.user-presence--online .user-presence-label {
  color: #16a34a;
}
.user-presence--offline .user-presence-label {
  color: #9ca3af;
  font-weight: 400;
}

/* Export Spalten-Map + Marken-Sonderfälle (im Einstellungen-Tab) */
#imports .export-colmap-editor,
#imports .brand-overrides-editor { width: 100%; }
#imports .export-colmap-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto;
  gap: 10px;
  padding: 2px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A6674;
}
#imports .export-colmap-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
}
#imports .export-colmap-name,
#imports .export-colmap-source,
#imports .bo-match,
#imports .bo-brand {
  padding: 7px 10px;
  border: 1px solid #E4D4DA;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
}
#imports .export-colmap-name:focus,
#imports .export-colmap-source:focus,
#imports .bo-match:focus,
#imports .bo-brand:focus {
  outline: none;
  border-color: #AD093D;
  box-shadow: 0 0 0 2px rgba(173,9,61,.12);
}
#imports .export-colmap-order { display: inline-flex; gap: 4px; }
#imports .export-colmap-del { color: #AD093D; }

#imports .brand-override-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}
#imports .brand-override-new { margin-top: 10px; border-top: 1px solid #E4D4DA; padding-top: 12px; }
#imports .bo-arrow { color: #B79DA8; }