@import url('/styles/base.css');
@import url('/styles/components.css');
@import url('/styles/pages.css?v=material-research-live-recovery-20260728-v1');

@import url('/styles/responsive.css?v=supplier-password-setup-login-20260603');

body.supplier-page.is-loading [data-supplier-dynamic] {
  display: none !important;
}

body.page-email-signatures .email-signatures-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.page-email-signatures .email-signatures-head h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

body.page-email-signatures .email-signatures-actions,
body.page-email-signatures .email-signatures-tabs,
body.page-email-signatures .email-signatures-preview-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.page-email-signatures .email-signatures-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
}

body.page-email-signatures .email-signatures-tabs {
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

body.page-email-signatures .email-signatures-tabs button,
body.page-email-signatures .email-signatures-preview-tabs button {
  border: 0;
  background: transparent;
  color: #4b5563;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

body.page-email-signatures .email-signatures-preview-tabs button {
  padding: 6px 8px;
  font-size: 13px;
}

body.page-email-signatures .email-signatures-tabs button.is-active,
body.page-email-signatures .email-signatures-preview-tabs button.is-active {
  color: #111827;
  border-bottom-color: #111827;
  font-weight: 700;
}

body.page-email-signatures .email-signatures-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 16px;
  align-items: start;
}

body.page-email-signatures .email-signatures-editor,
body.page-email-signatures .email-signatures-preview {
  display: grid;
  gap: 16px;
}

body.page-email-signatures .email-signatures-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-email-signatures .email-signatures-code {
  width: 100%;
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
}

body.page-email-signatures .email-signatures-company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-email-signatures .email-signatures-company-grid label,
body.page-email-signatures .email-signatures-dialog label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #374151;
}

body.page-email-signatures .email-signatures-wide {
  grid-column: 1 / -1;
}

body.page-email-signatures .email-signatures-placeholders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-email-signatures .email-signatures-placeholder {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  cursor: pointer;
}

body.page-email-signatures .email-signatures-preview-frame-wrap {
  background: #eef2f7;
  padding: 18px;
  border-radius: 8px;
  overflow: auto;
}

body.page-email-signatures .email-signatures-preview-frame-wrap.is-mobile {
  display: flex;
  justify-content: center;
}

body.page-email-signatures .email-signatures-preview-frame-wrap iframe {
  width: 100%;
  height: 620px;
  border: 1px solid #d1d5db;
  background: #fff;
}

body.page-email-signatures .email-signatures-preview-frame-wrap.is-mobile iframe {
  width: 390px;
  max-width: 100%;
}

body.page-email-signatures .email-signatures-text-preview {
  min-height: 420px;
  white-space: pre-wrap;
  background: #111827;
  color: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  overflow: auto;
}

body.page-email-signatures .email-signatures-validation {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

body.page-email-signatures .email-signatures-validation p {
  margin: 0 0 6px;
}

body.page-email-signatures .email-signatures-dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  width: min(720px, calc(100vw - 32px));
}

body.page-email-signatures .email-signatures-dialog::backdrop {
  background: rgba(17, 24, 39, 0.42);
}

body.page-email-signatures .email-signatures-dialog-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

body.page-email-signatures .email-signatures-dialog-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-email-signatures .email-signatures-history-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
}

body.page-email-signatures .email-signatures-history-list article {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
}

@media (max-width: 980px) {
  body.page-email-signatures .email-signatures-head,
  body.page-email-signatures .email-signatures-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.page-email-signatures .email-signatures-company-grid,
  body.page-email-signatures .email-signatures-history-list article {
    grid-template-columns: 1fr;
  }
}

.project-sms-labeling-customer-data-card {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  margin: 12px 0;
  display: grid;
  gap: 12px;
}

.project-sms-labeling-customer-data-card header,
.project-sms-labeling-submission-card header,
.customer-labeling-upload-submission header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.project-sms-labeling-customer-data-card h4,
.customer-labeling-upload-card h2 {
  margin: 0;
}

.project-sms-labeling-customer-data-card p {
  margin: 4px 0 0;
}

.project-sms-labeling-customer-data-note {
  color: #344054;
  font-weight: 600;
}

.project-sms-labeling-customer-data-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-sms-labeling-customer-data-progress li {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  color: #667085;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
}

.project-sms-labeling-customer-data-progress span {
  align-items: center;
  background: #eef2f6;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 24px;
  font-size: 12px;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.project-sms-labeling-customer-data-progress strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-sms-labeling-customer-data-progress li.is-active {
  border-color: #f2c94c;
  color: #92400e;
}

.project-sms-labeling-customer-data-progress li.is-active span {
  background: #fef3c7;
}

.project-sms-labeling-customer-data-progress li.is-waiting {
  border-color: #d7dee8;
  color: #475467;
}

.project-sms-labeling-customer-data-progress li.is-waiting span {
  background: #eef2f6;
}

.project-sms-labeling-customer-data-progress li.is-done {
  border-color: #86d39b;
  color: #166534;
}

.project-sms-labeling-customer-data-progress li.is-done span {
  background: #dcfce7;
}

.project-sms-labeling-customer-data-card dl,
.project-sms-labeling-customer-data-dialog-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
}

.project-sms-labeling-customer-data-card dt,
.project-sms-labeling-customer-data-dialog-meta dt {
  color: #667085;
  font-size: 12px;
}

.project-sms-labeling-customer-data-card dd,
.project-sms-labeling-customer-data-dialog-meta dd {
  margin: 0;
  font-weight: 600;
}

.project-sms-labeling-customer-data-actions,
.project-sms-labeling-submission-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-sms-labeling-position-choice {
  grid-column: 1 / -1;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.project-sms-labeling-position-choice legend {
  padding: 0 4px;
  font-weight: 700;
}

.project-sms-labeling-position-choice label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.project-sms-labeling-submission-card {
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.project-sms-labeling-submission-card header > div,
.customer-labeling-upload-submission header > div {
  display: grid;
  gap: 4px;
  margin-top: 0;
  min-width: 0;
}

.project-sms-labeling-submission-card .danger,
.customer-labeling-upload-submission .danger {
  border-color: #fecaca;
  color: #b42318;
}

.project-sms-labeling-submission-card .danger:hover,
.customer-labeling-upload-submission .danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.project-sms-labeling-customer-data-modal {
  width: min(920px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}

.project-sms-labeling-customer-data-modal::backdrop {
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(6px);
}

.project-sms-labeling-customer-data-modal__content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  background: #fff;
}

.project-sms-labeling-customer-data-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 30px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
}

.project-sms-labeling-customer-data-modal__title-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.project-sms-labeling-customer-data-modal__icon,
.project-sms-labeling-customer-data-modal__submission-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #17a76b;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 14px 28px rgba(23, 167, 107, .24);
}

.project-sms-labeling-customer-data-modal__header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
}

.project-sms-labeling-customer-data-modal__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: #168250;
  font-size: 14px;
  font-weight: 800;
}

.project-sms-labeling-customer-data-modal__status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #16a86c;
  border-radius: 999px;
  font-size: 12px;
}

.project-sms-labeling-customer-data-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid #dbe5df;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.project-sms-labeling-customer-data-modal__close:hover {
  border-color: #bddccb;
  background: #f2fbf6;
}

.project-sms-labeling-customer-data-modal__body {
  display: grid;
  gap: 24px;
  min-height: 0;
  overflow: auto;
  padding: 28px 30px;
  background: #fff;
}

.project-sms-labeling-customer-data-modal__meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, .95fr);
  gap: 14px;
  margin: 0;
}

.project-sms-labeling-customer-data-modal__meta-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.project-sms-labeling-customer-data-modal__meta-card--full {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.project-sms-labeling-customer-data-modal__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #087a4a;
  font-size: 19px;
}

.project-sms-labeling-customer-data-modal__meta-label {
  display: block;
  margin: 0 0 7px;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.project-sms-labeling-customer-data-modal__meta-card strong,
.project-sms-labeling-customer-data-modal__link,
.project-sms-labeling-customer-data-modal__template-link {
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.project-sms-labeling-customer-data-modal__link,
.project-sms-labeling-customer-data-modal__template-link {
  color: #087a4a;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-sms-labeling-customer-data-modal__link:hover,
.project-sms-labeling-customer-data-modal__template-link:hover {
  text-decoration: underline;
}

.project-sms-labeling-customer-data-modal__meta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-sms-labeling-customer-data-modal__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
}

.project-sms-labeling-customer-data-modal__icon-button:hover {
  border-color: #bddccb;
  background: #f2fbf6;
  color: #087a4a;
}

.project-sms-labeling-customer-data-modal__note {
  border: 1px solid #ccebd9;
  border-radius: 14px;
  padding: 14px 16px;
  background: #f3fbf6;
}

.project-sms-labeling-customer-data-modal__submissions {
  display: grid;
  gap: 16px;
}

.project-sms-labeling-customer-data-modal__submissions > header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-sms-labeling-customer-data-modal__submissions h4 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.project-sms-labeling-customer-data-modal__submissions > header span {
  border-radius: 999px;
  background: #e8f8ef;
  color: #087a4a;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

.project-sms-labeling-customer-data-modal__submission-list {
  display: grid;
  gap: 14px;
}

.project-sms-labeling-customer-data-modal__submission-card {
  gap: 16px;
  border-color: #bfe4d0;
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbfefc 100%);
}

.project-sms-labeling-customer-data-modal__submission-card header {
  align-items: flex-start;
}

.project-sms-labeling-customer-data-modal__submission-card .project-sms-labeling-customer-data-modal__submission-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.project-sms-labeling-customer-data-modal__submission-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #e2f6eb;
  color: #087a4a;
  box-shadow: none;
  font-size: 20px;
}

.project-sms-labeling-customer-data-modal__submission-card strong {
  color: #0f172a;
  font-size: 16px;
}

.project-sms-labeling-customer-data-modal__submission-card p {
  margin: 0;
}

.project-sms-labeling-customer-data-modal__delete {
  border-color: #f8b4b4;
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
  color: #b42318;
  font-weight: 800;
}

.project-sms-labeling-customer-data-modal__submission-description {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 74px;
  color: #475569;
  font-size: 14px;
}

.project-sms-labeling-customer-data-modal__files {
  display: grid;
  gap: 10px;
  padding-left: 74px;
}

.project-sms-labeling-customer-data-modal__file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: #0f172a;
  text-decoration: none;
}

.project-sms-labeling-customer-data-modal__file-row:hover {
  border-color: #bddccb;
  background: #f8fdfb;
}

.project-sms-labeling-customer-data-modal__file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e8f8ef;
  color: #087a4a;
  font-size: 10px;
  font-weight: 900;
}

.project-sms-labeling-customer-data-modal__file-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-sms-labeling-customer-data-modal__file-text strong,
.project-sms-labeling-customer-data-modal__file-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sms-labeling-customer-data-modal__file-text small {
  color: #64748b;
  font-size: 12px;
}

.project-sms-labeling-customer-data-modal__file-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
}

.project-sms-labeling-customer-data-modal__empty,
.project-sms-labeling-customer-data-modal__pending-note {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.project-sms-labeling-customer-data-modal__empty {
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 18px;
  background: #f8fafc;
}

.project-sms-labeling-customer-data-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 20px 30px;
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .96);
}

.project-sms-labeling-customer-data-modal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border-radius: 10px;
  padding: 0 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 850;
}

.project-sms-labeling-customer-data-modal__button--secondary {
  border: 1px solid #dbe5df;
  background: #fff;
  color: #0f172a;
}

.project-sms-labeling-customer-data-modal__button--secondary:hover {
  border-color: #bddccb;
  background: #f8fafc;
}

.project-sms-labeling-customer-data-modal__button--primary {
  border: 1px solid #12965f;
  background: linear-gradient(180deg, #21b874 0%, #12965f 100%);
  color: #fff;
  box-shadow: 0 14px 24px rgba(18, 150, 95, .22);
}

.project-sms-labeling-customer-data-modal__button--primary:hover {
  background: linear-gradient(180deg, #1aa96b 0%, #0f8554 100%);
}

.project-sms-labeling-customer-data-modal__button:disabled,
.project-sms-labeling-customer-data-modal__icon-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 720px) {
  .project-sms-labeling-customer-data-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }

  .project-sms-labeling-customer-data-modal__content {
    max-height: calc(100vh - 24px);
  }

  .project-sms-labeling-customer-data-modal__header,
  .project-sms-labeling-customer-data-modal__body,
  .project-sms-labeling-customer-data-modal__footer {
    padding-inline: 18px;
  }

  .project-sms-labeling-customer-data-modal__header {
    align-items: flex-start;
  }

  .project-sms-labeling-customer-data-modal__meta-grid,
  .project-sms-labeling-customer-data-modal__meta-card--full {
    grid-template-columns: 1fr;
  }

  .project-sms-labeling-customer-data-modal__meta-card--full {
    grid-column: auto;
  }

  .project-sms-labeling-customer-data-modal__meta-actions {
    justify-content: flex-end;
  }

  .project-sms-labeling-customer-data-modal__submission-description,
  .project-sms-labeling-customer-data-modal__files {
    padding-left: 0;
  }

  .project-sms-labeling-customer-data-modal__footer {
    flex-direction: column-reverse;
  }

  .project-sms-labeling-customer-data-modal__button {
    width: 100%;
  }
}

.customer-labeling-upload-page {
  margin: 0;
  background: #fff;
  color: #0f172a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.customer-labeling-upload-shell {
  width: min(1520px, calc(100% - 56px));
  margin: 0 auto;
  padding: 0 0 48px;
}

.customer-labeling-upload-header {
  margin-inline: calc((100vw - 100%) / -2);
  padding-inline: calc((100vw - 100%) / 2);
  background: rgba(255, 255, 255, .96);
}

.customer-labeling-upload-topbar {
  min-height: 64px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.customer-labeling-upload-breadcrumb,
.customer-labeling-upload-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.customer-labeling-upload-breadcrumb {
  min-width: 0;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  background: #fff;
  padding: 8px 12px;
  color: #334155;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .04);
}

.customer-labeling-upload-breadcrumb-icon {
  color: #0b7a4b;
}

.customer-labeling-upload-brand {
  color: #111827;
  font-weight: 800;
}

.customer-labeling-upload-brand img {
  width: 100%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

.customer-labeling-upload-hero {
  padding: 0 0 20px;
}

.customer-labeling-upload-hero h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #0f172a;
}

.customer-labeling-upload-hero p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 18px;
}

.customer-labeling-upload-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.customer-labeling-upload-info {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid #cfe4dc;
  padding: 22px;
}

.customer-labeling-upload-info-icon,
.customer-labeling-upload-form header > span,
.customer-labeling-upload-submissions > header > span,
.customer-labeling-upload-completion header > span,
.customer-labeling-upload-template-download header > span,
.customer-labeling-upload-dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #eefaf4;
  color: #0b7a4b;
  font-weight: 800;
}

.customer-labeling-upload-info strong {
  display: block;
  margin-top: 2px;
  color: #111827;
  font-size: 16px;
}

.customer-labeling-upload-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  margin-top: 16px;
}

.customer-labeling-upload-checklist span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #cfe9dc;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 650;
}

.customer-labeling-upload-info svg,
.customer-labeling-upload-checklist svg,
.customer-labeling-upload-form svg,
.customer-labeling-upload-submissions svg,
.customer-labeling-upload-completion svg,
.customer-labeling-upload-template-download svg,
.customer-labeling-upload-position svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.customer-labeling-upload-info p {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  color: #334155;
  font-weight: 650;
}

.customer-labeling-upload-project-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
}

.customer-labeling-upload-project-meta[hidden],
.customer-labeling-upload-form-error[hidden] {
  display: none;
}

.customer-labeling-upload-meta-card {
  min-width: 190px;
  border: 1px solid #dbe5df;
  background: #fff;
  padding: 13px 16px;
}

.customer-labeling-upload-meta-card span,
.customer-labeling-upload-position-meta small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.customer-labeling-upload-meta-card strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 16px;
}

.customer-labeling-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.08fr) minmax(380px, .92fr);
  gap: 24px;
  align-items: start;
}

.customer-labeling-upload-section h2,
.customer-labeling-upload-form h2,
.customer-labeling-upload-submissions h2,
.customer-labeling-upload-completion h2,
.customer-labeling-upload-template-download h2 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0;
}

.customer-labeling-upload-section {
  display: grid;
  gap: 18px;
}

.customer-labeling-upload-positions {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.customer-labeling-upload-position {
  min-height: 104px;
  border: 1px solid #dbe5df;
  background: #fff;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.customer-labeling-upload-position-image {
  border-radius: 12px;
  background: #f8faf9;
  border: 1px solid #edf2ef;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.customer-labeling-upload-position-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.customer-labeling-upload-position-image--empty {
  color: #94a3b8;
}

.customer-labeling-upload-position-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.customer-labeling-upload-position-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.customer-labeling-upload-position-title span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #eefaf4;
  color: #0b7a4b;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
}

.customer-labeling-upload-position-title strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-labeling-upload-position-meta {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(300px, 1.6fr);
  gap: 8px 14px;
  margin-top: 12px;
}

.customer-labeling-upload-position-meta span {
  min-width: 0;
  border-left: 1px solid #e5ece8;
  padding-left: 14px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-labeling-upload-position-meta span:first-child {
  border-left: 0;
  padding-left: 0;
}

.customer-labeling-upload-position-meta span:nth-child(2) {
  grid-column: 1;
  border-left: 0;
  padding-left: 0;
}

.customer-labeling-upload-position-sizes {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.customer-labeling-upload-muted {
  color: #94a3b8;
  font-weight: 550;
}

.customer-labeling-upload-position-sizes {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.customer-labeling-upload-size-table-wrap {
  width: 100%;
  margin-top: 5px;
  overflow-x: auto;
}

.customer-labeling-upload-size-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
}

.customer-labeling-upload-size-table th,
.customer-labeling-upload-size-table td {
  padding: 8px 10px;
  text-align: center;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.customer-labeling-upload-size-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.customer-labeling-upload-size-table td {
  color: #0f172a;
  font-weight: 700;
}

.customer-labeling-upload-size-table tr:last-child td,
.customer-labeling-upload-size-table tr:last-child th {
  border-bottom: 0;
}

.customer-labeling-upload-size-table th:last-child,
.customer-labeling-upload-size-table td:last-child {
  border-right: 0;
}

.customer-labeling-upload-size-table .is-total {
  background: #ecfdf5;
  color: #047857;
  font-weight: 800;
}

.customer-labeling-upload-form,
.customer-labeling-upload-completion {
  border: 1px solid #dbe5df;
  background: #fff;
  padding: 24px;
  display: grid;
  gap: 16px;
}

.customer-labeling-upload-side {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 18px;
}

.customer-labeling-upload-needed,
.customer-labeling-upload-templates {
  margin-top: 8px;
}

.customer-labeling-upload-needed-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.customer-labeling-upload-needed-grid article {
  border: 1px solid #dbe5df;
  background: #fff;
  padding: 14px;
  min-height: 94px;
}

.customer-labeling-upload-needed-grid strong,
.customer-labeling-upload-needed-grid span {
  display: block;
}

.customer-labeling-upload-needed-grid strong {
  color: #0f172a;
  font-size: 14px;
}

.customer-labeling-upload-needed-grid span {
  margin-top: 7px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.customer-labeling-upload-template-list {
  display: grid;
  gap: 14px;
}

.customer-labeling-upload-template-card,
.customer-labeling-upload-template-download {
  border: 1px solid #dbe5df;
  background: #fff;
  padding: 18px;
}

.customer-labeling-upload-template-card > header,
.customer-labeling-upload-template-download header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.customer-labeling-upload-template-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.customer-labeling-upload-template-card p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.customer-labeling-upload-template-card > header > span {
  flex: 0 0 auto;
  max-width: 360px;
  border: 1px solid #cfe9dc;
  background: #eefaf4;
  color: #0b6f43;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 750;
}

.customer-labeling-template-preview {
  width: min(100%, 640px);
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.customer-labeling-template-preview__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.customer-labeling-template-preview figcaption {
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.customer-labeling-upload-template-download {
  display: grid;
  gap: 14px;
}

.customer-labeling-upload-template-download p,
.customer-labeling-upload-template-download small {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.customer-labeling-upload-template-download a {
  min-height: 46px;
  border-radius: 0px;
  background: #0f172a;
  color: #fff;
  padding: 11px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 850;
}

.customer-labeling-upload-form header,
.customer-labeling-upload-completion header,
.customer-labeling-upload-submissions > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.customer-labeling-upload-form label,
.customer-labeling-upload-completion label {
  display: grid;
  gap: 6px;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.customer-labeling-upload-form input,
.customer-labeling-upload-form textarea,
.customer-labeling-upload-completion input,
.customer-labeling-upload-completion textarea {
  width: 100%;
  border: 1px solid #cfd8d3;
  border-radius: 0px;
  padding: 12px 13px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-weight: 500;
  box-sizing: border-box;
}

.customer-labeling-upload-form textarea,
.customer-labeling-upload-completion textarea {
  resize: vertical;
  min-height: 96px;
}

.customer-labeling-upload-file-label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.customer-labeling-upload-dropzone {
  min-height: 174px;
  border: 1.5px dashed #b8c6bf;
  border-radius: 0px;
  background: #fbfcfb;
  color: #0f172a;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.customer-labeling-upload-dropzone.is-dragover {
  border-color: #0f8f5f;
  background: #eefaf4;
  transform: translateY(-1px);
}

.customer-labeling-upload-dropzone strong {
  font-size: 15px;
}

.customer-labeling-upload-dropzone small {
  color: #64748b;
  font-weight: 600;
}

.customer-labeling-upload-form button,
.customer-labeling-upload-completion button {
  border: 0;
  border-radius: 0px;
  background: #0b6f43;
  color: #fff;
  min-height: 48px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.customer-labeling-upload-form button:disabled,
.customer-labeling-upload-completion button:disabled {
  opacity: .55;
  cursor: wait;
}

.customer-labeling-upload-completion p {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

.customer-labeling-upload-completion dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.customer-labeling-upload-completion dl > div {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
  gap: 10px;
}

.customer-labeling-upload-completion dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.customer-labeling-upload-completion dd {
  margin: 0;
  color: #0f172a;
  font-weight: 750;
}

.customer-labeling-upload-form-error,
.customer-labeling-upload-error {
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff7f7;
  color: #991b1b;
  padding: 12px 14px;
  font-weight: 700;
}

.customer-labeling-upload-success {
  border: 1px solid #b7e4c7;
  background: #effaf3;
  border-radius: 14px;
  color: #0b6f43;
  padding: 14px 16px;
}

.customer-labeling-upload-submissions {
  border: 1px solid #dbe5df;
  border-radius: 0px;
  background: #fff;
  padding: 22px;
  display: grid;
  gap: 14px;
}

.customer-labeling-upload-submission {
  border: 1px solid #e5ece8;
  border-radius: 14px;
  padding: 14px;
}

.customer-labeling-upload-submission p {
  margin: 8px 0 0;
  color: #64748b;
}

.customer-labeling-upload-submission div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.customer-labeling-upload-submission a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe5df;
  border-radius: 999px;
  color: #0b7a4b;
  padding: 7px 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
}

.customer-labeling-upload-submission a small {
  color: #64748b;
}

.customer-labeling-upload-empty {
  border: 1px solid #dbe5df;
  border-radius: 0px;
  background: #fbfcfb;
  color: #64748b;
  padding: 18px;
  font-weight: 650;
}

@media (max-width: 1120px) {
  .customer-labeling-upload-grid {
    grid-template-columns: 1fr;
  }

  .customer-labeling-upload-side {
    position: static;
  }

  .customer-labeling-upload-needed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .customer-labeling-upload-shell {
    width: min(100% - 24px, 1520px);
    padding-bottom: 28px;
  }

  .customer-labeling-upload-topbar,
  .customer-labeling-upload-position,
  .customer-labeling-upload-position-title {
    align-items: flex-start;
  }

  .customer-labeling-upload-topbar {
    min-height: 58px;
  }

  .customer-labeling-upload-brand span {
    display: none;
  }

  .customer-labeling-upload-breadcrumb {
    max-width: calc(100vw - 92px);
    overflow: hidden;
    white-space: nowrap;
  }

  .customer-labeling-upload-hero h1 {
    font-size: 32px;
  }

  .customer-labeling-upload-hero p {
    font-size: 16px;
  }

  .customer-labeling-upload-meta-card {
    min-width: min(100%, 220px);
    flex: 1 1 150px;
  }

  .customer-labeling-upload-info {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .customer-labeling-upload-position {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }

  .customer-labeling-upload-position-image {
    height: 76px;
  }

  .customer-labeling-upload-position-title {
    flex-direction: column;
    gap: 6px;
  }

  .customer-labeling-upload-position-title strong {
    white-space: normal;
  }

  .customer-labeling-upload-position-meta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .customer-labeling-upload-position-meta span {
    border-left: 0;
    padding-left: 0;
    white-space: normal;
  }

  .customer-labeling-upload-position-sizes {
    grid-column: auto;
    grid-row: auto;
  }

  .customer-labeling-upload-needed-grid {
    grid-template-columns: 1fr;
  }

  .customer-labeling-upload-template-card > header,
  .customer-labeling-upload-template-download header {
    display: grid;
  }

  .customer-labeling-upload-template-card > header > span {
    max-width: none;
  }

  .customer-labeling-upload-form,
  .customer-labeling-upload-submissions,
  .customer-labeling-upload-template-download,
  .customer-labeling-upload-template-card {
    padding: 18px;
  }
}

/* Public customer labeling upload reference layout */
.customer-labeling-upload-page {
  margin: 0;
  background: #fff;
  color: #0f172a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.customer-labeling-upload-shell {
  max-width: 1500px;
  width: auto;
  margin: 0 auto;
  padding: 0 32px 56px;
}

.customer-labeling-upload-header {
  margin-inline: -32px;
  padding: 0 32px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.customer-labeling-upload-topbar {
  min-height: 56px;
  padding: 20px 0;
  border-bottom: 1px solid #e8eef0;
}

.customer-labeling-upload-breadcrumb {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

.customer-labeling-upload-breadcrumb-icon {
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.customer-labeling-upload-brand img {
  display: block;
  max-width: 170px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.customer-labeling-upload-hero {
  padding: 28px 0 0;
}

.customer-labeling-upload-hero h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: 0;
}

.customer-labeling-upload-hero p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 700;
}

.customer-labeling-upload-card {
  gap: 16px;
  padding-top: 18px;
}

.customer-labeling-upload-project-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px;
  margin: 0;
}

.customer-labeling-upload-meta-card {
  min-width: 0;
  border: 1px solid #dbe5df;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.customer-labeling-upload-meta-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #087f52;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.customer-labeling-upload-meta-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.customer-labeling-upload-meta-card span:not(.customer-labeling-upload-meta-icon),
.customer-labeling-upload-position-meta small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.customer-labeling-upload-meta-card strong {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 850;
}

.customer-labeling-upload-info {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid #cfe9dc;
  border-radius: 16px;
  background: #fdfffe;
  padding: 18px 22px;
}

.customer-labeling-upload-info-icon {
  width: 48px;
  height: 48px;
  background: #dff8eb;
  color: #087f52;
  font-size: 22px;
}

.customer-labeling-upload-info strong {
  font-size: 15px;
  font-weight: 850;
}

.customer-labeling-upload-checklist {
  gap: 8px 10px;
  margin-top: 10px;
}

.customer-labeling-upload-checklist span {
  border-color: #d8e7e1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.customer-labeling-upload-deadline {
  display: none !important;
}

.customer-labeling-upload-deadline strong {
  display: inline;
  color: #0f172a;
  font-size: inherit;
}

.customer-labeling-upload-main-layout,
.customer-labeling-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 24px;
  align-items: start;
}

.customer-labeling-upload-content,
.customer-labeling-upload-section {
  display: grid;
  gap: 14px;
}

.customer-labeling-upload-side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.customer-labeling-upload-section,
.customer-labeling-upload-form,
.customer-labeling-upload-submissions,
.customer-labeling-upload-completion,
.customer-labeling-upload-template-download {
  border: 1px solid #dbe5df;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

.customer-labeling-upload-section-header,
.customer-labeling-upload-form header,
.customer-labeling-upload-submissions > header,
.customer-labeling-upload-completion header,
.customer-labeling-upload-template-download header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.customer-labeling-upload-section h2,
.customer-labeling-upload-form h2,
.customer-labeling-upload-submissions h2,
.customer-labeling-upload-completion h2,
.customer-labeling-upload-template-download h2 {
  font-size: 17px;
  font-weight: 850;
}

.customer-labeling-upload-section-header span {
  display: inline-flex;
  margin-top: 0;
  border: 1px solid #dbe5df;
  border-radius: 999px;
  padding: 4px 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.customer-labeling-upload-section-header > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customer-labeling-upload-template-filters {
  display: inline-flex;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px;
}

.customer-labeling-upload-template-filters button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.customer-labeling-upload-template-filters .is-active {
  background: #ecfdf5;
  color: #087f52;
  box-shadow: inset 0 0 0 1px #087f52;
}

.customer-labeling-upload-template-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.customer-labeling-upload-templates > .customer-labeling-upload-section-header {
  display: none;
}

.customer-labeling-upload-template-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.customer-labeling-upload-template-thumb {
  min-height: 82px;
  border: 1px solid #e8eef0;
  border-radius: 8px;
  background: #fafafa;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #94a3b8;
}

.customer-labeling-upload-template-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.customer-labeling-upload-template-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.customer-labeling-upload-template-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-labeling-upload-template-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 850;
}

.customer-labeling-upload-template-status {
  display: none !important;
}

.customer-labeling-upload-template-status.is-open {
  display: none !important;
}

.customer-labeling-upload-template-card p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.customer-labeling-upload-template-fields,
.customer-labeling-upload-position-template-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.customer-labeling-upload-template-fields span,
.customer-labeling-upload-position-template-tags span {
  border: 1px solid #dbe5df;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.customer-labeling-upload-template-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.customer-labeling-upload-template-action {
  min-height: 34px;
  border: 1px solid #dbe5df;
  border-radius: 8px;
  color: #334155;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 850;
}

.customer-labeling-upload-template-action.is-primary {
  color: #087f52;
  border-color: #cfe9dc;
}

.customer-labeling-upload-template-action.is-disabled {
  opacity: .55;
}

.customer-labeling-upload-template-download,
.customer-labeling-upload-form,
.customer-labeling-upload-completion,
.customer-labeling-upload-submissions {
  padding: 18px;
}

.customer-labeling-upload-template-download {
  gap: 12px;
}

.customer-labeling-upload-template-download p {
  font-size: 13px;
}

.customer-labeling-upload-primary-link,
.customer-labeling-upload-template-download a.customer-labeling-upload-primary-link {
  min-height: 38px;
  border-radius: 6px;
  background: #087f52;
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 850;
}

.customer-labeling-upload-download-list {
  display: grid;
  gap: 6px;
}

.customer-labeling-upload-download-list a {
  min-height: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  padding: 0;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 700;
}

.customer-labeling-upload-download-list a svg {
  color: #087f52;
}

.customer-labeling-upload-positions-section {
  padding: 14px;
}

.customer-labeling-upload-positions {
  gap: 10px;
}

.customer-labeling-upload-position {
  min-height: 106px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 16px;
}

.customer-labeling-upload-position-image {
  height: 86px;
  border-radius: 8px;
}

.customer-labeling-upload-position-title strong {
  font-size: 15px;
}

.customer-labeling-upload-position-title span {
  background: #dff8eb;
  color: #087f52;
}

.customer-labeling-upload-position-meta {
  grid-template-columns: minmax(120px, .35fr) minmax(120px, .35fr) minmax(360px, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.customer-labeling-upload-position-meta span:nth-child(2),
.customer-labeling-upload-position-sizes {
  grid-column: auto;
  grid-row: auto;
}

.customer-labeling-upload-position-template-tags {
  display: none !important;
}

.customer-labeling-upload-size-table {
  border-radius: 8px;
  font-size: 12px;
}

.customer-labeling-upload-size-table th,
.customer-labeling-upload-size-table td {
  padding: 7px 10px;
}

.customer-labeling-upload-form label,
.customer-labeling-upload-completion label {
  gap: 5px;
  font-size: 12px;
}

.customer-labeling-upload-form label small,
.customer-labeling-upload-completion label small {
  color: #64748b;
  font-weight: 650;
}

.customer-labeling-upload-form input,
.customer-labeling-upload-form textarea,
.customer-labeling-upload-completion input,
.customer-labeling-upload-completion textarea {
  border-radius: 6px;
  padding: 10px 11px;
  font-size: 13px;
}

.customer-labeling-upload-form textarea,
.customer-labeling-upload-completion textarea {
  min-height: 74px;
}

.customer-labeling-upload-dropzone {
  min-height: 118px;
  border-radius: 8px;
  background: #fbfefd;
  padding: 16px;
}

.customer-labeling-upload-form button,
.customer-labeling-upload-completion button {
  min-height: 38px;
  border-radius: 6px;
  background: #087f52;
  font-size: 13px;
}

.customer-labeling-upload-submissions {
  gap: 12px;
}

.customer-labeling-upload-submission {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.customer-labeling-upload-submission a {
  border: 0;
  border-radius: 0;
  padding: 4px 0;
}

.customer-labeling-upload-empty {
  border-radius: 10px;
}

@media (max-width: 1220px) {
  .customer-labeling-upload-main-layout,
  .customer-labeling-upload-grid {
    grid-template-columns: 1fr;
  }

  .customer-labeling-upload-content {
    display: contents;
  }

  .customer-labeling-upload-side {
    position: static;
  }

  .customer-labeling-upload-templates {
    order: 1;
  }

  .customer-labeling-upload-side {
    order: 2;
  }

  .customer-labeling-upload-positions-section {
    order: 3;
  }
}

@media (max-width: 980px) {
  .customer-labeling-upload-project-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .customer-labeling-upload-template-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-labeling-upload-info {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .customer-labeling-upload-deadline {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .customer-labeling-upload-shell {
    width: auto;
    padding: 0 16px 32px;
  }

  .customer-labeling-upload-header {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .customer-labeling-upload-topbar {
    gap: 12px;
  }

  .customer-labeling-upload-brand img {
    max-width: 132px;
  }

  .customer-labeling-upload-hero h1 {
    font-size: 24px;
  }

  .customer-labeling-upload-project-meta,
  .customer-labeling-upload-template-list {
    grid-template-columns: 1fr !important;
  }

  .customer-labeling-upload-info,
  .customer-labeling-upload-deadline {
    grid-template-columns: 1fr;
    grid-column: auto;
    white-space: normal;
  }

  .customer-labeling-upload-info {
    order: 1;
  }

  .customer-labeling-upload-project-meta {
    order: 2;
  }

  .customer-labeling-upload-main-layout {
    order: 3;
  }

  .customer-labeling-upload-side {
    display: contents;
  }

  .customer-labeling-upload-template-download {
    order: 2;
  }

  .customer-labeling-upload-form {
    order: 3;
  }

  .customer-labeling-upload-positions-section {
    order: 4;
  }

  .customer-labeling-upload-submissions {
    order: 5;
  }

  .customer-labeling-upload-section-header,
  .customer-labeling-upload-section-header > div:first-child,
  .customer-labeling-upload-template-card,
  .customer-labeling-upload-position,
  .customer-labeling-upload-position-meta {
    grid-template-columns: 1fr;
  }

  .customer-labeling-upload-section-header {
    display: grid;
  }

  .customer-labeling-upload-template-filters {
    width: max-content;
    max-width: 100%;
  }

  .customer-labeling-upload-template-actions {
    grid-template-columns: 1fr;
  }

  .customer-labeling-upload-position-image {
    width: 100%;
    height: 120px;
  }
}

.b2b-labeling-upload-page.customer-labeling-upload-page {
  background: var(--public-bg, #f6f8fb);
}

.b2b-labeling-upload-page .customer-labeling-upload-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 28px clamp(24px, 3vw, 36px) 44px;
}

.b2b-labeling-upload-page .customer-labeling-upload-header {
  margin: 0 0 var(--public-gap-xl, 24px);
  padding: 18px;
  border: 1px solid var(--public-border, #d8e0ea);
  border-radius: 14px;
  background: var(--public-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.b2b-labeling-upload-page .customer-labeling-upload-topbar {
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.b2b-labeling-upload-page .customer-labeling-upload-hero {
  padding: 0;
}

.b2b-labeling-upload-page .customer-labeling-upload-hero h1,
.b2b-labeling-upload-page .public-title {
  font-size: clamp(24px, 2vw, 28px);
  letter-spacing: 0;
}

.b2b-labeling-upload-page .customer-labeling-upload-card {
  padding-top: 16px;
}

.b2b-labeling-upload-page .customer-labeling-upload-overview,
.b2b-labeling-upload-page .customer-labeling-upload-needed {
  margin-bottom: 16px;
}

.b2b-labeling-upload-page .customer-labeling-upload-templates > .customer-labeling-upload-section-header {
  display: flex;
}

.b2b-labeling-upload-page .customer-labeling-upload-section,
.b2b-labeling-upload-page .customer-labeling-upload-form,
.b2b-labeling-upload-page .customer-labeling-upload-submissions,
.b2b-labeling-upload-page .customer-labeling-upload-completion,
.b2b-labeling-upload-page .customer-labeling-upload-template-download,
.b2b-labeling-upload-page .customer-labeling-upload-meta-card {
  border-radius: 8px;
}

@media (max-width: 700px) {
  .b2b-labeling-upload-page .customer-labeling-upload-shell {
    padding: 16px 14px 32px;
  }

  .b2b-labeling-upload-page .customer-labeling-upload-header {
    padding: 16px;
  }
}

body.public-confirmation-modal-open {
  overflow: hidden;
}

body.page-karton-designer .designer-import-template-btn,
body.page-shoebox-designer .designer-import-template-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}

body.page-karton-designer .designer-import-dialog,
body.page-shoebox-designer .designer-import-dialog {
  width: min(720px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 24px));
  border: 0;
  border-radius: 8px;
  padding: 0;
}

body.page-karton-designer .designer-import-dialog::backdrop,
body.page-shoebox-designer .designer-import-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

body.page-karton-designer .designer-import-dialog-panel,
body.page-shoebox-designer .designer-import-dialog-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  max-height: calc(100vh - 24px);
  overflow: auto;
}

body.page-karton-designer .designer-import-dialog-header,
body.page-karton-designer .designer-import-dialog-actions,
body.page-shoebox-designer .designer-import-dialog-header,
body.page-shoebox-designer .designer-import-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-karton-designer .designer-import-summary,
body.page-shoebox-designer .designer-import-summary {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
}

body.page-karton-designer .designer-import-summary dl,
body.page-shoebox-designer .designer-import-summary dl {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
}

body.page-karton-designer .designer-import-summary dt,
body.page-shoebox-designer .designer-import-summary dt {
  color: #64748b;
}

body.page-karton-designer .designer-import-summary dd,
body.page-shoebox-designer .designer-import-summary dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  body.page-karton-designer .designer-import-dialog-header,
  body.page-karton-designer .designer-import-dialog-actions,
  body.page-karton-designer .designer-template-card-actions,
  body.page-shoebox-designer .designer-import-dialog-header,
  body.page-shoebox-designer .designer-import-dialog-actions,
  body.page-shoebox-designer .designer-template-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.page-karton-designer .designer-import-summary dl,
  body.page-shoebox-designer .designer-import-summary dl {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-shoebox-designer .designer-grid--template-inline,
  body.page-shoebox-designer .designer-layout-core {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-shoebox-designer .designer-layout-core,
  body.page-shoebox-designer .designer-grid--template-inline {
    flex-direction: column !important;
  }

  body.page-shoebox-designer .layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-shoebox-designer .sidebar {
    display: none;
  }

  body.page-shoebox-designer .content,
  body.page-shoebox-designer .designer-card {
    min-width: 0;
    max-width: 100%;
  }

  body.page-shoebox-designer .designer-left-column,
  body.page-shoebox-designer .designer-preview-column,
  body.page-shoebox-designer .designer-panel,
  body.page-shoebox-designer .designer-preview-window,
  body.page-shoebox-designer .designer-preview-note,
  body.page-shoebox-designer .designer-element-links {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-basis: auto;
  }
}

body.page-kunden .customer-label-template-header,
body.page-kunden .customer-label-template-section-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

body.page-shoebox-designer .designer-preview-toolbar {
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 10px;
}

body.page-shoebox-designer .designer-view-toggle {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

body.page-shoebox-designer .designer-view-toggle > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

body.page-shoebox-designer .designer-zoom-control {
  align-items: center;
  display: flex;
  gap: 6px;
  margin: 0;
}

body.page-shoebox-designer .designer-zoom-control span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

body.page-shoebox-designer .designer-zoom-control select {
  min-height: 30px;
  padding: 4px 8px;
}

body.page-shoebox-designer .shoebox-designer-toolbar__row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

body.page-shoebox-designer .shoebox-toolbar-group {
  min-width: 0;
  flex-wrap: nowrap;
}

body.page-shoebox-designer .designer-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
}

body.page-shoebox-designer .designer-view-toggle .designer-toggle-button {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

body.page-shoebox-designer .shoebox-inspector .designer-element-row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
}

body.page-shoebox-designer .shoebox-inspector .designer-element-row-actions .ghost.tiny {
  margin: 0;
  padding: 0.2rem 0.45rem;
}

body.page-kunden .customer-label-template-header h4,
body.page-kunden .customer-label-template-section-head h4 {
  margin: 0;
}

body.page-kunden .customer-label-template-header p,
body.page-kunden .customer-label-template-section-head p {
  margin: 4px 0 0;
  color: #64748b;
}

body.page-kunden .customer-label-template-header-actions,
body.page-kunden .customer-label-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.page-kunden .customer-designer-template-section,
body.page-kunden .customer-label-template-section {
  margin-top: 20px;
}

body.page-kunden .customer-template-base-grid,
body.page-kunden .customer-label-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

body.page-kunden .customer-label-template-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

body.page-kunden .customer-label-template-card.is-inactive {
  opacity: 0.72;
}

body.page-kunden .customer-label-template-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

body.page-kunden .customer-label-template-card-head h5 {
  margin: 0;
  color: #0f172a;
}

body.page-kunden .customer-label-template-card-head p,
body.page-kunden .customer-label-template-description {
  margin: 4px 0 0;
  color: #64748b;
}

body.page-kunden .customer-label-template-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e8f5ee;
  color: #0d6a3c;
  font-size: 12px;
  font-weight: 700;
}

body.page-kunden .customer-label-template-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

body.page-kunden .customer-label-template-facts div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
}

body.page-kunden .customer-label-template-facts dt {
  color: #64748b;
  font-size: 12px;
}

body.page-kunden .customer-label-template-facts dd {
  margin: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

body.page-kunden .customer-label-template-empty {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-kunden .customer-label-template-empty p {
  margin: 6px 0 14px;
  color: #64748b;
}

.customer-label-template-modal::backdrop {
  background: rgba(15, 23, 42, 0.46);
}

.customer-label-template-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.customer-label-template-modal-panel {
  display: grid;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
  width: 100%;
}

.customer-label-template-modal-header,
.customer-label-template-modal-actions {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.customer-label-template-modal-actions {
  justify-content: flex-end;
  border-top: 1px solid #e2e8f0;
  border-bottom: 0;
}

.customer-label-template-modal-header h3,
.customer-label-template-modal-header p,
.customer-label-template-modal-group h4 {
  margin: 0;
}

.customer-label-template-modal-header p {
  margin-top: 4px;
  color: #64748b;
}

.customer-label-template-modal-body {
  display: grid;
  gap: 18px;
  padding: 20px;
  overflow: auto;
}

.customer-label-template-modal-group {
  display: grid;
  gap: 12px;
}

.customer-label-template-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.customer-label-template-form-grid label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.customer-label-template-form-grid input,
.customer-label-template-form-grid select,
.customer-label-template-form-grid textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}

.customer-label-dimension-preview {
  display: grid;
  gap: 12px;
  max-width: 100%;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-label-dimension-preview__header h5,
.customer-label-dimension-preview__header p {
  margin: 0;
}

.customer-label-dimension-preview__header h5 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

.customer-label-dimension-preview__header p {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.customer-label-dimension-preview__stage {
  display: grid;
  max-width: 100%;
  justify-content: start;
  overflow: hidden;
}

.customer-label-dimension-preview__width {
  display: grid;
  max-width: 100%;
  height: 30px;
  align-items: start;
  justify-items: center;
  color: #0f766e;
  font-size: 12px;
  font-weight: 850;
}

.customer-label-dimension-preview__width::after {
  content: "";
  width: 100%;
  height: 9px;
  margin-top: 4px;
  border-top: 1px solid #0f766e;
  border-left: 1px solid #0f766e;
  border-right: 1px solid #0f766e;
}

.customer-label-dimension-preview__drawing {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.customer-label-dimension-preview__sheet {
  flex: 0 0 auto;
  max-width: min(420px, 100%);
  max-height: 260px;
  min-width: 1px;
  min-height: 1px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.025);
}

.customer-label-dimension-preview__sheet[data-label-shape="round"],
.customer-label-dimension-preview__sheet[data-label-shape="oval"] {
  border-radius: 999px;
}

.customer-label-dimension-preview__sheet[data-label-shape="custom"] {
  border-style: dashed;
}

.customer-label-dimension-preview__height {
  display: flex;
  width: 52px;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-size: 12px;
  font-weight: 850;
}

.customer-label-dimension-preview__height::before {
  content: "";
  align-self: stretch;
  width: 9px;
  margin-right: 6px;
  border-top: 1px solid #0f766e;
  border-right: 1px solid #0f766e;
  border-bottom: 1px solid #0f766e;
}

.customer-label-dimension-preview__height span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

.customer-label-dimension-preview__shape-note {
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.customer-label-dimension-preview__empty {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.customer-label-template-wide {
  grid-column: 1 / -1;
}

.customer-labeling-instructions-list {
  display: grid;
  gap: 10px;
}

.customer-labeling-instruction-row {
  display: grid;
  gap: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.customer-labeling-instruction-row header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.customer-labeling-instruction-row header strong {
  color: #0f172a;
  font-size: 13px;
}

.customer-labeling-instruction-add {
  justify-self: start;
}

.customer-label-template-check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.customer-label-template-check input {
  width: auto;
}

.customer-label-template-media-upload {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.customer-label-template-media-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-label-template-media-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-label-template-media-card h5 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

.customer-label-template-media-card p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.customer-label-template-upload-dropzone {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  background: #ffffff;
}

.customer-label-template-upload-dropzone > span {
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.customer-label-template-upload-dropzone label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.customer-label-template-upload-dropzone input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}

.customer-labeling-variant-modal .customer-label-specification-preview {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid #e2e8f0;
}

.customer-labeling-variant-modal .customer-label-specification-preview header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.customer-labeling-variant-modal .customer-label-specification-preview h5 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

.customer-labeling-variant-modal .customer-label-specification-preview p,
.customer-labeling-variant-modal .customer-label-specification-preview__source {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.customer-labeling-variant-modal .customer-label-specification-preview__content {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.customer-labeling-variant-modal .customer-label-specification-preview__canvas {
  display: grid;
  min-height: 160px;
  max-width: 520px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-labeling-variant-modal .customer-label-specification-preview__canvas .customer-label-template-media-empty,
.customer-labeling-variant-modal .customer-label-specification-preview__canvas .customer-label-template-media-thumb {
  width: 100%;
  min-height: 160px;
  border: 0;
}

.customer-labeling-variant-modal .customer-label-specification-preview__canvas .customer-label-template-media-thumb img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #ffffff;
}

.customer-labeling-variant-modal .customer-label-specification-preview__link {
  display: grid;
  width: 100%;
  min-height: 160px;
  place-items: center;
  padding: 12px;
  background: #ffffff;
}

.customer-labeling-variant-modal .customer-label-specification-preview__link img {
  display: block;
  width: 100%;
  max-width: 500px;
  max-height: 300px;
  object-fit: contain;
}

.customer-labeling-variant-modal .customer-label-specification-preview__actions {
  display: grid;
  gap: 8px;
}

.customer-labeling-variant-modal .customer-label-specification-preview__actions label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.customer-labeling-variant-modal .customer-label-specification-preview__actions input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}

.customer-labeling-variant-modal .customer-label-specification-preview__actions .danger {
  justify-self: start;
}

.customer-labeling-variant-modal .customer-label-specification-preview__override,
.customer-labeling-variant-modal .customer-label-specification-preview__loading,
.customer-labeling-variant-modal .customer-label-specification-preview__error {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.customer-labeling-variant-modal .customer-label-specification-preview__loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-weight: 700;
}

.customer-labeling-variant-modal .customer-label-specification-preview__loading[hidden],
.customer-labeling-variant-modal .customer-label-specification-preview__error[hidden],
.customer-labeling-variant-modal .customer-label-specification-preview__override[hidden] {
  display: none;
}

.customer-labeling-variant-modal .customer-label-specification-preview__loading span {
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #0f172a;
  border-radius: 999px;
  animation: customer-label-preview-spin 0.8s linear infinite;
}

.customer-labeling-variant-modal .customer-label-specification-preview__error {
  color: #b91c1c;
  font-weight: 700;
}

@keyframes customer-label-preview-spin {
  to {
    transform: rotate(360deg);
  }
}

.customer-label-template-media-preview {
  min-height: 118px;
}

.customer-label-template-media-preview .customer-label-template-media-empty {
  min-height: 118px;
  color: #64748b;
  font-size: 13px;
}

.customer-label-template-media-preview .customer-label-template-media-thumb,
.customer-label-template-media-preview .customer-label-template-media-link,
.customer-label-template-media-video {
  display: block;
  width: 100%;
  min-height: 118px;
  overflow: hidden;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
}

.customer-label-template-media-preview .customer-label-template-media-thumb img,
.customer-label-template-media-video {
  width: 100%;
  height: 148px;
  object-fit: cover;
}

.customer-label-template-media-actions {
  display: flex;
  justify-content: flex-end;
}

.handoff-position-media--split {
  display: grid;
  gap: 10px;
  align-content: start;
}

.handoff-image-tile {
  display: grid;
  gap: 6px;
}

.handoff-image-tile h4,
.handoff-label-spec h4,
.handoff-label-instructions h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #172033;
}

.handoff-label-spec,
.handoff-label-instructions {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.handoff-label-spec dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.handoff-label-spec dl > div {
  padding: 8px 10px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: #fff;
}

.handoff-label-spec dt {
  margin: 0 0 2px;
  font-size: 0.72rem;
  color: #6b7280;
}

.handoff-label-spec dd {
  margin: 0;
  font-weight: 700;
  color: #172033;
}

.handoff-label-spec p {
  margin: 0;
  color: #374151;
}

.handoff-label-instructions ul {
  margin: 0;
  padding-left: 18px;
  color: #374151;
}

.handoff-label-instructions li + li {
  margin-top: 4px;
}

@media (max-width: 720px) {
  body.page-kunden .customer-label-template-header,
  body.page-kunden .customer-label-template-section-head,
  .customer-label-template-modal-header,
  .customer-label-template-modal-actions {
    display: grid;
  }

  .customer-label-template-form-grid {
    grid-template-columns: 1fr;
  }

  .customer-label-template-media-upload {
    grid-template-columns: 1fr;
  }

  .customer-labeling-variant-modal .customer-label-specification-preview__content {
    grid-template-columns: 1fr;
  }
}

body.page-kunden .customer-label-template-dashboard {
  display: grid;
  gap: 20px;
  color: #0f172a;
}

body.page-kunden .customer-label-template-dashboard .customer-label-template-header {
  padding: 22px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f4fbf7 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

body.page-kunden .customer-label-template-header h4 {
  font-size: 24px;
  line-height: 1.2;
}

body.page-kunden .customer-label-template-header small {
  display: block;
  margin-top: 10px;
  color: #0d6a3c;
  font-weight: 700;
}

body.page-kunden .customer-label-template-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.page-kunden .customer-label-template-kpis article {
  padding: 16px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.page-kunden .customer-label-template-kpis span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body.page-kunden .customer-label-template-kpis strong {
  display: block;
  margin-top: 8px;
  color: #0d6a3c;
  font-size: 28px;
  line-height: 1;
}

body.page-kunden .customer-label-template-layout {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-kunden .customer-label-template-base-panel,
body.page-kunden .customer-label-template-main-panel {
  padding: 18px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

body.page-kunden .customer-label-template-base-panel .customer-template-base-grid {
  grid-template-columns: 1fr;
}

body.page-kunden .customer-label-template-base-card {
  border-color: #dbe4ee;
  border-radius: 10px;
  box-shadow: none;
}

body.page-kunden .customer-label-template-process-note {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #bfe8cf;
  border-radius: 10px;
  background: #f0fbf4;
  color: #14532d;
}

body.page-kunden .customer-label-template-process-note ol {
  margin: 10px 0 0 20px;
  padding: 0;
}

body.page-kunden .customer-label-template-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.page-kunden .customer-label-template-toolbar input {
  min-width: 190px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}

body.page-kunden .customer-label-template-grid {
  grid-template-columns: 1fr;
}

body.page-kunden .customer-label-template-card {
  gap: 12px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

body.page-kunden .customer-label-template-title-block {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.page-kunden .customer-label-template-title-block strong {
  color: #0d6a3c;
  font-size: 13px;
}

body.page-kunden .customer-label-template-card-badges,
body.page-kunden .customer-label-template-chips,
body.page-kunden .customer-label-template-empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.page-kunden .customer-label-template-target,
body.page-kunden .customer-label-template-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #dbe4ee;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

body.page-kunden .customer-label-template-status {
  border: 1px solid #bfe8cf;
}

body.page-kunden .customer-label-template-card.is-inactive .customer-label-template-status {
  border-color: #e2e8f0;
  background: #f1f5f9;
  color: #64748b;
}

body.page-kunden .customer-label-template-card-main p {
  margin: 0;
  color: #334155;
}

body.page-kunden .customer-label-template-card-main p + p {
  margin-top: 4px;
  color: #64748b;
}

body.page-kunden .customer-label-template-actions {
  flex: 0 0 auto;
}

body.page-kunden .customer-label-template-menu {
  position: relative;
}

body.page-kunden .customer-label-template-menu summary {
  min-width: 34px;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  list-style: none;
}

body.page-kunden .customer-label-template-menu summary::-webkit-details-marker {
  display: none;
}

body.page-kunden .customer-label-template-menu[open] {
  z-index: 3;
}

body.page-kunden .customer-label-template-menu[open]::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 0;
  width: 160px;
  height: 88px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

body.page-kunden .customer-label-template-menu button {
  position: relative;
  z-index: 1;
  display: block;
  width: 150px;
  margin: 8px 5px 0;
  border: 0;
  background: transparent;
  color: #334155;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

body.page-kunden .customer-label-template-menu button.danger {
  color: #b91c1c;
}

body.page-kunden .customer-label-template-card-expanded {
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}

body.page-kunden .customer-label-template-card-expanded > summary {
  color: #0d6a3c;
  cursor: pointer;
  font-weight: 800;
}

body.page-kunden .customer-label-template-expanded-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr) minmax(180px, 0.8fr);
  gap: 14px;
  margin-top: 14px;
}

body.page-kunden .customer-label-template-expanded-grid h6 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 13px;
}

body.page-kunden .customer-label-template-expanded-grid dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

body.page-kunden .customer-label-template-expanded-grid dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.page-kunden .customer-label-template-expanded-grid dd {
  margin: 2px 0 0;
  color: #0f172a;
}

body.page-kunden .customer-label-template-placement-preview {
  position: relative;
  min-height: 130px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}

body.page-kunden .customer-label-template-placement-preview::before {
  content: "";
  position: absolute;
  inset: 28px 24px;
  border: 2px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff;
}

body.page-kunden .customer-label-template-placement-preview span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 28px;
  transform: translate(-50%, -50%);
  border: 2px solid #16a34a;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.18);
}

body.page-kunden .customer-label-template-placement-preview[data-placement-target="shoe"]::before {
  inset: 50px 24px 36px;
  border-radius: 999px 80px 50px 999px;
}

body.page-kunden .customer-label-template-placement-preview[data-placement-target="shoebox"]::before {
  inset: 42px 18px;
}

body.page-kunden .customer-label-template-media-grid,
.customer-label-template-modal-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-kunden .customer-label-template-media-thumb,
.customer-label-template-modal-preview .customer-label-template-media-thumb {
  display: block;
  min-height: 94px;
  overflow: hidden;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #f8fafc;
}

body.page-kunden .customer-label-template-media-thumb img,
.customer-label-template-modal-preview .customer-label-template-media-thumb img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

body.page-kunden .customer-label-template-media-empty,
body.page-kunden .customer-label-template-media-link,
.customer-label-template-modal-preview .customer-label-template-media-empty,
.customer-label-template-modal-preview .customer-label-template-media-link {
  display: grid;
  min-height: 94px;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
}

body.page-kunden .customer-label-template-sms-note {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid #bfe8cf;
  border-radius: 10px;
  background: #f0fbf4;
  color: #14532d;
}

body.page-kunden .customer-label-template-empty {
  text-align: left;
}

body.page-kunden .customer-label-template-empty .btn,
body.page-kunden .customer-label-template-empty .ghost {
  margin-top: 14px;
}

.customer-label-template-modal {
  width: min(980px, calc(100vw - 32px));
}

.customer-label-template-modal-panel {
  border-radius: 14px;
}

.customer-label-template-modal-group {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.customer-label-template-modal-group h4 {
  color: #0d6a3c;
}

@media (max-width: 980px) {
  body.page-kunden .customer-label-template-kpis,
  body.page-kunden .customer-label-template-layout,
  body.page-kunden .customer-label-template-expanded-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.page-kunden .customer-label-template-dashboard .customer-label-template-header,
  body.page-kunden .customer-label-template-base-panel,
  body.page-kunden .customer-label-template-main-panel {
    padding: 14px;
  }

  body.page-kunden .customer-label-template-toolbar,
  body.page-kunden .customer-label-template-header-actions,
  body.page-kunden .customer-label-template-actions {
    justify-content: flex-start;
  }

  body.page-kunden .customer-label-template-toolbar input,
  body.page-kunden .customer-label-template-toolbar button,
  body.page-kunden .customer-label-template-header-actions a,
  body.page-kunden .customer-label-template-header-actions button {
    width: 100%;
  }

  body.page-kunden .customer-label-template-card-head {
    display: grid;
  }

  body.page-kunden .customer-label-template-media-grid,
  .customer-label-template-modal-preview {
    grid-template-columns: 1fr;
  }
}

body.page-kunden .customer-label-template-dashboard {
  gap: 18px;
  max-width: 1600px;
  margin: 0 auto;
}

body.page-kunden .customer-label-template-dashboard .customer-label-template-header {
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid #d9e2ec;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-kunden .customer-label-template-header h4 {
  color: #0b1220;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: 0;
}

body.page-kunden .customer-label-template-header p {
  max-width: 950px;
  color: #475569;
  font-size: 15px;
}

body.page-kunden .customer-label-template-header small {
  display: none;
}

body.page-kunden .customer-label-template-header-actions .btn,
body.page-kunden .customer-label-template-header-actions .ghost,
body.page-kunden .customer-label-template-toolbar .btn,
body.page-kunden .customer-label-template-toolbar .ghost {
  min-height: 34px;
  border-radius: 7px;
  font-weight: 800;
}

body.page-kunden .customer-label-template-kpis {
  gap: 22px;
}

body.page-kunden .customer-label-template-kpis article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 94px;
  padding: 20px 26px;
  border-color: #d8e0ea;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-label-template-kpi-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 999px;
  background: #008f83;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

body.page-kunden .customer-label-template-kpi-icon::before {
  content: "L";
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="box"]::before {
  content: "B";
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="doc"]::before {
  content: "M";
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="users"]::before {
  content: "K";
}

body.page-kunden .customer-label-template-kpis strong {
  margin: 0;
  color: #050816;
  font-size: 24px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-kpis span:not(.customer-label-template-kpi-icon) {
  margin-top: 2px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  text-transform: none;
}

body.page-kunden .customer-label-template-kpis small {
  display: block;
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-label-template-layout {
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 22px;
}

body.page-kunden .customer-label-template-base-panel,
body.page-kunden .customer-label-template-main-panel {
  padding: 16px;
  border-color: #d8e0ea;
  border-radius: 11px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-label-template-section-head {
  margin-bottom: 18px;
}

body.page-kunden .customer-label-template-section-head h4 {
  color: #111827;
  font-size: 17px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-section-head p {
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-label-template-base-card {
  padding: 14px;
  border: 1px solid #dfe7ef;
  border-radius: 9px;
  background: #fbfdff;
}

body.page-kunden .customer-label-template-base-card + .customer-label-template-base-card {
  margin-top: 10px;
}

body.page-kunden .customer-label-template-base-card .customer-template-card-head h5 {
  font-size: 15px;
}

body.page-kunden .customer-label-template-base-card .badge {
  border-radius: 6px;
  background: #dff7ea;
  color: #087a45;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment {
  display: grid;
  gap: 9px;
}

body.page-kunden .customer-template-assignment-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
}

body.page-kunden .customer-template-assignment-controls select,
body.page-kunden .customer-label-template-base-card select {
  min-height: 34px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #ffffff;
}

body.page-kunden .customer-label-template-base-card .ghost.small,
body.page-kunden .customer-label-template-base-card .btn.small {
  min-height: 32px;
  border-radius: 7px;
  font-weight: 800;
}

body.page-kunden .customer-label-template-process-note {
  padding: 16px;
  border: 0;
  background: linear-gradient(135deg, #e7f8f1 0%, #f4fbf8 100%);
}

body.page-kunden .customer-label-template-process-note strong {
  color: #00796f;
}

body.page-kunden .customer-label-template-process-note ol {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  list-style: none;
  counter-reset: template-process;
}

body.page-kunden .customer-label-template-process-note li {
  position: relative;
  min-height: 24px;
  padding-left: 36px;
  color: #334155;
  font-size: 13px;
  counter-increment: template-process;
}

body.page-kunden .customer-label-template-process-note li::before {
  content: counter(template-process);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #008f83;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

body.page-kunden .customer-label-template-toolbar {
  align-items: center;
}

body.page-kunden .customer-label-template-toolbar input {
  min-height: 34px;
  min-width: 210px;
  border-color: #d4dde8;
  border-radius: 7px;
}

body.page-kunden .customer-label-template-card {
  position: relative;
  gap: 0;
  padding: 0;
  overflow: visible;
  border-color: #dce4ee;
  border-radius: 10px;
  box-shadow: none;
}

body.page-kunden .customer-label-template-card + .customer-label-template-card {
  margin-top: 10px;
}

body.page-kunden .customer-label-template-card-head {
  display: grid;
  grid-template-columns: 24px minmax(280px, 1fr) auto 190px 28px;
  gap: 14px;
  align-items: start;
  padding: 16px 16px 10px;
}

body.page-kunden .customer-label-template-drag {
  padding-top: 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

body.page-kunden .customer-label-template-title-block {
  gap: 6px;
}

body.page-kunden .customer-label-template-title-block h5 {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-title-block p {
  color: #475569;
  font-size: 13px;
}

body.page-kunden .customer-label-template-card-badges {
  align-items: center;
}

body.page-kunden .customer-label-template-status,
body.page-kunden .customer-label-template-target,
body.page-kunden .customer-label-template-designer,
body.page-kunden .customer-label-template-chip {
  min-height: 22px;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

body.page-kunden .customer-label-template-status {
  background: #dcf8e8;
  color: #087a45;
}

body.page-kunden .customer-label-template-target {
  background: #e7f0ff;
  color: #1363c6;
}

body.page-kunden .customer-label-template-designer {
  background: transparent;
  color: #475569;
  font-weight: 700;
}

body.page-kunden .customer-label-template-chip {
  background: transparent;
  color: #475569;
  font-weight: 700;
}

body.page-kunden .customer-label-template-chip.is-success {
  background: #dff7ea;
  color: #087a45;
}

body.page-kunden .customer-label-template-chip.is-info {
  background: #dff3f8;
  color: #0f6d7a;
}

body.page-kunden .customer-label-template-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.page-kunden .customer-label-template-actions {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 7px;
}

body.page-kunden .customer-label-template-actions > button {
  grid-column: 1;
  min-height: 28px;
  justify-content: flex-start;
  border-radius: 6px;
  background: #ffffff;
  font-weight: 750;
}

body.page-kunden .customer-label-template-menu {
  grid-column: 2;
  grid-row: 3;
}

body.page-kunden .customer-label-template-menu summary {
  display: grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-card-main {
  padding: 0 16px 0 54px;
}

body.page-kunden .customer-label-template-card-main p {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

body.page-kunden .customer-label-template-chips {
  gap: 16px;
  padding: 10px 16px 14px 54px;
}

body.page-kunden .customer-label-template-card-expanded {
  border-top: 1px solid #e3e9f0;
  padding: 0;
}

body.page-kunden .customer-label-template-card-expanded > summary {
  position: absolute;
  top: 23px;
  right: 17px;
  width: 18px;
  height: 18px;
  overflow: hidden;
  color: transparent;
}

body.page-kunden .customer-label-template-card-expanded > summary::before {
  content: "⌄";
  position: absolute;
  inset: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
}

body.page-kunden .customer-label-template-card-expanded[open] > summary::before {
  content: "⌃";
}

body.page-kunden .customer-label-template-expanded-grid {
  grid-template-columns: minmax(260px, 1.5fr) minmax(170px, 0.75fr) minmax(210px, 0.9fr) minmax(170px, 0.75fr);
  gap: 18px;
  margin: 0;
  padding: 16px 24px 18px 32px;
}

body.page-kunden .customer-label-template-text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

body.page-kunden .customer-label-template-text-grid h6,
body.page-kunden .customer-label-template-expanded-grid h6 {
  margin: 0 0 6px;
  color: #111827;
  font-size: 12px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-text-grid p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

body.page-kunden .customer-label-template-placement-preview {
  min-height: 118px;
  border-color: #dce4ee;
  background: #ffffff;
}

body.page-kunden .customer-label-template-placement-preview::before {
  inset: 24px 18px;
  border-width: 1px;
  border-color: #64748b;
}

body.page-kunden .customer-label-template-placement-preview span {
  width: 44px;
  height: 28px;
  border-color: #008f83;
  background: rgba(0, 143, 131, 0.11);
}

body.page-kunden .customer-label-template-media-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-kunden .customer-label-template-media-thumb,
body.page-kunden .customer-label-template-media-empty,
body.page-kunden .customer-label-template-media-link {
  min-height: 118px;
  border-radius: 8px;
}

body.page-kunden .customer-label-template-media-thumb img {
  height: 100%;
}

body.page-kunden .customer-label-template-sms-note {
  display: block;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 8px;
  background: #e9f6f3;
}

body.page-kunden .customer-label-template-sms-note strong {
  display: block;
  margin-bottom: 10px;
  color: #008f83;
}

body.page-kunden .customer-label-template-sms-note p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

body.page-kunden .customer-template-grid--dashboard {
  display: block;
  width: 100%;
  max-width: 100%;
}

body.page-kunden .customer-label-template-dashboard {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

body.page-kunden .customer-label-template-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.page-kunden .customer-label-template-layout {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
}

body.page-kunden .customer-label-template-base-panel {
  min-width: 0;
  max-width: 360px;
}

body.page-kunden .customer-label-template-main-panel {
  width: 100%;
  min-width: 0;
}

body.page-kunden .customer-label-template-base-panel .customer-template-base-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.page-kunden .customer-label-template-base-card {
  padding: 14px;
}

body.page-kunden .customer-label-template-base-card + .customer-label-template-base-card {
  margin-top: 0;
}

body.page-kunden .customer-label-template-base-card .customer-template-card-head {
  gap: 10px;
}

body.page-kunden .customer-label-template-base-card .customer-template-card-head p,
body.page-kunden .customer-label-template-base-card .customer-template-assignment p {
  overflow-wrap: anywhere;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment {
  display: grid;
  gap: 10px;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment-controls select {
  width: 100%;
  min-width: 0;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment-actions,
body.page-kunden .customer-label-template-base-card .customer-template-supplied-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment-actions .ghost.small,
body.page-kunden .customer-label-template-base-card .customer-template-supplied-controls .ghost.small {
  width: auto;
  min-height: 28px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #475569;
  font-weight: 750;
}

body.page-kunden .customer-label-template-base-card .customer-template-assignment-actions .danger {
  color: #b91c1c;
}

body.page-kunden .customer-label-template-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.page-kunden .customer-label-template-toolbar input[type="search"] {
  width: min(220px, 100%);
  min-width: 0;
}

body.page-kunden .customer-label-template-empty {
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
  display: grid;
  align-content: center;
}

body.page-kunden .customer-label-template-empty > * {
  max-width: 680px;
}

body.page-kunden .customer-labeling-set-grid {
  display: grid;
  gap: 14px;
}

body.page-kunden .customer-labeling-set-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-labeling-set-card.is-inactive,
body.page-kunden .customer-labeling-set-variant-card.is-inactive {
  opacity: 0.62;
}

body.page-kunden .customer-labeling-set-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

body.page-kunden .customer-labeling-set-title-block h5 {
  margin: 8px 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

body.page-kunden .customer-labeling-set-title-block p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-labeling-set-card-badges,
body.page-kunden .customer-labeling-set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

body.page-kunden .customer-labeling-set-actions {
  display: grid;
  grid-template-columns: auto auto 34px;
  gap: 8px;
  align-items: center;
}

body.page-kunden .customer-labeling-set-card-expanded {
  border-top: 1px solid #e5edf5;
  padding-top: 10px;
}

body.page-kunden .customer-labeling-set-card-expanded > summary {
  cursor: pointer;
  color: #0f766e;
  font-weight: 800;
}

body.page-kunden .customer-labeling-set-variant-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body.page-kunden .customer-labeling-set-variant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

body.page-kunden .customer-labeling-set-variant-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.page-kunden .customer-labeling-set-variant-main strong {
  color: #111827;
  font-size: 14px;
  font-weight: 850;
}

body.page-kunden .customer-labeling-set-variant-main span {
  color: #64748b;
  font-size: 12px;
  overflow-wrap: anywhere;
}

body.page-kunden .customer-labeling-set-variant-media {
  display: grid;
  gap: 6px;
}

body.page-kunden .customer-labeling-set-variant-media:empty {
  display: none;
}

body.page-kunden .customer-labeling-set-variant-media .customer-label-template-media-thumb,
body.page-kunden .customer-labeling-set-variant-media .customer-label-template-media-video {
  min-height: 64px;
  max-height: 86px;
}

body.page-kunden .customer-labeling-set-variant-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px;
  justify-content: end;
}

body.page-kunden .customer-labeling-set-variant-empty,
body.page-kunden .customer-labeling-set-legacy-note {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.customer-labeling-set-modal .customer-label-template-modal-panel,
.customer-labeling-variant-modal .customer-label-template-modal-panel {
  max-height: min(92vh, 980px);
  overflow: auto;
}

.customer-labeling-variant-modal.customer-label-template-modal {
  width: min(1060px, calc(100vw - 32px));
  max-height: 88vh;
  border-radius: 20px;
}

.customer-labeling-variant-modal .customer-label-template-modal-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: 88vh;
  overflow: hidden;
  border-color: #dbe5df;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.customer-labeling-variant-modal .customer-label-template-modal-header {
  padding: 24px 28px 22px;
  align-items: center;
  background: #fff;
}

.customer-labeling-variant-modal .customer-label-template-modal-header h3 {
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
}

.customer-labeling-variant-modal .customer-label-template-modal-header p {
  color: #475569;
  font-size: 13px;
}

.customer-label-template-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 8px;
}

.customer-label-template-modal-tabs {
  display: flex;
  gap: 4px;
  min-height: 62px;
  padding: 0 28px;
  overflow-x: auto;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.customer-label-template-modal-tabs button {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.customer-label-template-modal-tabs button::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.customer-label-template-modal-tabs button.is-active {
  color: #087f4f;
}

.customer-label-template-modal-tabs button.is-active::after {
  background: #0f9f63;
}

.customer-label-template-tab-icon,
.customer-label-template-modal-group h4 > span,
.customer-label-designer-summary__icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: currentColor;
}

.customer-label-template-tab-icon svg,
.customer-label-template-modal-group h4 svg,
.customer-label-designer-summary__icon svg,
.customer-labeling-instruction-row strong svg {
  width: 18px;
  height: 18px;
}

.customer-labeling-variant-modal .customer-label-template-modal-body {
  display: block;
  min-height: 0;
  padding: 22px 28px 24px;
  overflow: auto;
  background: #fff;
}

.customer-labeling-variant-modal .customer-label-template-modal-group {
  gap: 16px;
  padding: 18px;
  border: 1px solid #dbe5df;
  border-radius: 16px;
  background: #fff;
}

.customer-labeling-variant-modal .customer-label-template-modal-group[hidden] {
  display: none;
}

.customer-labeling-variant-modal .customer-label-template-modal-group h4 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #087f4f;
  font-size: 17px;
  line-height: 1.25;
}

.customer-labeling-variant-modal .customer-label-template-form-grid {
  gap: 14px 20px;
}

.customer-labeling-variant-modal .customer-label-template-form-grid--single {
  grid-template-columns: 1fr;
}

.customer-labeling-variant-modal .customer-label-template-form-grid label {
  color: #26364c;
  font-size: 13px;
}

.customer-labeling-variant-modal .customer-label-template-form-grid input,
.customer-labeling-variant-modal .customer-label-template-form-grid select,
.customer-labeling-variant-modal .customer-label-template-form-grid textarea,
.customer-labeling-variant-modal .customer-label-specification-preview__actions input,
.customer-labeling-variant-modal .customer-label-template-upload-dropzone input {
  min-height: 40px;
  border-color: #d5dee9;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
}

.customer-labeling-variant-modal .customer-label-template-form-grid textarea {
  min-height: 78px;
  resize: vertical;
}

.customer-labeling-variant-modal .customer-label-template-form-grid input:focus,
.customer-labeling-variant-modal .customer-label-template-form-grid select:focus,
.customer-labeling-variant-modal .customer-label-template-form-grid textarea:focus,
.customer-labeling-variant-modal .customer-label-specification-preview__actions input:focus,
.customer-labeling-variant-modal .customer-label-template-upload-dropzone input:focus {
  outline: 2px solid rgba(15, 159, 99, 0.16);
  border-color: #0f9f63;
}

.customer-label-template-toggle {
  display: inline-flex !important;
  grid-template-columns: none;
  width: max-content;
  align-items: center;
  gap: 10px;
}

.customer-label-template-toggle input {
  position: relative;
  width: 46px !important;
  height: 24px;
  margin: 0;
  appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #e2e8f0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.customer-label-template-toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.customer-label-template-toggle input:checked {
  border-color: #0f9f63;
  background: #0f9f63;
}

.customer-label-template-toggle input:checked::after {
  transform: translateX(21px);
}

.customer-label-template-source-layout,
.customer-label-template-preview-grid,
.customer-label-template-media-upload {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.customer-label-template-source-fields {
  display: grid;
  gap: 18px;
  align-content: start;
}

.customer-label-designer-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe5df;
  border-radius: 16px;
  background: #f8fafc;
}

.customer-label-designer-preview header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.customer-label-designer-preview h5,
.customer-label-designer-preview p {
  margin: 0;
}

.customer-label-designer-preview h5 {
  color: #0f172a;
  font-size: 14px;
}

.customer-label-designer-preview p,
.customer-label-designer-preview__loading,
.customer-label-designer-preview__error {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.customer-label-designer-preview__canvas {
  display: grid;
  min-height: 300px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
}

.customer-label-designer-preview__link {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  place-items: center;
  padding: 12px;
}

.customer-label-designer-preview__link img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.customer-label-designer-preview--compact .customer-label-designer-preview__canvas {
  min-height: 120px;
}

.customer-label-designer-preview--compact .customer-label-designer-preview__link img {
  max-height: 140px;
}

.customer-label-designer-preview__loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
}

.customer-label-designer-preview__loading[hidden],
.customer-label-designer-preview__error[hidden] {
  display: none;
}

.customer-label-designer-preview__loading span {
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #0f9f63;
  border-radius: 999px;
  animation: customer-label-preview-spin 0.8s linear infinite;
}

.customer-label-designer-preview__error {
  color: #b91c1c;
  font-weight: 750;
}

.customer-labeling-variant-modal .customer-label-dimension-preview,
.customer-labeling-variant-modal .customer-label-specification-preview {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #fff;
}

.customer-labeling-variant-modal .customer-label-dimension-preview__stage {
  justify-content: center;
}

.customer-labeling-variant-modal .customer-label-specification-preview {
  border-top: 1px solid #dbe5df;
}

.customer-labeling-variant-modal .customer-label-specification-preview__content {
  grid-template-columns: 1fr;
}

.customer-labeling-variant-modal .customer-label-specification-preview__canvas {
  min-height: 118px;
  max-width: none;
}

.customer-labeling-variant-modal .customer-label-specification-preview__canvas .customer-label-template-media-thumb img,
.customer-labeling-variant-modal .customer-label-specification-preview__link img {
  max-height: 170px;
  object-fit: contain;
}

.customer-labeling-variant-modal .customer-label-specification-preview__actions {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: end;
}

.customer-labeling-variant-modal .customer-label-specification-preview__actions p,
.customer-labeling-variant-modal .customer-label-specification-preview__actions div {
  grid-column: 1 / -1;
}

.customer-label-designer-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #f8fafc;
}

.customer-label-designer-summary strong,
.customer-label-designer-summary p {
  margin: 0;
}

.customer-label-designer-summary strong {
  color: #0f172a;
  font-size: 13px;
}

.customer-label-designer-summary p {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

.customer-label-designer-summary a[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.customer-label-template-tab-intro,
.customer-label-template-media-info {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 650;
}

.customer-label-template-media-info {
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #f8fafc;
}

.customer-labeling-instruction-row {
  gap: 14px;
  padding: 16px;
  border-color: #dbe5df;
  border-radius: 12px;
  background: #fff;
}

.customer-labeling-instruction-row header strong {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #087f4f;
  font-size: 16px;
}

.customer-labeling-instruction-row .customer-label-template-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-labeling-instruction-add {
  justify-self: stretch;
  min-height: 42px;
  border: 1px dashed #0f9f63;
  border-radius: 10px;
  color: #087f4f;
  background: #f0fdf4;
  font-weight: 850;
}

.customer-label-template-instruction-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  align-items: start;
}

.customer-label-template-instruction-footer aside {
  padding: 16px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #315f51;
  font-size: 13px;
  line-height: 1.45;
}

.customer-labeling-variant-modal .customer-label-template-media-card {
  border-color: #dbe5df;
  border-radius: 14px;
  background: #fff;
}

.customer-labeling-variant-modal .customer-label-template-upload-dropzone {
  border: 0;
  padding: 0;
}

.customer-labeling-variant-modal .customer-label-template-upload-dropzone > span {
  display: none;
}

.customer-labeling-variant-modal .customer-label-template-media-preview .customer-label-template-media-thumb img,
.customer-labeling-variant-modal .customer-label-template-media-video {
  height: 165px;
}

.customer-label-template-media-empty--video {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
}

.customer-label-template-media-empty--video span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #64748b;
  border-radius: 999px;
  color: transparent;
}

.customer-label-template-media-empty--video span::before {
  content: "";
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #64748b;
}

.customer-label-template-media-empty--video strong {
  color: #475569;
  font-size: 13px;
}

.customer-label-template-media-empty--video small {
  color: #64748b;
  font-size: 12px;
}

.customer-labeling-variant-modal .customer-label-template-modal-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: #fff;
}

.customer-labeling-variant-modal .customer-label-template-modal-actions > span {
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 840px) {
  .customer-labeling-variant-modal.customer-label-template-modal {
    width: min(100vw - 16px, 1060px);
    max-height: 92vh;
  }

  .customer-labeling-variant-modal .customer-label-template-modal-panel {
    max-height: 92vh;
    border-radius: 16px;
  }

  .customer-labeling-variant-modal .customer-label-template-modal-header {
    display: grid;
    padding: 18px;
  }

  .customer-label-template-modal-tabs {
    min-height: 56px;
    padding: 0 14px;
  }

  .customer-label-template-modal-tabs button {
    padding: 0 10px;
  }

  .customer-labeling-variant-modal .customer-label-template-modal-body {
    padding: 16px;
  }

  .customer-labeling-variant-modal .customer-label-template-modal-group {
    padding: 14px;
  }

  .customer-labeling-variant-modal .customer-label-template-form-grid,
  .customer-label-template-source-layout,
  .customer-label-template-preview-grid,
  .customer-label-template-media-upload,
  .customer-labeling-instruction-row .customer-label-template-form-grid,
  .customer-label-template-instruction-footer {
    grid-template-columns: 1fr;
  }

  .customer-label-designer-preview__canvas {
    min-height: 220px;
  }

  .customer-labeling-variant-modal .customer-label-specification-preview__actions {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .customer-label-designer-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-label-designer-summary a {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .customer-labeling-variant-modal .customer-label-template-modal-actions {
    grid-template-columns: 1fr 1fr;
    padding: 14px 16px;
  }

  .customer-labeling-variant-modal .customer-label-template-modal-actions > span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  body.page-kunden .customer-labeling-set-card-head,
  body.page-kunden .customer-labeling-set-variant-card {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-labeling-set-actions,
  body.page-kunden .customer-labeling-set-variant-actions {
    justify-content: stretch;
  }
}

@media (max-width: 1200px) {
  body.page-kunden .customer-label-template-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-kunden .customer-label-template-layout {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-base-panel {
    max-width: none;
  }
}

@media (max-width: 1280px) {
  body.page-kunden .customer-label-template-card-head {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  body.page-kunden .customer-label-template-actions {
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) 32px;
  }

  body.page-kunden .customer-label-template-menu {
    grid-column: 4;
    grid-row: 1;
  }
}

@media (max-width: 980px) {
  body.page-kunden .customer-label-template-expanded-grid {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-card-main,
  body.page-kunden .customer-label-template-chips {
    padding-left: 16px;
  }
}

body.page-kunden .customer-label-template-dashboard {
  max-width: 1450px;
  gap: 18px;
  margin: 0 auto;
  color: #101827;
}

body.page-kunden .customer-label-template-dashboard .customer-label-template-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-kunden .customer-label-template-header h4 {
  margin: 0;
  color: #0b1220;
  font-size: 28px;
  font-weight: 850;
  line-height: 1.12;
}

body.page-kunden .customer-label-template-header p {
  max-width: 920px;
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

body.page-kunden .customer-label-template-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

body.page-kunden .customer-label-template-toolbar .btn,
body.page-kunden .customer-labeling-set-actions .btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #0b1220;
  border-radius: 7px;
  background: #08111f;
  box-shadow: 0 8px 18px rgba(8, 17, 31, 0.16);
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-toolbar input[type="search"] {
  width: 280px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
}

body.page-kunden .customer-label-template-toolbar .ghost,
body.page-kunden .customer-labeling-set-actions .ghost,
body.page-kunden .customer-labeling-set-variant-actions .ghost {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

body.page-kunden .customer-label-template-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

body.page-kunden .customer-label-template-kpis article {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 112px;
  padding: 20px 28px;
  border: 1px solid #dce5f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-label-template-kpi-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #e3f8ea;
  color: #22a05a;
}

body.page-kunden .customer-label-template-kpi-icon::before {
  content: "";
  width: 19px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 5px 5px 5px 2px;
  transform: rotate(-42deg);
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="box"] {
  background: #eaf2ff;
  color: #226fd8;
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="box"]::before {
  border-radius: 4px;
  transform: rotate(45deg);
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="media"] {
  background: #f4e8ff;
  color: #a735e8;
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="media"]::before {
  border-radius: 3px;
  transform: none;
}

body.page-kunden .customer-label-template-kpis strong {
  margin: 0;
  color: #060b16;
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
}

body.page-kunden .customer-label-template-kpis span:not(.customer-label-template-kpi-icon) {
  margin-top: 6px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  text-transform: none;
}

body.page-kunden .customer-label-template-kpis small {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-label-template-main-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-kunden .customer-labeling-set-grid {
  display: grid;
  gap: 20px;
}

body.page-kunden .customer-labeling-set-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid #dce5f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-labeling-set-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

body.page-kunden .customer-labeling-set-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.page-kunden .customer-label-template-status,
body.page-kunden .customer-label-template-target {
  min-height: 26px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-status {
  background: #dcf8e8;
  color: #087a45;
}

body.page-kunden .customer-label-template-target {
  background: #e7f0ff;
  color: #075fc5;
}

body.page-kunden .customer-labeling-set-title-block h5 {
  margin: 10px 0 0;
  color: #101827;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.25;
}

body.page-kunden .customer-labeling-set-title-block p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-labeling-set-actions {
  display: grid;
  grid-template-columns: auto auto 34px 28px;
  gap: 12px;
  align-items: center;
}

body.page-kunden .customer-label-template-menu {
  position: relative;
  display: block;
}

body.page-kunden .customer-label-template-menu summary {
  display: grid;
  width: 34px;
  height: 42px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #64748b;
  cursor: pointer;
  list-style: none;
}

body.page-kunden .customer-label-template-menu summary::-webkit-details-marker {
  display: none;
}

body.page-kunden .customer-label-template-menu[open] summary {
  border-color: #dce5f0;
  background: #ffffff;
}

body.page-kunden .customer-label-template-menu button {
  display: block;
  width: 180px;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  font-size: 13px;
  font-weight: 750;
}

body.page-kunden .customer-label-template-menu button:hover {
  background: #f8fafc;
}

body.page-kunden .customer-label-template-menu[open]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 1;
  width: 180px;
  height: 104px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14);
}

body.page-kunden .customer-label-template-menu[open] button {
  position: absolute;
  right: 0;
  z-index: 2;
}

body.page-kunden .customer-label-template-menu[open] button:first-of-type {
  top: 52px;
}

body.page-kunden .customer-label-template-menu[open] button:nth-of-type(2) {
  top: 86px;
}

body.page-kunden .customer-label-template-menu[open] button:nth-of-type(3) {
  top: 120px;
}

body.page-kunden .customer-labeling-set-chevron {
  display: grid;
  width: 28px;
  height: 42px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #475569;
  cursor: pointer;
}

body.page-kunden .customer-labeling-set-chevron::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

body.page-kunden .customer-labeling-set-card:has(.customer-labeling-set-card-expanded[open]) .customer-labeling-set-chevron::before {
  transform: rotate(225deg);
}

body.page-kunden .customer-labeling-set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  padding: 0;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip {
  position: relative;
  min-height: auto;
  padding: 0 14px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 750;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip:first-child {
  padding-left: 0;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip + .customer-label-template-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 1px;
  height: 14px;
  background: #cbd5e1;
}

body.page-kunden .customer-labeling-set-card-expanded {
  padding: 18px 14px 6px;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #ffffff;
}

body.page-kunden .customer-labeling-set-card-expanded > summary {
  cursor: pointer;
  color: #008f83;
  font-size: 14px;
  font-weight: 850;
  list-style: none;
}

body.page-kunden .customer-labeling-set-card-expanded > summary::-webkit-details-marker {
  display: none;
}

body.page-kunden .customer-labeling-set-card-expanded > summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

body.page-kunden .customer-labeling-set-card-expanded[open] > summary::before {
  transform: rotate(225deg) translate(-2px, -1px);
}

body.page-kunden .customer-labeling-set-variant-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

body.page-kunden .customer-labeling-set-variant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px 320px;
  gap: 26px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce5f0;
  border-radius: 14px;
  background: #f8fafc;
}

body.page-kunden .customer-labeling-set-variant-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

body.page-kunden .customer-labeling-set-variant-main > strong {
  color: #101827;
  font-size: 16px;
  font-weight: 850;
}

body.page-kunden .customer-labeling-set-variant-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 18px;
}

body.page-kunden .customer-labeling-set-variant-fields div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.page-kunden .customer-labeling-set-variant-fields span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.page-kunden .customer-labeling-set-variant-fields strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.page-kunden .customer-labeling-set-variant-media {
  display: grid;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #ffffff;
}

body.page-kunden .customer-labeling-set-variant-media .customer-label-template-media-thumb,
body.page-kunden .customer-labeling-set-variant-media .customer-label-template-media-video,
body.page-kunden .customer-labeling-set-variant-media-placeholder {
  display: grid;
  width: 100%;
  height: 98px;
  min-height: 98px;
  max-height: 98px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

body.page-kunden .customer-labeling-set-variant-media img {
  width: 100%;
  height: 98px;
  object-fit: contain;
}

body.page-kunden .customer-labeling-set-variant-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
  justify-content: end;
}

body.page-kunden .customer-labeling-set-variant-actions .danger {
  color: #e11d1d;
}

body.page-kunden .customer-labeling-set-add-zone {
  display: grid;
  min-height: 48px;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

body.page-kunden .customer-labeling-set-add-zone:hover {
  border-color: #008f83;
  background: #f0fdfa;
  color: #00796f;
}

body.page-kunden .customer-labeling-set-variant-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: #334155;
  text-align: left;
}

body.page-kunden .customer-labeling-set-variant-empty p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

body.page-kunden .customer-labeling-set-empty-icon {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #dce5f0;
  border-radius: 999px;
  background: #f8fafc;
}

@media (max-width: 1200px) {
  body.page-kunden .customer-label-template-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-kunden .customer-labeling-set-variant-card {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  body.page-kunden .customer-labeling-set-variant-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  body.page-kunden .customer-label-template-dashboard .customer-label-template-header,
  body.page-kunden .customer-labeling-set-card-head {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-toolbar,
  body.page-kunden .customer-labeling-set-actions {
    justify-content: stretch;
  }
}

@media (max-width: 720px) {
  body.page-kunden .customer-label-template-dashboard {
    gap: 14px;
  }

  body.page-kunden .customer-label-template-kpis,
  body.page-kunden .customer-labeling-set-variant-card,
  body.page-kunden .customer-labeling-set-variant-fields,
  body.page-kunden .customer-labeling-set-variant-actions {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-toolbar,
  body.page-kunden .customer-labeling-set-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-toolbar input[type="search"],
  body.page-kunden .customer-label-template-toolbar button,
  body.page-kunden .customer-labeling-set-actions button {
    width: 100%;
  }

  body.page-kunden .customer-labeling-set-card {
    padding: 18px;
  }

  body.page-kunden .customer-labeling-set-card-expanded {
    padding: 14px 10px;
  }
}

body.page-kunden .customer-template-grid--dashboard {
  display: block;
  max-width: 100%;
}

body.page-kunden .customer-label-template-dashboard {
  display: grid;
  width: 100%;
  max-width: 1450px;
  gap: 18px;
  margin: 0 auto;
  color: #101827;
}

body.page-kunden .customer-label-template-dashboard .customer-label-template-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-kunden .customer-label-template-header h4 {
  margin: 0;
  color: #0b1220;
  font-size: 28px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: 0;
}

body.page-kunden .customer-label-template-header p {
  max-width: 920px;
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

body.page-kunden .customer-label-template-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

body.page-kunden .customer-label-template-toolbar .btn,
body.page-kunden .customer-labeling-set-actions .btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #0b1220;
  border-radius: 7px;
  background: #08111f;
  box-shadow: 0 8px 18px rgba(8, 17, 31, 0.16);
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-toolbar input[type="search"] {
  width: 280px;
  min-width: 0;
  min-height: 42px;
  padding: 0 14px 0 38px;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  background-image: radial-gradient(circle at 13px 19px, transparent 6px, #64748b 7px, transparent 8px), linear-gradient(45deg, transparent 48%, #64748b 49%, #64748b 56%, transparent 57%);
  background-position: 0 0, 20px 23px;
  background-size: 28px 42px, 10px 10px;
  background-repeat: no-repeat;
}

body.page-kunden .customer-label-template-toolbar .ghost,
body.page-kunden .customer-labeling-set-actions .ghost,
body.page-kunden .customer-labeling-set-variant-actions .ghost {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}

body.page-kunden .customer-label-template-filter-button,
body.page-kunden .customer-labeling-set-action-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

body.page-kunden .customer-label-template-filter-button span,
body.page-kunden [data-action-icon] {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: currentColor;
}

body.page-kunden .customer-label-template-filter-button span::before,
body.page-kunden .customer-label-template-filter-button span::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

body.page-kunden .customer-label-template-filter-button span::before {
  top: 4px;
  box-shadow: 4px 5px 0 currentColor;
}

body.page-kunden .customer-label-template-filter-button span::after {
  right: 7px;
  bottom: 2px;
}

body.page-kunden [data-action-icon="plus"]::before,
body.page-kunden [data-action-icon="plus"]::after {
  content: "";
  position: absolute;
  inset: 7px 2px auto;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

body.page-kunden [data-action-icon="plus"]::after {
  transform: rotate(90deg);
}

body.page-kunden [data-action-icon="edit"]::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 5px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(38deg);
}

body.page-kunden [data-action-icon="duplicate"]::before,
body.page-kunden [data-action-icon="duplicate"]::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

body.page-kunden [data-action-icon="duplicate"]::before {
  right: 2px;
  top: 2px;
}

body.page-kunden [data-action-icon="duplicate"]::after {
  left: 2px;
  bottom: 2px;
  background: #ffffff;
}

body.page-kunden [data-action-icon="toggle"]::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

body.page-kunden [data-action-icon="toggle"]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 2px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

body.page-kunden [data-action-icon="delete"]::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 9px;
  height: 10px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 2px 2px;
}

body.page-kunden [data-action-icon="delete"]::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

body.page-kunden .customer-label-template-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

body.page-kunden .customer-label-template-kpis article {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 112px;
  padding: 20px 28px;
  border: 1px solid #dce5f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-label-template-kpi-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 999px;
  background: #e3f8ea;
  color: #22a05a;
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="box"] {
  background: #eaf2ff;
  color: #226fd8;
}

body.page-kunden .customer-label-template-kpi-icon[data-kpi-icon="media"] {
  background: #f4e8ff;
  color: #a735e8;
}

body.page-kunden .customer-label-template-kpis strong,
body.page-kunden .customer-label-template-kpis span:not(.customer-label-template-kpi-icon),
body.page-kunden .customer-label-template-kpis small {
  display: block;
}

body.page-kunden .customer-label-template-kpis strong {
  margin: 0;
  color: #060b16;
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
}

body.page-kunden .customer-label-template-kpis span:not(.customer-label-template-kpi-icon) {
  margin-top: 6px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  text-transform: none;
}

body.page-kunden .customer-label-template-kpis small {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-label-template-main-panel {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-kunden .customer-labeling-set-grid {
  display: grid;
  gap: 20px;
}

body.page-kunden .customer-labeling-set-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid #dce5f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

body.page-kunden .customer-labeling-set-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

body.page-kunden .customer-labeling-set-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.page-kunden .customer-label-template-status,
body.page-kunden .customer-label-template-target {
  min-height: 26px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

body.page-kunden .customer-label-template-status {
  background: #dcf8e8;
  color: #087a45;
}

body.page-kunden .customer-labeling-set-card.is-inactive .customer-label-template-status {
  background: #f1f5f9;
  color: #64748b;
}

body.page-kunden .customer-label-template-target {
  background: #e7f0ff;
  color: #075fc5;
}

body.page-kunden .customer-labeling-set-title-block h5 {
  margin: 10px 0 0;
  color: #101827;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0;
}

body.page-kunden .customer-labeling-set-title-block p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

body.page-kunden .customer-labeling-set-actions {
  display: grid;
  grid-template-columns: auto auto 28px 28px;
  gap: 12px;
  align-items: center;
}

body.page-kunden .customer-label-template-menu {
  position: relative;
  display: block;
}

body.page-kunden .customer-label-template-menu summary {
  display: grid;
  width: 28px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  list-style: none;
}

body.page-kunden .customer-label-template-menu summary::-webkit-details-marker {
  display: none;
}

body.page-kunden .customer-label-template-menu[open] summary {
  border: 1px solid #dce5f0;
  background: #ffffff;
  color: #475569;
}

body.page-kunden .customer-label-template-menu button {
  display: block;
  width: 180px;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  font-size: 13px;
  font-weight: 750;
}

body.page-kunden .customer-label-template-menu button:hover {
  background: #f8fafc;
}

body.page-kunden .customer-label-template-menu[open]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 1;
  width: 180px;
  height: 104px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14);
}

body.page-kunden .customer-label-template-menu[open] button {
  position: absolute;
  right: 0;
  z-index: 2;
}

body.page-kunden .customer-label-template-menu[open] button:first-of-type {
  top: 52px;
}

body.page-kunden .customer-label-template-menu[open] button:nth-of-type(2) {
  top: 86px;
}

body.page-kunden .customer-label-template-menu[open] button:nth-of-type(3) {
  top: 120px;
}

body.page-kunden .customer-labeling-set-chevron {
  display: grid;
  width: 28px;
  height: 42px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #475569;
  cursor: pointer;
}

body.page-kunden .customer-labeling-set-chevron::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

body.page-kunden .customer-labeling-set-card:has(.customer-labeling-set-card-expanded[open]) .customer-labeling-set-chevron::before {
  transform: rotate(225deg);
}

body.page-kunden .customer-labeling-set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  padding: 0;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip {
  position: relative;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: auto;
  padding: 0 14px;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 750;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip:first-child {
  padding-left: 0;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip + .customer-label-template-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 1px;
  height: 14px;
  background: #cbd5e1;
}

body.page-kunden .customer-labeling-set-chips .customer-label-template-chip::after {
  content: "";
  width: 14px;
  height: 14px;
  order: -1;
  border: 1.8px solid #64748b;
  border-radius: 3px;
  box-sizing: border-box;
}

body.page-kunden .customer-labeling-set-chips [data-meta-icon="variant"]::after {
  border-radius: 999px;
}

body.page-kunden .customer-labeling-set-chips [data-meta-icon="media"]::after {
  border-radius: 2px;
  box-shadow: inset 4px 5px 0 -3px #64748b;
}

body.page-kunden .customer-labeling-set-chips [data-meta-icon="usable"]::after {
  border-radius: 999px;
  border-color: #55ba47;
  box-shadow: inset 0 0 0 3px #ffffff;
  background: #55ba47;
}

body.page-kunden .customer-labeling-set-card-expanded {
  padding: 18px 14px 6px;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #ffffff;
}

body.page-kunden .customer-labeling-set-card-expanded > summary {
  cursor: pointer;
  color: #008f83;
  font-size: 14px;
  font-weight: 850;
  list-style: none;
}

body.page-kunden .customer-labeling-set-card-expanded > summary::-webkit-details-marker {
  display: none;
}

body.page-kunden .customer-labeling-set-card-expanded > summary::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

body.page-kunden .customer-labeling-set-card-expanded[open] > summary::before {
  transform: rotate(225deg) translate(-2px, -1px);
}

body.page-kunden .customer-labeling-set-variant-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

body.page-kunden .customer-labeling-set-variant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px 320px;
  gap: 26px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce5f0;
  border-radius: 14px;
  background: #f8fafc;
}

body.page-kunden .customer-labeling-set-variant-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

body.page-kunden .customer-labeling-set-variant-main > strong {
  color: #101827;
  font-size: 16px;
  font-weight: 850;
}

body.page-kunden .customer-labeling-set-variant-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 18px;
}

body.page-kunden .customer-labeling-set-variant-fields div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.page-kunden .customer-labeling-set-variant-fields span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.page-kunden .customer-labeling-set-variant-fields strong {
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

body.page-kunden .customer-labeling-set-variant-media {
  display: grid;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #ffffff;
}

body.page-kunden .customer-labeling-set-variant-media .customer-label-template-media-thumb,
body.page-kunden .customer-labeling-set-variant-media .customer-label-template-media-video,
body.page-kunden .customer-labeling-set-variant-media-placeholder {
  display: grid;
  width: 100%;
  height: 98px;
  min-height: 98px;
  max-height: 98px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

body.page-kunden .customer-labeling-set-variant-media img {
  width: 100%;
  height: 98px;
  object-fit: contain;
}

body.page-kunden .customer-labeling-set-variant-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 12px;
  justify-content: end;
}

body.page-kunden .customer-labeling-set-variant-actions .danger {
  color: #e11d1d;
}

body.page-kunden .customer-labeling-set-add-zone {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

body.page-kunden .customer-labeling-set-add-zone span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
}

body.page-kunden .customer-labeling-set-add-zone:hover {
  border-color: #008f83;
  background: #f0fdfa;
  color: #00796f;
}

body.page-kunden .customer-labeling-set-variant-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: #334155;
  text-align: left;
}

body.page-kunden .customer-labeling-set-variant-empty p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

body.page-kunden .customer-labeling-set-empty-icon {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #dce5f0;
  border-radius: 999px;
  background: #f8fafc;
}

@media (max-width: 1200px) {
  body.page-kunden .customer-label-template-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  body.page-kunden .customer-labeling-set-variant-card {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  body.page-kunden .customer-labeling-set-variant-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  body.page-kunden .customer-label-template-dashboard .customer-label-template-header,
  body.page-kunden .customer-labeling-set-card-head {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-toolbar,
  body.page-kunden .customer-labeling-set-actions {
    justify-content: stretch;
  }
}

@media (max-width: 720px) {
  body.page-kunden .customer-label-template-dashboard {
    gap: 14px;
  }

  body.page-kunden .customer-label-template-kpis,
  body.page-kunden .customer-labeling-set-variant-card,
  body.page-kunden .customer-labeling-set-variant-fields,
  body.page-kunden .customer-labeling-set-variant-actions {
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-toolbar,
  body.page-kunden .customer-labeling-set-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.page-kunden .customer-label-template-toolbar input[type="search"],
  body.page-kunden .customer-label-template-toolbar button,
  body.page-kunden .customer-labeling-set-actions button {
    width: 100%;
  }

  body.page-kunden .customer-labeling-set-card {
    padding: 18px;
  }

  body.page-kunden .customer-labeling-set-card-expanded {
    padding: 14px 10px;
  }
}

.public-confirmation-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.public-confirmation-modal {
  display: grid;
  gap: 18px;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #dbe4ee;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.public-confirmation-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(13, 106, 60, 0.16);
  border-radius: 14px;
  background: rgba(13, 106, 60, 0.07);
}

.public-confirmation-modal-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #0d6a3c;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.public-confirmation-modal h2 {
  margin: 0;
  color: #111827;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: 0;
}

.public-confirmation-modal p {
  margin: 6px 0 0;
  color: #4b5563;
}

.public-confirmation-pdf-preview {
  min-height: 500px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
}

.public-confirmation-pdf-preview iframe {
  display: block;
  width: 100%;
  height: min(62vh, 650px);
  min-height: 500px;
  border: 0;
}

.public-confirmation-pdf-preview p,
.public-confirmation-modal-warning {
  padding: 16px;
  border: 1px solid #f3d7a2;
  border-radius: 12px;
  background: #fff8ea;
  color: #8a5a0a;
  font-weight: 700;
}

.public-confirmation-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.public-confirmation-modal .public-confirmation-modal-danger {
  border-color: #b91c1c;
  background: #b91c1c;
  color: #ffffff;
}

.public-confirmation-modal .public-confirmation-modal-danger:hover,
.public-confirmation-modal .public-confirmation-modal-danger:focus {
  border-color: #991b1b;
  background: #991b1b;
  color: #ffffff;
}

.public-confirmation-modal .public-confirmation-modal-secondary {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #111827;
}

@media (max-width: 700px) {
  .public-confirmation-modal-backdrop {
    align-items: end;
    padding: 12px;
  }

  .public-confirmation-modal {
    max-height: calc(100vh - 24px);
    padding: 16px;
    border-radius: 16px;
  }

  .public-confirmation-modal-header {
    grid-template-columns: 1fr;
  }

  .public-confirmation-pdf-preview {
    display: none;
  }

  .public-confirmation-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-confirmation-modal-actions :is(a, button) {
    width: 100%;
  }
}

body.supplier-page.is-loading [data-supplier-orders-open-count] {
  display: none !important;
}

body.supplier-page [data-supplier-skeleton] {
  display: none;
}

body.supplier-page.is-loading [data-supplier-skeleton] {
  display: grid;
}

body.supplier-page.is-ready [data-supplier-skeleton],
body.supplier-page.is-error [data-supplier-skeleton] {
  display: none !important;
}

body.supplier-page.is-ready [data-supplier-dynamic],
body.supplier-page.is-error [data-supplier-dynamic] {
  display: block;
}

body.supplier-page.is-ready .supplier-hydrated-content,
body.supplier-page.is-error .supplier-hydrated-content {
  display: contents;
}

.supplier-page-skeleton {
  gap: 16px;
}

.supplier-hydrated-content {
  display: contents;
}

body[data-page='supplier-dashboard'] .supplier-dashboard-content #supplierDashboardHero[hidden],
body[data-page='supplier-dashboard'] .supplier-dashboard-content #supplierDashboardHero.is-hidden,
body[data-page='supplier-dashboard'] .supplier-dashboard-content .supplier-dashboard-steps[hidden],
body[data-page='supplier-dashboard'] .supplier-dashboard-content .supplier-dashboard-steps.is-hidden,
body[data-page='supplier-dashboard'] .supplier-dashboard-content #supplierDashboardActionRow[hidden],
body[data-page='supplier-dashboard'] .supplier-dashboard-content #supplierDashboardActionRow.is-hidden {
  display: none !important;
}

.supplier-skeleton-card,
.supplier-skeleton-filter,
.supplier-skeleton-project {
  min-height: 112px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.supplier-skeleton-filter {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.supplier-skeleton-project {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.supplier-skeleton-line,
.supplier-skeleton-tile {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 48%, #eef2f7 100%);
  background-size: 220% 100%;
  animation: supplierSkeletonPulse 1.2s ease-in-out infinite;
}

.supplier-skeleton-line {
  width: min(420px, 100%);
  height: 14px;
}

.supplier-skeleton-line.is-wide {
  width: min(640px, 100%);
  height: 24px;
}

.supplier-skeleton-line.is-short {
  width: min(240px, 70%);
}

.supplier-skeleton-tile {
  min-height: 82px;
}

.supplier-dashboard-skeleton .supplier-dashboard-hero {
  min-height: 168px;
}

.supplier-order-detail-skeleton .supplier-order-hero {
  min-height: 132px;
}

.supplier-order-detail-skeleton .supplier-phase-bar {
  min-height: 86px;
  padding: 20px;
}

.supplier-orders-page-skeleton {
  align-content: start;
}

.supplier-load-error-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff7f7;
  color: #7f1d1d;
}

.supplier-load-error-card strong,
.supplier-load-error-card p {
  margin: 0;
}

.supplier-load-error-card button {
  width: fit-content;
}

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

body.page-projekt .project-erp-header.project-erp-header--with-cover {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 180px !important;
  gap: 20px !important;
  align-items: stretch !important;
}

body.page-projekt .project-erp-header-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

body.page-projekt .project-erp-header--with-cover .project-erp-process-summary {
  display: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-cover-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 10px;
  align-self: stretch;
  padding: 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-cover-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

body.page-projekt .project-cover-card__media:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

body.page-projekt .project-cover-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-projekt .project-cover-card__placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(239, 246, 255, 0.72)),
    repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.12) 0 1px, transparent 1px 10px);
}

body.page-projekt .project-cover-card__media img + .project-cover-card__placeholder {
  display: none;
}

body.page-projekt .project-cover-card__media.is-missing img {
  display: none;
}

body.page-projekt .project-cover-card__media.is-missing .project-cover-card__placeholder {
  display: flex;
}

body.page-projekt .project-cover-card__dropdown {
  position: absolute;
  z-index: 20;
  top: 10px;
  right: 10px;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

body.page-projekt .project-cover-card__dropdown button {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

body.page-projekt .project-cover-card__dropdown button:hover:not(:disabled) {
  background: #f8fafc;
}

body.page-projekt .project-cover-card__dropdown button.danger {
  color: #b91c1c;
}

body.page-projekt .project-cover-card__dropdown button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  body.page-projekt .project-erp-header.project-erp-header--with-cover {
    grid-template-columns: 1fr !important;
  }

  body.page-projekt .project-cover-card {
    max-width: 220px;
  }
}

@media (max-width: 700px) {
  body.page-projekt .project-erp-header--with-cover .project-erp-process-summary,
  body.page-projekt .project-erp-header--with-cover .project-erp-header-grid {
    grid-template-columns: 1fr !important;
  }
}

body.page-projekt .project-subprocess-navigation {
  overflow-x: auto;
  padding-bottom: 4px;
}

body.page-projekt .project-subprocess-bar {
  min-width: max-content;
}

body.page-projekt .project-sms-supplier-material-clarification-list {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

body.page-projekt .project-sms-supplier-material-clarification-card,
body.page-projekt .project-sms-supplier-confirmation-row {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-supplier-material-clarification-card__head,
body.page-projekt .project-sms-supplier-confirmation-row {
  align-items: center;
  grid-template-columns: minmax(180px, 1fr) auto auto auto minmax(180px, 1fr);
}

body.page-projekt .project-sms-supplier-material-clarification-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-supplier-material-clarification-card__head strong,
body.page-projekt .project-sms-supplier-confirmation-row strong {
  display: block;
  color: #0f172a;
}

body.page-projekt .project-sms-supplier-material-clarification-card__head span,
body.page-projekt .project-sms-supplier-confirmation-row span,
body.page-projekt .project-sms-supplier-confirmation-row small {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-section {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-delivery-planning {
  margin-bottom: 12px;
}

body.page-projekt .project-sms-delivery-planning__grid {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-delivery-planning fieldset {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
  padding: 14px;
}

body.page-projekt .project-sms-delivery-planning legend {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 6px;
}

body.page-projekt .project-sms-delivery-planning .customer-create-field--wide {
  grid-column: 1 / -1;
}

body.page-projekt .project-sms-delivery-planning__summary,
body.page-projekt .project-sms-delivery-planning__facts-inline,
body.page-projekt .project-sms-delivery-planning__stale-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 12px;
}

body.page-projekt .project-sms-delivery-planning__fact {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
}

body.page-projekt .project-sms-delivery-planning__fact span {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__fact strong {
  color: #0f172a;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__sources {
  background: #f8fbff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
}

body.page-projekt .project-sms-delivery-planning__readiness {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
}

body.page-projekt .project-sms-delivery-planning__readiness-head,
body.page-projekt .project-sms-delivery-planning__readiness-row {
  align-items: center;
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__readiness-head {
  grid-template-columns: 1fr auto;
}

body.page-projekt .project-sms-delivery-planning__readiness-row {
  border-top: 1px solid #e2e8f0;
  grid-template-columns: minmax(140px, 0.8fr) auto minmax(140px, 1fr);
  padding-top: 8px;
}

body.page-projekt .project-sms-delivery-planning__readiness-row span {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-delivery-planning__readiness-row strong {
  color: #0f172a;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__readiness-meta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.page-projekt .project-sms-delivery-planning__readiness-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__position-chip {
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: inline-flex;
  gap: 6px;
  padding: 5px 8px;
}

body.page-projekt .project-sms-delivery-planning__readiness-list {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}

body.page-projekt .project-sms-delivery-planning__readiness-list.is-blocking {
  background: #fef2f2;
  border-color: #fecaca;
}

body.page-projekt .project-sms-delivery-planning__readiness-list ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

body.page-projekt .project-sms-delivery-planning__override {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

body.page-projekt .project-sms-delivery-planning__override.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-delivery-planning__override-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

body.page-projekt .project-sms-delivery-planning__override-risks,
body.page-projekt .project-sms-delivery-planning__override-confirm {
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__override-risks label,
body.page-projekt .project-sms-delivery-planning__override-confirm {
  align-items: flex-start;
  color: #334155;
  display: flex;
  font-size: 0.9rem;
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__override p {
  color: #334155;
  margin: 0;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__sources-head,
body.page-projekt .project-sms-delivery-planning__source-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(150px, 0.75fr) minmax(180px, 1fr) auto;
}

body.page-projekt .project-sms-delivery-planning__sources-head {
  grid-template-columns: 1fr auto;
}

body.page-projekt .project-sms-delivery-planning__source-row span {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__source-row strong {
  color: #0f172a;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__supplier-view,
body.page-projekt .project-sms-delivery-planning__partner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
}

body.page-projekt .project-sms-delivery-planning__supplier-view strong,
body.page-projekt .project-sms-delivery-planning__partner > strong {
  color: #0f172a;
}

body.page-projekt .project-sms-delivery-planning__supplier-view span {
  color: #475569;
  font-size: 0.9rem;
}

body.page-projekt .project-sms-delivery-planning__supplier-view.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-delivery-planning__supplier-view.is-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

body.page-projekt .project-sms-delivery-planning__stale {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  margin-bottom: 12px;
  padding: 10px 12px;
}

body.page-projekt .project-sms-delivery-planning__stale > strong {
  display: block;
  margin-bottom: 10px;
}

body.page-projekt .project-sms-delivery-planning__stale p {
  margin: 0;
}

body.page-projekt .project-sms-delivery-planning__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

body.page-projekt .project-sms-delivery-planning {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  padding: 16px;
}

body.page-projekt .project-sms-delivery-planning__hero {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__hero > div {
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__hero h2 {
  color: #0f172a;
  font-size: 1.3rem;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 4px;
}

body.page-projekt .project-sms-delivery-planning__hero p,
body.page-projekt .project-sms-delivery-planning__hero small {
  color: #64748b;
  display: block;
  font-size: 12px;
  margin: 0;
}

body.page-projekt .project-sms-delivery-planning__hidden-form {
  display: none;
}

body.page-projekt .project-sms-delivery-planning__kpis {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-projekt .project-sms-delivery-planning__kpi,
body.page-projekt .project-sms-delivery-planning__date-group,
body.page-projekt .project-sms-delivery-planning__supplier,
body.page-projekt .project-sms-delivery-planning__completion,
body.page-projekt .project-sms-delivery-planning__empty {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
}

body.page-projekt .project-sms-delivery-planning__kpi {
  align-items: center;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 9px 12px;
}

body.page-projekt .project-sms-delivery-planning__kpi span,
body.page-projekt .project-sms-delivery-planning__kpi small,
body.page-projekt .project-sms-delivery-planning__handover span,
body.page-projekt .project-sms-delivery-planning__phase span,
body.page-projekt .project-sms-delivery-planning__table th {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__kpi strong {
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1;
}

body.page-projekt .project-sms-delivery-planning__date-group {
  min-width: 0;
  overflow: hidden;
}

body.page-projekt .project-sms-delivery-planning__date-group > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-width: 0;
  padding: 12px 14px;
}

body.page-projekt .project-sms-delivery-planning__date-group > summary > div {
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__date-group > summary::-webkit-details-marker {
  display: none;
}

body.page-projekt .project-sms-delivery-planning__date-group h3,
body.page-projekt .project-sms-delivery-planning__supplier h4 {
  color: #0f172a;
  font-size: 1rem;
  letter-spacing: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__date-group summary span {
  color: #64748b;
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

body.page-projekt .project-sms-delivery-planning__date-actions {
  align-items: center;
  border-top: 1px solid #edf2f7;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px;
}

body.page-projekt .project-sms-delivery-planning__supplier {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

body.page-projekt .project-sms-delivery-planning__supplier-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

body.page-projekt .project-sms-delivery-planning__supplier-title {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__supplier-icon {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  color: #334155;
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

body.page-projekt .project-sms-delivery-planning__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

body.page-projekt .project-sms-delivery-planning__handover {
  background: #fff;
  border: 0;
  border-left: 1px solid #e2e8f0;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0 0 0 14px;
  text-align: left;
}

body.page-projekt .project-sms-delivery-planning__next-action {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 170px;
  text-align: right;
}

body.page-projekt .project-sms-delivery-planning__next-action button {
  max-width: 100%;
  white-space: normal;
}

body.page-projekt .project-sms-delivery-planning__next-action span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__next-action strong {
  color: #0f172a;
  font-size: 13px;
}

body.page-projekt button.project-sms-delivery-planning__handover {
  cursor: pointer;
  font: inherit;
}

body.page-projekt .project-sms-delivery-planning__handover strong,
body.page-projekt .project-sms-delivery-planning__phase strong {
  color: #0f172a;
  font-size: 13px;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__timeline {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px 14px 14px;
}

body.page-projekt .project-sms-delivery-planning__timeline-head,
body.page-projekt .project-sms-delivery-planning__timeline-facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-projekt .project-sms-delivery-planning__timeline-head {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body.page-projekt .project-sms-delivery-planning__timeline-head > div:last-child {
  text-align: right;
}

body.page-projekt .project-sms-delivery-planning__timeline-head > div:only-child {
  text-align: left;
}

body.page-projekt .project-sms-delivery-planning__timeline-head span,
body.page-projekt .project-sms-delivery-planning__axis-marker small {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__timeline-head strong,
body.page-projekt .project-sms-delivery-planning__axis-marker strong {
  color: #0f172a;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

body.page-projekt .project-sms-delivery-planning__timeline-scroll {
  overflow-x: auto;
  padding: 4px 0 2px;
}

body.page-projekt .project-sms-delivery-planning__axis,
body.page-projekt .project-sms-delivery-planning__phase-row {
  min-width: 760px;
}

body.page-projekt .project-sms-delivery-planning__axis {
  display: block;
  height: 76px;
  position: relative;
}

body.page-projekt .project-sms-delivery-planning__axis-line {
  background: linear-gradient(90deg, #94a3b8, #2563eb);
  border-radius: 999px;
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 28px;
  width: 100%;
}

body.page-projekt .project-sms-delivery-planning__axis-marker {
  align-items: center;
  background: transparent;
  border: 0;
  color: #0f172a;
  display: grid;
  font: inherit;
  gap: 1px;
  justify-items: center;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 13px;
  transform: translateX(-50%);
  width: 126px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker > span:first-child,
body.page-projekt .project-sms-delivery-planning__axis-marker--start {
  color: #2563eb;
  font-size: 18px;
  line-height: 1;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--start {
  left: 0;
  transform: none;
  width: 24px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--partner {
  left: 34%;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--logistics {
  cursor: pointer;
  left: 62%;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--logistics:hover strong,
body.page-projekt .project-sms-delivery-planning__axis-marker--logistics:focus-visible strong {
  color: #2563eb;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  left: 100%;
  transform: translateX(-100%);
}

body.page-projekt .project-sms-delivery-planning__window-label {
  color: #64748b;
  display: grid;
  font-size: 10px;
  gap: 1px;
  position: absolute;
  text-align: center;
  top: 53px;
  transform: translateX(-50%);
}

body.page-projekt .project-sms-delivery-planning__window-label strong {
  color: #334155;
}

body.page-projekt .project-sms-delivery-planning__window-label--partner {
  left: 48%;
}

body.page-projekt .project-sms-delivery-planning__window-label--logistics {
  left: 80%;
}

body.page-projekt .project-sms-delivery-planning__phase-row {
  align-items: stretch;
  display: flex;
  gap: 6px;
}

body.page-projekt .project-sms-delivery-planning__phase {
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: grid;
  flex: 0 0 max(86px, var(--phase-width, 12%));
  gap: 2px;
  min-height: 52px;
  padding: 7px 9px;
  position: relative;
  text-align: left;
}

body.page-projekt .project-sms-delivery-planning__phase:hover {
  background: #fff;
  border-color: #bfdbfe;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

body.page-projekt .project-sms-delivery-planning__phase span {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-delivery-planning__phase small {
  display: none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

body.page-projekt .project-sms-delivery-planning__phase:hover small,
body.page-projekt .project-sms-delivery-planning__phase:focus-visible small {
  background: #0f172a;
  border-radius: 6px;
  color: #fff;
  display: block;
  opacity: 1;
  padding: 4px 6px;
  pointer-events: none;
  position: absolute;
  transform: translateY(36px);
  z-index: 2;
}

body.page-projekt .project-sms-delivery-planning__phase small {
  color: #64748b;
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__timeline-blockers {
  color: #b91c1c;
  font-size: 12px;
  margin: 0;
  padding-left: 18px;
}

body.page-projekt .project-sms-delivery-planning__table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

body.page-projekt .project-sms-delivery-planning__table {
  border-collapse: collapse;
  min-width: 780px;
  width: 100%;
}

body.page-projekt .project-sms-delivery-planning__table th,
body.page-projekt .project-sms-delivery-planning__table td {
  border-top: 1px solid #edf2f7;
  padding: 6px 9px;
  text-align: left;
  vertical-align: middle;
}

body.page-projekt .project-sms-delivery-planning__table td {
  color: #334155;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__table td strong {
  color: #0f172a;
  display: block;
  font-size: 13px;
}

body.page-projekt .project-sms-delivery-planning__table td small {
  color: #64748b;
  display: block;
  margin-top: 2px;
}

body.page-projekt .project-sms-delivery-planning__position-image img,
body.page-projekt .project-sms-delivery-planning__position-image span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: block;
  height: 46px;
  object-fit: contain;
  width: 50px;
}

body.page-projekt .project-sms-delivery-planning__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

body.page-projekt .project-sms-delivery-planning__sizes span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #334155;
  font-size: 10px;
  padding: 1px 5px;
}

body.page-projekt .project-sms-delivery-planning__completion,
body.page-projekt .project-sms-delivery-planning__empty {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
}

body.page-projekt .project-sms-delivery-planning__completion > div,
body.page-projekt .project-sms-delivery-planning__empty > div {
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__completion button,
body.page-projekt .project-sms-delivery-planning__empty button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
}

body.page-projekt .project-sms-delivery-planning__completion.is-complete {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-delivery-planning__completion strong,
body.page-projekt .project-sms-delivery-planning__empty strong {
  color: #0f172a;
}

body.page-projekt .project-sms-delivery-planning__completion span,
body.page-projekt .project-sms-delivery-planning__empty span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__modal[hidden] {
  display: none;
}

body.page-projekt .project-sms-delivery-planning__modal {
  align-items: center;
  background: rgba(15, 23, 42, 0.28);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 18px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}

body.page-projekt .project-sms-delivery-planning__dialog {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  display: grid;
  gap: 14px;
  max-width: 460px;
  padding: 16px;
  width: min(100%, 460px);
}

body.page-projekt .project-sms-delivery-planning__dialog header,
body.page-projekt .project-sms-delivery-planning__dialog footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

body.page-projekt .project-sms-delivery-planning__day-editor {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-delivery-planning__day-editor > div {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto 74px auto;
}

body.page-projekt .project-sms-delivery-planning__day-editor input {
  text-align: center;
}

@media (max-width: 900px) {
  body.page-projekt .project-sms-delivery-planning__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts,
  body.page-projekt .project-sms-delivery-planning__date-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__supplier-head {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  body.page-projekt .project-sms-delivery-planning {
    padding: 12px;
  }

  body.page-projekt .project-sms-delivery-planning__hero,
  body.page-projekt .project-sms-delivery-planning__date-group > summary {
    display: grid;
  }

  body.page-projekt .project-sms-delivery-planning__kpis,
  body.page-projekt .project-sms-delivery-planning__timeline-facts,
  body.page-projekt .project-sms-delivery-planning__date-summary,
  body.page-projekt .project-sms-delivery-planning__supplier-head {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__next-action {
    justify-items: stretch;
    min-width: 0;
    text-align: left;
  }

  body.page-projekt .project-sms-delivery-planning__completion,
  body.page-projekt .project-sms-delivery-planning__empty {
    align-items: stretch;
    display: grid;
  }

  body.page-projekt .project-sms-delivery-planning__supplier {
    margin: 0 10px 10px;
  }

  body.page-projekt .project-sms-delivery-planning__handover {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
    padding: 8px 0 0;
  }

  body.page-projekt .project-sms-delivery-planning__modal {
    align-items: flex-end;
    padding: 0;
  }

  body.page-projekt .project-sms-delivery-planning__dialog {
    border-radius: 14px 14px 0 0;
    max-width: none;
  }
}

body.page-projekt .project-sms-delivery-planning {
  gap: 14px;
  padding: 20px 22px;
  border: 0;
  background: #f8fafc;
  box-shadow: none;
}

body.page-projekt .project-sms-delivery-planning__hero {
  align-items: flex-start;
}

body.page-projekt .project-sms-delivery-planning__hero h2 {
  font-size: 26px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__hero p,
body.page-projekt .project-sms-delivery-planning__hero small {
  font-size: 13px;
  line-height: 1.45;
}

body.page-projekt .project-sms-delivery-planning__kpis {
  gap: 14px;
}

body.page-projekt .project-sms-delivery-planning__kpi {
  grid-template-columns: minmax(0, 1fr) 46px;
  min-height: 86px;
  padding: 16px 18px;
  border-color: #dbe4ef;
  border-radius: 8px;
  box-shadow: none;
}

body.page-projekt .project-sms-delivery-planning__kpi i,
body.page-projekt .project-sms-delivery-planning__context-supplier i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #eaf2ff;
}

body.page-projekt .project-sms-delivery-planning__kpi i::before,
body.page-projekt .project-sms-delivery-planning__context-supplier i::before {
  color: #075bc7;
  font-size: 23px;
  line-height: 1;
}

body.page-projekt .project-sms-delivery-planning__kpi--1 i::before { content: "□"; }
body.page-projekt .project-sms-delivery-planning__kpi--2 i::before,
body.page-projekt .project-sms-delivery-planning__context-supplier i::before { content: "♙"; }
body.page-projekt .project-sms-delivery-planning__kpi--3 i { background: #fff1ec; }
body.page-projekt .project-sms-delivery-planning__kpi--3 i::before { content: "!"; color: #f15a24; font-weight: 900; }
body.page-projekt .project-sms-delivery-planning__kpi--4 i { background: #f0e7ff; }
body.page-projekt .project-sms-delivery-planning__kpi--4 i::before { content: "◇"; color: #7c3aed; }

body.page-projekt .project-sms-delivery-planning__kpi span {
  display: block;
  margin-bottom: 10px;
  color: #42526b;
  font-size: 13px;
  font-weight: 700;
}

body.page-projekt .project-sms-delivery-planning__kpi strong {
  font-size: 26px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__kpi small {
  grid-column: 1 / -1;
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__date-group {
  display: grid;
  gap: 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-projekt .project-sms-delivery-planning__supplier {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-projekt .project-sms-delivery-planning__context {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 210px;
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__context-date {
  padding-right: 22px;
  border-right: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-delivery-planning__context-date span,
body.page-projekt .project-sms-delivery-planning__context-supplier span,
body.page-projekt .project-sms-delivery-planning__next-action span {
  display: block;
  margin-bottom: 8px;
  color: #42526b;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

body.page-projekt .project-sms-delivery-planning__context-date strong {
  color: #071532;
  font-size: 25px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__context-supplier {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__context-supplier strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #071532;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__next-action {
  min-width: 0;
  justify-items: end;
}

body.page-projekt .project-sms-delivery-planning__next-action-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__next-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #d5e6ff;
  border-radius: 999px;
  background: #eef5ff;
  color: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__next-action button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 5px;
  background: #071532;
  color: #ffffff;
  font-weight: 850;
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__timeline {
  gap: 10px;
  padding: 24px 24px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__timeline-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.page-projekt .project-sms-delivery-planning__timeline-head span {
  color: #0067e6;
  font-size: 14px;
  font-weight: 850;
  text-transform: none;
}

body.page-projekt .project-sms-delivery-planning__timeline-head strong {
  color: #071532;
  font-size: 14px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__timeline-head > div:first-child strong,
body.page-projekt .project-sms-delivery-planning__timeline-head > div:first-child span {
  color: #0067e6;
  font-size: 15px;
}

body.page-projekt .project-sms-delivery-planning__timeline-scroll {
  overflow-x: auto;
  padding: 0 0 8px;
}

body.page-projekt .project-sms-delivery-planning__axis,
body.page-projekt .project-sms-delivery-planning__phase-row,
body.page-projekt .project-sms-delivery-planning__ticks {
  min-width: 980px;
}

body.page-projekt .project-sms-delivery-planning__axis {
  height: 84px;
}

body.page-projekt .project-sms-delivery-planning__axis-line {
  top: 62px;
  height: 2px;
  background: #b7cff5;
}

body.page-projekt .project-sms-delivery-planning__axis-marker {
  left: var(--marker-left, 0);
  top: 12px;
  width: 138px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker small {
  color: #071532;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: none;
}

body.page-projekt .project-sms-delivery-planning__axis-marker strong {
  color: #071532;
  font-size: 11px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__axis-marker > span:first-child {
  font-size: 22px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--partner > span:first-child { color: #7c3aed; }
body.page-projekt .project-sms-delivery-planning__axis-marker--logistics > span:first-child { color: #16a34a; }
body.page-projekt .project-sms-delivery-planning__axis-marker--arrival > span:first-child { color: #0067e6; }

body.page-projekt .project-sms-delivery-planning__axis-marker--start {
  top: 54px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #0067e6;
  color: transparent;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  left: 100%;
  top: 10px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer > span:first-child {
  width: 14px;
  height: 14px;
  border: 3px solid #071532;
  border-radius: 999px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__window-label {
  left: var(--marker-left, 50%);
  top: 8px;
  color: #071532;
  font-size: 10px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__phase-row {
  gap: 0;
  padding: 0 18px 0 22px;
}

body.page-projekt .project-sms-delivery-planning__phase {
  min-height: 66px;
  flex-basis: max(74px, var(--phase-width, 10%));
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  border-color: #b7cff5;
  border-radius: 3px;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__phase--supplier {
  background: linear-gradient(180deg, #eaf2ff, #dbeafe);
}

body.page-projekt .project-sms-delivery-planning__phase--partner {
  border-color: #d8b4fe;
  background: linear-gradient(180deg, #f3e8ff, #e9d5ff);
}

body.page-projekt .project-sms-delivery-planning__phase--logistics {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #ecfdf3, #dcfce7);
}

body.page-projekt .project-sms-delivery-planning__phase--buffer {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff7ed, #ffedd5);
}

body.page-projekt .project-sms-delivery-planning__phase span {
  color: #071532;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

body.page-projekt .project-sms-delivery-planning__phase strong {
  color: #071532;
  font-size: 12px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__ticks {
  position: relative;
  height: 34px;
  margin-top: -3px;
}

body.page-projekt .project-sms-delivery-planning__ticks span {
  position: absolute;
  left: var(--tick-left, 0);
  top: 14px;
  transform: translateX(-50%);
  color: #42526b;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__ticks span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 1px;
  height: 10px;
  background: #cbd5e1;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts {
  width: min(720px, 100%);
  margin: 0 auto;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact {
  border: 0;
  border-left: 1px solid #e2e8f0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact:first-child {
  border-left: 0;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact strong {
  color: #006f35;
  font-size: 18px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact:nth-child(2) strong {
  color: #075bc7;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact:nth-child(3) strong {
  color: #d95a00;
}

body.page-projekt .project-sms-delivery-planning__table-wrap {
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__table {
  min-width: 980px;
}

body.page-projekt .project-sms-delivery-planning__table th,
body.page-projekt .project-sms-delivery-planning__table td {
  padding: 11px 14px;
  border-top-color: #e8edf4;
}

body.page-projekt .project-sms-delivery-planning__table thead th {
  border-top: 0;
  color: #24324a;
  font-size: 12px;
  font-weight: 850;
  text-transform: none;
}

body.page-projekt .project-sms-delivery-planning__position-image img,
body.page-projekt .project-sms-delivery-planning__position-image span {
  width: 52px;
  height: 52px;
}

body.page-projekt .project-sms-delivery-planning__sizes span {
  border: 0;
  border-radius: 5px;
  background: #eef3fb;
  color: #24324a;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

body.page-projekt .project-sms-delivery-planning__completion {
  padding: 14px 18px;
  border-color: #dbe4ef;
  border-radius: 8px;
  box-shadow: none;
}

body.page-projekt .project-sms-delivery-planning__completion button {
  background: #ffffff;
  color: #24324a;
  border-color: #dbe4ef;
}

@media (max-width: 900px) {
  body.page-projekt .project-sms-delivery-planning__context {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__context-date {
    border-right: 0;
    padding-right: 0;
  }

  body.page-projekt .project-sms-delivery-planning__next-action {
    justify-items: stretch;
  }

  body.page-projekt .project-sms-delivery-planning__next-action-controls {
    justify-content: flex-start;
    width: 100%;
  }

  body.page-projekt .project-sms-delivery-planning__next-action button {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  body.page-projekt .project-sms-delivery-planning__kpis,
  body.page-projekt .project-sms-delivery-planning__timeline-facts {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact:first-child {
    border-top: 0;
  }
}

body.page-projekt .project-sms-delivery-planning__kpi i::before,
body.page-projekt .project-sms-delivery-planning__context-supplier i::before {
  content: none;
}

body.page-projekt .project-sms-delivery-planning__kpi svg,
body.page-projekt .project-sms-delivery-planning__context-supplier svg,
body.page-projekt .project-sms-delivery-planning__next-action-icon svg,
body.page-projekt .project-sms-delivery-planning__completion-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

body.page-projekt .project-sms-delivery-planning__timeline-scroll {
  contain: layout paint;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0 0 8px;
}

body.page-projekt .project-sms-delivery-planning__axis,
body.page-projekt .project-sms-delivery-planning__phase-row,
body.page-projekt .project-sms-delivery-planning__ticks {
  min-width: 1040px;
}

body.page-projekt .project-sms-delivery-planning__axis {
  height: 150px;
}

body.page-projekt .project-sms-delivery-planning__axis-line {
  top: 116px;
}

body.page-projekt .project-sms-delivery-planning__axis-start {
  position: absolute;
  left: 0;
  top: 107px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0b6fe8;
  transform: translateX(-1px);
  z-index: 3;
}

body.page-projekt .project-sms-delivery-planning__axis-marker {
  left: var(--marker-left, 0);
  top: var(--marker-top, 0);
  width: 132px;
  min-height: 58px;
  z-index: 4;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-0 {
  --marker-top: 0px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-1 {
  --marker-top: 24px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-2 {
  --marker-top: 62px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  transform: translateX(-100%);
}

body.page-projekt .project-sms-delivery-planning__marker-dot {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: currentColor;
  transform: rotate(45deg);
}

body.page-projekt .project-sms-delivery-planning__axis-marker--partner {
  color: #7c3aed;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--logistics {
  color: #16a34a;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival {
  color: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  color: #071532;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer .project-sms-delivery-planning__marker-dot {
  width: 14px;
  height: 14px;
  border: 3px solid #071532;
  border-radius: 999px;
  background: #fff;
  transform: none;
}

body.page-projekt .project-sms-delivery-planning__axis-marker small,
body.page-projekt .project-sms-delivery-planning__axis-marker strong {
  color: #071532;
  max-width: 148px;
  white-space: normal;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival {
  --marker-top: 62px;
  width: 116px;
  z-index: 5;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  --marker-top: 0;
  justify-items: end;
  text-align: right;
  width: 118px;
  z-index: 6;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival.project-sms-delivery-planning__axis-marker--level-0 {
  --marker-top: 42px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival.project-sms-delivery-planning__axis-marker--level-1 {
  --marker-top: 62px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival.project-sms-delivery-planning__axis-marker--level-2 {
  --marker-top: 76px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer.project-sms-delivery-planning__axis-marker--level-1 {
  --marker-top: 24px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer.project-sms-delivery-planning__axis-marker--level-2 {
  --marker-top: 48px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival small,
body.page-projekt .project-sms-delivery-planning__axis-marker--arrival strong {
  max-width: 126px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer small,
body.page-projekt .project-sms-delivery-planning__axis-marker--customer strong {
  max-width: 170px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker {
  display: block;
  min-height: 0;
  overflow: visible;
  transform: none;
  width: 0;
}

body.page-projekt .project-sms-delivery-planning__marker-dot {
  left: 0;
  position: absolute;
  top: calc(116px - var(--marker-top, 0px));
  transform: translate(-50%, -50%) rotate(45deg);
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer .project-sms-delivery-planning__marker-dot {
  transform: translate(-50%, -50%);
}

body.page-projekt .project-sms-delivery-planning__marker-label {
  display: grid;
  gap: 1px;
  justify-items: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(var(--marker-label-shift, -50%));
  width: var(--marker-label-width, 132px);
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival {
  --marker-label-shift: -78%;
  --marker-label-width: 126px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  --marker-label-shift: -104%;
  --marker-label-width: 170px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer .project-sms-delivery-planning__marker-label {
  justify-items: end;
  text-align: right;
}

body.page-projekt .project-sms-delivery-planning__phase-row {
  position: relative;
  display: block;
  height: 70px;
  margin-top: -48px;
  padding: 0;
}

body.page-projekt .project-sms-delivery-planning__phase {
  position: absolute;
  left: var(--phase-left, 0);
  width: var(--phase-width, 10%);
  min-width: 0;
  height: 66px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding-left: 6px;
  padding-right: 6px;
}

body.page-projekt .project-sms-delivery-planning__phase::after {
  content: "";
  position: absolute;
  inset: -4px;
  min-width: 48px;
}

body.page-projekt .project-sms-delivery-planning__phase.is-compact span {
  font-size: 10px;
}

body.page-projekt .project-sms-delivery-planning__phase.is-compact small {
  display: none;
}

body.page-projekt .project-sms-delivery-planning__phase.is-zero {
  width: 48px;
  min-width: 48px;
  transform: translateX(-24px);
  border-style: dashed;
}

body.page-projekt .project-sms-delivery-planning__phase.is-zero span {
  font-size: 9px;
}

body.page-projekt .project-sms-delivery-planning__phase span,
body.page-projekt .project-sms-delivery-planning__phase strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

body.page-projekt .project-sms-delivery-planning__phase span {
  font-size: 9.5px;
}

body.page-projekt .project-sms-delivery-planning__phase strong {
  font-size: 10.5px;
  line-height: 1.15;
  margin-top: 2px;
}

body.page-projekt .project-sms-delivery-planning__ticks {
  min-width: 1040px;
  height: 34px;
  margin-top: -4px;
}

body.page-projekt .project-sms-delivery-planning__ticks span {
  min-width: 56px;
  text-align: center;
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__ticks span:first-child {
  text-align: left;
  transform: none;
}

body.page-projekt .project-sms-delivery-planning__ticks span:first-child::before {
  left: 0;
}

body.page-projekt .project-sms-delivery-planning__ticks span:last-child {
  text-align: right;
  transform: translateX(-100%);
}

body.page-projekt .project-sms-delivery-planning__ticks span:last-child::before {
  left: 100%;
}

body.page-projekt .project-sms-delivery-planning__setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-projekt .project-sms-delivery-planning__setup-readonly,
body.page-projekt .project-sms-delivery-planning__setup-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__setup-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.page-projekt .project-sms-delivery-planning__dialog--setup {
  max-width: 760px;
  width: min(100%, 760px);
}

body.page-projekt .project-sms-delivery-planning__dialog--setup header > div {
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup header p {
  margin: 4px 0 0;
}

body.page-projekt .project-sms-delivery-planning__completion strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__completion-icon {
  display: inline-flex;
  color: #f97316;
}

body.page-projekt .project-sms-delivery-planning__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, auto));
  gap: 18px;
  align-items: start;
  text-align: left;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses div {
  display: grid;
  gap: 6px;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses span {
  color: #42526b;
  font-size: 12px;
  font-weight: 750;
}

body.page-projekt .project-sms-delivery-planning__prerequisites {
  display: grid;
  gap: 10px;
  padding: 14px 18px 16px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__prerequisites h3 {
  margin: 0;
  color: #071532;
  font-size: 13px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__prerequisite-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-sms-delivery-planning__prerequisite {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
}

body.page-projekt .project-sms-delivery-planning__prerequisite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef5ff;
  color: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__prerequisite-icon svg {
  width: 17px;
  height: 17px;
}

body.page-projekt .project-sms-delivery-planning__prerequisite strong,
body.page-projekt .project-sms-delivery-planning__prerequisite small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__prerequisite strong {
  color: #24324a;
  font-size: 12px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__prerequisite small {
  color: #42526b;
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__prerequisite.is-success .project-sms-delivery-planning__prerequisite-icon {
  background: #e8f8ee;
  color: #16833b;
}

body.page-projekt .project-sms-delivery-planning__prerequisite.is-warning .project-sms-delivery-planning__prerequisite-icon {
  background: #fff4e5;
  color: #d95a00;
}

body.page-projekt .project-sms-delivery-planning__prerequisite.is-danger .project-sms-delivery-planning__prerequisite-icon {
  background: #fff1f2;
  color: #dc2626;
}

body.page-projekt .project-sms-delivery-planning__prerequisite.is-neutral .project-sms-delivery-planning__prerequisite-icon {
  background: #f1f5f9;
  color: #64748b;
}

body.page-projekt .project-sms-delivery-planning__prerequisite.is-info .project-sms-delivery-planning__prerequisite-icon {
  background: #eef5ff;
  color: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__phase--ready {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #ecfdf3, #dcfce7);
}

body.page-projekt .project-sms-delivery-planning__phase--packing {
  border-color: #ddd6fe;
  background: linear-gradient(180deg, #f5f3ff, #ede9fe);
}

body.page-projekt .project-sms-delivery-planning__setup-group {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-delivery-planning__setup-group h4 {
  margin: 0;
  color: #071532;
  font-size: 13px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  max-height: 96vh;
  max-width: 1080px;
  overflow: hidden;
  padding: 0;
  width: min(96vw, 1080px);
  border-radius: 16px;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px 22px 13px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup header strong {
  color: #071532;
  font-size: 18px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup .ghost.icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup .ghost.icon svg {
  width: 18px;
  height: 18px;
}

body.page-projekt .project-sms-delivery-planning__setup-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #fbfdff;
}

body.page-projekt .project-sms-delivery-planning__setup-process > span {
  color: #94a3b8;
  font-weight: 800;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__setup-goal {
  min-width: 0;
  padding: 0;
}

body.page-projekt .project-sms-delivery-planning__setup-goal span,
body.page-projekt .project-sms-delivery-planning__setup-result-grid span,
body.page-projekt .project-sms-delivery-planning__setup-mini-dates span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}

body.page-projekt .project-sms-delivery-planning__setup-goal strong {
  display: block;
  margin-top: 3px;
  color: #071532;
  font-size: 15px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__setup-goal small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__setup-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

body.page-projekt .project-sms-delivery-planning__setup-inputs {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 22px;
}

body.page-projekt .project-sms-delivery-planning__setup-inputs h3,
body.page-projekt .project-sms-delivery-planning__setup-preview-head span {
  margin: 0;
  color: #071532;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__setup-group {
  gap: 12px;
  padding: 0;
}

body.page-projekt .project-sms-delivery-planning__setup-group h4 {
  color: #42526b;
  font-size: 11px;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper-row,
body.page-projekt .project-sms-delivery-planning__setup-date-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(170px, auto);
  align-items: center;
  gap: 14px;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper-row label,
body.page-projekt .project-sms-delivery-planning__setup-date-row label {
  color: #16233a;
  font-size: 13px;
  font-weight: 800;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper {
  display: grid;
  grid-template-columns: 40px 64px 32px 40px;
  align-items: center;
  justify-content: end;
  min-height: 40px;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper button {
  width: 40px;
  height: 40px;
  border: 0;
  background: #f8fafc;
  color: #071532;
  cursor: pointer;
  font-size: 18px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper button:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper input {
  width: 64px;
  height: 40px;
  border: 0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  color: #071532;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__setup-stepper span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__setup-date-row {
  align-items: start;
}

body.page-projekt .project-sms-delivery-planning__setup-date-row input {
  min-height: 40px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  color: #071532;
  font-weight: 800;
}

body.page-projekt .project-sms-delivery-planning__setup-date-row small {
  grid-column: 2;
  margin-top: -8px;
  color: #64748b;
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__setup-target {
  padding: 12px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #f8fafc;
}

body.page-projekt .project-sms-delivery-planning__setup-target span,
body.page-projekt .project-sms-delivery-planning__setup-target small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

body.page-projekt .project-sms-delivery-planning__setup-target strong {
  display: block;
  margin: 4px 0 2px;
  color: #071532;
  font-size: 17px;
}

body.page-projekt .project-sms-delivery-planning__setup-preview {
  display: grid;
  align-content: start;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  border-left: 1px solid #e2e8f0;
  background: #f5f8fc;
}

body.page-projekt .project-sms-delivery-planning__setup-preview-head strong {
  display: block;
  margin-top: 4px;
  color: #071532;
  font-size: 16px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__setup-terms {
  display: grid;
  gap: 9px;
}

@media (min-width: 901px) {
  body.page-projekt .project-sms-delivery-planning__setup-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
}

body.page-projekt .project-sms-delivery-planning__setup-terms .project-sms-delivery-planning__setup-goal {
  padding: 0 0 8px;
  border-bottom: 1px solid #e2e8f0;
}

@media (min-width: 901px) {
  body.page-projekt .project-sms-delivery-planning__setup-terms .project-sms-delivery-planning__setup-goal {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

body.page-projekt .project-sms-delivery-planning__setup-terms .project-sms-delivery-planning__setup-goal:first-child strong,
body.page-projekt .project-sms-delivery-planning__setup-terms .project-sms-delivery-planning__setup-goal:nth-child(5) strong,
body.page-projekt .project-sms-delivery-planning__setup-terms .project-sms-delivery-planning__setup-goal:nth-child(6) strong {
  font-size: 18px;
}

body.page-projekt .project-sms-delivery-planning__setup-result {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__setup-result h4,
body.page-projekt .project-sms-delivery-planning__setup-mini-timeline h4 {
  margin: 0;
  color: #42526b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__setup-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-delivery-planning__setup-result-head strong {
  color: #071532;
  font-size: 22px;
}

body.page-projekt .project-sms-delivery-planning__setup-result-head span {
  color: #0b6fe8;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

body.page-projekt .project-sms-delivery-planning__setup-result p {
  margin: 0;
  color: #42526b;
  font-size: 13px;
}

body.page-projekt .project-sms-delivery-planning__setup-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__setup-result-grid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-delivery-planning__setup-result-grid strong {
  display: block;
  margin-top: 3px;
  color: #071532;
  font-size: 14px;
}

body.page-projekt .project-sms-delivery-planning__setup-result.is-success {
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-delivery-planning__setup-result.is-warning {
  border-color: #fed7aa;
}

body.page-projekt .project-sms-delivery-planning__setup-result.is-danger {
  border-color: #fecdd3;
}

body.page-projekt .project-sms-delivery-planning__setup-blockers {
  padding: 12px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
}

body.page-projekt .project-sms-delivery-planning__setup-blockers strong {
  color: #9a3412;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__setup-blockers ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #7c2d12;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-timeline {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  height: 30px;
  color: #0b6fe8;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: #bfdbfe;
  transform: translateY(-50%);
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track span {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track span i {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #0b6fe8;
  border-radius: 999px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track .is-point-2 i,
body.page-projekt .project-sms-delivery-planning__setup-mini-track .is-point-3 i {
  border-radius: 2px;
  transform: rotate(45deg);
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track .is-point-4 i {
  background: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-track .is-point-5 i {
  width: 14px;
  height: 14px;
  border-width: 2px;
  box-shadow: inset 0 0 0 3px #fff;
  background: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-dates {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
}

body.page-projekt .project-sms-delivery-planning__setup-mini-dates strong {
  display: block;
  margin-top: 2px;
  color: #071532;
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__dialog--setup footer {
  position: relative;
  bottom: auto;
  z-index: 2;
  padding: 12px 22px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__dialog .project-sms-delivery-planning__day-editor {
  gap: 10px;
}

body.page-projekt .project-sms-delivery-planning__table td small {
  display: block;
  margin-top: 4px;
}

body.page-projekt .project-sms-delivery-planning__table td:last-child {
  text-align: right;
}

body.page-projekt .project-sms-delivery-planning__table .ghost.icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
}

body.page-projekt .project-sms-delivery-planning__table .ghost.icon svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  body.page-projekt .project-sms-delivery-planning__hero {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__hero-statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__prerequisite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__axis,
  body.page-projekt .project-sms-delivery-planning__phase-row,
  body.page-projekt .project-sms-delivery-planning__ticks {
    min-width: 900px;
  }

  body.page-projekt .project-sms-delivery-planning__setup-preview {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__dialog--setup {
    width: min(100%, 860px);
  }

  body.page-projekt .project-sms-delivery-planning__setup-calculator {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__setup-preview {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-delivery-planning__setup-process {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__setup-process > span {
    display: none;
  }
}

@media (max-width: 560px) {
  body.page-projekt .project-sms-delivery-planning__hero-statuses,
  body.page-projekt .project-sms-delivery-planning__prerequisite-grid {
    grid-template-columns: 1fr;
  }

  body.page-projekt {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body.page-projekt .project-subprocess-navigation {
    contain: layout paint;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.page-projekt [data-project-sms-subprocess] .project-subprocess-bar,
  body.page-projekt #projectDetail [data-project-sms-subprocess] .project-subprocess-bar {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-top: 0 !important;
    width: 100% !important;
  }

  body.page-projekt [data-project-sms-subprocess] .project-subprocess-bar::before,
  body.page-projekt #projectDetail [data-project-sms-subprocess] .project-subprocess-bar::before {
    display: none !important;
  }

  body.page-projekt [data-project-sms-subprocess] .project-subprocess-step,
  body.page-projekt #projectDetail [data-project-sms-subprocess] .project-subprocess-step {
    min-height: 0 !important;
  }

  body.page-projekt:not(.nav-actions-open) .top-nav .nav-actions {
    visibility: hidden;
  }

  body.page-projekt .project-sms-delivery-planning__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__kpi {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
    min-height: 78px;
    padding: 10px;
    align-items: start;
  }

  body.page-projekt .project-sms-delivery-planning__kpi i {
    width: 36px;
    height: 36px;
  }

  body.page-projekt .project-sms-delivery-planning__kpi svg {
    width: 19px;
    height: 19px;
  }

  body.page-projekt .project-sms-delivery-planning__kpi span {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    font-size: 11.5px;
    line-height: 1.15;
  }

  body.page-projekt .project-sms-delivery-planning__kpi strong {
    grid-column: 1;
    font-size: 22px;
  }

  body.page-projekt .project-sms-delivery-planning__kpi i {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts,
  body.page-projekt .project-sms-delivery-planning__setup-grid,
  body.page-projekt .project-sms-delivery-planning__setup-readonly,
  body.page-projekt .project-sms-delivery-planning__setup-preview {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__dialog--setup {
    max-height: 94vh;
    width: 100%;
  }

  body.page-projekt .project-sms-delivery-planning__dialog--setup header,
  body.page-projekt .project-sms-delivery-planning__dialog--setup footer,
  body.page-projekt .project-sms-delivery-planning__setup-process,
  body.page-projekt .project-sms-delivery-planning__setup-inputs,
  body.page-projekt .project-sms-delivery-planning__setup-preview {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.page-projekt .project-sms-delivery-planning__setup-stepper-row,
  body.page-projekt .project-sms-delivery-planning__setup-date-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.page-projekt .project-sms-delivery-planning__setup-stepper {
    grid-template-columns: 44px minmax(0, 1fr) 34px 44px;
    justify-content: stretch;
    width: 100%;
  }

  body.page-projekt .project-sms-delivery-planning__setup-stepper input {
    width: 100%;
  }

  body.page-projekt .project-sms-delivery-planning__setup-date-row small {
    grid-column: 1;
    margin-top: -2px;
  }

  body.page-projekt .project-sms-delivery-planning__setup-result-head,
  body.page-projekt .project-sms-delivery-planning__dialog--setup footer {
    align-items: stretch;
    display: grid;
    text-align: left;
  }

  body.page-projekt .project-sms-delivery-planning__setup-result-head span {
    text-align: left;
  }

  body.page-projekt .project-sms-delivery-planning__setup-result-grid,
  body.page-projekt .project-sms-delivery-planning__setup-mini-dates {
    grid-template-columns: 1fr;
    text-align: left;
  }

  body.page-projekt .project-sms-delivery-planning__setup-mini-track {
    grid-template-columns: repeat(5, minmax(34px, 1fr));
    overflow: hidden;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-head {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-head > div:last-child {
    text-align: left;
  }

  body.page-projekt .project-sms-delivery-planning__table,
  body.page-projekt .project-sms-delivery-planning__table thead,
  body.page-projekt .project-sms-delivery-planning__table tbody,
  body.page-projekt .project-sms-delivery-planning__table tr,
  body.page-projekt .project-sms-delivery-planning__table th,
  body.page-projekt .project-sms-delivery-planning__table td {
    display: block;
    min-width: 0;
  }

  body.page-projekt .project-sms-delivery-planning__table thead {
    display: none;
  }

  body.page-projekt .project-sms-delivery-planning__table tr {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px;
  }

  body.page-projekt .project-sms-delivery-planning__table td {
    border: 0;
    padding: 0;
  }

  body.page-projekt .project-sms-delivery-planning__position-image {
    grid-row: span 7;
  }
}

@media (max-width: 360px) {
  body.page-projekt .project-sms-delivery-planning__kpi {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 4px;
    padding: 9px;
    align-items: start;
  }

  body.page-projekt .project-sms-delivery-planning__kpi i {
    width: 24px;
    height: 24px;
  }

  body.page-projekt .project-sms-delivery-planning__kpi svg {
    width: 14px;
    height: 14px;
  }

  body.page-projekt .project-sms-delivery-planning__kpi span {
    grid-column: 1 / -1;
    font-size: 9.5px;
    line-height: 1.1;
  }

  body.page-projekt .project-sms-delivery-planning__kpi strong {
    grid-column: 1;
    font-size: 20px;
  }

  body.page-projekt .project-sms-delivery-planning__kpi i {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
  }
}

body.page-projekt .project-sms-delivery-planning__hidden-form[hidden] {
  display: none !important;
}

body.page-projekt .project-sms-delivery-planning {
  display: grid;
  gap: 14px;
  padding: 20px 24px;
  background: #f8fafc;
}

body.page-projekt .project-sms-delivery-planning__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

body.page-projekt .project-sms-delivery-planning__hero h2 {
  margin: 0 0 4px;
  color: #071532;
  font-size: 26px;
  line-height: 1.15;
}

body.page-projekt .project-sms-delivery-planning__hero p {
  margin: 0 0 6px;
  color: #33415c;
}

body.page-projekt .project-sms-delivery-planning__hero small {
  color: #33415c;
  font-weight: 750;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses {
  display: flex;
  justify-content: flex-end;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses div {
  display: block;
}

body.page-projekt .project-sms-delivery-planning__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.page-projekt .project-sms-delivery-planning__kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  min-height: 94px;
  padding: 16px 18px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.page-projekt .project-sms-delivery-planning__kpi span {
  margin: 0 0 8px;
  color: #33415c;
  font-size: 13px;
  font-weight: 750;
}

body.page-projekt .project-sms-delivery-planning__kpi strong {
  color: #071532;
  font-size: 30px;
  line-height: 1;
}

body.page-projekt .project-sms-delivery-planning__kpi small {
  display: none;
}

body.page-projekt .project-sms-delivery-planning__kpi i,
body.page-projekt .project-sms-delivery-planning__context-supplier i {
  width: 46px;
  height: 46px;
  border-radius: 8px;
}

body.page-projekt .project-sms-delivery-planning__context {
  display: grid;
  grid-template-columns: 160px minmax(240px, 1.15fr) minmax(190px, 0.95fr) 120px 228px;
  align-items: center;
  gap: 0;
  min-height: 92px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__context-date,
body.page-projekt .project-sms-delivery-planning__context-supplier,
body.page-projekt .project-sms-delivery-planning__context-item,
body.page-projekt .project-sms-delivery-planning__next-action {
  min-width: 0;
  height: 100%;
  padding: 18px 20px;
  border-right: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-delivery-planning__next-action {
  border-right: 0;
}

body.page-projekt .project-sms-delivery-planning__context-date span,
body.page-projekt .project-sms-delivery-planning__context-supplier span,
body.page-projekt .project-sms-delivery-planning__context-item span,
body.page-projekt .project-sms-delivery-planning__next-action span {
  display: block;
  margin: 0 0 7px;
  color: #33415c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

body.page-projekt .project-sms-delivery-planning__context-date strong {
  color: #071532;
  font-size: 14px;
  line-height: 1.1;
}

body.page-projekt .project-sms-delivery-planning__context-supplier {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
}

body.page-projekt .project-sms-delivery-planning__context-supplier strong,
body.page-projekt .project-sms-delivery-planning__context-item strong {
  display: block;
  color: #071532;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  white-space: normal;
}

body.page-projekt .project-sms-delivery-planning__next-action {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__next-action > strong {
  display: block;
  min-width: 0;
  color: #071532;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

body.page-projekt .project-sms-delivery-planning__next-action-controls {
  display: block;
}

body.page-projekt .project-sms-delivery-planning__next-action button {
  width: 100%;
  min-height: 38px;
  border-radius: 5px;
  background: #071532;
  color: #fff;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__prerequisites {
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-projekt .project-sms-delivery-planning__prerequisite-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.page-projekt .project-sms-delivery-planning__prerequisite {
  min-height: 64px;
  padding: 13px 16px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__prerequisite strong,
body.page-projekt .project-sms-delivery-planning__prerequisite small {
  white-space: normal;
}

body.page-projekt .project-sms-delivery-planning__prerequisite strong {
  margin-top: 3px;
  color: #071532;
  font-size: 13px;
}

body.page-projekt .project-sms-delivery-planning__prerequisite small {
  color: #33415c;
}

body.page-projekt .project-sms-delivery-planning__production-status {
  display: grid;
  grid-template-columns: 10px auto minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__production-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #64748b;
}

body.page-projekt .project-sms-delivery-planning__production-status span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__production-status strong {
  color: #071532;
  font-size: 13px;
  font-weight: 900;
}

body.page-projekt .project-sms-delivery-planning__production-status small {
  min-width: 0;
  color: #42526b;
  font-size: 12px;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__production-status.is-success .project-sms-delivery-planning__production-status-dot { background: #16a34a; }
body.page-projekt .project-sms-delivery-planning__production-status.is-warning .project-sms-delivery-planning__production-status-dot { background: #d97706; }
body.page-projekt .project-sms-delivery-planning__production-status.is-danger .project-sms-delivery-planning__production-status-dot { background: #dc2626; }
body.page-projekt .project-sms-delivery-planning__production-status.is-info .project-sms-delivery-planning__production-status-dot { background: #0b6fe8; }

body.page-projekt .project-sms-delivery-planning__timeline {
  min-height: 346px;
  padding: 18px 22px 14px;
  border-radius: 8px;
}

body.page-projekt .project-sms-delivery-planning__timeline-deadlines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 2px;
  color: #42526b;
}

body.page-projekt .project-sms-delivery-planning__timeline-deadlines span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
}

body.page-projekt .project-sms-delivery-planning__timeline-deadlines small {
  color: #64748b;
  font-weight: 800;
}

body.page-projekt .project-sms-delivery-planning__timeline-deadlines strong {
  color: #071532;
  font-weight: 900;
}

@media (max-width: 720px) {
  body.page-projekt .project-sms-delivery-planning__production-status {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  body.page-projekt .project-sms-delivery-planning__production-status strong,
  body.page-projekt .project-sms-delivery-planning__production-status small {
    grid-column: 2;
  }
}

body.page-projekt .project-sms-delivery-planning__axis,
body.page-projekt .project-sms-delivery-planning__phase-row,
body.page-projekt .project-sms-delivery-planning__ticks {
  min-width: 1120px;
}

body.page-projekt .project-sms-delivery-planning__axis {
  height: 206px;
}

body.page-projekt .project-sms-delivery-planning__axis-line {
  top: 160px;
}

body.page-projekt .project-sms-delivery-planning__axis-start {
  top: 151px;
}

body.page-projekt .project-sms-delivery-planning__marker-dot {
  top: calc(160px - var(--marker-top, 0px));
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-0 {
  --marker-top: 0px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-1 {
  --marker-top: 40px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-2 {
  --marker-top: 80px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-3 {
  --marker-top: 120px;
}

body.page-projekt .project-sms-delivery-planning__marker-label {
  width: var(--marker-label-width, 118px);
}

body.page-projekt .project-sms-delivery-planning__axis-marker small {
  font-size: 9.5px;
  line-height: 1.1;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--arrival {
  --marker-label-shift: -122%;
  --marker-label-width: 110px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--customer {
  --marker-label-shift: -100%;
  --marker-label-width: 112px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--ready {
  color: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--ready .project-sms-delivery-planning__marker-dot,
body.page-projekt .project-sms-delivery-planning__axis-marker--arrival .project-sms-delivery-planning__marker-dot {
  background: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__phase-row {
  height: 64px;
  margin-top: -52px;
}

body.page-projekt .project-sms-delivery-planning__phase {
  height: 60px;
  cursor: default;
}

body.page-projekt .project-sms-delivery-planning__phase:hover,
body.page-projekt .project-sms-delivery-planning__phase:focus-visible {
  transform: none;
  outline: 2px solid rgba(11, 111, 232, 0.2);
  outline-offset: 2px;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(820px, 100%);
}

body.page-projekt .project-sms-delivery-planning__table {
  min-width: 1080px;
}

body.page-projekt .project-sms-delivery-planning__table > thead > tr > th:nth-child(2),
body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(2) {
  width: 210px;
}

body.page-projekt .project-sms-delivery-planning__completion {
  min-height: 64px;
}

body.page-projekt .project-sms-delivery-planning__dialog--details {
  gap: 0;
  max-width: 760px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

body.page-projekt .project-sms-delivery-planning__dialog--details header,
body.page-projekt .project-sms-delivery-planning__dialog--details footer {
  padding: 16px 20px;
}

body.page-projekt .project-sms-delivery-planning__details-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding: 18px 20px;
}

body.page-projekt .project-sms-delivery-planning__details-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__details-row small {
  grid-column: 2 / -1;
  color: #33415c;
}

@media (max-width: 1180px) {
  body.page-projekt .project-sms-delivery-planning__context {
    grid-template-columns: 150px minmax(220px, 1fr) minmax(180px, 0.8fr) 112px;
  }

  body.page-projekt .project-sms-delivery-planning__next-action {
    grid-column: 1 / -1;
    border-top: 1px solid #e2e8f0;
  }
}

@media (max-width: 900px) {
  body.page-projekt .project-sms-delivery-planning {
    padding: 16px;
  }

  body.page-projekt .project-sms-delivery-planning__kpis,
  body.page-projekt .project-sms-delivery-planning__prerequisite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__context {
    grid-template-columns: 1fr 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__context-date,
  body.page-projekt .project-sms-delivery-planning__context-supplier,
  body.page-projekt .project-sms-delivery-planning__context-item {
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-delivery-planning__context-date,
  body.page-projekt .project-sms-delivery-planning__context-item:nth-child(3) {
    border-right: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-delivery-planning__next-action {
    grid-column: 1 / -1;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.page-projekt .project-sms-delivery-planning__axis,
  body.page-projekt .project-sms-delivery-planning__phase-row,
  body.page-projekt .project-sms-delivery-planning__ticks {
    min-width: 100%;
  }
}

@media (max-width: 560px) {
  body.page-projekt .project-sms-delivery-planning {
    padding: 12px;
  }

  body.page-projekt .project-sms-delivery-planning__hero,
  body.page-projekt .project-sms-delivery-planning__context,
  body.page-projekt .project-sms-delivery-planning__prerequisite-grid,
  body.page-projekt .project-sms-delivery-planning__timeline-facts {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__hero-statuses {
    justify-content: flex-start;
  }

  body.page-projekt .project-sms-delivery-planning__context-date,
  body.page-projekt .project-sms-delivery-planning__context-supplier,
  body.page-projekt .project-sms-delivery-planning__context-item {
    border-right: 0;
  }

  body.page-projekt .project-sms-delivery-planning__axis,
  body.page-projekt .project-sms-delivery-planning__phase-row,
  body.page-projekt .project-sms-delivery-planning__ticks {
    min-width: 920px;
  }

  body.page-projekt .project-sms-delivery-planning__timeline {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.page-projekt .project-sms-delivery-planning__table tr {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(n + 2)::before {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
  }

  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(2)::before { content: "Supplier"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(3)::before { content: "Artikel"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(4)::before { content: "Kundenartikel"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(5)::before { content: "Menge"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(6)::before { content: "Größen"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(7)::before { content: "Status"; }

  body.page-projekt .project-sms-delivery-planning__position-image {
    grid-row: span 6;
  }

  body.page-projekt .project-sms-delivery-planning__details-row {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__details-row small {
    grid-column: 1;
  }
}

body.page-projekt .project-sms-supplier-confirmation-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

body.page-projekt .project-sms-supplier-confirmation-hero h3 {
  margin: 0 0 6px;
  color: #0f172a;
}

body.page-projekt .project-sms-supplier-confirmation-hero p {
  max-width: 760px;
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

body.page-projekt .project-sms-supplier-confirmation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-supplier-confirmation-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-chips strong {
  color: #0f172a;
}

body.page-projekt .project-sms-supplier-confirmation-list {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-supplier-confirmation-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.page-projekt .project-sms-supplier-confirmation-card.is-details-open {
  border-color: #7dd3fc;
  box-shadow: 0 10px 24px rgba(14, 116, 144, 0.08);
}

body.page-projekt .project-sms-supplier-confirmation-card--ready {
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-supplier-confirmation-card--waiting {
  border-color: #bfdbfe;
}

body.page-projekt .project-sms-supplier-confirmation-card--missing {
  border-color: #fed7aa;
}

body.page-projekt .project-sms-supplier-confirmation-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-card__head h4 {
  margin: 0 0 3px;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
}

body.page-projekt .project-sms-supplier-confirmation-card__head span:not(.badge) {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-stepper {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 42px minmax(150px, 1fr) 42px minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-supplier-confirmation-step-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

body.page-projekt .project-sms-supplier-confirmation-step-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body.page-projekt .project-sms-supplier-confirmation-step-copy strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-supplier-confirmation-step-copy small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

body.page-projekt .project-sms-supplier-confirmation-step-connector {
  display: block;
  height: 1px;
  min-width: 24px;
  background: #cbd5e1;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--done .project-sms-supplier-confirmation-step-icon {
  background: #16a34a;
  color: #fff;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--done .project-sms-supplier-confirmation-step-copy small {
  color: #166534;
}

body.page-projekt .project-sms-supplier-confirmation-step-connector--done {
  background: #86efac;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--waiting {
  border-color: #bfdbfe;
  background: #eff6ff;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--waiting .project-sms-supplier-confirmation-step-icon {
  background: #dbeafe;
  color: #1d4ed8;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--waiting .project-sms-supplier-confirmation-step-copy small {
  color: #1d4ed8;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--open,
body.page-projekt .project-sms-supplier-confirmation-step-pill--attention {
  border-color: #fed7aa;
  background: #fff7ed;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--open .project-sms-supplier-confirmation-step-icon,
body.page-projekt .project-sms-supplier-confirmation-step-pill--attention .project-sms-supplier-confirmation-step-icon {
  background: #ffedd5;
  color: #9a3412;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--open .project-sms-supplier-confirmation-step-copy small,
body.page-projekt .project-sms-supplier-confirmation-step-pill--attention .project-sms-supplier-confirmation-step-copy small {
  color: #9a3412;
}

body.page-projekt .project-sms-supplier-confirmation-step-connector--open {
  background: #fdba74;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--locked {
  border-color: #e2e8f0;
  background: #f8fafc;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--locked .project-sms-supplier-confirmation-step-icon {
  background: #e2e8f0;
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-step-pill--locked .project-sms-supplier-confirmation-step-copy small {
  color: #64748b;
}

body.page-projekt .project-sms-supplier-confirmation-meta-line,
body.page-projekt .project-sms-supplier-confirmation-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-supplier-confirmation-meta-line strong,
body.page-projekt .project-sms-supplier-confirmation-evidence strong {
  color: #0f172a;
}

body.page-projekt .project-sms-supplier-confirmation-reason {
  flex-basis: 100%;
}

body.page-projekt .project-sms-supplier-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

body.page-projekt .project-sms-supplier-confirmation-actions .ghost.small {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-action--primary {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

body.page-projekt .project-sms-supplier-confirmation-action--secondary {
  border-color: #dbe3ef;
  background: #fff;
  color: #334155;
}

body.page-projekt .project-sms-supplier-confirmation-details {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding: 14px;
  border: 1px solid #bae6fd;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0fdfa 0%, #eff6ff 100%);
}

body.page-projekt .project-sms-supplier-confirmation-details[hidden] {
  display: none;
}

body.page-projekt .project-sms-supplier-confirmation-details__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-details__head h5,
body.page-projekt .project-sms-supplier-confirmation-details__section h6 {
  margin: 0;
  color: #0f172a;
  line-height: 1.2;
}

body.page-projekt .project-sms-supplier-confirmation-details__head h5 {
  font-size: 15px;
}

body.page-projekt .project-sms-supplier-confirmation-details__head p {
  margin: 3px 0 0;
  color: #475569;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-details__section {
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-supplier-confirmation-details__section h6 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

body.page-projekt .project-sms-supplier-confirmation-details__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.page-projekt .project-sms-supplier-confirmation-details__item {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

body.page-projekt .project-sms-supplier-confirmation-details__item--wide {
  grid-column: span 2;
}

body.page-projekt .project-sms-supplier-confirmation-details__item > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body.page-projekt .project-sms-supplier-confirmation-details__value {
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-supplier-confirmation-proof-link {
  width: fit-content;
  min-height: 26px;
  padding: 5px 9px;
  border-color: #7dd3fc;
  background: #fff;
  color: #0369a1;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-status-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

body.page-projekt .project-sms-supplier-confirmation-status-chip--success {
  background: #dcfce7;
  color: #166534;
}

body.page-projekt .project-sms-supplier-confirmation-status-chip--warning {
  background: #ffedd5;
  color: #9a3412;
}

body.page-projekt .project-sms-supplier-confirmation-signature-box {
  display: grid;
  gap: 7px;
  max-width: 420px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
}

body.page-projekt .project-sms-supplier-confirmation-signature-box span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

body.page-projekt .project-sms-supplier-confirmation-signature-box img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
}

body.page-projekt .project-sms-supplier-confirmation-signature-box strong {
  color: #0f172a;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-confirmation-action--blocked {
  background: #111827;
  color: #fff;
}

body.page-projekt .project-sms-production-gate-section {
  display: grid;
  gap: 18px;
  background: #f8fafc;
  border-color: #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.05);
}

body.page-projekt .project-sms-production-gate-section .project-detail-box-head {
  align-items: flex-start;
  border-bottom: 0;
  padding-bottom: 0;
}

body.page-projekt .project-sms-production-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-sms-production-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.page-projekt .project-sms-production-kpi-card .project-order-key-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 14px;
}

body.page-projekt .project-sms-production-kpi-card--success .project-order-key-icon {
  background: #dcfce7;
  color: #16a34a;
}

body.page-projekt .project-sms-production-kpi-card--warning .project-order-key-icon {
  background: #ffedd5;
  color: #f97316;
}

body.page-projekt .project-sms-production-kpi-card--info .project-order-key-icon {
  background: #dbeafe;
  color: #2563eb;
}

body.page-projekt .project-sms-production-kpi-card--neutral .project-order-key-icon {
  background: #f1f5f9;
  color: #64748b;
}

body.page-projekt .project-sms-production-kpi-card span,
body.page-projekt .project-sms-production-order-strip__item span,
body.page-projekt .project-sms-production-column > span,
body.page-projekt .project-sms-production-column--money span,
body.page-projekt .project-sms-production-details__grid span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body.page-projekt .project-sms-production-kpi-card strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.1;
}

body.page-projekt .project-sms-production-order-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.page-projekt .project-sms-production-order-strip__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-production-order-strip__item:first-child {
  border-left: 0;
  padding-left: 0;
}

body.page-projekt .project-sms-production-order-strip__item strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
}

body.page-projekt .project-sms-production-groups {
  display: grid;
  gap: 22px;
}

body.page-projekt .project-sms-production-group {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-production-group > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

body.page-projekt .project-sms-production-group h4 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

body.page-projekt .project-sms-production-group p {
  margin: 4px 0 0;
}

body.page-projekt .project-sms-production-card-list {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-production-card {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(150px, 0.75fr) minmax(190px, 0.9fr) minmax(120px, 0.55fr) minmax(230px, 1fr) minmax(150px, 0.75fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.page-projekt .project-sms-production-card--ready {
  border-left-color: #22c55e;
}

body.page-projekt .project-sms-production-card--waiting {
  border-left-color: #f97316;
}

body.page-projekt .project-sms-production-card--blocked {
  border-left-color: #94a3b8;
}

body.page-projekt .project-sms-production-product {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

body.page-projekt .project-sms-production-image-wrap {
  position: relative;
}

body.page-projekt .project-sms-production-pos-badge {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 10px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

body.page-projekt .project-sms-production-card--waiting .project-sms-production-pos-badge {
  background: #ffedd5;
  color: #c2410c;
}

body.page-projekt .project-sms-production-image {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

body.page-projekt .project-sms-production-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.page-projekt .project-sms-production-article {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

body.page-projekt .project-sms-production-article strong {
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
}

body.page-projekt .project-sms-production-article span {
  overflow-wrap: anywhere;
  color: #475569;
  font-size: 13px;
}

body.page-projekt .project-sms-production-column {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-production-delivery-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-production-delivery-chips span {
  display: grid;
  gap: 3px;
  min-width: 72px;
  padding: 8px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

body.page-projekt .project-sms-production-delivery-chips strong,
body.page-projekt .project-sms-production-delivery-chips small {
  color: #334155;
  font-size: 11px;
  line-height: 1.2;
}

body.page-projekt .project-sms-production-column--sizes .quote-position-size-grid {
  max-width: 240px;
}

body.page-projekt .project-sms-production-column--money {
  align-content: center;
  gap: 18px;
}

body.page-projekt .project-sms-production-column--money strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.15;
}

body.page-projekt .project-sms-production-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

body.page-projekt .project-sms-production-status-pill--ready {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #15803d;
}

body.page-projekt .project-sms-production-status-pill--waiting {
  border-color: #fed7aa;
  background: #ffedd5;
  color: #c2410c;
}

body.page-projekt .project-sms-production-status-pill--blocked {
  border-color: #e2e8f0;
  background: #f1f5f9;
  color: #475569;
}

body.page-projekt .project-sms-production-status-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-projekt .project-sms-production-status-list li {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(72px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #475569;
  font-size: 11px;
}

body.page-projekt .project-sms-production-status-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f97316;
  grid-column: 1;
  grid-row: 1;
}

body.page-projekt .project-sms-production-status-list li {
  grid-template-columns: 9px minmax(88px, 1fr) minmax(72px, auto);
}

body.page-projekt .project-sms-production-status-list li > span {
  grid-column: 2;
}

body.page-projekt .project-sms-production-status-list li > strong {
  grid-column: 3;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 11px;
  line-height: 1.2;
}

body.page-projekt .project-sms-production-status-list li.is-done::before {
  background: #22c55e;
}

body.page-projekt .project-sms-production-actions-cell {
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-production-actions {
  gap: 8px;
}

body.page-projekt .project-sms-production-actions .ghost.small {
  justify-content: center;
  width: 100%;
  min-height: 34px;
  border-color: #dbe5ef;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
}

body.page-projekt .project-sms-production-actions .project-sms-production-action--primary {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

body.page-projekt .project-sms-production-actions .project-sms-production-more-link {
  border-color: transparent;
  background: transparent;
  color: #059669;
}

body.page-projekt .project-sms-production-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  min-width: 0;
  margin-top: 2px;
  padding: 14px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

body.page-projekt .project-sms-production-details[hidden] {
  display: none;
}

body.page-projekt .project-sms-production-details__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.page-projekt .project-sms-production-details__grid div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

body.page-projekt .project-sms-production-details__grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

body.page-projekt .project-sms-production-details__actions .project-sms-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-production-show-more {
  justify-self: center;
  min-width: 220px;
  border-radius: 10px;
}

body.page-projekt .project-sms-labeling-section {
  gap: 18px;
}

body.page-projekt .project-sms-labeling-position-card {
  grid-template-columns: 34px minmax(260px, 1.1fr) minmax(300px, 1fr) minmax(145px, 0.5fr) minmax(170px, 0.65fr);
  align-items: center;
}

body.page-projekt .project-sms-labeling-customer-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

body.page-projekt .project-sms-labeling-customer-codes--empty {
  display: block;
  padding: 8px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-labeling-customer-code {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-production-article .project-sms-labeling-customer-code span,
body.page-projekt .project-sms-production-article .project-sms-labeling-customer-codes--empty span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

body.page-projekt .project-sms-production-article .project-sms-labeling-customer-code strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
}

body.page-projekt .project-sms-labeling-size-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

body.page-projekt .project-sms-labeling-size-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

body.page-projekt .project-sms-labeling-size-cell strong {
  color: #0f172a;
  font-size: 12px;
  line-height: 1;
}

body.page-projekt .project-sms-labeling-size-cell--total {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.page-projekt .project-sms-labeling-size-cell--total strong {
  color: #1e3a8a;
}

body.page-projekt .project-sms-labeling-position-card--released {
  border-left-color: #22c55e;
}

body.page-projekt .project-sms-labeling-position-card--complete {
  border-left-color: #14b8a6;
}

body.page-projekt .project-sms-labeling-position-card--draft {
  border-left-color: #f97316;
}

body.page-projekt .project-sms-labeling-position-card--info {
  border-left-color: #3b82f6;
}

body.page-projekt .project-sms-labeling-position-card--waiting {
  border-left-color: #94a3b8;
}

body.page-projekt .project-sms-labeling-status-pill--released {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #15803d;
}

body.page-projekt .project-sms-labeling-status-pill--complete {
  border-color: #99f6e4;
  background: #ccfbf1;
  color: #0f766e;
}

body.page-projekt .project-sms-labeling-status-pill--draft {
  border-color: #fed7aa;
  background: #ffedd5;
  color: #c2410c;
}

body.page-projekt .project-sms-labeling-status-pill--info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.page-projekt .project-sms-labeling-template-panel,
body.page-projekt .project-sms-labeling-action-bar {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

body.page-projekt .project-sms-labeling-template-panel header,
body.page-projekt .project-sms-labeling-action-bar {
  align-items: center;
}

body.page-projekt .project-sms-labeling-template-panel h4,
body.page-projekt .project-sms-labeling-action-bar h4 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

body.page-projekt .project-sms-labeling-action-bar {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
}

body.page-projekt .project-sms-labeling-action-bar p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-action-bar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.page-projekt .project-sms-labeling-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-sms-labeling-template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f97316;
  border-radius: 10px;
  background: #f8fafc;
}

body.page-projekt .project-sms-labeling-template-card--assigned,
body.page-projekt .project-sms-labeling-template-card--customer_supplied {
  border-left-color: #22c55e;
}

body.page-projekt .project-sms-labeling-template-card span,
body.page-projekt .project-sms-labeling-position-facts span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-template-card strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 15px;
}

body.page-projekt .project-sms-labeling-template-card p,
body.page-projekt .project-sms-labeling-position-facts small {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-template-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-labeling-legacy-sources {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-labeling-legacy-sources summary {
  cursor: pointer;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-select {
  display: grid;
  place-items: center;
}

body.page-projekt .project-sms-labeling-select input {
  width: 18px;
  height: 18px;
}

body.page-projekt .project-sms-labeling-position-facts {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-position-facts strong {
  display: inline-block;
  margin-right: 8px;
  color: #0f172a;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-status-pill--waiting {
  border-color: #e2e8f0;
  background: #f1f5f9;
  color: #475569;
}

body.page-projekt .project-sms-labeling-details {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-labeling-details[hidden],
body.page-projekt .project-sms-labeling-edit-form[hidden] {
  display: none;
}

body.page-projekt .project-sms-labeling-details__grid p,
body.page-projekt .project-sms-labeling-details__grid small {
  display: block;
  margin: 5px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-new-variant-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-new-variant-notice div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-new-variant-notice span {
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-pdf-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-pdf-section h5,
body.page-projekt .project-sms-labeling-pdf-section summary {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-pdf-section--empty {
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-labeling-pdf-section--empty p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-pdf-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-labeling-pdf-card--current {
  border-color: #16a34a;
  background: #f0fdf4;
}

body.page-projekt .project-sms-labeling-pdf-card--fallback {
  border-color: #f59e0b;
  background: #fffbeb;
}

body.page-projekt .project-sms-labeling-pdf-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-pdf-card strong,
body.page-projekt .project-sms-labeling-pdf-card span,
body.page-projekt .project-sms-labeling-pdf-card em {
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-pdf-card strong {
  color: #0f172a;
  font-size: 13px;
}

body.page-projekt .project-sms-labeling-pdf-card span,
body.page-projekt .project-sms-labeling-pdf-card em {
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-pdf-card em {
  color: #92400e;
  font-style: normal;
  font-weight: 800;
}

body.page-projekt .project-customer-actions-block--confirmed,
body.page-projekt .project-customer-actions-block--complete {
  border-color: #bbf7d0;
  background: #f8fdf9;
}

body.page-projekt .project-customer-confirmation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

body.page-projekt .project-customer-confirmation-summary div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-customer-confirmation-summary span,
body.page-projekt .project-customer-confirmation-dialog__meta dt,
body.page-projekt .project-customer-confirmation-dialog__statement span,
body.page-projekt .project-customer-confirmation-signature > span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.page-projekt .project-customer-confirmation-summary strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.page-projekt .project-customer-confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

body.page-projekt .project-customer-confirmation-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-customer-confirmation-option + .project-customer-confirmation-option {
  margin-top: 8px;
}

body.page-projekt .project-customer-confirmation-option.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
}

body.page-projekt .project-customer-confirmation-option span {
  grid-column: 2 / 3;
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
}

body.page-projekt .project-customer-confirmation-option button {
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
}

body.page-projekt .project-customer-confirmation-dialog {
  width: min(720px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

body.page-projekt .project-customer-confirmation-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

body.page-projekt .project-customer-confirmation-dialog__content {
  display: grid;
  max-height: min(760px, calc(100vh - 28px));
  margin: 0;
}

body.page-projekt .project-customer-confirmation-dialog__content header,
body.page-projekt .project-customer-confirmation-dialog__content footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
}

body.page-projekt .project-customer-confirmation-dialog__content footer {
  justify-content: flex-end;
  border-top: 1px solid #e2e8f0;
  border-bottom: 0;
}

body.page-projekt .project-customer-confirmation-dialog__content h3 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 18px;
}

body.page-projekt .project-customer-confirmation-dialog__content header button {
  min-width: 34px;
}

body.page-projekt .project-customer-confirmation-dialog__body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
}

body.page-projekt .project-customer-confirmation-dialog__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

body.page-projekt .project-customer-confirmation-dialog__meta div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-customer-confirmation-dialog__meta dd {
  margin: 3px 0 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.page-projekt .project-customer-confirmation-dialog__statement,
body.page-projekt .project-customer-confirmation-signature {
  display: grid;
  gap: 8px;
}

body.page-projekt .project-customer-confirmation-dialog__statement p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}

body.page-projekt .project-customer-confirmation-signature [data-project-customer-confirmation-signature] {
  display: grid;
  place-items: center;
  min-height: 150px;
  max-height: 240px;
  overflow: auto;
  padding: 14px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 13px;
}

body.page-projekt .project-customer-confirmation-signature img {
  display: block;
  max-width: 100%;
  max-height: 190px;
  object-fit: contain;
}

@media (max-width: 720px) {
  body.page-projekt .project-customer-confirmation-summary,
  body.page-projekt .project-customer-confirmation-dialog__meta {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-customer-confirmation-option {
    grid-template-columns: auto 1fr;
  }

  body.page-projekt .project-customer-confirmation-option button {
    grid-column: 2 / 3;
    grid-row: auto;
    justify-self: start;
  }
}

body.page-projekt .project-sms-labeling-edit-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  background: #f8fafc;
}

.project-sms-labeling-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.project-sms-labeling-dialog__panel {
  display: grid;
  gap: 12px;
  min-width: min(420px, 90vw);
  max-height: 86vh;
  overflow: auto;
  padding: 18px;
}

.project-sms-labeling-dialog__panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-sms-labeling-dialog__panel h3 {
  margin: 0;
}

.project-sms-labeling-dialog__panel label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

.project-sms-labeling-dialog__panel input,
.project-sms-labeling-dialog__panel select,
.project-sms-labeling-dialog__panel textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px;
  font: inherit;
}

body.page-projekt .project-sms-labeling-set-list {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-labeling-set-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  background: #f8fafc;
}

body.page-projekt .project-sms-labeling-set-option h4,
body.page-projekt .project-sms-labeling-set-option p {
  margin: 0;
}

body.page-projekt .project-sms-labeling-set-option p {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-set-preview {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-labeling-set-preview article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-labeling-set-preview span {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-variant-list {
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-labeling-variant-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-labeling-variant-choice--new {
  border-color: #f59e0b;
  background: #fffbeb;
}

body.page-projekt .project-sms-labeling-variant-choice input {
  width: 18px;
  height: 18px;
}

body.page-projekt .project-sms-labeling-variant-choice span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-variant-choice strong,
body.page-projekt .project-sms-labeling-variant-choice small {
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-variant-choice small {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-form-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body.page-projekt .project-sms-labeling-form-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

body.page-projekt .project-sms-labeling-form-field textarea,
body.page-projekt .project-sms-labeling-form-actions select {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

body.page-projekt .project-sms-labeling-form-field textarea {
  resize: vertical;
  padding: 8px;
}

body.page-projekt .project-sms-labeling-form-field--wide {
  grid-column: 1 / -1;
}

body.page-projekt .project-sms-labeling-form-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

body.page-projekt .project-sms-labeling-form-actions label {
  display: grid;
  gap: 5px;
  min-width: 190px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-actions .ghost.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

body.page-projekt .project-sms-labeling-clean {
  gap: 20px;
  background: #f8fafc;
}

body.page-projekt .project-sms-labeling-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr);
  gap: 18px;
}

body.page-projekt .project-sms-labeling-set-card,
body.page-projekt .project-sms-labeling-flow-card,
body.page-projekt .project-sms-labeling-clean-card {
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

body.page-projekt .project-sms-labeling-set-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
}

body.page-projekt .project-sms-labeling-set-card__body {
  display: flex;
  gap: 16px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-set-card__icon {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: #dcfce7;
  color: #16a34a;
}

body.page-projekt .project-sms-labeling-set-card h4,
body.page-projekt .project-sms-labeling-flow-card h4 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
}

body.page-projekt .project-sms-labeling-set-card strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-set-card p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

body.page-projekt .project-sms-labeling-set-card__actions,
body.page-projekt .project-sms-labeling-card-actions {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-labeling-set-card__actions .ghost,
body.page-projekt .project-sms-labeling-card-actions .ghost {
  justify-content: center;
  min-height: 38px;
  border-radius: 10px;
}

body.page-projekt .project-sms-labeling-set-card__actions .ghost.primary,
body.page-projekt .project-sms-labeling-card-actions .ghost.primary {
  border-color: #020617;
  background: #020617;
  color: #fff;
}

body.page-projekt .project-sms-labeling-flow-card {
  padding: 18px 22px;
}

body.page-projekt .project-sms-labeling-flow-card ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-projekt .project-sms-labeling-flow-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-flow-card li span {
  display: inline-grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #86efac;
  border-radius: 50%;
  color: #16a34a;
  font-size: 12px;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-groups,
body.page-projekt .project-sms-labeling-card-list {
  display: grid;
  gap: 18px;
}

body.page-projekt .project-sms-labeling-group {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-labeling-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-labeling-group h4 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

body.page-projekt .project-sms-labeling-clean-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(300px, 1.3fr) minmax(280px, 1.05fr) minmax(180px, 0.6fr);
  gap: 22px;
  align-items: center;
  min-width: 0;
  padding: 16px;
}

body.page-projekt .project-sms-labeling-clean-card--waiting {
  opacity: 0.72;
  background: #f8fafc;
}

body.page-projekt .project-sms-labeling-clean-card > .project-sms-labeling-select {
  display: none;
}

body.page-projekt .project-sms-labeling-card-product {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-card-image {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-labeling-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.page-projekt .project-sms-labeling-card-product strong {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-card-product small,
body.page-projekt .project-sms-labeling-card-product em {
  display: block;
  margin-top: 7px;
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  line-height: 1.3;
}

body.page-projekt .project-sms-labeling-card-product em {
  color: #92400e;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-card-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  min-width: 0;
}

body.page-projekt .project-sms-labeling-card-data div {
  min-width: 0;
}

body.page-projekt .project-sms-labeling-card-data span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

body.page-projekt .project-sms-labeling-card-data strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-card-data .project-sms-labeling-size-strip,
body.page-projekt .project-sms-labeling-card-data p {
  grid-column: 1 / -1;
}

body.page-projekt .project-sms-labeling-card-data p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-card-data p strong {
  display: inline;
}

body.page-projekt .project-sms-labeling-card-workflow {
  min-width: 0;
}

body.page-projekt .project-sms-labeling-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-projekt .project-sms-labeling-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  color: #64748b;
  text-align: center;
}

body.page-projekt .project-sms-labeling-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: #cbd5e1;
}

body.page-projekt .project-sms-labeling-step--done:not(:last-child)::after {
  background: #16a34a;
}

body.page-projekt .project-sms-labeling-step__marker {
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #f8fafc;
  color: #475569;
  font-size: 14px;
  font-weight: 900;
}

body.page-projekt .project-sms-labeling-step--done .project-sms-labeling-step__marker {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

body.page-projekt .project-sms-labeling-step--active .project-sms-labeling-step__marker {
  border-color: #16a34a;
  background: #fff;
  color: #16a34a;
  box-shadow: 0 0 0 6px #dcfce7;
}

body.page-projekt .project-sms-labeling-step__label {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

@media (max-width: 1280px) {
  body.page-projekt .project-sms-production-card {
    grid-template-columns: minmax(240px, 1.2fr) minmax(160px, 0.8fr) minmax(190px, 0.9fr) minmax(120px, 0.55fr);
  }

  body.page-projekt .project-sms-labeling-position-card {
    grid-template-columns: 34px minmax(260px, 1fr) minmax(280px, 1fr);
  }

  body.page-projekt .project-sms-labeling-clean-card {
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 1fr);
  }

  body.page-projekt .project-sms-labeling-position-card .project-sms-production-actions-cell {
    grid-column: 2 / -1;
  }

  body.page-projekt .project-sms-labeling-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-production-column--status,
  body.page-projekt .project-sms-production-actions-cell {
    grid-column: 2 / -1;
  }
}

@media (max-width: 1024px) {
  body.page-projekt .project-sms-production-kpi-grid,
  body.page-projekt .project-sms-production-order-strip,
  body.page-projekt .project-sms-labeling-template-grid,
  body.page-projekt .project-sms-labeling-action-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-labeling-overview,
  body.page-projekt .project-sms-labeling-set-card,
  body.page-projekt .project-sms-labeling-clean-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-production-order-strip {
    gap: 12px;
  }

  body.page-projekt .project-sms-production-order-strip__item {
    padding: 0;
    border-left: 0;
  }

  body.page-projekt .project-sms-production-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.page-projekt .project-sms-labeling-position-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-production-column--status,
  body.page-projekt .project-sms-production-actions-cell {
    grid-column: auto;
  }

  body.page-projekt .project-sms-production-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.page-projekt .project-sms-labeling-clean {
    gap: 16px;
  }

  body.page-projekt .project-sms-labeling-set-card,
  body.page-projekt .project-sms-labeling-flow-card,
  body.page-projekt .project-sms-labeling-clean-card {
    border-radius: 14px;
    padding: 14px;
  }

  body.page-projekt .project-sms-labeling-card-product,
  body.page-projekt .project-sms-labeling-card-data {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-labeling-card-image {
    width: 84px;
    height: 84px;
  }

  body.page-projekt .project-sms-labeling-stepper {
    gap: 6px;
  }

  body.page-projekt .project-sms-labeling-step__label {
    font-size: 11px;
  }

  body.page-projekt .project-sms-production-gate-section {
    gap: 14px;
  }

  body.page-projekt .project-sms-production-kpi-grid,
  body.page-projekt .project-sms-production-order-strip,
  body.page-projekt .project-sms-production-card,
  body.page-projekt .project-sms-production-details__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-production-kpi-card,
  body.page-projekt .project-sms-production-order-strip,
  body.page-projekt .project-sms-production-card {
    border-radius: 14px;
  }

  body.page-projekt .project-sms-production-product {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  body.page-projekt .project-sms-production-image {
    width: 82px;
    height: 82px;
  }

  body.page-projekt .project-sms-production-column,
  body.page-projekt .project-sms-production-actions-cell {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-production-column--sizes .quote-position-size-grid {
    max-width: 100%;
    overflow-x: auto;
  }

  body.page-projekt .project-sms-production-status-list li {
    grid-template-columns: 9px minmax(0, 1fr) minmax(70px, auto);
  }

  body.page-projekt .project-sms-production-show-more {
    width: 100%;
    min-width: 0;
  }

  body.page-projekt .project-sms-labeling-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-labeling-form-actions {
    display: grid;
    justify-content: stretch;
  }
}

body.page-projekt .project-sms-supplier-material-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-material-table th,
body.page-projekt .project-sms-supplier-material-table td {
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

body.page-projekt .project-sms-material-position-cell {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 220px;
}

body.page-projekt .project-sms-material-position-cell img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

body.page-projekt .project-sms-material-position-cell span {
  display: block;
}

body.page-projekt .project-sms-supplier-material-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.page-projekt .project-sms-supplier-material-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.page-projekt .project-sms-supplier-material-fields span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body.page-projekt .project-sms-supplier-material-fields__note {
  grid-column: 1 / -1;
}

body.page-projekt .project-sms-supplier-material-warning {
  align-self: center;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-supplier-release-position-main {
  display: block;
  min-width: 0;
}

body.page-projekt .project-sms-supplier-release-position-facts {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

body.page-projekt .project-sms-supplier-release-position-facts th,
body.page-projekt .project-sms-supplier-release-position-facts td {
  padding: 5px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

body.page-projekt .project-sms-supplier-release-position-facts th {
  color: #52637a;
  font-size: 11px;
  font-weight: 800;
}

body.page-projekt .project-sms-supplier-release-position-facts__position {
  width: 82px;
}

body.page-projekt .project-sms-supplier-release-position-facts__name {
  width: 16%;
}

body.page-projekt .project-sms-supplier-release-position-facts__article {
  width: 116px;
}

body.page-projekt .project-sms-supplier-release-position-facts__color {
  width: 42%;
}

body.page-projekt .project-sms-supplier-release-position-facts__qty {
  width: 72px;
}

body.page-projekt .project-sms-supplier-release-position-facts__color-cell {
  overflow-wrap: anywhere;
  word-break: normal;
}

body.page-projekt .project-sms-supplier-release-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

body.page-projekt .project-sms-material-confirmations-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0 16px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-material-confirmations-panel__head,
body.page-projekt .project-sms-material-confirmation-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

body.page-projekt .project-sms-material-confirmations-panel h3,
body.page-projekt .project-sms-material-confirmation-card h4,
body.page-projekt .project-sms-material-confirmation-scope h5 {
  margin: 0;
}

body.page-projekt .project-sms-material-confirmations-list {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-material-confirmation-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

body.page-projekt .project-sms-material-confirmation-meta,
body.page-projekt .project-sms-material-confirmation-scope dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
}

body.page-projekt .project-sms-material-confirmation-meta div,
body.page-projekt .project-sms-material-confirmation-scope dl div {
  display: grid;
  gap: 2px;
}

body.page-projekt .project-sms-material-confirmation-meta dt,
body.page-projekt .project-sms-material-confirmation-scope dt {
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-material-confirmation-meta dd,
body.page-projekt .project-sms-material-confirmation-scope dd {
  margin: 0;
  color: #111827;
  font-weight: 700;
}

body.page-projekt .project-sms-material-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-material-confirmation-actions a.disabled {
  opacity: 0.5;
  pointer-events: none;
}

body.page-projekt .project-sms-material-confirmation-deliveries {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

body.page-projekt .project-sms-material-confirmation-deliveries summary {
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
}

body.page-projekt .project-sms-material-confirmation-deliveries article {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-material-confirmation-deliveries article span,
body.page-projekt .project-sms-material-confirmation-deliveries article p,
body.page-projekt .project-sms-material-confirmation-deliveries article small,
body.page-projekt .project-sms-material-confirmation-deliveries article li {
  margin: 0;
  color: #475569;
  font-size: 12px;
}

body.page-projekt .project-sms-material-procurement {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-procurement span {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-material-procurement--empty {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-projekt .project-sms-material-procurement--complete {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

body.page-projekt .project-sms-material-procurement--partial {
  border-color: #fed7aa;
  background: #fff7ed;
}

body.page-projekt .project-sms-material-procurement--missing {
  grid-template-columns: 1fr;
  border-style: dashed;
}

body.page-projekt .project-sms-material-confirmation-deliveries ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

body.page-projekt .project-sms-material-dashboard {
  display: grid;
  gap: 18px;
  padding: 10px 0 8px;
}

body.page-projekt .project-sms-material-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 18px;
}

body.page-projekt .project-sms-material-dashboard-header h2 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.15;
}

body.page-projekt .project-sms-material-dashboard-header p {
  max-width: 720px;
  margin: 0;
  color: #52637a;
  font-size: 14px;
  line-height: 1.55;
}

body.page-projekt .project-sms-material-dashboard-header .btn,
body.page-projekt .project-sms-material-dashboard-header .ghost {
  min-height: 38px;
  border-radius: 8px;
}

body.page-projekt .project-sms-material-dashboard-header .ghost.primary {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

body.page-projekt .project-sms-material-dashboard-header .project-sms-supplier-release-head-actions {
  gap: 10px;
}

body.page-projekt .project-sms-material-dashboard-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(100%, 620px);
}

body.page-projekt .project-sms-material-dashboard-header-actions .btn,
body.page-projekt .project-sms-material-dashboard-header-actions .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding-inline: 18px;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-dashboard-header-actions .project-sms-material-decision-primary-action {
  border-color: #0b1f4f;
  background: #0b1f4f;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(11, 31, 79, 0.18);
}

body.page-projekt .project-sms-material-dashboard-header-actions .project-sms-material-export-button,
body.page-projekt .project-sms-material-dashboard-header-actions .ghost:not(.primary) {
  border-color: #dbe4ef;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}

body.page-projekt .project-sms-material-dashboard-header-actions button:disabled {
  opacity: 0.58;
}

body.page-projekt .project-sms-material-dashboard-header-actions svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-projekt .project-sms-material-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-sms-material-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

body.page-projekt .project-sms-material-kpi__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-kpi__icon svg,
body.page-projekt .project-sms-material-dashboard-info svg,
body.page-projekt .project-sms-material-row-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-projekt .project-sms-material-kpi span {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

body.page-projekt .project-sms-material-kpi strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  line-height: 1;
}

body.page-projekt .project-sms-material-kpi p {
  margin: 6px 0 0;
  color: #52637a;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-material-kpi--warning .project-sms-material-kpi__icon {
  color: #f97316;
  background: #fff7ed;
}

body.page-projekt .project-sms-material-kpi--warning strong {
  color: #ea580c;
}

body.page-projekt .project-sms-material-kpi--success .project-sms-material-kpi__icon {
  color: #16a34a;
  background: #ecfdf5;
}

body.page-projekt .project-sms-material-kpi--success strong {
  color: #15803d;
}

body.page-projekt .project-sms-material-kpi--info .project-sms-material-kpi__icon {
  color: #2563eb;
  background: #eff6ff;
}

body.page-projekt .project-sms-material-kpi--info strong {
  color: #2563eb;
}

body.page-projekt .project-sms-material-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 16px;
  align-items: start;
}

body.page-projekt .project-sms-material-dashboard-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}

body.page-projekt .project-sms-material-dashboard-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
}

body.page-projekt .project-sms-material-dashboard-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-material-dashboard-card__head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
}

body.page-projekt .project-sms-material-dashboard-card__head p {
  max-width: 680px;
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

body.page-projekt .project-sms-material-open-list,
body.page-projekt .project-sms-material-round-list {
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-material-open-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.9fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 12px 14px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #f97316;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-material-open-row__main,
body.page-projekt .project-sms-material-open-row__meta span,
body.page-projekt .project-sms-material-supplier-name {
  min-width: 0;
}

body.page-projekt .project-sms-material-open-row__main strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-open-row__main span,
body.page-projekt .project-sms-material-open-row__meta small,
body.page-projekt .project-sms-material-open-row__meta strong {
  display: block;
}

body.page-projekt .project-sms-material-open-row__main span {
  margin-top: 4px;
  color: #334155;
  font-size: 12px;
}

body.page-projekt .project-sms-material-open-row__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-sms-material-open-row__meta small,
body.page-projekt .project-sms-material-round__meta dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body.page-projekt .project-sms-material-open-row__meta strong,
body.page-projekt .project-sms-material-round__meta dd {
  overflow: hidden;
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-row-arrow {
  display: inline-flex;
  color: #64748b;
  transform: rotate(-90deg);
}

body.page-projekt .project-sms-material-dashboard-details {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-material-dashboard-details > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

body.page-projekt .project-sms-material-dashboard-details > summary::-webkit-details-marker {
  display: none;
}

body.page-projekt .project-sms-material-dashboard-details[open] > summary {
  margin-bottom: 8px;
}

body.page-projekt .project-sms-material-round {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  border-radius: 8px;
  background: #fbfdff;
}

body.page-projekt .project-sms-material-round--success {
  border-left-color: #22c55e;
  background: #fbfffd;
}

body.page-projekt .project-sms-material-round--info {
  border-left-color: #3b82f6;
}

body.page-projekt .project-sms-material-round__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-round--success .project-sms-material-round__number {
  background: #dcfce7;
  color: #16a34a;
}

body.page-projekt .project-sms-material-round--info .project-sms-material-round__number {
  background: #dbeafe;
  color: #2563eb;
}

body.page-projekt .project-sms-material-round__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.page-projekt .project-sms-material-round__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.page-projekt .project-sms-material-round__head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
}

body.page-projekt .project-sms-material-round__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px 14px;
  margin: 0;
}

body.page-projekt .project-sms-material-round__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-material-round__actions .ghost {
  min-width: 0;
  min-height: 32px;
  border-radius: 7px;
  padding-inline: 12px;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-round__actions .disabled {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  opacity: 1;
  pointer-events: none;
}

body.page-projekt .project-sms-material-round__details > summary {
  justify-content: flex-start;
  color: #52637a;
  font-size: 12px;
  font-weight: 800;
}

body.page-projekt .project-sms-material-round__details > summary:hover {
  color: #2563eb;
}

body.page-projekt .project-sms-material-supplier-list {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-material-supplier-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-projekt .project-sms-material-supplier-name strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-supplier-card-row {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-material-supplier-card-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

body.page-projekt .project-sms-material-supplier-card-row__top .badge {
  flex: 0 0 auto;
  max-width: 48%;
  white-space: normal;
  text-align: right;
}

body.page-projekt .project-sms-material-supplier-card-row__positions {
  margin: -4px 0 0 36px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-material-supplier-card-row__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-supplier-card-row__facts span {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
}

body.page-projekt .project-sms-material-supplier-card-row__facts strong {
  color: #0f172a;
}

body.page-projekt .project-sms-material-supplier-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.page-projekt .project-sms-material-supplier-progress div {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
}

body.page-projekt .project-sms-material-supplier-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
}

body.page-projekt .project-sms-material-supplier-progress strong {
  color: #0f172a;
  font-size: 12px;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-supplier-card-row__actions {
  display: flex;
  justify-content: flex-end;
}

body.page-projekt .project-sms-material-supplier-action {
  width: auto;
  max-width: 100%;
  justify-content: center;
  min-height: 34px;
  border-radius: 7px;
  background: #f8fafc;
  color: #1d4ed8;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-supplier-action.ghost.primary,
body.page-projekt .project-sms-material-supplier-action.ghost.success {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.page-projekt .project-sms-material-workflow {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-projekt .project-sms-material-workflow li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}

body.page-projekt .project-sms-material-workflow li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-workflow strong {
  color: #0f172a;
  font-size: 13px;
}

body.page-projekt .project-sms-material-workflow p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-material-workflow em {
  align-self: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-workflow li.is-active {
  border-color: #bfdbfe;
  background: #eff6ff;
}

body.page-projekt .project-sms-material-workflow li.is-active > span {
  background: #2563eb;
  color: #ffffff;
}

body.page-projekt .project-sms-material-workflow li.is-active strong {
  color: #1d4ed8;
}

body.page-projekt .project-sms-material-workflow li.is-active em {
  background: #dbeafe;
  color: #1d4ed8;
}

body.page-projekt .project-sms-material-dashboard-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: #315a9f;
  font-size: 13px;
  font-weight: 600;
}

body.page-projekt .project-sms-material-all-suppliers {
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}

body.page-projekt .project-sms-material-all-suppliers__body {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-all-suppliers__body h4 {
  margin: 0;
  color: #334155;
  font-size: 13px;
}

body.page-projekt .project-sms-material-empty-state {
  margin: 0;
  padding: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-decision-hero {
  display: block;
  padding: 22px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

body.page-projekt .project-sms-material-decision-hero__main {
  display: grid;
  gap: 8px;
  align-content: start;
}

body.page-projekt .project-sms-material-decision-hero__main > span,
body.page-projekt .project-sms-material-decision-hero__actions span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-decision-hero h3 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
}

body.page-projekt .project-sms-material-decision-hero p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
}

body.page-projekt .project-sms-material-decision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

body.page-projekt .project-sms-material-decision-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 11px;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

body.page-projekt .project-sms-material-decision-chip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-projekt .project-sms-material-decision-chip--success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

body.page-projekt .project-sms-material-decision-chip--warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

body.page-projekt .project-sms-material-decision-chip--info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.page-projekt .project-sms-material-decision-hero__actions {
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: stretch;
}

body.page-projekt .project-sms-material-decision-hero__actions > div {
  display: grid;
  gap: 8px;
}

body.page-projekt .project-sms-material-decision-primary {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  border-radius: 8px;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-decision-hero__actions .ghost,
body.page-projekt .project-sms-material-decision-hero__actions .btn:not(.project-sms-material-decision-primary) {
  width: 100%;
  justify-content: center;
  min-height: 36px;
  border-radius: 8px;
}

body.page-projekt .project-sms-material-decision-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

body.page-projekt .project-sms-material-decision-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
}

body.page-projekt .project-sms-material-decision-column--missing {
  border-color: #fed7aa;
  background: #fffaf5;
}

body.page-projekt .project-sms-material-decision-column--waiting {
  border-color: #bfdbfe;
  background: #f8fbff;
}

body.page-projekt .project-sms-material-decision-column--ready {
  border-color: #bbf7d0;
  background: #f8fffb;
}

body.page-projekt .project-sms-material-decision-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.page-projekt .project-sms-material-decision-column > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.page-projekt .project-sms-material-decision-column h3 {
  margin: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-decision-column > header > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  padding-inline: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-decision-column__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #ffffff;
}

body.page-projekt .project-sms-material-decision-column--missing .project-sms-material-decision-column__icon {
  background: #ea580c;
}

body.page-projekt .project-sms-material-decision-column--waiting .project-sms-material-decision-column__icon {
  background: #2563eb;
}

body.page-projekt .project-sms-material-decision-column--ready .project-sms-material-decision-column__icon {
  background: #16a34a;
}

body.page-projekt .project-sms-material-decision-column__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-projekt .project-sms-material-decision-column__list {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-material-decision-card {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

body.page-projekt .project-sms-material-decision-card--missing {
  border-color: #fed7aa;
}

body.page-projekt .project-sms-material-decision-card--waiting {
  border-color: #bfdbfe;
}

body.page-projekt .project-sms-material-decision-card--ready {
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-material-decision-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

body.page-projekt .project-sms-material-decision-card__head > div {
  min-width: 0;
}

body.page-projekt .project-sms-material-decision-card__head strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-decision-card__head span:not(.badge) {
  display: block;
  margin-top: 3px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

body.page-projekt .project-sms-material-decision-card__head .badge {
  flex: 0 0 auto;
  max-width: 46%;
  white-space: normal;
}

body.page-projekt .project-sms-material-decision-card__status {
  display: grid;
  gap: 3px;
}

body.page-projekt .project-sms-material-decision-card__status p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-material-mini-list {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-material-mini-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-material-mini-list > div:first-child {
  border-top: 0;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-mini-list span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-mini-list strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-mini-list em {
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 3px 7px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-decision-card__action {
  display: flex;
  justify-content: stretch;
}

body.page-projekt .project-sms-material-decision-card__action .project-sms-material-supplier-action,
body.page-projekt .project-sms-material-more-button {
  width: 100%;
  justify-content: center;
  min-height: 34px;
  white-space: normal;
}

body.page-projekt .project-sms-material-traffic-light {
  gap: 14px;
}

body.page-projekt .project-sms-material-traffic-list {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-material-traffic-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.1fr) minmax(190px, auto);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f59e0b;
  border-radius: 9px;
  background: #ffffff;
}

body.page-projekt .project-sms-material-traffic-row--ready {
  border-left-color: #22c55e;
}

body.page-projekt .project-sms-material-traffic-row--waiting {
  border-left-color: #3b82f6;
}

body.page-projekt .project-sms-material-traffic-row__supplier,
body.page-projekt .project-sms-material-traffic-row__status,
body.page-projekt .project-sms-material-traffic-row__decision {
  min-width: 0;
}

body.page-projekt .project-sms-material-traffic-row__supplier strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-traffic-row__supplier span,
body.page-projekt .project-sms-material-traffic-row__status span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-material-traffic-row__status strong {
  display: block;
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-traffic-row__decision {
  display: grid;
  gap: 8px;
  justify-items: end;
}

body.page-projekt .project-sms-material-traffic-row__decision .project-sms-material-supplier-action {
  max-width: 100%;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-proofs {
  gap: 14px;
}

body.page-projekt .project-sms-material-proof-list {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
}

body.page-projekt .project-sms-material-proof-list__head,
body.page-projekt .project-sms-material-proof-row {
  display: grid;
  grid-template-columns: 130px 160px minmax(170px, 1fr) minmax(120px, 0.8fr) 145px 92px minmax(220px, auto);
  gap: 10px;
  align-items: center;
  min-width: 1080px;
}

body.page-projekt .project-sms-material-proof-list__head {
  padding: 10px 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-proof-row {
  padding: 11px 12px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
}

body.page-projekt .project-sms-material-proof-row > span,
body.page-projekt .project-sms-material-proof-row > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-proof-row__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

body.page-projekt .project-sms-material-proof-row__actions .ghost,
body.page-projekt .project-sms-material-proof-row__actions summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid #dbe4ef;
  border-radius: 7px;
  padding: 6px 9px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.page-projekt .project-sms-material-proof-status {
  display: grid;
  gap: 4px;
  align-items: start;
  min-width: 0;
}

body.page-projekt .project-sms-material-proof-status small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

body.page-projekt .project-sms-material-proof-menu-button {
  width: 34px;
  padding-inline: 0;
}

.project-sms-material-proof-dropdown {
  position: fixed;
  z-index: 10020;
  display: grid;
  gap: 2px;
  width: min(260px, calc(100vw - 16px));
  padding: 8px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.project-sms-material-proof-dropdown a,
.project-sms-material-proof-dropdown button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  padding: 7px 9px;
  background: transparent;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.project-sms-material-proof-dropdown a:hover,
.project-sms-material-proof-dropdown button:hover {
  background: #f1f5f9;
}

.project-sms-material-proof-dropdown a[aria-disabled="true"],
.project-sms-material-proof-dropdown button:disabled {
  color: #94a3b8;
  pointer-events: none;
}

.project-sms-material-proof-dropdown hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-material-confirmation-dialog {
  width: min(760px, calc(100vw - 24px));
}

body.page-projekt .project-sms-material-confirmation-modal {
  display: grid;
  gap: 14px;
}

body.page-projekt .project-sms-material-confirmation-modal-body {
  display: grid;
  gap: 14px;
}

body.page-projekt .project-sms-material-confirmation-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-material-email-scope {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

body.page-projekt .project-material-email-scope h5 {
  margin: 0;
  font-size: 13px;
}

body.page-projekt .project-material-email-scope-list {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-material-email-scope-list fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
}

body.page-projekt .project-material-email-scope-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
}

body.page-projekt .project-material-email-scope-empty {
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px;
  background: #fffbeb;
  color: #92400e;
}

body.page-projekt .project-sms-material-proof-details {
  position: relative;
}

body.page-projekt .project-sms-material-proof-details summary {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dbe4ef;
  background: #ffffff;
  color: #1f2937;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

body.page-projekt .project-sms-material-proof-details summary::-webkit-details-marker {
  display: none;
}

body.page-projekt .project-sms-material-proof-details > div {
  position: absolute;
  right: 0;
  z-index: 6;
  width: min(520px, 80vw);
  margin-top: 8px;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

body.page-projekt .project-sms-material-proof-menu {
  position: relative;
}

body.page-projekt .project-sms-material-proof-menu summary {
  min-width: 34px;
  cursor: pointer;
  list-style: none;
}

body.page-projekt .project-sms-material-proof-menu summary::-webkit-details-marker {
  display: none;
}

body.page-projekt .project-sms-material-proof-menu > div {
  position: absolute;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 4px;
  width: 230px;
  margin-top: 8px;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

body.page-projekt .project-sms-material-proof-menu button,
body.page-projekt .project-sms-material-proof-menu a {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 8px 9px;
  background: transparent;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

body.page-projekt .project-sms-material-proof-menu button:hover,
body.page-projekt .project-sms-material-proof-menu a:hover {
  background: #f1f5f9;
}

body.page-projekt .project-sms-material-proof-menu button:disabled,
body.page-projekt .project-sms-material-proof-menu a[aria-disabled="true"] {
  color: #94a3b8;
  pointer-events: none;
}

body.page-projekt .project-sms-material-proof-menu hr {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 4px 0;
  background: #e2e8f0;
}

body.page-projekt .project-sms-material-archived-rounds {
  border: 1px dashed #cbd5e1;
  border-radius: 9px;
  padding: 10px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-archived-rounds > summary {
  cursor: pointer;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

body.page-projekt .project-sms-material-proof-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 0;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: #334155;
  font-size: 12px;
}

body.page-projekt .project-sms-material-proof-note svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #2563eb;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-projekt .project-sms-material-tabs {
  display: grid;
  gap: 0;
}

body.page-projekt .project-sms-material-tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.page-projekt .project-sms-material-tabs__nav {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #dbe4ef;
}

body.page-projekt .project-sms-material-tabs__nav label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 8px 13px;
  color: #64748b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

body.page-projekt #projectSmsMaterialTabOverview:checked ~ .project-sms-material-tabs__nav label[for='projectSmsMaterialTabOverview'],
body.page-projekt #projectSmsMaterialTabPoints:checked ~ .project-sms-material-tabs__nav label[for='projectSmsMaterialTabPoints'],
body.page-projekt #projectSmsMaterialTabSuppliers:checked ~ .project-sms-material-tabs__nav label[for='projectSmsMaterialTabSuppliers'],
body.page-projekt #projectSmsMaterialTabDocs:checked ~ .project-sms-material-tabs__nav label[for='projectSmsMaterialTabDocs'] {
  border-color: #dbe4ef;
  background: #ffffff;
  color: #0f172a;
}

body.page-projekt .project-sms-material-tabs__panel {
  display: none;
  padding-top: 14px;
}

body.page-projekt #projectSmsMaterialTabOverview:checked ~ .project-sms-material-tabs__panel--overview,
body.page-projekt #projectSmsMaterialTabPoints:checked ~ .project-sms-material-tabs__panel--points,
body.page-projekt #projectSmsMaterialTabSuppliers:checked ~ .project-sms-material-tabs__panel--suppliers,
body.page-projekt #projectSmsMaterialTabDocs:checked ~ .project-sms-material-tabs__panel--docs {
  display: block;
}

body.page-projekt .project-sms-material-tab-summary {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

body.page-projekt .project-sms-material-tab-summary p {
  margin: 0;
  color: #475569;
  font-size: 13px;
}

body.page-projekt .project-sms-material-docs-tab {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-material-docs-tab > header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

body.page-projekt .project-sms-material-tab-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-material-tab-filter span {
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  padding: 5px 10px;
  background: #ffffff;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.page-projekt .project-sms-material-review-card,
body.page-projekt .project-sms-material-review-list {
  display: grid;
  gap: 12px;
}

body.page-projekt .project-sms-material-review-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #ffffff;
}

body.page-projekt .project-sms-material-review-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-material-review-row__head > div,
body.page-projekt .project-sms-material-target-option {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.page-projekt .project-sms-material-review-row__head strong,
body.page-projekt .project-sms-material-target-option strong {
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-material-review-row__head span:not(.badge),
body.page-projekt .project-sms-material-target-option span {
  color: #64748b;
  font-size: 13px;
}

body.page-projekt .project-sms-material-review-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: 10px;
  margin: 0;
}

body.page-projekt .project-sms-material-review-meta div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.page-projekt .project-sms-material-review-meta dt {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
}

body.page-projekt .project-sms-material-review-meta dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-material-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-projekt .project-sms-material-target-option {
  width: 100%;
  padding: 12px;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

body.page-projekt .project-sms-material-target-option:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: #f8fafc;
}

@media (max-width: 1280px) {
  body.page-projekt .project-sms-material-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-material-dashboard-grid {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-material-decision-columns,
  body.page-projekt .project-sms-material-decision-hero,
  body.page-projekt .project-sms-material-traffic-row {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-material-traffic-row__decision {
    justify-items: start;
  }
}

@media (max-width: 900px) {
  body.page-projekt .project-sms-material-dashboard-header {
    display: grid;
  }

  body.page-projekt .project-sms-material-dashboard-header-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  body.page-projekt .project-sms-material-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-material-open-row,
  body.page-projekt .project-sms-material-supplier-card-row__facts,
  body.page-projekt .project-sms-material-round__meta {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-material-supplier-card-row__top {
    align-items: flex-start;
  }

  body.page-projekt .project-sms-material-tabs__nav {
    overflow-x: auto;
  }

  body.page-projekt .project-sms-material-tabs__nav label {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  body.page-projekt .project-sms-material-dashboard-kpis {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  body.page-projekt .project-sms-material-kpi {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  body.page-projekt .project-sms-material-workflow li {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  body.page-projekt .project-sms-material-workflow em {
    grid-column: 2;
    justify-self: start;
  }

  body.page-projekt .project-sms-material-decision-hero {
    padding: 16px;
  }

  body.page-projekt .project-sms-material-decision-hero h3 {
    font-size: 20px;
  }

  body.page-projekt .project-sms-material-traffic-row__decision,
  body.page-projekt .project-sms-material-proof-row__actions {
    justify-items: stretch;
  }

  body.page-projekt .project-sms-material-traffic-row__decision .project-sms-material-supplier-action {
    width: 100%;
  }
}

body.page-projekt .project-sms-submitted-material {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

body.page-projekt .project-sms-submitted-material--compact {
  margin: 0;
}

body.page-projekt .project-sms-submitted-material__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

body.page-projekt .project-sms-submitted-material__head h6 {
  margin: 0 0 3px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
}

body.page-projekt .project-sms-submitted-material__head p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

body.page-projekt .project-sms-submitted-material__meta,
body.page-projekt .project-sms-submitted-material-position__facts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-projekt .project-sms-submitted-material__meta span,
body.page-projekt .project-sms-submitted-material-position__facts span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
}

body.page-projekt .project-sms-submitted-material__meta strong,
body.page-projekt .project-sms-submitted-material-position__facts strong {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.25;
}

body.page-projekt .project-sms-submitted-material__section-title {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}

body.page-projekt .project-sms-submitted-material__positions {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-submitted-material-position {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-submitted-material-position__main {
  display: grid;
  gap: 10px;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
}

body.page-projekt .project-sms-submitted-material-position__thumb img {
  display: block;
  width: 74px;
  height: 74px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f5f9;
}

body.page-projekt .project-sms-submitted-material-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body.page-projekt .project-sms-submitted-material-table th,
body.page-projekt .project-sms-submitted-material-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

body.page-projekt .project-sms-submitted-material-table th {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 860px) {
  body.page-projekt .project-sms-supplier-material-fields,
  body.page-projekt .project-sms-supplier-confirmation-row,
  body.page-projekt .project-sms-submitted-material__meta,
  body.page-projekt .project-sms-submitted-material-position__facts {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-supplier-confirmation-hero,
  body.page-projekt .project-sms-supplier-confirmation-card__head {
    display: grid;
  }

  body.page-projekt .project-sms-supplier-confirmation-stepper {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body.page-projekt .project-sms-supplier-confirmation-step-connector {
    width: 1px;
    height: 12px;
    min-width: 0;
    margin-left: 21px;
  }

	  body.page-projekt .project-sms-supplier-confirmation-actions {
	    justify-content: flex-start;
	  }

	  body.page-projekt .project-sms-supplier-confirmation-details__head,
	  body.page-projekt .project-sms-supplier-confirmation-details__grid {
	    grid-template-columns: 1fr;
	  }

	  body.page-projekt .project-sms-supplier-confirmation-details__head {
	    display: grid;
	  }

	  body.page-projekt .project-sms-supplier-confirmation-details__item--wide {
	    grid-column: auto;
	  }

	  body.page-projekt .project-sms-submitted-material__head {
	    display: grid;
	  }

  body.page-projekt .project-sms-submitted-material-position__main {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  body.page-projekt .project-sms-submitted-material-position__thumb img {
    width: 58px;
    height: 58px;
  }
}

.project-phase-document-list {
  display: grid;
  gap: 10px;
}

.project-phase-document-card {
  align-items: flex-start;
  border: 1px solid var(--color-border, #d7dde8);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 12px;
}

.project-phase-document-card__icon {
  align-items: center;
  background: var(--color-surface-muted, #f4f6f8);
  border-radius: 8px;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.project-phase-document-card__head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.project-phase-document-card__badges,
.project-phase-document-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-phase-document-card__body {
  min-width: 0;
}

@media (max-width: 720px) {
  .project-phase-document-card {
    grid-template-columns: 1fr;
  }

  .project-phase-document-card__head {
    flex-direction: column;
  }
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog {
  width: min(1120px, calc(100vw - 32px));
  max-width: 1120px;
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
  width: 100%;
  max-width: 1120px;
  max-height: 88vh;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
  position: sticky;
  z-index: 3;
  background: #ffffff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header {
  top: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-header-icon {
  width: 36px;
  height: 36px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-close-x {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

body[data-page='supplier-order-detail'] #supplierConfirmDesktopFlow {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-top-grid,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-top-grid {
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid {
  grid-template-columns: minmax(220px, 0.9fr) minmax(340px, 1.15fr) minmax(230px, 0.8fr);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card {
  padding: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card h5,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card h5 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-list {
  display: grid;
  gap: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card {
  display: grid;
  grid-template-columns: 58px minmax(210px, 1fr) minmax(300px, 1.15fr);
  gap: 12px;
  align-items: center;
  padding: 9px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-image {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #f1f5f9;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-position-pill {
  white-space: nowrap;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 7px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body strong,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body p {
  margin: 0;
  line-height: 1.3;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body strong {
  display: block;
  font-size: 13px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body p {
  font-size: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta > div {
  min-width: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 13px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-date-chip-list,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-summary-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-date-chip,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-summary-icons span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 5px 8px;
  text-transform: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-summary-icons span {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #334155;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-commitment-list {
  gap: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-check-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-check-card input[type='checkbox'],
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-check-card strong,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance strong {
  font-size: 12px;
  line-height: 1.3;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-check-card small,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance small {
  font-size: 11px;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-check-card i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-customer-protection-note {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
  font-size: 11px;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 11px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card strong,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card p,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card a {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-penalty-table td {
  padding: 6px 8px;
  font-size: 11px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-red-note {
  margin-top: 8px;
  padding: 8px;
  font-size: 11px;
  line-height: 1.4;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signer-label {
  gap: 5px;
  margin-bottom: 9px;
  font-size: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signer-label input {
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-area {
  min-height: 128px;
  height: 136px;
  border-radius: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-area canvas {
  width: 100%;
  height: 136px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card div {
  display: grid;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dt,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dd,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance {
  margin: 0 18px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn {
  min-height: 42px;
  border-radius: 8px;
  padding: 8px 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn strong,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn strong {
  font-size: 12px;
  line-height: 1.2;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn span,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn span {
  font-size: 10px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
    max-height: 100dvh;
    height: 100dvh;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header,
  body[data-page='supplier-order-detail'] #supplierConfirmDesktopFlow,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-top-grid,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card {
    align-items: start;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-image {
    width: 72px;
    height: 72px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
    flex-direction: column-reverse;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn {
    width: 100%;
  }
}

/* Supplier confirmation modal reference alignment - effective after imports */
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog,
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog[open] {
  width: min(1180px, calc(100vw - 48px));
  max-width: min(1180px, calc(100vw - 48px));
  max-height: calc(100dvh - 56px);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 48px));
  max-width: min(1180px, calc(100vw - 48px));
  max-height: calc(100dvh - 56px);
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header {
  position: static;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-header-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #dcfce7;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header h4 {
  margin: 0;
  color: #0f172a;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-close-x {
  width: 38px;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 24px;
}

body[data-page='supplier-order-detail'] #supplierConfirmDesktopFlow,
body[data-page='supplier-order-detail'] #supplierConfirmMobilePanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 24px 20px;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-top-grid {
  display: block;
  grid-template-columns: minmax(0, 2.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  margin: 0 0 16px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(350px, 0.95fr);
  gap: 16px;
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(310px, 1fr) minmax(260px, 0.95fr);
  gap: 16px;
  margin: 14px 0 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card h5,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card h5 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card {
  grid-template-columns: 64px minmax(0, 1fr) minmax(235px, auto);
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-image {
  width: 58px;
  height: 58px;
  border-radius: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta {
  grid-template-columns: 78px minmax(170px, 1fr);
  gap: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-date-chip,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-summary-icons span {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-summary-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-summary-icons span {
  min-width: 124px;
  min-height: 42px;
  padding: 0 14px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-check-card {
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 12px;
  min-height: 70px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  margin-top: 0;
  padding: 12px;
  border-radius: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block {
  display: block;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block h5,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block p {
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block h5 {
  color: #111827;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block > p {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin-top: 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card > div {
  min-width: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card strong {
  display: block;
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card p {
  margin: 4px 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-decoration: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card a:hover,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-card a:focus-visible {
  border-color: #93c5fd;
  background: #dbeafe;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid .supplier-confirm-pdf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 2px 0 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-check span {
  min-width: 0;
  color: #111827;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-check:has(input:checked) {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

@media (max-width: 720px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-area,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-area canvas {
  min-height: 0;
  height: 96px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-top: 1px solid #bbf7d0;
  border-radius: 0;
  background: #f0fdf4;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(320px, 390px);
  gap: 14px;
  justify-content: space-between;
  padding: 14px 24px 16px;
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(8px);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn {
  width: auto;
  min-height: 52px;
  padding: 9px 14px;
  border-radius: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn {
  border-color: #047857;
  background: linear-gradient(180deg, #16a34a, #047857);
}

@media (max-width: 1100px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-top-grid,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog[open],
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 18px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    padding: 14px;
  }

  body[data-page='supplier-order-detail'] #supplierConfirmDesktopFlow,
  body[data-page='supplier-order-detail'] #supplierConfirmMobilePanel {
    padding: 14px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
    grid-template-columns: 1fr;
    padding: 12px 14px 14px;
  }
}

/* Supplier confirmation commitment disclosure cards */
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-commitment-list {
  display: grid;
  gap: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.supplier-confirm-check-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 0 10px;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card:hover {
  border-color: #bbf7d0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.is-open {
  border-color: #bbf7d0;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #16a34a;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__toggle {
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__toggle span[aria-hidden='true'] {
  display: block;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.18s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.is-open .supplier-confirm-disclosure-card__toggle {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.is-open .supplier-confirm-disclosure-card__toggle span[aria-hidden='true'] {
  transform: rotate(180deg);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details {
  grid-column: 1 / -1;
  padding: 12px 14px 13px 54px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details p {
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details p + p {
  margin-top: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card:has(input:checked) {
  border-color: #86efac;
  background: #f0fdf4;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card:has(input:checked) .supplier-confirm-disclosure-card__details {
  border-top-color: #bbf7d0;
  background: #f7fef9;
}

@media (max-width: 640px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.supplier-confirm-check-card {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 11px 12px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details {
    padding: 11px 12px 12px 50px;
  }
}

/* Supplier confirmation modal final approval workspace */
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog,
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog[open] {
  width: min(1180px, calc(100vw - 56px));
  max-width: min(1180px, calc(100vw - 56px));
  max-height: calc(100dvh - 52px);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: calc(100dvh - 52px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header {
  position: static;
  z-index: 10;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
  padding: 20px 26px 18px;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.98);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-header-icon {
  width: 44px;
  height: 44px;
  border: 1px solid #86efac;
  border-radius: 999px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.14);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-header-icon::before {
  content: "✓";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header h4 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-close-x {
  position: static;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierConfirmDesktopFlow,
body[data-page='supplier-order-detail'] #supplierConfirmMobilePanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 26px 16px;
  background: #f8fafc;
  scrollbar-width: thin;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: start;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-review-main,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-review-side,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-left-column,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-right-column {
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-top-grid,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-card h5,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card h5,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block h5 {
  margin: 0 0 2px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-list {
  display: grid;
  gap: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 270px 26px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card::after {
  content: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card.is-expanded {
  align-items: stretch;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-toggle {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #0f172a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-toggle:hover {
  border-color: #bfdbfe;
  background: #dbeafe;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-toggle[aria-expanded='true'] {
  transform: rotate(180deg);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-details {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-schedule-table th {
  padding: 6px 8px;
  color: #64748b;
  font-weight: 800;
  text-align: left;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-schedule-table td {
  padding: 7px 8px;
  border-top: 1px solid #e5e7eb;
  color: #0f172a;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-date-pill,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-size-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-date-pill {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-size-pill {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-details-empty {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-image {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-position-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-body p {
  margin: 2px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.25;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta > div {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta span {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-date-chip-list {
  display: grid;
  gap: 6px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-date-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #334155;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-commitment-list {
  display: grid;
  gap: 9px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-material-plan {
  display: grid;
  gap: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-accordion {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-accordion__head {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 26px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px 9px 12px;
  border: 0;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-accordion__title {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-chevron {
  display: grid;
  place-items: center;
  color: #334155;
  font-size: 16px;
  transition: transform 0.18s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-accordion.is-open .supplier-confirm-plan-chevron {
  transform: rotate(180deg);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-accordion__body {
  padding: 0;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-table th,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #334155;
  font-size: 11.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: left;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-table tr:last-child td {
  border-bottom: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-more {
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid #e5e7eb;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #fed7aa;
  border-radius: 13px;
  background: #fff7ed;
  color: #713f12;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note__summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note__summary > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #d97706;
  border-radius: 999px;
  color: #92400e;
  font-size: 13px;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.42;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note button {
  border: 1px solid #fdba74;
  border-radius: 999px;
  background: #fff;
  color: #9a3412;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note__details {
  padding: 11px 12px 12px 50px;
  border-top: 1px solid #fed7aa;
  background: #fffaf3;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.supplier-confirm-check-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 0 8px;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main input,
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-final-acceptance input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #fff;
  accent-color: #16a34a;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main input:checked,
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-final-acceptance input:checked {
  border-color: #0f7a3d;
  background: #0f7a3d;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main input::before,
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-final-acceptance input::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main input:checked::before,
body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-final-acceptance input:checked::before {
  transform: scale(1);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__main small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__toggle {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__toggle span[aria-hidden='true'] {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.18s ease;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card.is-open .supplier-confirm-disclosure-card__toggle span[aria-hidden='true'] {
  transform: rotate(180deg);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details {
  grid-column: 1 / -1;
  padding: 12px 14px 13px 59px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details p {
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card__details p + p {
  margin-top: 8px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card:has(input:checked) {
  border-color: #86efac;
  background: #f0fdf4;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog .supplier-confirm-disclosure-card:has(input:checked) .supplier-confirm-disclosure-card__details {
  border-top-color: #bbf7d0;
  background: #f7fef9;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-customer-protection-note {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 13px;
  background: #fff7f7;
  color: #7f1d1d;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-customer-protection-note strong {
  font-size: 13px;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-customer-protection-note span {
  font-size: 12px;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-title-row h5 {
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-section-title-row > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-penalty-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-penalty-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-penalty-table tr:last-child td {
  border-bottom: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-penalty-table td:last-child {
  text-align: right;
  color: #dc2626;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-penalty-table tr.is-critical td {
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-red-note {
  display: block;
  margin-top: 0;
  padding: 11px 12px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff7f7;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-red-note::before {
  content: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block {
  gap: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-info-block > p {
  margin: -4px 0 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card p {
  margin: 2px 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.3;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-pdf-card a {
  color: #047857;
  font-size: 12px;
  font-weight: 850;
  text-decoration: underline;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-document-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #16a34a;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card {
  padding: 14px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card h5 {
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dl > div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dt {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dd {
  min-width: 0;
  margin: 0;
  color: #0f172a;
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card p {
  margin: 12px 0 0;
  color: #047857;
  font-size: 12px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  margin: 0;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signer-label {
  display: grid;
  gap: 7px;
  margin-top: 11px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signer-label span {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signer-label input {
  width: 100%;
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signer-label input:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-area {
  position: relative;
  min-height: 150px;
  height: auto;
  overflow: hidden;
  border: 1px dashed #cbd5e1;
  border-radius: 11px;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm #supplierConfirmSignaturePad {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
  background: transparent;
  touch-action: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #94a3b8;
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-area.has-signature .supplier-confirm-signature-placeholder {
  display: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-signature-card > button,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-remote-signature > button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-remote-signature {
  display: grid;
  gap: 7px;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-remote-panel {
  padding: 10px;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-remote-content {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-remote-content img {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  background: #fff;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 13px 26px;
  border-top: 1px solid #bbf7d0;
  border-bottom: 1px solid #bbf7d0;
  border-radius: 0;
  background: linear-gradient(180deg, #f0fdf4, #ecfdf5);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
  position: static;
  z-index: 10;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(320px, 420px);
  gap: 16px;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 16px 26px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn {
  display: grid;
  align-content: center;
  width: auto;
  min-height: 56px;
  padding: 10px 18px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn {
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn:hover {
  background: #fff7f7;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn {
  border: 1px solid #047857;
  background: linear-gradient(135deg, #16a34a, #047857);
  color: #fff;
  box-shadow: 0 14px 28px rgba(4, 120, 87, 0.22);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(4, 120, 87, 0.26);
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn:disabled,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn[disabled] {
  border-color: #e2e8f0;
  background: #f1f5f9;
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn strong,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn strong {
  display: block;
  font-size: 13px;
  line-height: 1.22;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn span,
body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.25;
  opacity: 0.88;
}

@media (max-width: 980px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog[open] {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
    max-height: calc(100dvh - 24px);
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-review-grid,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-layout,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-proof-grid {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-submit-btn,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-reject-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmDialog[open] {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm.supplier-confirm-modern-modal {
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header {
    grid-template-columns: 40px minmax(0, 1fr) 38px;
    gap: 10px;
    padding: 16px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-header-icon {
    width: 38px;
    height: 38px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header h4 {
    font-size: 17px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-modern-header p {
    font-size: 12px;
  }

  body[data-page='supplier-order-detail'] #supplierConfirmDesktopFlow,
  body[data-page='supplier-order-detail'] #supplierConfirmMobilePanel {
    padding: 14px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-card {
    grid-template-columns: 54px minmax(0, 1fr) 24px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-position-meta {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-plan-accordion__head,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note__summary {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-liability-note__details {
    padding-left: 12px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-date-chip-list {
    display: flex;
    flex-wrap: wrap;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-remote-content,
  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dl > div {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-evidence-card dd {
    text-align: left;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-final-acceptance {
    padding: 12px 16px;
  }

  body[data-page='supplier-order-detail'] #supplierOrderConfirmForm .supplier-confirm-footer {
    padding: 14px 16px 16px;
  }
}
body[data-page='supplier-order-detail'] .supplier-order-material-request-card {
  display: grid;
  gap: 14px;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

body[data-page='supplier-order-detail'] .supplier-order-material-need-form {
  display: grid;
  gap: 16px;
}

body[data-page='supplier-order-detail'] .supplier-order-material-need-positions {
  display: grid;
  gap: 14px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-position {
  border: 1px solid #e4e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-page='supplier-order-detail'] .supplier-material-need-position.is-saved-mode {
  border-color: #bbf7d0;
  border-top: 3px solid #22c55e;
  background: #f8fff9;
}

body[data-page='supplier-order-detail'] .supplier-material-position-card-top,
body[data-page='supplier-order-detail'] .supplier-material-position-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body[data-page='supplier-order-detail'] .supplier-material-position-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 800;
  background: #eef2f7;
  color: #475569;
}

body[data-page='supplier-order-detail'] .supplier-material-position-status--saved {
  background: #dcfce7;
  color: #166534;
}

body[data-page='supplier-order-detail'] .supplier-material-position-status--submitted,
body[data-page='supplier-order-detail'] .supplier-material-position-status--review {
  background: #dbeafe;
  color: #1d4ed8;
}

body[data-page='supplier-order-detail'] .supplier-material-position-status--muted {
  background: #e5e7eb;
  color: #4b5563;
}

body[data-page='supplier-order-detail'] .supplier-material-need-position-head {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 0;
}

body[data-page='supplier-order-detail'] .supplier-material-need-position-image {
  width: 118px;
  min-height: 92px;
  border-radius: 8px;
  border: 1px solid #e3e8f0;
  background: #f8fafc;
  overflow: hidden;
  min-width: 118px;
  max-width: 118px;
  max-height: 118px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-position-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body[data-page='supplier-order-detail'] .supplier-material-need-grid {
  display: block;
}

body[data-page='supplier-order-detail'] .supplier-material-need-position-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-material-position-info-wrap,
body[data-page='supplier-order-detail'] .supplier-material-size-table-wrap {
  overflow-x: auto;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
}

body[data-page='supplier-order-detail'] .supplier-material-position-info-table,
body[data-page='supplier-order-detail'] .supplier-material-size-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  table-layout: fixed;
}

body[data-page='supplier-order-detail'] .supplier-material-position-info-table th,
body[data-page='supplier-order-detail'] .supplier-material-position-info-table td,
body[data-page='supplier-order-detail'] .supplier-material-size-table th,
body[data-page='supplier-order-detail'] .supplier-material-size-table td {
  border-bottom: 1px solid #e4e8f0;
  padding: 5px 10px;
  text-align: left;
  vertical-align: middle;
  font-size: 0.82rem;
}

body[data-page='supplier-order-detail'] .supplier-material-position-info-table thead th,
body[data-page='supplier-order-detail'] .supplier-material-size-table th {
  color: var(--muted, #6b7280);
  font-weight: 700;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] .supplier-material-position-info-table tbody td,
body[data-page='supplier-order-detail'] .supplier-material-size-table td {
  color: #263753;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] .supplier-material-position-info-table tr:last-child td,
body[data-page='supplier-order-detail'] .supplier-material-size-table tr:last-child th,
body[data-page='supplier-order-detail'] .supplier-material-size-table tr:last-child td {
  border-bottom: 0;
}

body[data-page='supplier-order-detail'] .supplier-material-size-breakdown {
  display: grid;
  gap: 5px;
}

body[data-page='supplier-order-detail'] .supplier-material-size-breakdown-title {
  margin: 0;
  color: #536175;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-size-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
}

body[data-page='supplier-order-detail'] .supplier-material-need-group {
  border: 0;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table-wrap {
  overflow-x: auto;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  table-layout: fixed;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table th,
body[data-page='supplier-order-detail'] .supplier-material-need-table td {
  border-bottom: 1px solid var(--border-color, #d8dee8);
  padding: 5px 12px;
  text-align: left;
  vertical-align: middle;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table thead th {
  color: var(--muted, #6b7280);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: none;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table tbody th {
  width: 120px;
  font-size: 0.86rem;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table th:nth-child(1),
body[data-page='supplier-order-detail'] .supplier-material-need-table td:nth-child(1) {
  width: 130px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table th:nth-child(2),
body[data-page='supplier-order-detail'] .supplier-material-need-table td:nth-child(2) {
  width: 220px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table th:nth-child(3),
body[data-page='supplier-order-detail'] .supplier-material-need-table td:nth-child(3) {
  width: 130px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table th:nth-child(4),
body[data-page='supplier-order-detail'] .supplier-material-need-table td:nth-child(4) {
  width: 180px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table th:nth-child(6),
body[data-page='supplier-order-detail'] .supplier-material-need-table td:nth-child(6) {
  width: 52px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-group label,
body[data-page='supplier-order-detail'] .supplier-material-position-note {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
}

body[data-page='supplier-order-detail'] .supplier-material-need-group input,
body[data-page='supplier-order-detail'] .supplier-material-need-group select,
body[data-page='supplier-order-detail'] .supplier-material-need-table input,
body[data-page='supplier-order-detail'] .supplier-material-need-table select,
body[data-page='supplier-order-detail'] .supplier-material-position-note textarea {
  width: 100%;
  height: 30px;
  border: 1px solid #dce3ed;
  border-radius: 6px;
  background: #fff;
  font-size: 0.84rem;
  color: #24324a;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table select[data-field='unit'] {
  min-width: 148px;
  box-sizing: border-box;
  padding: 0 34px 0 10px;
  line-height: 28px;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table input[readonly] {
  border-color: transparent;
  background: transparent;
  font-weight: 800;
  color: #1f2f4a;
  padding-left: 0;
}

body[data-page='supplier-order-detail'] .supplier-material-need-table select:disabled,
body[data-page='supplier-order-detail'] .supplier-material-need-table input:disabled {
  border-color: transparent;
  background: transparent;
  color: #1f2f4a;
  opacity: 1;
}

body[data-page='supplier-order-detail'] .supplier-material-add-row {
  width: 100%;
  min-height: 31px;
  border: 1px dashed #cfd8e6;
  border-width: 1px 0 0;
  background: #fff;
  color: #098a3a;
  font-weight: 800;
  cursor: pointer;
}

body[data-page='supplier-order-detail'] .supplier-material-add-row:hover {
  background: #f4fbf7;
}

body[data-page='supplier-order-detail'] .supplier-material-row-action {
  width: 48px;
  text-align: center;
}

body[data-page='supplier-order-detail'] .supplier-material-delete-row {
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

body[data-page='supplier-order-detail'] .supplier-material-delete-row:hover {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff5f5;
}

body[data-page='supplier-order-detail'] .supplier-material-position-actions {
  margin: 10px 0 0;
  border-top: 1px solid #e5eaf2;
  padding-top: 10px;
}

body[data-page='supplier-order-detail'] .supplier-material-position-save-state {
  display: grid;
  gap: 2px;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-position-save-state small {
  color: #64748b;
  font-weight: 600;
}

body[data-page='supplier-order-detail'] .supplier-material-submit-panel {
  display: grid;
  gap: 8px;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

body[data-page='supplier-order-detail'] .supplier-material-submit-panel h4,
body[data-page='supplier-order-detail'] .supplier-material-submit-panel p {
  margin: 0;
}

body[data-page='supplier-order-detail'] .order-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body[data-page='supplier-order-detail'] .supplier-summary-panel.is-material-phase .order-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-page='supplier-order-detail'] .supplier-order-layout-modern {
  align-items: start;
}

body[data-page='supplier-order-detail'] .supplier-current-task-card {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #e5eaf2;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-page='supplier-order-detail'] .supplier-current-task-card h4,
body[data-page='supplier-order-detail'] .supplier-current-task-card p,
body[data-page='supplier-order-detail'] .supplier-current-task-card ol {
  margin: 0;
}

body[data-page='supplier-order-detail'] .supplier-current-task-card h4 {
  color: #1f2f4a;
}

body[data-page='supplier-order-detail'] .supplier-current-task-card p {
  color: #53627a;
  line-height: 1.55;
}

body[data-page='supplier-order-detail'] .supplier-current-task-card ol {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  color: #263753;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] .supplier-current-task-timeline {
  display: grid;
  gap: 0;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 14px;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:last-child {
  padding-bottom: 0;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 20px;
  bottom: 2px;
  width: 2px;
  background: #dbe3ee;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:last-child::after {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step > span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #fff;
  margin-top: 2px;
  z-index: 1;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step.is-active > span {
  border-color: #16a34a;
  background: #16a34a;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step.is-done > span {
  border-color: #16a34a;
  background: #dcfce7;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step.is-done > span::after {
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  margin: 1px auto 0;
  border: solid #166534;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body[data-page='supplier-order-detail'] .supplier-current-task-step strong {
  display: block;
  color: #1f2f4a;
  font-size: 0.9rem;
  line-height: 1.25;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step p {
  margin-top: 3px;
  font-size: 0.82rem;
  line-height: 1.35;
}

body[data-page='supplier-order-detail'] .supplier-current-task-hint {
  border-top: 1px solid #e5eaf2;
  padding-top: 12px;
  font-size: 0.88rem;
}

body[data-page='supplier-order-detail'] .supplier-help-card {
  display: grid;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #e5eaf2;
}

body[data-page='supplier-order-detail'] .supplier-help-card h4,
body[data-page='supplier-order-detail'] .supplier-help-card p {
  margin: 0;
}

body[data-page='supplier-order-detail'] .supplier-help-card p {
  color: #53627a;
  line-height: 1.55;
}

body[data-page='supplier-order-detail'] .supplier-help-card a {
  justify-content: center;
  text-decoration: none;
}

body[data-page='supplier-order-detail'] .supplier-checklist-card .supplier-quick-progress,
body[data-page='supplier-order-detail'] .supplier-checklist-card #supplierChecklistStatus:empty,
body[data-page='supplier-order-detail'] .supplier-checklist-card #supplierChecklistCurrentAction[hidden] {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check {
  align-items: start;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current {
  border-radius: 8px;
  background: #ecf8f1;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current span {
  background: #07933f;
  color: #fff;
}

body[data-page='supplier-order-detail'] .supplier-review-check small {
  display: block;
  margin-top: 4px;
  color: #53627a;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] .supplier-material-position-note {
  margin-top: 10px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view,
body[data-page='supplier-order-detail'] .supplier-sms-onay-card,
body[data-page='supplier-order-detail'] .supplier-sms-onay-position-list {
  display: grid;
  gap: 16px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-card {
  border: 0;
  background: transparent;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-head,
body[data-page='supplier-order-detail'] .supplier-sms-onay-cta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-head h3,
body[data-page='supplier-order-detail'] .supplier-sms-onay-head p,
body[data-page='supplier-order-detail'] .supplier-sms-onay-cta h4,
body[data-page='supplier-order-detail'] .supplier-sms-onay-cta p {
  margin: 0;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-head h3,
body[data-page='supplier-order-detail'] .supplier-sms-onay-cta h4 {
  color: #1f2f4a;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-head p,
body[data-page='supplier-order-detail'] .supplier-sms-onay-cta p {
  margin-top: 4px;
  color: #53627a;
  line-height: 1.5;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-note {
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 10px 12px;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-card {
  display: grid;
  gap: 16px;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-main {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-image {
  width: 132px;
  aspect-ratio: 1 / 1;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
  display: grid;
  place-items: center;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-summary h4 {
  margin: 8px 0 10px;
  color: #1f2f4a;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-summary dl > div {
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-summary dt,
body[data-page='supplier-order-detail'] .supplier-sms-onay-check h5 {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-summary dd {
  margin: 2px 0 0;
  color: #1f2f4a;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-check {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 112px;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-check h5 {
  margin: 0;
  color: #334155;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-size-list,
body[data-page='supplier-order-detail'] .supplier-sms-onay-material-list,
body[data-page='supplier-order-detail'] .supplier-material-history-list {
  display: grid;
  gap: 6px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-size-list span,
body[data-page='supplier-order-detail'] .supplier-sms-onay-material-list li {
  color: #263753;
  font-size: 0.88rem;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-material-list {
  margin: 0;
  padding-left: 16px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-size-total {
  border-top: 1px solid #e3e8f0;
  padding-top: 6px;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-cta,
body[data-page='supplier-order-detail'] .supplier-material-history {
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

body[data-page='supplier-order-detail'] .supplier-material-history summary {
  cursor: pointer;
  color: #1f2f4a;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-history p {
  margin: 10px 0;
  color: #53627a;
}

body[data-page='supplier-order-detail'] .supplier-material-history-list section {
  border-top: 1px solid #e5eaf2;
  padding-top: 10px;
}

@media (max-width: 760px) {
  body[data-page='supplier-order-detail'] .supplier-material-need-position-head,
  body[data-page='supplier-order-detail'] .order-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] .supplier-summary-panel.is-material-phase .order-summary-grid {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] .supplier-material-need-position-image {
    width: 100%;
    min-height: 150px;
  }

  body[data-page='supplier-order-detail'] .supplier-sms-onay-head,
  body[data-page='supplier-order-detail'] .supplier-sms-onay-cta {
    display: grid;
  }

  body[data-page='supplier-order-detail'] .supplier-sms-onay-position-main,
  body[data-page='supplier-order-detail'] .supplier-sms-onay-position-summary dl,
  body[data-page='supplier-order-detail'] .supplier-sms-onay-check-grid {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] .supplier-sms-onay-position-image {
    width: 100%;
    min-height: 180px;
  }
}

body[data-page='supplier-orders'] .supplier-orders-content {
  display: grid;
  gap: 18px;
  background: #f7fafc;
}

body[data-page='supplier-orders'] .supplier-orders-page-head,
body[data-page='supplier-orders'] .supplier-orders-section-head,
body[data-page='supplier-orders'] .supplier-orders-list-head {
  display: none !important;
}

body[data-page='supplier-orders'] .supplier-orders-page-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

body[data-page='supplier-orders'] .supplier-orders-page-head h1,
body[data-page='supplier-orders'] .supplier-orders-page-head p,
body[data-page='supplier-orders'] .supplier-orders-section-head h2,
body[data-page='supplier-orders'] .supplier-orders-list-head h2,
body[data-page='supplier-orders'] .supplier-orders-list-head p {
  margin: 0;
}

body[data-page='supplier-orders'] .supplier-orders-page-head h1 {
  color: #0f172a;
  font-size: 30px;
  line-height: 1.1;
}

body[data-page='supplier-orders'] .supplier-orders-page-head p {
  margin-top: 8px;
  color: #475569;
  font-size: 14px;
}

body[data-page='supplier-orders'] .supplier-orders-summary {
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-page='supplier-orders'] .supplier-orders-project-section {
  display: grid;
  gap: 16px;
}

body[data-page='supplier-orders'] .supplier-orders-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

body[data-page='supplier-orders'] .supplier-orders-section-head::after {
  content: '';
  height: 1px;
  flex: 1;
  background: #dbe4ef;
}

body[data-page='supplier-orders'] .supplier-orders-section-head h2 {
  color: #111827;
  font-size: 20px;
}

body[data-page='supplier-orders'] .supplier-project-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  gap: 16px;
  align-items: center;
}

body[data-page='supplier-orders'] .supplier-project-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body[data-page='supplier-orders'] .supplier-project-filter-chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  padding: 7px 18px;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-orders'] .supplier-project-filter-chip.is-active {
  border-color: #cfeedd;
  background: #dff5e8;
  color: #166534;
}

body[data-page='supplier-orders'] .supplier-project-filter-chip[data-supplier-orders-filter='sms'] {
  color: #5b21b6;
}

body[data-page='supplier-orders'] .supplier-project-filter-chip[data-supplier-orders-filter='pps'] {
  color: #075fb8;
}

body[data-page='supplier-orders'] .supplier-project-filter-chip[data-supplier-orders-filter='production'] {
  color: #047857;
}

body[data-page='supplier-orders'] .supplier-project-search-label {
  display: block;
}

body[data-page='supplier-orders'] .supplier-project-search-label input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-orders'] .supplier-project-list-card,
body[data-page='supplier-orders'] .supplier-project-orders {
  display: grid;
  gap: 16px;
}

body[data-page='supplier-orders'] .supplier-orders-list-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

body[data-page='supplier-orders'] .supplier-orders-list-head h2 {
  color: #0f172a;
  font-size: 14px;
}

body[data-page='supplier-orders'] .supplier-orders-list-head p {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

body[data-page='supplier-orders'] .supplier-project-card {
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

body[data-page='supplier-orders'] .supplier-project-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e6edf5;
}

body[data-page='supplier-orders'] .supplier-project-title-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

body[data-page='supplier-orders'] .supplier-project-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #cdebd8;
  background: #e7f8ee;
  position: relative;
}

body[data-page='supplier-orders'] .supplier-project-icon::before,
body[data-page='supplier-orders'] .supplier-project-icon::after {
  content: '';
  position: absolute;
  border: 2px solid #159447;
}

body[data-page='supplier-orders'] .supplier-project-icon::before {
  left: 9px;
  top: 8px;
  width: 14px;
  height: 16px;
  border-radius: 2px;
}

body[data-page='supplier-orders'] .supplier-project-icon::after {
  left: 12px;
  top: 5px;
  width: 8px;
  height: 4px;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

body[data-page='supplier-orders'] .supplier-project-title,
body[data-page='supplier-orders'] .supplier-project-meta {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  color: #475569;
  font-size: 13px;
  min-width: 0;
}

body[data-page='supplier-orders'] .supplier-project-title strong {
  color: #0f172a;
  font-size: 18px;
  letter-spacing: 0;
}

body[data-page='supplier-orders'] .supplier-project-meta strong,
body[data-page='supplier-orders'] .supplier-project-meta span:last-child {
  color: #0f172a;
  font-weight: 800;
}

body[data-page='supplier-orders'] .supplier-project-status {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}

body[data-page='supplier-orders'] .supplier-project-status--warning {
  background: #ffedd5;
  color: #c2410c;
}

body[data-page='supplier-orders'] .supplier-project-status--success {
  background: #dcfce7;
  color: #166534;
}

body[data-page='supplier-orders'] .supplier-project-status--info {
  background: #dbeafe;
  color: #1d4ed8;
}

body[data-page='supplier-orders'] .supplier-project-status--ghost {
  background: #f1f5f9;
  color: #475569;
}

body[data-page='supplier-orders'] .supplier-project-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 22px 10px;
}

body[data-page='supplier-orders'] .supplier-project-progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #64748b;
  font-weight: 900;
}

body[data-page='supplier-orders'] .supplier-project-progress-step::after {
  content: '';
  height: 3px;
  flex: 1;
  min-width: 34px;
  background: #b8c2d2;
}

body[data-page='supplier-orders'] .supplier-project-progress-step:last-child::after {
  display: block;
}

body[data-page='supplier-orders'] .supplier-project-progress-step span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #94a3b8;
  color: #fff;
  font-size: 11px;
}

body[data-page='supplier-orders'] .supplier-project-progress-step strong {
  color: inherit;
  font-size: 13px;
}

body[data-page='supplier-orders'] .supplier-project-progress-step small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body[data-page='supplier-orders'] .supplier-project-progress-step.is-active {
  color: #047857;
}

body[data-page='supplier-orders'] .supplier-project-progress-step.is-active span,
body[data-page='supplier-orders'] .supplier-project-progress-step.is-active::after {
  background: #078a3d;
}

body[data-page='supplier-orders'] .supplier-project-progress-step.is-done {
  color: #047857;
}

body[data-page='supplier-orders'] .supplier-project-progress-step.is-done span {
  border: 1px solid #078a3d;
  background: #dcfce7;
  color: #047857;
}

body[data-page='supplier-orders'] .supplier-project-progress-step.is-done::after {
  background: #078a3d;
}

body[data-page='supplier-orders'] .supplier-project-phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  padding: 8px 20px 16px;
}

body[data-page='supplier-orders'] .supplier-project-phase-card {
  position: relative;
  min-height: 116px;
  display: grid;
  gap: 5px;
  align-content: start;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

body[data-page='supplier-orders'] .supplier-project-phase-card.is-active {
  border-color: #b7e4c7;
  background: #fbfffd;
}

body[data-page='supplier-orders'] .supplier-project-phase-card.is-compact {
  min-height: 86px;
  background: #f8fafc;
  box-shadow: none;
}

body[data-page='supplier-orders'] .supplier-project-phase-card strong {
  color: #0f172a;
  font-size: 16px;
}

body[data-page='supplier-orders'] .supplier-project-phase-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body[data-page='supplier-orders'] .supplier-project-phase-card.is-active p {
  color: #c2410c;
}

body[data-page='supplier-orders'] .supplier-project-phase-card.is-done p {
  color: #15803d;
}

body[data-page='supplier-orders'] .supplier-project-phase-badge {
  width: fit-content;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

body[data-page='supplier-orders'] .supplier-project-phase-badge--sms {
  background: #ede9fe;
  color: #5b21b6;
}

body[data-page='supplier-orders'] .supplier-project-phase-badge--pps {
  background: #dbeafe;
  color: #075fb8;
}

body[data-page='supplier-orders'] .supplier-project-phase-badge--production {
  background: #dcfce7;
  color: #047857;
}

body[data-page='supplier-orders'] .supplier-project-phase-meta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

body[data-page='supplier-orders'] .supplier-project-phase-action,
body[data-page='supplier-orders'] .supplier-project-phase-done {
  justify-self: end;
  align-self: end;
  min-width: 116px;
  border-radius: 7px;
  padding: 9px 13px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

body[data-page='supplier-orders'] .supplier-project-phase-action {
  background: #078a3d;
  color: #fff;
  box-shadow: 0 8px 18px rgba(7, 138, 61, 0.22);
}

body[data-page='supplier-orders'] .supplier-project-phase-done {
  background: #dcfce7;
  color: #166534;
}

body[data-page='supplier-orders'] .supplier-orders-state-card,
body[data-page='supplier-orders'] .supplier-orders-loading-card {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 18px;
  background: #fff;
}

@media (max-width: 1080px) {
  body[data-page='supplier-orders'] .supplier-project-phase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page='supplier-orders'] .supplier-orders-page-head,
  body[data-page='supplier-orders'] .supplier-project-filters,
  body[data-page='supplier-orders'] .supplier-project-card-head,
  body[data-page='supplier-orders'] .supplier-project-title-wrap {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page='supplier-orders'] .supplier-orders-summary,
  body[data-page='supplier-orders'] .supplier-project-status {
    width: fit-content;
  }

  body[data-page='supplier-orders'] .supplier-project-progress {
    gap: 8px;
    padding-inline: 14px;
  }

  body[data-page='supplier-orders'] .supplier-project-progress-step {
    gap: 6px;
  }

  body[data-page='supplier-orders'] .supplier-project-progress-step::after {
    min-width: 12px;
  }

  body[data-page='supplier-orders'] .supplier-project-phase-grid {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }

body[data-page='supplier-orders'] .supplier-project-phase-action,
body[data-page='supplier-orders'] .supplier-project-phase-done {
    justify-self: stretch;
  }
}

.project-sms-material-release-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(92vh, 860px);
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  color: #0f172a;
}

.project-sms-material-edit-dialog {
  width: min(720px, calc(100vw - 28px));
  max-height: min(92vh, 820px);
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  color: #0f172a;
}

.project-sms-material-edit-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
}

.project-sms-material-edit-modal {
  display: grid;
  gap: 18px;
  max-height: min(92vh, 820px);
  overflow: auto;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  padding: 24px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

.project-sms-material-release-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
}

.project-sms-material-release-modal {
  display: grid;
  gap: 18px;
  max-height: min(92vh, 860px);
  overflow: auto;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

.project-sms-material-release-modal__head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.project-sms-material-release-modal__head h3,
.project-sms-material-release-modal__head p,
.project-sms-material-contact-area h4,
.project-sms-material-contact-area p {
  margin: 0;
}

.project-sms-material-release-modal__head h3 {
  font-size: 24px;
  line-height: 1.2;
}

.project-sms-material-release-modal__head p,
.project-sms-material-release-toggle small,
.project-sms-material-contact-area small {
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.project-sms-material-release-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fbfdff;
}

.project-sms-material-release-summary div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
}

.project-sms-material-release-summary div + div {
  border-left: 1px solid #dbe4ef;
}

.project-sms-material-release-summary span,
.project-sms-material-contact-grid span,
.project-sms-material-message span {
  color: #52637a;
  font-size: 12px;
  font-weight: 800;
}

.project-sms-material-release-summary strong,
.project-sms-material-contact-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.project-sms-material-release-toggle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 8px 2px;
  cursor: pointer;
}

.project-sms-material-release-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #14315f;
}

.project-sms-material-release-toggle span {
  display: grid;
  gap: 3px;
}

.project-sms-material-contact-area {
  display: grid;
  gap: 14px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 16px;
  background: #fbfdff;
}

.project-sms-material-contact-area[hidden] {
  display: none;
}

.project-sms-material-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-sms-material-contact-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.project-sms-material-contact-grid a {
  width: fit-content;
  text-decoration: none;
}

.project-sms-material-contact-grid a[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.55;
}

.project-sms-material-contact-grid button[aria-disabled='true'] {
  opacity: 0.55;
}

.project-sms-material-whatsapp-button {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.project-sms-material-message {
  display: grid;
  gap: 7px;
}

.project-sms-material-message textarea {
  width: 100%;
  min-height: 250px;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px;
  color: #0f172a;
  font: inherit;
  line-height: 1.45;
}

.project-sms-supplier-confirmation-success {
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
  background: #f0fdf4;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

.project-sms-supplier-confirmation-contact-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.project-sms-material-release-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.project-sms-external-access-section {
  display: grid;
  gap: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 16px;
  background: #f8fbff;
}

.project-sms-external-access-section__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.project-sms-external-access-section__head h5,
.project-sms-external-access-section__head p,
.project-sms-external-position-list h4 {
  margin: 0;
}

.project-sms-external-access-list {
  display: grid;
  gap: 12px;
}

.project-sms-external-access-empty {
  margin: 0;
}

.project-sms-external-access-meta,
.project-sms-external-credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  margin: 18px 14px !important;
}

.project-sms-external-access-meta span,
.project-sms-external-credentials-grid div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-sms-external-credentials-grid span,
.project-sms-external-create-fields span {
  display: block;
  color: #52637a;
  font-size: 12px;
  font-weight: 800;
}

.project-sms-external-password {
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.project-sms-external-password code {
  display: block;
  margin-top: 10px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.project-sms-external-create-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-sms-external-create-fields label,
.project-sms-external-position-list {
  display: grid;
  gap: 7px;
}

.project-sms-external-create-fields input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}

.project-sms-external-position-list {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 12px;
  background: #fbfdff;
}

.project-sms-external-position-option {
  display: grid;
  grid-template-columns: auto 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.project-sms-external-position-option input {
  width: 18px;
  height: 18px;
  accent-color: #14315f;
}

.project-sms-external-position-option span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-sms-external-position-option small {
  color: #52637a;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .project-sms-material-release-modal {
    padding: 18px;
  }

  .project-sms-material-release-modal__head,
  .project-sms-material-release-actions,
  .project-sms-external-access-section__head {
    align-items: stretch;
    flex-direction: column;
  }

  .project-sms-material-release-summary,
  .project-sms-material-contact-grid,
  .project-sms-external-access-meta,
  .project-sms-external-credentials-grid,
  .project-sms-external-create-fields {
    grid-template-columns: 1fr;
  }

  .project-sms-material-release-summary div + div {
    border-top: 1px solid #dbe4ef;
    border-left: 0;
  }
}

body[data-page='supplier-order-detail'] .supplier-order-main-column {
  display: grid;
  gap: 18px;
}

body[data-page='supplier-order-detail'] .supplier-order-material-request-card {
  order: 0;
}

body[data-page='supplier-order-detail'] .positions-card {
  order: 1;
}

body[data-page='supplier-order-detail'] .supplier-deliveries-card,
body[data-page='supplier-order-detail'] .supplier-material-prep-card {
  order: 2;
}

body[data-page='supplier-order-detail'] .supplier-central-tickets-card {
  order: 3;
}

body[data-page='supplier-order-detail'] .positions-card .section-head[hidden] {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-position-list {
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 178px;
  gap: 14px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  padding: 18px;
  overflow: visible;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body[data-page='supplier-order-detail'] .supplier-modern-position-main {
  display: grid;
  grid-template-columns: 92px minmax(180px, 1fr) minmax(170px, 0.75fr);
  grid-template-areas:
    "image info dates"
    "bottom bottom bottom";
  gap: 12px;
  align-items: start;
  align-content: start;
  min-width: 0;
  width: 100%;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-image {
  grid-area: image;
  width: 92px;
  min-height: 118px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-info {
  grid-area: info;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-position-pill {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 8px;
  background: #e3f6ec;
  color: #0f6b43;
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-position-article-table {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-position-article-table div {
  display: grid;
  grid-template-columns: minmax(92px, 0.76fr) minmax(0, 1fr);
  min-height: 34px;
  border-bottom: 1px solid #edf2f7;
}

body[data-page='supplier-order-detail'] .supplier-position-article-table div:last-child {
  border-bottom: 0;
}

body[data-page='supplier-order-detail'] .supplier-position-article-table dt,
body[data-page='supplier-order-detail'] .supplier-position-article-table dd {
  margin: 0;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  font-size: 0.78rem;
  line-height: 1.25;
}

body[data-page='supplier-order-detail'] .supplier-position-article-table dt {
  color: #64748b;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-position-article-table dd {
  color: #0f172a;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-modern-size-block,
body[data-page='supplier-order-detail'] .supplier-modern-date-block {
  min-width: 0;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-box {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  background: #f7fbff;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-box--confirmed {
  border-color: #b7d8c5;
  background: #f0fbf5;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-box--pending {
  border-color: #d7dfeb;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-label,
body[data-page='supplier-order-detail'] .supplier-production-planning-box small {
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.25;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-box strong {
  color: #0f6b43;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-inline {
  display: inline-grid;
  gap: 2px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-inline strong {
  color: #334155;
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-inline span {
  color: #0f6b43;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-production-planning-inline--pending {
  color: #64748b;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-modern-size-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
}

body[data-page='supplier-order-detail'] .supplier-modern-date-block {
  grid-area: dates;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-bottom {
  grid-area: bottom;
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  width: 100%;
  align-self: start;
  overflow: visible;
}

body[data-page='supplier-order-detail'] .supplier-position-customer-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: -2px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-position-customer-code {
  display: inline-flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-soft, #e1e8f0);
  border-radius: 8px;
  background: var(--color-surface-muted, #f8fafc);
}

body[data-page='supplier-order-detail'] .supplier-position-customer-code small {
  color: var(--color-text-muted, #64748b);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-position-customer-code strong {
  color: var(--color-text, #0f172a);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-mini-label {
  margin: 0;
  color: #334155;
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-size-grid {
  display: grid;
  grid-template-columns: repeat(var(--supplier-size-columns, 6), minmax(56px, 1fr));
  gap: 1px;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #e6edf5;
  visibility: visible;
  opacity: 1;
}

body[data-page='supplier-order-detail'] .supplier-size-cell {
  min-height: 34px;
  padding: 7px 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0f172a;
  font-size: 0.86rem;
  line-height: 1.05;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] .supplier-size-cell--head {
  background: #f8fafc;
  color: #64748b;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-size-cell strong {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-size-cell--total {
  background: #f1f5f9;
}

body[data-page='supplier-order-detail'] .supplier-size-grid--empty {
  grid-template-columns: 1fr;
  min-height: 42px;
  align-items: center;
  justify-items: center;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-date-chip-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-date-chip {
  width: 100%;
  min-height: 36px;
  padding: 7px 8px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #bfe7d1;
  border-radius: 8px;
  background: #ecfdf3;
  color: #0f6b43;
  font-size: 0.73rem;
  line-height: 1.2;
  font-weight: 850;
  gap: 7px;
  white-space: normal;
}

body[data-page='supplier-order-detail'] .supplier-date-chip--muted {
  border-color: #d9e3ef;
  background: #f5f8fb;
  color: #64718a;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] .supplier-position-total-card {
  min-height: 58px;
  display: grid;
  gap: 5px;
  align-content: center;
  justify-items: center;
  min-width: 0;
  padding: 8px 6px;
  border-right: 1px solid #dbe4ef;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-position-total-card:last-child {
  border-right: 0;
}

body[data-page='supplier-order-detail'] .supplier-position-total-icon {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-totals span:not(.supplier-position-total-icon) {
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-totals strong {
  color: #0f172a;
  font-size: 0.86rem;
  line-height: 1.1;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-totals .is-open strong {
  color: #0f6b43;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-actions a,
body[data-page='supplier-order-detail'] .supplier-modern-position-actions button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.76rem;
  line-height: 1.1;
  font-weight: 850;
  text-align: left;
  white-space: normal;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-actions a:hover,
body[data-page='supplier-order-detail'] .supplier-modern-position-actions button:hover,
body[data-page='supplier-order-detail'] .supplier-modern-position-actions a:focus-visible,
body[data-page='supplier-order-detail'] .supplier-modern-position-actions button:focus-visible {
  border-color: #aebdcb;
  background: #f8fafc;
  color: #061226;
}

body[data-page='supplier-order-detail'] .supplier-modern-position-actions .supplier-position-labeling-toggle svg {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-position-packaging-panel,
body[data-page='supplier-order-detail'] .supplier-inline-techpack-panel,
body[data-page='supplier-order-detail'] .supplier-inline-materials-panel,
body[data-page='supplier-order-detail'] .supplier-position-material-panel,
body[data-page='supplier-order-detail'] .supplier-position-question-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-position-material-panel {
  margin-top: 16px;
}

body[data-page='supplier-order-detail'] .supplier-position-packaging-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-page='supplier-order-detail'] .supplier-position-packaging-head h6 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-position-labeling-panel {
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #cfe3f4;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fbff 0%, #f3faf7 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #e8f7f0;
  border: 1px solid #bdebd5;
  color: #047857;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder__icon::before {
  content: "";
  width: 25px;
  height: 25px;
  display: block;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V4h9l8.6 8.6a2 2 0 0 1 0 2.8ZM7.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V4h9l8.6 8.6a2 2 0 0 1 0 2.8ZM7.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder__copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder h6 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] .supplier-labeling-progress {
  position: relative;
  width: min(320px, 100%);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbeafe;
}

body[data-page='supplier-order-detail'] .supplier-labeling-progress span {
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #0ea5e9, #22c55e);
  animation: supplierLabelingProgress 1.45s ease-in-out infinite;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder small,
body[data-page='supplier-order-detail'] .supplier-labeling-placeholder em {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-labeling-placeholder em {
  color: #047857;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__header > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #cceadd;
  border-radius: 14px;
  background: #e7f7ef;
  color: #047857;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__icon::before {
  content: "";
  width: 23px;
  height: 23px;
  display: block;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V4h9l8.6 8.6a2 2 0 0 1 0 2.8ZM7.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V4h9l8.6 8.6a2 2 0 0 1 0 2.8ZM7.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern h6,
body[data-page='supplier-order-detail'] .supplier-labeling-card h6 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__badge,
body[data-page='supplier-order-detail'] .supplier-labeling-card__target {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 850;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card-list {
  display: grid;
  gap: 20px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe5df;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #e2e8f0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__head > div {
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__kicker {
  display: block;
  margin-bottom: 5px;
  color: #047857;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__target {
  flex: 0 1 auto;
  background: #ecfdf5;
  color: #047857;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__target--muted {
  background: #f1f5f9;
  color: #64748b;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 0.95fr);
  min-height: 360px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px;
  border-right: 1px solid #e2e8f0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__image-link,
body[data-page='supplier-order-detail'] .supplier-labeling-card__video {
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__image-link img,
body[data-page='supplier-order-detail'] .supplier-labeling-card__video video {
  max-width: 100%;
  max-height: 380px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__video {
  position: relative;
  flex-direction: column;
  gap: 10px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__video a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f766e;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__video a span {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__placeholder {
  width: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #fff;
  color: #64748b;
  text-align: center;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__placeholder span {
  width: 42px;
  height: 42px;
  display: block;
  color: #94a3b8;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2ZM8.5 11.5l2.5 3.01L14.5 10l4.5 6H5l3.5-4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2ZM8.5 11.5l2.5 3.01L14.5 10l4.5 6H5l3.5-4.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__placeholder strong {
  color: #475569;
  font-size: 13px;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__instructions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 28px 32px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-card__instructions > h6 {
  font-size: 16px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 0 0 28px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps li:last-child {
  padding-bottom: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps li::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: -2px;
  left: 20px;
  width: 2px;
  border-radius: 999px;
  background: #9fd8c0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps li:last-child::before {
  content: none;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps li > span {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid #9fd8c0;
  border-radius: 999px;
  background: #f7fffb;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps li > div {
  min-width: 0;
  padding-top: 4px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 850;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps small {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-steps p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-labeling-note {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
  padding: 16px;
  border: 1px solid #cde9dc;
  border-radius: 14px;
  background: #f2fbf7;
}

body[data-page='supplier-order-detail'] .supplier-labeling-note::before {
  content: "i";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #71c9a2;
  border-radius: 999px;
  color: #047857;
  font-size: 14px;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-labeling-note strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-note p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-more {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-labeling-more summary {
  cursor: pointer;
  color: #0f766e;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-more p {
  margin: 8px 0 0;
  font-size: 12px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-more a {
  display: inline-flex;
  margin-top: 8px;
  color: #0f766e;
  font-weight: 850;
  text-decoration: none;
}

body[data-page='supplier-order-detail'] .supplier-labeling-pdf-button {
  width: 100%;
  min-height: 36px;
  padding: 7px 8px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #bfe7d1;
  border-radius: 8px;
  background: #ecfdf3;
  color: #0f6b43;
  font-size: 0.73rem;
  line-height: 1.2;
  font-weight: 850;
  gap: 7px;
  white-space: normal;
  justify-content: center;
}

body[data-page='supplier-order-detail'] .supplier-labeling-pdf-button:hover {
  background: #115e59;
  border-color: #115e59;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #d8eadf;
  border-radius: 16px;
  background: #fbfefc;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

body[data-page='supplier-order-detail'] .supplier-labeling-info header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info h6 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-grid--variants {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-grid--summary {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body[data-page='supplier-order-detail'] .supplier-labeling-variant-list {
  display: grid;
  gap: 12px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-variant-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-item,
body[data-page='supplier-order-detail'] .supplier-labeling-info-notes {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-item span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-item--variant {
  align-content: start;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-item .is-required {
  background: #dcfce7;
  color: #15803d;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-item .is-not-required {
  background: #f1f5f9;
  color: #64748b;
}

body[data-page='supplier-order-detail'] .supplier-labeling-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-files > span {
  flex: 0 0 100%;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-labeling-files a,
body[data-page='supplier-order-detail'] .supplier-labeling-files small {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f766e;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

body[data-page='supplier-order-detail'] .supplier-labeling-info-notes {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instructions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instructions header {
  display: block;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instruction-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instruction-card > strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instruction-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instruction-card dl > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instruction-lang {
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-labeling-instruction-text {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-labeling-media-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-media-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  background: #fff;
}

body[data-page='supplier-order-detail'] .supplier-labeling-media-card img,
body[data-page='supplier-order-detail'] .supplier-labeling-media-card video {
  width: 100%;
  max-height: 260px;
  border-radius: 10px;
  background: #f8fafc;
  object-fit: contain;
}

body[data-page='supplier-order-detail'] .supplier-labeling-position-data dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-position-data dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-labeling-position-data dd {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

body[data-page='supplier-order-detail'] .supplier-labeling-size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page='supplier-order-detail'] .supplier-labeling-size-list span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  body[data-page='supplier-order-detail'] .supplier-labeling-card__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-card__media {
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern {
    padding: 16px;
    border-radius: 16px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__header,
  body[data-page='supplier-order-detail'] .supplier-labeling-card__head {
    display: grid;
    justify-content: stretch;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__header > div {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-panel-modern__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-card__head {
    padding: 16px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-card__media {
    padding: 16px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-card__image-link,
  body[data-page='supplier-order-detail'] .supplier-labeling-card__video,
  body[data-page='supplier-order-detail'] .supplier-labeling-card__placeholder {
    min-height: 220px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-card__instructions {
    padding: 20px 16px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-steps li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-steps li::before {
    left: 17px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-steps li > span {
    width: 36px;
    height: 36px;
  }

  body[data-page='supplier-order-detail'] .supplier-labeling-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes supplierLabelingProgress {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(240%);
  }
}

body[data-page='supplier-order-detail'] .supplier-packaging-material-delivery {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

body[data-page='supplier-order-detail'] .supplier-packaging-material-delivery > span {
  color: #047857;
  font-size: 12px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-packaging-material-delivery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page='supplier-order-detail'] .supplier-packaging-material-delivery-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

body[data-page='supplier-order-detail'] .supplier-position-material-panel__inner {
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

body[data-page='supplier-order-detail'] .supplier-position-material-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

body[data-page='supplier-order-detail'] .supplier-position-material-panel__head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-position-material-panel__head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}

body[data-page='supplier-order-detail'] .supplier-position-material-list {
  display: grid;
  gap: 14px;
}

body[data-page='supplier-order-detail'] .supplier-position-material-card.supplier-material-card {
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

body[data-page='supplier-order-detail'] .supplier-material-card__top {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(260px, 0.72fr) 32px;
  gap: 16px;
  align-items: center;
}

body[data-page='supplier-order-detail'] .supplier-material-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #047857;
}

body[data-page='supplier-order-detail'] .supplier-material-card__icon::before {
  content: "";
  width: 34px;
  height: 34px;
  display: block;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 3 6.5l9 4.5 9-4.5L12 2Zm-7.5 8.2L12 14l7.5-3.8v3.1L12 17.1l-7.5-3.8v-3.1Zm0 5L12 19l7.5-3.8v3.1L12 22l-7.5-3.7v-3.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 3 6.5l9 4.5 9-4.5L12 2Zm-7.5 8.2L12 14l7.5-3.8v3.1L12 17.1l-7.5-3.8v-3.1Zm0 5L12 19l7.5-3.8v3.1L12 22l-7.5-3.7v-3.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page='supplier-order-detail'] .supplier-material-card--empty-procurement .supplier-material-card__icon {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

body[data-page='supplier-order-detail'] .supplier-material-card__main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

body[data-page='supplier-order-detail'] .supplier-material-card__title {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-material-card__need {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-card--empty-procurement .supplier-material-card__need {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

body[data-page='supplier-order-detail'] .supplier-material-card__note {
  color: #334155;
  font-size: 14px;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] .supplier-material-card__deliveries {
  border-left: 1px solid #e2e8f0;
  padding-left: 18px;
}

body[data-page='supplier-order-detail'] .supplier-material-card__deliveries h5 {
  margin: 0 0 8px;
  color: #334155;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-card__deliveries ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

body[data-page='supplier-order-detail'] .supplier-material-card__deliveries li {
  margin: 0;
}

body[data-page='supplier-order-detail'] .supplier-material-card__date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-card--empty-procurement .supplier-material-card__date-chip {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

body[data-page='supplier-order-detail'] .supplier-material-card__date-chip::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2Zm11 8H6v10h12V10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h2v3h6V2h2v3h3v17H4V5h3V2Zm11 8H6v10h12V10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page='supplier-order-detail'] .supplier-material-card__toggle {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #0f172a;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

body[data-page='supplier-order-detail'] .supplier-material-card__toggle::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg) translateY(2px);
}

body[data-page='supplier-order-detail'] .supplier-material-card__toggle:hover {
  background: #f1f5f9;
}

body[data-page='supplier-order-detail'] .supplier-material-card.is-collapsed .supplier-material-card__toggle {
  transform: rotate(180deg);
}

body[data-page='supplier-order-detail'] .supplier-material-card.is-collapsed .supplier-material-card__procurement {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-material-card__procurement {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

body[data-page='supplier-order-detail'] .supplier-material-card__procurement h5 {
  margin: 0 0 10px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-material-card__procurement dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body[data-page='supplier-order-detail'] .supplier-material-card__procurement dl > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 13px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

body[data-page='supplier-order-detail'] .supplier-material-card__procurement dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-material-card__procurement dd {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  word-break: break-word;
}

body[data-page='supplier-order-detail'] .supplier-material-card__empty,
body[data-page='supplier-order-detail'] .supplier-position-material-empty {
  margin: 0;
  min-height: 42px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 750;
}

body[data-page='supplier-order-detail'] .supplier-material-card__empty span {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.2L6.1 7 12 9.8 17.9 7 12 4.2ZM5 8.7v7.6l6 3V11.5l-6-2.8Zm14 0-6 2.8v7.8l6-3V8.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 9 4.5v11L12 22l-9-4.5v-11L12 2Zm0 2.2L6.1 7 12 9.8 17.9 7 12 4.2ZM5 8.7v7.6l6 3V11.5l-6-2.8Zm14 0-6 2.8v7.8l6-3V8.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 900px) {
  body[data-page='supplier-order-detail'] .supplier-material-card__top {
    grid-template-columns: 64px minmax(0, 1fr) 32px;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__deliveries {
    grid-column: 1 / -1;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid #e2e8f0;
    padding-left: 0;
    padding-top: 12px;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__toggle {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__procurement dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-page='supplier-order-detail'] .supplier-position-material-panel__inner {
    padding: 14px;
    border-radius: 15px;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__top {
    grid-template-columns: 56px minmax(0, 1fr) 28px;
    gap: 12px;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__title {
    font-size: 16px;
  }

  body[data-page='supplier-order-detail'] .supplier-material-card__procurement dl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  body[data-page='supplier-order-detail'] .supplier-modern-position-card {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] .supplier-modern-position-main {
    grid-template-columns: 92px minmax(0, 1fr) minmax(170px, 0.9fr);
    grid-template-areas:
      "image info dates"
      "bottom bottom bottom";
  }

  body[data-page='supplier-order-detail'] .supplier-modern-position-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page='supplier-order-detail'] .supplier-modern-position-card,
  body[data-page='supplier-order-detail'] .supplier-modern-position-main,
  body[data-page='supplier-order-detail'] .supplier-modern-position-actions,
  body[data-page='supplier-order-detail'] .supplier-modern-position-totals {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] .supplier-modern-position-main {
    grid-template-areas:
      "image"
      "info"
      "dates"
      "bottom";
  }

  body[data-page='supplier-order-detail'] .supplier-modern-position-image {
    width: 100%;
    max-width: 180px;
    min-height: 150px;
  }

  body[data-page='supplier-order-detail'] .supplier-position-total-card {
    border-right: 0;
    border-bottom: 1px solid #dbe4ef;
  }

  body[data-page='supplier-order-detail'] .supplier-position-total-card:last-child {
    border-bottom: 0;
  }

  body[data-page='supplier-order-detail'] .supplier-position-customer-codes {
    flex-direction: column;
  }

  body[data-page='supplier-order-detail'] .supplier-position-customer-code {
    width: 100%;
  }
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-modern-position-bottom {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  position: relative;
  overflow: visible;
  min-height: unset;
  height: auto;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-modern-size-block {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
  position: relative;
  z-index: 2;
  padding: 12px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  background: #ffffff;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-size-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--supplier-size-columns, 6), minmax(52px, 1fr));
  width: 100%;
  gap: 0;
  overflow: visible !important;
  color: #111827 !important;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-size-cell {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #e1e8f0;
  color: #111827 !important;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.2;
  visibility: visible !important;
  opacity: 1 !important;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-size-cell strong {
  color: #111827 !important;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-size-cell--head {
  background: #f7fafc;
  color: #64748b !important;
  font-weight: 700;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-size-cell--total {
  background: #eef8f1;
  color: #0f7a3b !important;
}

body[data-page='supplier-order-detail'] .supplier-sms-onay-view .supplier-modern-position-totals {
  width: 100%;
}

body[data-page='supplier-order-detail'] .supplier-order-layout-modern {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
  gap: 26px;
}

body[data-page='supplier-order-detail'] .supplier-order-side-column {
  display: grid;
  gap: 20px;
  align-content: start;
  min-width: 0;
}

body[data-page='supplier-order-detail'] .supplier-order-side-column > .card {
  width: 100%;
  min-width: 0;
  padding: 18px 18px 16px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

body[data-page='supplier-order-detail'] .supplier-checklist-card .supplier-quick-check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

body[data-page='supplier-order-detail'] .supplier-checklist-card .supplier-quick-check-head h4,
body[data-page='supplier-order-detail'] .supplier-current-task-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.01em;
}

body[data-page='supplier-order-detail'] #supplierChecklistStatus {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8eefc;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

body[data-page='supplier-order-detail'] #supplierChecklistStatus:empty {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-quick-progress-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

body[data-page='supplier-order-detail'] .supplier-checklist-card .supplier-quick-progress-wrap .supplier-quick-progress {
  display: block;
  height: 6px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

body[data-page='supplier-order-detail'] .supplier-quick-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #047857);
}

body[data-page='supplier-order-detail'] .supplier-quick-progress-value {
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

body[data-page='supplier-order-detail'] .supplier-review-checklist {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 4px;
}

body[data-page='supplier-order-detail'] .supplier-review-check {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 0;
  padding: 0 0 18px;
  color: #475569;
  font-size: 1rem;
}

body[data-page='supplier-order-detail'] .supplier-review-check::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: -2px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, #cbd5e1 0 5px, transparent 5px 9px);
}

body[data-page='supplier-order-detail'] .supplier-review-check:last-child::before {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 2px solid #15803d;
  border-radius: 999px;
  background: #ffffff;
  color: #15803d;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-done > span {
  border-color: #15803d;
  background: #ffffff;
  box-shadow: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-done > span::before {
  content: "✓";
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-done > span::after {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check p {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  width: auto;
  margin: 1px 0 0;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.28;
  font-weight: 800;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
}

body[data-page='supplier-order-detail'] .supplier-review-check small {
  grid-column: 2;
  display: block;
  min-width: 0;
  max-width: none;
  width: auto;
  margin-top: 5px;
  color: #475569;
  font-size: 12px;
  line-height: 1.38;
  font-weight: 550;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: #ecfdf5;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current::before {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current > span {
  width: 30px;
  height: 30px;
  margin: 0;
  border: 0;
  background: #059669;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(5, 150, 105, 0.18);
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current > span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current p {
  color: #065f46;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-review-check.is-current small {
  color: #475569;
  font-size: 12px;
  line-height: 1.38;
}

body[data-page='supplier-order-detail'] .supplier-checklist-hint {
  position: relative;
  margin: 12px 0 0;
  padding: 12px 0 0 34px;
  border-top: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  line-height: 1.38;
  font-weight: 650;
}

body[data-page='supplier-order-detail'] .supplier-checklist-hint::before {
  content: "i";
  position: absolute;
  left: 0;
  top: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid #64748b;
  border-radius: 999px;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

body[data-page='supplier-order-detail'] .supplier-current-task-card > p {
  margin: 12px 0 24px;
  color: #475569;
  font-size: 16px;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] .supplier-current-task-timeline {
  display: grid;
  gap: 0;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 26px;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:last-child {
  padding-bottom: 0;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 38px;
  bottom: -2px;
  width: 2px;
  background: #dbe3ef;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step::after,
body[data-page='supplier-order-detail'] .supplier-current-task-step:last-child::before {
  display: none;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 16px;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:nth-child(1) > span::before {
  content: "1";
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:nth-child(2) > span::before {
  content: "2";
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:nth-child(3) > span::before {
  content: "3";
}

body[data-page='supplier-order-detail'] .supplier-current-task-step:nth-child(4) > span::before {
  content: "4";
}

body[data-page='supplier-order-detail'] .supplier-current-task-step.is-active > span {
  border-color: #059669;
  background: #059669;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.24);
}

body[data-page='supplier-order-detail'] .supplier-current-task-step strong {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-current-task-step p {
  margin: 6px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.4;
}

body[data-page='supplier-order-detail'] .supplier-help-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

body[data-page='supplier-order-detail'] .supplier-help-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background-color: #e8f8ef;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Cpath d='M4 13v4a2 2 0 0 0 2 2h2v-8H6a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M20 13v4a2 2 0 0 1-2 2h-2v-8h2a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16 19a4 4 0 0 1-4 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px;
}

body[data-page='supplier-order-detail'] .supplier-help-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 850;
}

body[data-page='supplier-order-detail'] .supplier-help-card p {
  margin: 8px 0 16px;
  color: #475569;
  font-size: 16px;
  line-height: 1.45;
}

body[data-page='supplier-order-detail'] .supplier-help-card a.ghost.small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

body[data-page='supplier-order-detail'] .supplier-review-check p,
body[data-page='supplier-order-detail'] .supplier-review-check small,
body[data-page='supplier-order-detail'] .supplier-current-task-step strong,
body[data-page='supplier-order-detail'] .supplier-current-task-step p,
body[data-page='supplier-order-detail'] .supplier-help-card p {
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

body[data-page='supplier-order-detail'] .supplier-order-side-column .supplier-review-check {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

body[data-page='supplier-order-detail'] .supplier-order-side-column .supplier-review-check p,
body[data-page='supplier-order-detail'] .supplier-order-side-column .supplier-review-check small {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  width: auto;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
}

body[data-page='supplier-order-detail'] .supplier-order-side-column .supplier-review-check small {
  display: block;
  line-height: 1.45;
}

@media (max-width: 1280px) {
  body[data-page='supplier-order-detail'] .supplier-order-layout-modern {
    grid-template-columns: 1fr;
  }

  body[data-page='supplier-order-detail'] .supplier-order-side-column {
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  body[data-page='supplier-order-detail'] .supplier-order-side-column > .card {
    padding: 18px;
    border-radius: 18px;
  }

  body[data-page='supplier-order-detail'] .supplier-checklist-card .supplier-quick-check-head {
    align-items: flex-start;
  }

  body[data-page='supplier-order-detail'] .supplier-checklist-card .supplier-quick-check-head h4,
  body[data-page='supplier-order-detail'] .supplier-current-task-card h4 {
    font-size: 17px;
  }

  body[data-page='supplier-order-detail'] .supplier-review-check {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  body[data-page='supplier-order-detail'] .supplier-review-check p {
    font-size: 14px;
  }

  body[data-page='supplier-order-detail'] .supplier-review-check small {
    font-size: 12px;
  }

  body[data-page='supplier-order-detail'] .supplier-help-card {
    grid-template-columns: 1fr;
  }
}

.delivery-date-objection-dialog {
  max-width: none;
  border: 0;
  border-radius: 22px;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.delivery-date-objection-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.delivery-date-objection-dialog .delivery-date-objection-form {
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 48px;
  align-items: start;
  gap: 20px;
  padding: 28px 32px 22px;
  border-bottom: 0;
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-head h4 {
  margin: 2px 0 6px;
  color: #0f172a;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: 0;
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-head p {
  margin: 0;
  max-width: 690px;
  color: #475569;
  font-size: 18px;
  line-height: 1.38;
}

.delivery-date-objection-modal__header-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  color: #f59e0b;
  background: #ffedd5;
  box-shadow: inset 0 0 0 8px #fed7aa;
}

.delivery-date-objection-modal__header-icon svg,
.delivery-date-objection-modal__close svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-objection-dialog .delivery-date-objection-form .delivery-date-objection-modal__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  color: #0f172a;
  background: #fff;
  font-size: 0;
}

.delivery-date-objection-dialog .delivery-date-objection-form .delivery-date-objection-modal__close:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.delivery-date-objection-dialog .delivery-date-objection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 24px 32px 18px;
}

.delivery-date-objection-dialog .delivery-date-objection-preview {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 6px 32px 0;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.delivery-date-objection-dialog .delivery-date-objection-preview img,
.delivery-date-objection-dialog .delivery-date-objection-preview-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: contain;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 10px;
}

.delivery-date-objection-dialog .delivery-date-objection-preview-placeholder {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.delivery-date-objection-dialog .delivery-date-objection-preview strong,
.delivery-date-objection-dialog .delivery-date-objection-preview p,
.delivery-date-objection-dialog .delivery-date-objection-preview small {
  display: block;
}

.delivery-date-objection-dialog .delivery-date-objection-preview strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.28;
}

.delivery-date-objection-dialog .delivery-date-objection-preview p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 17px;
}

.delivery-date-objection-dialog .delivery-date-objection-preview small {
  color: #475569;
  font-size: 16px;
}

.delivery-date-objection-dialog .delivery-date-objection-preview__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}

.delivery-date-objection-dialog .delivery-date-objection-preview__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.delivery-date-objection-dialog .delivery-date-objection-preview__meta-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #475569;
  flex: 0 0 20px;
}

.delivery-date-objection-dialog .delivery-date-objection-grid label {
  display: grid;
  gap: 10px;
}

.delivery-date-objection-dialog .delivery-date-objection-grid span {
  font-size: 15px;
  font-weight: 700;
  color: #334155;
}

.delivery-date-objection-dialog .delivery-date-objection-grid input,
.delivery-date-objection-dialog .delivery-date-objection-grid textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.delivery-date-objection-dialog .delivery-date-objection-grid input {
  min-height: 58px;
  padding: 0 18px;
}

.delivery-date-objection-dialog .delivery-date-objection-grid textarea {
  min-height: 126px;
  padding: 16px 18px;
  resize: vertical;
}

.delivery-date-objection-dialog .delivery-date-objection-grid input:focus,
.delivery-date-objection-dialog .delivery-date-objection-grid textarea:focus {
  outline: 0;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.14);
}

.delivery-date-objection-dialog .delivery-date-objection-grid input[readonly] {
  background: #f1f5f9;
  color: #0f172a;
}

.delivery-date-objection-full {
  grid-column: 1 / -1;
}

.delivery-date-objection-dialog > .delivery-date-objection-form > .delivery-date-objection-full {
  display: grid;
  gap: 10px;
  margin: 0 32px 16px;
}

.delivery-date-objection-dialog > .delivery-date-objection-form > .delivery-date-objection-full span {
  font-size: 15px;
  font-weight: 700;
  color: #334155;
}

.delivery-date-objection-dialog > .delivery-date-objection-form > .delivery-date-objection-full textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  resize: vertical;
}

.delivery-date-objection-dialog .delivery-date-objection-subject-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 32px 24px;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 16px;
  line-height: 1.45;
}

.delivery-date-objection-dialog .delivery-date-objection-subject-note::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid #94a3b8;
  border-radius: 999px;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  font-style: normal;
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 20px 32px 32px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .ghost,
.delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .btn {
  min-height: 52px;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 800;
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .ghost {
  border: 1px solid #dbe3ef;
  color: #0f172a;
  background: #fff;
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .btn {
  border: 1px solid #047857;
  background: #047857;
  color: #fff;
  box-shadow: 0 10px 20px rgba(4, 120, 87, 0.18);
}

.delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .btn:hover {
  background: #036c4e;
  border-color: #036c4e;
}

.delivery-date-objection-trigger {
  width: fit-content;
  margin-top: 8px;
}

.supplier-packaging-material-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.supplier-packaging-material-section-head h6 {
  margin: 0;
}

.supplier-packaging-material-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-packaging-material-card {
  position: relative;
}

.supplier-packaging-material-card.is-selected-for-objection {
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.16);
}

.supplier-packaging-select-check {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.is-packaging-objection-selection-mode .supplier-packaging-select-check {
  display: inline-flex;
}

.supplier-packaging-select-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.supplier-packaging-select-check span {
  width: 24px;
  height: 24px;
  border: 2px solid #94a3b8;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.supplier-packaging-select-check input:checked + span {
  border-color: #16a34a;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

.supplier-packaging-select-check input:checked + span::after {
  content: "";
  display: block;
  width: 7px;
  height: 12px;
  margin: 2px 0 0 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.is-packaging-objection-selection-mode .supplier-packaging-material-card {
  cursor: pointer;
}

.supplier-material-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.supplier-material-section-head h6 {
  margin: 0;
}

.supplier-material-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-material-card,
.supplier-material-row {
  position: relative;
}

.supplier-material-card.is-selected-for-objection,
.supplier-material-row.is-selected-for-objection {
  border-color: #16a34a;
  background: #f0fdf4;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.16);
}

.supplier-material-select-check {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.is-material-objection-selection-mode .supplier-material-select-check {
  display: inline-flex;
}

.supplier-material-select-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.supplier-material-select-check span {
  width: 24px;
  height: 24px;
  border: 2px solid #94a3b8;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.supplier-material-select-check input:checked + span {
  border-color: #16a34a;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

.supplier-material-select-check input:checked + span::after {
  content: "";
  display: block;
  width: 7px;
  height: 12px;
  margin: 2px 0 0 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.is-material-objection-selection-mode .supplier-material-card,
.is-material-objection-selection-mode .supplier-material-row {
  cursor: pointer;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form {
  width: min(1040px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 64px);
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header {
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  gap: 16px;
  align-items: start;
  padding: 28px 32px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #047857;
  background: #dcfce7;
  box-shadow: inset 0 0 0 8px #bbf7d0;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header-copy h4 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 850;
  color: #0f172a;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header-copy p {
  margin: 8px 0 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.55;
  color: #475569;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__close {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 12px;
  padding: 0;
  font-size: 0;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__close::before {
  content: "×";
  font-size: 26px;
  line-height: 1;
}

.delivery-date-objection-group-list {
  display: grid;
  gap: 14px;
  padding: 24px 32px 0;
}

.delivery-date-objection-group-row {
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.delivery-date-objection-group-row__head {
  display: grid;
  grid-template-columns: 34px 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.delivery-date-objection-group-row__index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  font-weight: 850;
}

.delivery-date-objection-group-row__head img,
.delivery-date-objection-group-row__image-placeholder {
  width: 92px;
  height: 92px;
  object-fit: contain;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 10px;
}

.delivery-date-objection-group-row__image-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.delivery-date-objection-group-row__head strong,
.delivery-date-objection-group-row__head p,
.delivery-date-objection-group-row__head small {
  display: block;
  margin: 0;
}

.delivery-date-objection-group-row__head strong {
  font-size: 17px;
  line-height: 1.35;
  color: #0f172a;
}

.delivery-date-objection-group-row__head p {
  margin-top: 5px;
  color: #64748b;
  font-size: 14px;
}

.delivery-date-objection-group-row__head small {
  margin-top: 7px;
  color: #047857;
  font-size: 13px;
  font-weight: 750;
}

.delivery-date-objection-group-row__body {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 16px;
  align-items: end;
  margin-top: 18px;
}

.delivery-date-objection-group-row__body label {
  display: grid;
  gap: 7px;
}

.delivery-date-objection-group-row__body label span {
  font-size: 13px;
  font-weight: 750;
  color: #334155;
}

.delivery-date-objection-group-row__body input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
  background: #fff;
}

.delivery-date-objection-group-row__body input:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}

.delivery-date-objection-dialog--group > .delivery-date-objection-form > .delivery-date-objection-full {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 22px 32px 0;
}

.delivery-date-objection-dialog--group > .delivery-date-objection-form > .delivery-date-objection-full > span {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}

.delivery-date-objection-dialog--group > .delivery-date-objection-form > .delivery-date-objection-full textarea {
  width: 100%;
  min-height: 130px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: #0f172a;
  resize: vertical;
}

.delivery-date-objection-dialog--group .delivery-date-objection-subject-note {
  margin: 16px 32px 0;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #cfe0f5;
  border-radius: 14px;
  background: #f8fbff;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.delivery-date-objection-dialog--group .delivery-date-objection-subject-note:empty {
  display: none;
}

.delivery-date-objection-dialog--group .delivery-date-objection-subject-note::before {
  color: #2563eb;
  border-color: #93c5fd;
  background: #fff;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .dialog-actions {
  margin-top: 24px;
  padding: 22px 32px;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .dialog-actions .ghost {
  min-height: 50px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1px solid #dbe3ef;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}

.delivery-date-objection-dialog--group .delivery-date-objection-form .dialog-actions .btn {
  min-height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  background: #047857;
  color: #fff;
  font-weight: 850;
  box-shadow: 0 14px 30px rgba(4, 120, 87, 0.22);
}

.delivery-date-objection-subject-list {
  display: grid;
  gap: 10px;
}

.delivery-date-objection-subject-list__item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.delivery-date-objection-subject-list__image {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.delivery-date-objection-subject-list__item strong,
.delivery-date-objection-subject-list__item small {
  display: block;
}

.delivery-date-objection-subject-list__item small {
  margin-top: 3px;
  color: #475569;
}

.supplier-delivery-followup-plan {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
  color: #115e59;
  font-size: 12px;
}

.supplier-delivery-followup-plan strong {
  color: #0f766e;
}

.supplier-delivery-followup-plan small {
  color: #64748b;
}

.delivery-date-objection-project-card {
  display: grid;
  gap: 18px;
}

.delivery-date-objection-project-block h4 {
  margin: 0 0 10px;
}

.delivery-date-objection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.delivery-date-objection-ticket-detail,
.delivery-date-objection-ticket-actions {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
}

.delivery-date-objection-ticket-detail h5,
.delivery-date-objection-ticket-actions h5 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.delivery-date-objection-followup-status {
  margin: 10px 0;
  color: #111827;
}

.delivery-date-objection-followup-history {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.delivery-date-objection-followup-history ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-date-objection-followup-history li,
.delivery-date-objection-partner-response {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.delivery-date-objection-followup-history li span,
.delivery-date-objection-partner-response span {
  color: #64748b;
  font-size: 0.86rem;
}

.delivery-date-objection-partner-response {
  margin: 0 0 12px;
}

.delivery-date-objection-ticket-detail dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.delivery-date-objection-ticket-detail dl div {
  display: grid;
  gap: 10px;
}

.delivery-date-objection-ticket-detail dt {
  color: #64748b;
  font-size: 0.84rem;
}

.delivery-date-objection-ticket-detail dd {
  margin: 0;
  color: #111827;
  font-weight: 600;
}

.delivery-date-objection-subject-image {
  margin: 0 0 12px;
}

.delivery-date-objection-ticket-detail--compact {
  margin: 0 0 14px;
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 20px 20px;
}

.supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact h5 {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin: -18px -20px 0;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.delivery-date-objection-ticket-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.delivery-date-objection-ticket-detail__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.delivery-date-objection-ticket-detail--compact h5 {
  margin: 0;
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}

.supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact h5 {
  margin: -18px -20px 0;
}

.delivery-date-objection-ticket-detail__title > span:last-child {
  min-width: 0;
}

.delivery-date-objection-ticket-detail__icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.delivery-date-objection-ticket-detail__icon::before {
  content: "";
  width: 17px;
  height: 16px;
  border: 2px solid #64748b;
  border-radius: 3px;
}

.delivery-date-objection-ticket-detail__icon::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 13px;
  height: 2px;
  border-top: 2px solid #64748b;
}

.delivery-date-objection-ticket-detail__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 9px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.delivery-date-objection-ticket-detail__status span {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f59e0b;
}

.delivery-date-objection-ticket-detail__body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px 20px 20px;
}

.delivery-date-objection-ticket-detail__media {
  display: grid;
  align-content: start;
  justify-items: center;
  min-width: 0;
}

.delivery-date-objection-ticket-detail--compact .delivery-date-objection-subject-image {
  display: grid;
  width: 160px;
  height: 160px;
  margin: 0;
  padding: 12px;
  place-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #64748b;
  object-fit: contain;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact > .delivery-date-objection-subject-image {
  grid-column: 1;
}

.supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact > dl {
  grid-column: 2;
}

.delivery-date-objection-ticket-detail--compact dl,
.delivery-date-objection-ticket-detail--compact .delivery-date-objection-ticket-detail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.delivery-date-objection-ticket-detail--compact dl > div {
  display: grid;
  grid-template-columns: minmax(92px, 0.78fr) minmax(0, 1.22fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 11px 14px;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.delivery-date-objection-ticket-detail--compact dl > div:nth-child(3n) {
  border-right: 0;
}

.delivery-date-objection-ticket-detail--compact dl > div[data-field="reason"] {
  grid-column: span 2;
  background: #f8fafc;
}

.delivery-date-objection-ticket-detail--compact dt {
  min-width: 0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}

.delivery-date-objection-ticket-detail--compact dd {
  min-width: 0;
  margin: 0;
  color: #0f172a;
  font-size: 0.89rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.delivery-date-objection-ticket-detail--compact dl > div[data-field="scope"] dd,
.delivery-date-objection-ticket-detail--compact dl > div[data-field="color"] dd,
.delivery-date-objection-ticket-detail--compact dl > div[data-field="reason"] dd {
  font-weight: 700;
}

.delivery-date-objection-ticket-detail__code {
  display: inline-flex;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.delivery-date-objection-ticket-detail--modern {
  margin: 0 0 14px;
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
  overflow: hidden;
}

.delivery-date-objection-ticket-detail--modern,
.delivery-date-objection-ticket-detail--modern * {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__head {
  min-height: 56px;
  padding: 12px 18px;
  background: #ffffff;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__title {
  gap: 10px;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__title h5,
.delivery-date-objection-ticket-detail--modern > h5 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__icon {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__icon::before {
  width: 15px;
  height: 14px;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__icon::after {
  top: 11px;
  width: 11px;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__status {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__status span {
  flex-basis: 7px;
  width: 7px;
  height: 7px;
  background: #f59e0b;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__body {
  display: block;
  padding: 0 18px 16px;
}

.delivery-date-objection-ticket-detail--modern dl,
.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  overflow: visible;
}

.delivery-date-objection-ticket-detail--modern dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 66px;
  padding: 14px 16px;
  border-right: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.delivery-date-objection-ticket-detail--modern dl > div:nth-child(3n) {
  border-right: 0;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="subject"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="reason"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="status"] {
  grid-column: 1 / -1;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="scope"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="supplier"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="order"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="position"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="article"],
.delivery-date-objection-ticket-detail--modern dl > div[data-field="color"] {
  position: relative;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="scope"]::before,
.delivery-date-objection-ticket-detail--modern dl > div[data-field="supplier"]::before,
.delivery-date-objection-ticket-detail--modern dl > div[data-field="order"]::before,
.delivery-date-objection-ticket-detail--modern dl > div[data-field="position"]::before,
.delivery-date-objection-ticket-detail--modern dl > div[data-field="article"]::before,
.delivery-date-objection-ticket-detail--modern dl > div[data-field="color"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: #edf2f7;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="scope"]::before {
  display: none;
}

.delivery-date-objection-ticket-detail--modern dt {
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

.delivery-date-objection-ticket-detail--modern dd {
  min-width: 0;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="subject"] {
  gap: 10px;
  min-height: 0;
  padding: 16px 0 12px;
  border-bottom: 0;
  background: #ffffff;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="subject"] dt {
  padding: 0 0 0 0;
  color: #334155;
}

.delivery-date-objection-ticket-detail--modern dl > div[data-field="subject"] dd {
  width: 100%;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__item {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 94px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__image {
  display: grid;
  place-items: center;
  width: 120px;
  height: 86px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  object-fit: contain;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__item strong {
  display: block;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__item small {
  display: block;
  margin-top: 4px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  min-height: 56px;
  margin-top: 0;
  padding: 14px 16px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason::before {
  content: "";
  grid-row: 1 / span 2;
  width: 18px;
  height: 15px;
  align-self: center;
  border: 2px solid #64748b;
  border-radius: 4px;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 34px;
  width: 7px;
  height: 7px;
  border-left: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  background: #ffffff;
  transform: rotate(-18deg);
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason dt,
.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason dd {
  grid-column: 2;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason dd {
  color: #334155;
  font-weight: 700;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__status-row dd {
  justify-self: end;
}

.delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__code {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .delivery-date-objection-ticket-detail--modern dl,
  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__head {
    align-items: flex-start;
    padding: 12px 14px;
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__body {
    padding: 0 14px 14px;
  }

  .delivery-date-objection-ticket-detail--modern dl,
  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__grid {
    grid-template-columns: 1fr;
  }

  .delivery-date-objection-ticket-detail--modern dl > div,
  .delivery-date-objection-ticket-detail--modern dl > div:nth-child(3n),
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="reason"] {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    border-right: 0;
  }

  .delivery-date-objection-ticket-detail--modern dl > div[data-field="scope"]::before,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="supplier"]::before,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="order"]::before,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="position"]::before,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="article"]::before,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="color"]::before {
    display: none;
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list {
    grid-template-columns: 1fr;
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__item {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__image {
    width: 96px;
    height: 76px;
  }
}

@media (max-width: 520px) {
  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__item {
    grid-template-columns: 1fr;
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-subject-list__image {
    width: 100%;
    max-width: 160px;
    height: 96px;
  }

  .delivery-date-objection-ticket-detail--modern dl > div.delivery-date-objection-ticket-detail__reason[data-field="reason"] {
    grid-template-columns: 28px minmax(0, 1fr);
  }
}

.delivery-date-objection-ticket-detail--modal {
  max-height: 280px;
  overflow: auto;
}

.delivery-date-followup-dialog {
  width: min(960px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.delivery-date-followup-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.delivery-date-followup-modal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  max-height: calc(100vh - 64px);
  overflow: auto;
  color: #111827;
  background: #ffffff;
}

.delivery-date-objection-form.delivery-date-followup-modal .dialog-head,
.delivery-date-followup-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: flex-start;
  padding: 28px 32px 18px;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.96);
}

.delivery-date-followup-modal__title {
  min-width: 0;
}

.delivery-date-objection-form.delivery-date-followup-modal .dialog-head h4,
.delivery-date-followup-modal__title h4 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.delivery-date-objection-form.delivery-date-followup-modal .dialog-head p,
.delivery-date-followup-modal__title p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.delivery-date-followup-modal__close {
  min-height: 42px;
  padding: 0 18px;
  border-color: #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-weight: 700;
}

.delivery-date-followup-modal__body {
  display: grid;
  gap: 18px;
  padding: 0 32px 20px;
}

.delivery-date-followup-modal__overview,
.delivery-date-followup-modal__contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.delivery-date-followup-modal .delivery-date-objection-ticket-detail {
  margin: 0;
  padding: 18px;
  border: 1px solid #dbe3ef;
  border-radius: 15px;
  background: #ffffff;
}

.delivery-date-followup-modal .delivery-date-objection-ticket-detail--modal {
  max-height: none;
  overflow: visible;
}

.delivery-date-followup-modal__subject-card {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 166px;
}

.delivery-date-followup-modal__image-frame {
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  border-radius: 12px;
  background: #f1f5f9;
  overflow: hidden;
}

.delivery-date-followup-modal .delivery-date-objection-subject-image {
  display: block;
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  margin: 0;
  border-radius: 12px;
  background: #f1f5f9;
  object-fit: contain;
}

.delivery-date-followup-modal__image-empty {
  display: grid;
  place-items: center;
  padding: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.delivery-date-followup-modal .delivery-date-followup-modal__image-empty {
  display: grid;
  object-fit: initial;
}

.delivery-date-followup-modal__subject-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.delivery-date-followup-modal__subject-copy strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.delivery-date-followup-modal__subject-copy p {
  margin: 0;
  color: #334155;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.delivery-date-followup-modal__meta-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 18px;
  margin-top: 16px;
  align-items: center;
  color: #475569;
  font-size: 13px;
}

.delivery-date-followup-modal__meta-grid b {
  width: fit-content;
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.15;
}

.delivery-date-followup-modal__detail-card dl {
  gap: 6px;
}

.delivery-date-followup-modal__detail-card dl div {
  grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.delivery-date-followup-modal__detail-card dt {
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}

.delivery-date-followup-modal__detail-card dd {
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.delivery-date-followup-modal__detail-card .delivery-date-followup-modal__detail-divider {
  display: block;
  height: 1px;
  margin: 10px 0 6px;
  background: #e5eaf2;
}

.delivery-date-followup-modal__detail-divider dt,
.delivery-date-followup-modal__detail-divider dd {
  display: none;
}

.delivery-date-followup-modal label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.delivery-date-followup-modal label span {
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.delivery-date-followup-modal input,
.delivery-date-followup-modal textarea {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.delivery-date-followup-modal input {
  height: 44px;
  padding: 0 13px;
}

.delivery-date-followup-modal textarea {
  min-height: 238px;
  padding: 14px;
  line-height: 1.45;
  resize: vertical;
}

.delivery-date-followup-modal input:focus,
.delivery-date-followup-modal textarea:focus {
  border-color: #14b8a6;
  outline: 3px solid rgba(20, 184, 166, 0.14);
}

.delivery-date-followup-modal__message {
  grid-column: 1 / -1;
}

.delivery-date-followup-modal__link-output {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 40px;
  margin: -2px 0 0;
  padding: 10px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
}

.delivery-date-followup-modal__link-output[hidden] {
  display: none;
}

.delivery-date-followup-modal__link-icon,
.delivery-date-followup-modal__button svg {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.delivery-date-followup-modal__link-icon svg,
.delivery-date-followup-modal__button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-followup-modal__link-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-date-followup-modal__actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 32px 28px;
  border-top: 0;
  background: rgba(255, 255, 255, 0.96);
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button--whatsapp {
  border-color: #22c55e;
  background: #ffffff;
  color: #059669;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button--email {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button:hover,
.delivery-date-followup-modal__actions .delivery-date-followup-modal__button:focus {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}

.delivery-date-objection-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #e5e7eb;
}

.delivery-date-objection-row p {
  margin: 3px 0 0;
}

.delivery-date-objection-partner-response {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
  color: #115e59;
}

.delivery-date-objection-ticket-actions .delivery-date-objection-partner-response {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}

.supplier-delivery-date-approval-notice {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
  color: #134e4a;
}

.supplier-delivery-date-approval-notice strong {
  font-size: 0.95rem;
  color: #0f766e;
}

.supplier-delivery-date-approval-notice p {
  margin: 0;
  color: #134e4a;
}

.supplier-delivery-date-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.delivery-date-followup-public-page {
  min-height: 100vh;
  margin: 0;
  background: #f6f8fb;
  color: #101827;
}

.delivery-date-followup-shell {
  width: min(1040px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 20px 0;
}

.delivery-date-followup-card {
  display: grid;
  gap: 20px;
  padding: 34px 38px 28px;
  border: 1px solid #dbe3ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.delivery-date-followup-kicker {
  margin: 0 0 6px;
  color: #007a55;
  font-size: 14px;
  font-weight: 800;
}

.delivery-date-followup-head h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(30px, 4vw, 43px);
  line-height: 1.08;
  letter-spacing: 0;
}

.delivery-date-followup-intro {
  max-width: 820px;
  margin: 12px 0 0;
  color: #344054;
  font-size: 16px;
  line-height: 1.62;
}

.delivery-date-followup-details-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 26px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
}

.delivery-date-followup-subjects {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.delivery-date-followup-subject-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
}

.delivery-date-followup-subject-row .delivery-date-followup-image-frame {
  width: 120px;
  height: 120px;
}

.delivery-date-followup-subject-row__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}

.delivery-date-followup-subject-row__body strong,
.delivery-date-followup-subject-row__body p,
.delivery-date-followup-subject-row__body .delivery-date-followup-wide {
  grid-column: 1 / -1;
}

.delivery-date-followup-subject-row__body p {
  margin: 0;
  color: #475569;
}

.delivery-date-followup-image-frame {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 14px;
  background: #f1f4f8;
  overflow: hidden;
}

.delivery-date-followup-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.delivery-date-followup-image-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.delivery-date-followup-details,
.delivery-date-followup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.delivery-date-followup-details {
  margin: 0;
  padding: 0;
}

.delivery-date-followup-details div,
.delivery-date-followup-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.delivery-date-followup-details dt,
.delivery-date-followup-form span {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.delivery-date-followup-details dd {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.delivery-date-followup-wide,
.delivery-date-followup-message {
  grid-column: 1 / -1;
}

.delivery-date-followup-form input,
.delivery-date-followup-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.delivery-date-followup-form textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.45;
}

.delivery-date-followup-form input:focus,
.delivery-date-followup-form textarea:focus {
  border-color: #0f766e;
  outline: 3px solid rgba(15, 118, 110, 0.16);
}

.delivery-date-followup-status-wrap {
  display: grid;
  gap: 8px;
  min-width: 156px;
}

.delivery-date-followup-status-wrap > span:first-child {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.delivery-date-followup-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 8px 12px;
  border: 1px solid #b7e1c1;
  border-radius: 8px;
  background: #e9f8ed;
  color: #2c7a3f;
  font-size: 13px;
  font-weight: 800;
}

.delivery-date-followup-status svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-followup-status.is-confirmed {
  background: #e8f7ef;
  color: #05603a;
}

.delivery-date-followup-warning {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #f5bd55;
  border-radius: 10px;
  background: #fffbeb;
  color: #1f2937;
}

.delivery-date-followup-warning svg {
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid #e5a313;
  border-radius: 999px;
  color: #d79200;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-followup-warning p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.delivery-date-followup-form.delivery-date-followup-modal {
  grid-template-columns: 1fr;
  gap: 0;
}

.delivery-date-followup-form.delivery-date-followup-modal label {
  gap: 7px;
}

.delivery-date-followup-form.delivery-date-followup-modal span {
  font-size: 13px;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button {
  grid-column: auto;
}

.delivery-date-followup-message,
.delivery-date-followup-error {
  margin: 0;
  color: #b91c1c;
  font-weight: 700;
}

.delivery-date-followup-message:empty {
  display: none;
}

.delivery-date-followup-confirm {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px !important;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid #a8d8bf;
  border-radius: 10px;
  background: #eefaf3;
}

.delivery-date-followup-confirm input {
  width: 24px;
  min-height: 24px;
  height: 24px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #006b4a;
}

.delivery-date-followup-confirm span {
  display: grid;
  gap: 4px;
  color: #073b31;
  font-size: 15px;
}

.delivery-date-followup-confirm small {
  color: #34594f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.delivery-date-followup-signature-field {
  display: grid;
  gap: 8px;
}

.delivery-date-followup-signature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.delivery-date-followup-signature-head span {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.delivery-date-followup-signature-head button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.delivery-date-followup-signature-pad {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: crosshair;
  touch-action: none;
}

.delivery-date-followup-signature-field small {
  color: #64748b;
  font-size: 13px;
}

.delivery-date-followup-signature-preview,
.delivery-date-objection-ticket-signature {
  display: block;
  max-width: 320px;
  max-height: 120px;
  padding: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  object-fit: contain;
}

.delivery-date-followup-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 230px) minmax(260px, 360px);
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.delivery-date-followup-primary,
.delivery-date-followup-secondary {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.delivery-date-followup-primary {
  border: 1px solid #005c45;
  background: #006b4a;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(0, 107, 74, 0.18);
}

.delivery-date-followup-primary:hover,
.delivery-date-followup-primary:focus {
  background: #00543d;
}

.delivery-date-followup-primary:disabled {
  cursor: wait;
  opacity: 0.65;
}

.delivery-date-followup-secondary {
  border: 1px solid #64748b;
  background: #ffffff;
  color: #0f172a;
}

.delivery-date-followup-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 46px 24px;
  text-align: center;
}

.delivery-date-followup-state h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.12;
  letter-spacing: 0;
}

.delivery-date-followup-state p {
  margin: 0;
  max-width: 620px;
  color: #475569;
  font-size: 16px;
  line-height: 1.55;
}

.delivery-date-followup-state-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #087443;
  font-size: 34px;
  font-weight: 800;
}

.delivery-date-followup-state--error .delivery-date-followup-state-icon {
  background: #fef2f2;
  color: #b91c1c;
}

.delivery-date-followup-state-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-followup-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(760px, 100%);
  margin: 14px 0 0;
}

.delivery-date-followup-summary div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8fafc;
}

.delivery-date-followup-summary dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.delivery-date-followup-summary dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
}

.delivery-date-followup-close-note {
  color: #0f766e !important;
  font-weight: 800;
}

@media (max-width: 720px) {
  .delivery-date-objection-dialog .delivery-date-objection-grid,
  .delivery-date-objection-row,
  .delivery-date-followup-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .delivery-date-followup-shell {
    width: calc(100vw - 16px);
    padding: 8px 0;
  }

  .delivery-date-followup-card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .delivery-date-followup-details-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .delivery-date-followup-image-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 220px;
  }

  .delivery-date-followup-details {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-status-wrap {
    min-width: 0;
  }

  .delivery-date-followup-warning {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .delivery-date-followup-actions {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-primary {
    order: -1;
  }

  .delivery-date-followup-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .delivery-date-objection-dialog .delivery-date-objection-form {
    width: min(960px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-form .dialog-head {
    grid-template-columns: 52px minmax(0, 1fr) 42px;
    gap: 14px;
    padding: 22px 18px 18px;
  }

  .delivery-date-objection-modal__header-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 6px #fed7aa;
  }

  .delivery-date-objection-modal__header-icon svg,
  .delivery-date-objection-modal__close svg {
    width: 22px;
    height: 22px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-form .delivery-date-objection-modal__close {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-form .dialog-head h4 {
    font-size: 22px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-form .dialog-head p {
    font-size: 15px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-preview {
    grid-template-columns: 1fr;
    margin: 2px 18px 0;
  }

  .delivery-date-objection-dialog .delivery-date-objection-preview img,
  .delivery-date-objection-dialog .delivery-date-objection-preview-placeholder {
    width: 100%;
    max-width: 180px;
    height: 160px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-preview strong {
    font-size: 18px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-preview p,
  .delivery-date-objection-dialog .delivery-date-objection-preview small {
    font-size: 15px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 18px 16px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-grid input {
    min-height: 54px;
    font-size: 16px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-grid textarea {
    min-height: 120px;
    font-size: 16px;
  }

  .supplier-packaging-material-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .supplier-packaging-material-actions {
    width: 100%;
    justify-content: stretch;
  }

  .supplier-packaging-material-actions .ghost,
  .supplier-packaging-material-actions .btn {
    width: 100%;
  }

  .delivery-date-objection-group-row__head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .delivery-date-objection-group-row__head img,
  .delivery-date-objection-group-row__image-placeholder {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 160px;
  }

  .delivery-date-objection-group-row__body {
    grid-template-columns: 1fr;
  }

  .delivery-date-objection-dialog > .delivery-date-objection-form > .delivery-date-objection-full {
    margin: 0 18px 16px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-subject-note {
    margin: 4px 18px 20px;
    font-size: 14px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 18px;
  }

  .delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .ghost,
  .delivery-date-objection-dialog .delivery-date-objection-form .dialog-actions .btn {
    width: 100%;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 22px 20px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 6px #bbf7d0;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header-copy h4 {
    font-size: 22px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__header-copy p {
    font-size: 14px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form .delivery-date-objection-modal__close {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-group-list,
  .delivery-date-objection-dialog--group > .delivery-date-objection-form > .delivery-date-objection-full {
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-group-row {
    padding: 16px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-group-row__head {
    grid-template-columns: 32px 78px minmax(0, 1fr);
    gap: 12px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-group-row__head img,
  .delivery-date-objection-dialog--group .delivery-date-objection-group-row__image-placeholder {
    grid-column: auto;
    width: 74px;
    height: 74px;
    max-width: none;
    padding: 8px;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-group-row__body {
    grid-template-columns: 1fr;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-subject-note {
    margin: 16px 20px 0;
  }

  .delivery-date-objection-dialog--group .delivery-date-objection-form .dialog-actions {
    padding: 18px 20px;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .delivery-date-objection-ticket-detail__head {
    align-items: flex-start;
    padding: 14px;
  }

  .delivery-date-objection-ticket-detail__body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact h5 {
    margin: -14px -14px 0;
    padding: 14px;
  }

  .delivery-date-objection-ticket-detail__media {
    justify-items: start;
  }

  .delivery-date-objection-ticket-detail--compact .delivery-date-objection-subject-image {
    width: 120px;
    height: 120px;
  }

  .delivery-date-objection-ticket-detail--compact dl,
  .delivery-date-objection-ticket-detail--compact .delivery-date-objection-ticket-detail__grid {
    grid-template-columns: 1fr;
  }

  .supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact > .delivery-date-objection-subject-image,
  .supplier-delivery-date-objection-ticket-detail.delivery-date-objection-ticket-detail--compact > dl {
    grid-column: 1;
  }

  .delivery-date-objection-ticket-detail--compact dl > div,
  .delivery-date-objection-ticket-detail--compact dl > div:nth-child(3n),
  .delivery-date-objection-ticket-detail--compact dl > div[data-field="reason"] {
    grid-column: auto;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
    border-right: 0;
  }

  .delivery-date-objection-ticket-detail--modern dl > div,
  .delivery-date-objection-ticket-detail--modern dl > div:nth-child(3n),
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="subject"],
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="reason"],
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="status"] {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-date-objection-ticket-detail--modern dl > div[data-field="subject"] dd,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="reason"] dd,
  .delivery-date-objection-ticket-detail--modern dl > div[data-field="status"] dd {
    grid-column: auto;
    width: 100%;
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason dt,
  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__reason dd {
    grid-column: 2;
  }

  .delivery-date-objection-ticket-detail--modern dl > div.delivery-date-objection-ticket-detail__status-row[data-field="status"] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .delivery-date-objection-ticket-detail--modern .delivery-date-objection-ticket-detail__status-row dd {
    grid-column: auto;
    width: auto;
  }
}

@media (max-width: 800px) {
  .delivery-date-followup-dialog {
    width: min(100vw - 24px, 960px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .delivery-date-followup-modal {
    max-height: calc(100vh - 24px);
  }

  .delivery-date-objection-form.delivery-date-followup-modal .dialog-head,
  .delivery-date-followup-modal__header {
    padding: 22px 20px 14px;
  }

  .delivery-date-followup-modal__body {
    padding: 0 20px 18px;
  }

  .delivery-date-followup-modal__overview,
  .delivery-date-followup-modal__contact-grid {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-modal__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 20px 22px;
  }
}

@media (max-width: 520px) {
  .delivery-date-objection-form.delivery-date-followup-modal .dialog-head,
  .delivery-date-followup-modal__header {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-modal__close {
    width: 100%;
  }

  .delivery-date-followup-modal__subject-card {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-modal__image-frame {
    width: 100%;
  }

  .delivery-date-followup-modal__detail-card dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .delivery-date-followup-modal__actions {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-modal__actions .delivery-date-followup-modal__button {
    width: 100%;
    white-space: normal;
  }
}

/* Final override: delivery-date partner follow-up modal */
.delivery-date-followup-dialog {
  width: min(1080px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.delivery-date-followup-dialog::backdrop {
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(7px);
}

.delivery-date-followup-modal,
.delivery-date-followup-modal * {
  box-sizing: border-box;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  writing-mode: horizontal-tb;
}

.delivery-date-followup-form.delivery-date-followup-modal {
  display: flex;
  flex-direction: column;
  width: min(1080px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid #dbe3ef;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.delivery-date-objection-form.delivery-date-followup-modal .dialog-head,
.delivery-date-followup-modal__header {
  position: relative;
  top: auto;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex: 0 0 auto;
  padding: 22px 28px;
  border-bottom: 1px solid #e5eaf2;
  background: #ffffff;
}

.delivery-date-followup-modal__title h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.delivery-date-followup-modal__title p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.45;
}

.delivery-date-followup-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.delivery-date-followup-modal__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-followup-modal__body {
  display: grid;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 28px;
  overflow: auto;
  background: linear-gradient(#ffffff, #f8fafc);
}

.delivery-date-followup-modal__overview {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.delivery-date-followup-modal .delivery-date-objection-ticket-detail,
.delivery-date-followup-modal__subject-card,
.delivery-date-followup-modal__detail-card {
  margin: 0;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

.delivery-date-followup-modal__subject-card {
  display: block;
  min-height: 0;
}

.delivery-date-followup-modal__subject-copy {
  display: grid;
  gap: 12px;
}

.delivery-date-followup-modal__subject-copy > strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}

.delivery-date-followup-modal .delivery-date-objection-subject-list {
  display: grid;
  gap: 12px;
}

.delivery-date-followup-modal .delivery-date-objection-subject-list__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.delivery-date-followup-modal .delivery-date-objection-subject-list__image,
.delivery-date-followup-modal .delivery-date-objection-subject-image {
  display: block;
  width: 72px;
  height: 72px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  object-fit: contain;
  flex: none;
}

.delivery-date-followup-modal .delivery-date-objection-subject-list__image--empty {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.delivery-date-followup-modal .delivery-date-objection-subject-list__item strong {
  display: block;
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
}

.delivery-date-followup-modal .delivery-date-objection-subject-list__item small {
  display: block;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
  white-space: normal;
}

.delivery-date-followup-modal__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #e5eaf2;
}

.delivery-date-followup-modal__meta-grid span,
.delivery-date-followup-modal__meta-grid b {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.35;
}

.delivery-date-followup-modal__meta-grid span {
  color: #64748b;
  font-size: 12px;
}

.delivery-date-followup-modal__meta-grid b {
  color: #0f172a;
  font-size: 13px;
}

.delivery-date-followup-modal__detail-card dl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  row-gap: 10px;
  column-gap: 16px;
  margin: 0;
}

.delivery-date-followup-modal__detail-card dl div {
  display: contents;
}

.delivery-date-followup-modal__detail-card dt,
.delivery-date-followup-modal__detail-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.delivery-date-followup-modal__detail-card dt {
  color: #64748b;
  font-weight: 500;
}

.delivery-date-followup-modal__detail-card dd {
  color: #0f172a;
  font-weight: 700;
}

.delivery-date-followup-modal__contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 2px;
}

.delivery-date-followup-modal label {
  display: grid;
  gap: 8px;
}

.delivery-date-followup-modal label span {
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.delivery-date-followup-modal input,
.delivery-date-followup-modal textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.delivery-date-followup-modal input {
  height: 48px;
  padding: 0 14px;
}

.delivery-date-followup-modal textarea {
  min-height: 280px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  overflow: auto;
}

.delivery-date-followup-modal input:focus,
.delivery-date-followup-modal textarea:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.14);
}

.delivery-date-followup-modal__message {
  grid-column: 1 / -1;
}

.delivery-date-followup-modal__link-output {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: -2px 0 0;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
}

.delivery-date-followup-modal__link-output[hidden] {
  display: none;
}

.delivery-date-followup-modal__link-icon,
.delivery-date-followup-modal__button svg {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  flex: none;
}

.delivery-date-followup-modal__link-icon svg,
.delivery-date-followup-modal__button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-date-followup-modal__link-text {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.delivery-date-followup-modal__actions {
  position: relative;
  bottom: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  flex: 0 0 auto;
  padding: 18px 28px;
  border-top: 1px solid #e5eaf2;
  background: #ffffff;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button--whatsapp {
  border-color: #86efac;
  background: #f0fdf4;
  color: #047857;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button--email {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.delivery-date-followup-modal__actions .delivery-date-followup-modal__button:hover,
.delivery-date-followup-modal__actions .delivery-date-followup-modal__button:focus {
  transform: none;
  border-color: #94a3b8;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

@media (max-width: 900px) {
  .delivery-date-followup-modal__overview {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-modal__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .delivery-date-followup-dialog,
  .delivery-date-followup-form.delivery-date-followup-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  .delivery-date-followup-modal__header,
  .delivery-date-objection-form.delivery-date-followup-modal .dialog-head {
    padding: 18px 16px;
    gap: 12px;
  }

  .delivery-date-followup-modal__body {
    padding: 18px 16px;
  }

  .delivery-date-followup-modal__contact-grid,
  .delivery-date-followup-modal__actions {
    grid-template-columns: 1fr;
  }

  .delivery-date-followup-modal .delivery-date-objection-subject-list__item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .delivery-date-followup-modal .delivery-date-objection-subject-list__image,
  .delivery-date-followup-modal .delivery-date-objection-subject-image {
    width: 64px;
    height: 64px;
  }

  .delivery-date-followup-modal__detail-card dl {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }

  .delivery-date-followup-modal__detail-card dd {
    margin-bottom: 8px;
  }

  .delivery-date-followup-modal textarea {
    min-height: 260px;
  }

  .delivery-date-followup-modal__actions {
    gap: 10px;
    padding: 14px 16px 16px;
  }
}

.project-sms-labeling-print-dialog {
  width: min(1440px, calc(100vw - 64px));
  max-width: calc(100vw - 64px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28), 0 10px 30px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.project-sms-labeling-print-dialog::backdrop {
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(3px);
}

.project-sms-labeling-print-dialog__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: min(980px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 22px;
  background: #ffffff;
}

.project-sms-labeling-print-dialog__panel [data-project-sms-labeling-print-content] {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.project-sms-labeling-print-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  border-bottom: 1px solid #edf2f7;
}

.project-sms-labeling-print-dialog__panel h3 {
  color: #0f172a;
  font-size: 26px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

.project-sms-labeling-print-dialog__panel header p {
  margin: 8px 0 0;
  color: #53627a;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.project-sms-labeling-print-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-sms-labeling-print-actions-menu {
  position: relative;
}

.project-sms-labeling-print-actions-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
}

.project-sms-labeling-print-actions-menu summary::-webkit-details-marker {
  display: none;
}

.project-sms-labeling-print-actions-menu summary::before {
  content: "⋮";
  margin-right: 6px;
  color: #64748b;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.project-sms-labeling-print-actions-menu summary:hover,
.project-sms-labeling-print-actions-menu summary:focus {
  border-color: #94a3b8;
  background: #f8fafc;
  outline: 0;
}

.project-sms-labeling-print-actions-menu > div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 240px;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.project-sms-labeling-print-actions-menu > div button {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
}

.project-sms-labeling-print-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f8fafc;
  color: #1f2a44;
  cursor: pointer;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.project-sms-labeling-print-close:hover,
.project-sms-labeling-print-close:focus {
  background: #f1f5f9;
  color: #0f172a;
}

.project-sms-labeling-print-body {
  display: grid;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 28px 22px;
}

.project-sms-labeling-print-variant-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.project-sms-labeling-print-variant-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #ffffff;
  color: #172033;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.project-sms-labeling-print-variant-card:hover,
.project-sms-labeling-print-variant-card:focus {
  border-color: #8ab7ff;
  background: #f8fbff;
}

.project-sms-labeling-print-variant-card.is-active {
  border-color: #4f8cff;
  background: #f6fffa;
  box-shadow: 0 0 0 1px rgba(79, 140, 255, 0.14), 0 10px 24px rgba(15, 23, 42, 0.06);
}

.project-sms-labeling-print-variant-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  color: #64748b;
  font-size: 15px;
  font-weight: 850;
}

.project-sms-labeling-print-variant-card.is-active .project-sms-labeling-print-variant-icon {
  border-color: #4f8cff;
  background: #eef6ff;
  color: #2563eb;
}

.project-sms-labeling-print-variant-copy,
.project-sms-labeling-print-variant-copy > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.project-sms-labeling-print-variant-copy strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-sms-labeling-print-variant-copy > span {
  grid-template-columns: auto minmax(0, max-content);
  align-items: center;
  gap: 6px;
  color: #53627a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.project-sms-labeling-print-variant-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid #dbe5df;
  border-radius: 999px;
  background: #f8fafc;
  color: #526173;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.project-sms-labeling-print-variant-status--stale {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.project-sms-labeling-print-variant-status--current {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.project-sms-labeling-print-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.project-sms-labeling-print-summary div,
.project-sms-labeling-print-mode,
.project-sms-labeling-print-bulk {
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #fff;
}

.project-sms-labeling-print-field-section,
.project-sms-labeling-print-validation,
.project-sms-labeling-print-pdf-status {
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #ffffff;
}

.project-sms-labeling-print-field-section > header,
.project-sms-labeling-print-validation > header,
.project-sms-labeling-print-pdf-status > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-sms-labeling-print-field-section h4,
.project-sms-labeling-print-validation h4,
.project-sms-labeling-print-pdf-status h4 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.project-sms-labeling-print-field-section header span,
.project-sms-labeling-print-validation header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.project-sms-labeling-print-position-fields,
.project-sms-labeling-print-pdf-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  min-width: 0;
}

.project-sms-labeling-print-position-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-sms-labeling-print-position-fields label span,
.project-sms-labeling-print-pdf-meta span {
  color: #53627a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.project-sms-labeling-print-position-fields input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 8px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 650;
}

.project-sms-labeling-print-pdf-meta > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-sms-labeling-print-pdf-meta strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.project-sms-labeling-print-validation--invalid {
  border-color: #fecaca;
  background: #fef2f2;
}

.project-sms-labeling-print-validation--ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.project-sms-labeling-print-validation strong,
.project-sms-labeling-print-validation p,
.project-sms-labeling-print-validation ul {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.project-sms-labeling-print-validation ul {
  padding-left: 20px;
}

.project-sms-labeling-print-summary div {
  min-height: 74px;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
}

.project-sms-labeling-print-summary span,
.project-sms-labeling-print-bulk label span {
  display: block;
  color: #53627a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.project-sms-labeling-print-summary strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-sms-labeling-print-mode {
  display: grid;
  grid-template-columns: 120px repeat(2, minmax(220px, 1fr));
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin: 0;
  background: #fbfdff;
}

.project-sms-labeling-print-mode > span {
  display: block;
  padding-left: 4px;
  color: #53627a;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.project-sms-labeling-print-mode label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #ffffff;
  margin: 0;
  color: #1e293b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.project-sms-labeling-print-mode label:has(input:checked) {
  border-color: #7db7f0;
  background: #f0f9ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.project-sms-labeling-print-mode label span {
  display: grid;
  gap: 2px;
}

.project-sms-labeling-print-mode label strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.project-sms-labeling-print-mode label small {
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.project-sms-labeling-print-bulk {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  margin: 0;
  background: #fbfdff;
}

.project-sms-labeling-print-bulk h4 {
  margin: 0 4px 10px 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.project-sms-labeling-print-bulk > div {
  display: flex;
  gap: 10px;
}

.project-sms-labeling-print-bulk label {
  display: grid;
  flex: 1 1 220px;
  min-width: 180px;
  gap: 5px;
}

.project-sms-labeling-print-bulk p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
}

.project-sms-labeling-print-table-wrap {
  max-width: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid #dbe5df;
  border-radius: 12px;
  background: #ffffff;
}

.project-sms-labeling-print-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}

.project-sms-labeling-print-table th,
.project-sms-labeling-print-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #edf2f7;
  text-align: left;
  vertical-align: top;
}

.project-sms-labeling-print-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-sms-labeling-print-table th:nth-child(1),
.project-sms-labeling-print-table td:nth-child(1) {
  width: 86px;
}

.project-sms-labeling-print-table th:nth-child(2),
.project-sms-labeling-print-table td:nth-child(2) {
  width: 82px;
}

.project-sms-labeling-print-table [data-print-field="ean_code"] {
  width: 34%;
}

.project-sms-labeling-print-table [data-print-field="customer_article_number"],
.project-sms-labeling-print-table [data-print-field="customer_color_code"] {
  width: 160px;
}

.project-sms-labeling-print-table [data-print-field="article_name"],
.project-sms-labeling-print-table [data-print-field="article_number"],
.project-sms-labeling-print-table [data-print-field="color_code"],
.project-sms-labeling-print-table [data-print-field="shipping"],
.project-sms-labeling-print-table [data-print-field="theme"],
.project-sms-labeling-print-table [data-print-field="edition"] {
  width: 120px;
}

.project-sms-labeling-print-table [data-print-field="action"] {
  width: 110px;
}

.project-sms-labeling-print-table input,
.project-sms-labeling-print-bulk input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 8px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 650;
}

.project-sms-labeling-print-table input {
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-sms-labeling-print-table input:focus {
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.14);
  outline: 0;
  overflow: visible;
  text-overflow: clip;
}

.project-sms-labeling-print-table input[readonly] {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
}

.project-sms-labeling-print-table input.is-invalid {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

.project-sms-labeling-print-ean-error,
.project-sms-labeling-print-diff-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.project-sms-labeling-print-ean-error {
  color: #dc2626;
}

.project-sms-labeling-print-ean-fix {
  margin-top: 5px;
  white-space: normal;
  font-size: 11px;
}

.project-sms-labeling-print-cell--diff input {
  border-color: #f59e0b;
  background: #fffbeb;
}

.project-sms-labeling-print-diff-note {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
}

.project-sms-labeling-print-result {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid #86efac;
  border-radius: 14px;
  background: #f0fdf6;
}

.project-sms-labeling-print-result__header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.project-sms-labeling-print-result__header span {
  color: #166534;
  font-size: 16px;
  font-weight: 850;
}

.project-sms-labeling-print-result__header strong {
  color: #166534;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.3;
}

.project-sms-labeling-print-result__header small {
  color: #166534;
  font-size: 12px;
  font-weight: 700;
}

.project-sms-labeling-print-result__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.project-sms-labeling-print-result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #ffffff;
}

.project-sms-labeling-print-result-card--complete {
  border-color: #86efac;
  background: #fbfffd;
}

.project-sms-labeling-print-result-card > span {
  color: #475569;
  font-size: 18px;
  line-height: 1;
}

.project-sms-labeling-print-result-card strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.project-sms-labeling-print-footer {
  display: grid;
  grid-template-columns: auto minmax(16px, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
  padding: 18px 28px;
  border-top: 1px solid #eef2f7;
  background: #ffffff;
}

.project-sms-labeling-print-footer button {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 800;
}

.project-sms-labeling-print-footer .project-sms-labeling-print-secondary-action {
  border-color: #0f2444;
  color: #0f2444;
}

.project-sms-labeling-print-footer .primary {
  border-color: #07162d;
  background: #07162d;
  color: #ffffff;
}

.project-sms-labeling-print-footer .primary:hover,
.project-sms-labeling-print-footer .primary:focus {
  border-color: #0f2444;
  background: #0f2444;
}

@media (max-width: 900px) {
  .project-sms-labeling-print-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-sms-labeling-print-mode {
    grid-template-columns: 1fr;
  }

  .project-sms-labeling-print-bulk {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .project-sms-labeling-print-bulk p {
    justify-content: flex-start;
  }

  .project-sms-labeling-print-footer {
    grid-template-columns: auto minmax(12px, 1fr) auto;
  }

  .project-sms-labeling-print-footer .project-sms-labeling-print-secondary-action,
  .project-sms-labeling-print-footer .primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .project-sms-labeling-print-table,
  .project-sms-labeling-print-table thead,
  .project-sms-labeling-print-table tbody,
  .project-sms-labeling-print-table tr,
  .project-sms-labeling-print-table th,
  .project-sms-labeling-print-table td {
    display: block;
    width: 100%;
  }

  .project-sms-labeling-print-table thead {
    display: none;
  }

  .project-sms-labeling-print-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .project-sms-labeling-print-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
  }

  .project-sms-labeling-print-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe5df;
    border-radius: 12px;
    background: #ffffff;
  }

  .project-sms-labeling-print-table td {
    padding: 0;
    border: 0;
  }

  .project-sms-labeling-print-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .project-sms-labeling-print-table [data-print-field="ean_code"],
  .project-sms-labeling-print-table [data-print-field="customer_article_number"],
  .project-sms-labeling-print-table [data-print-field="customer_color_code"],
  .project-sms-labeling-print-table [data-print-field="article_name"],
  .project-sms-labeling-print-table [data-print-field="action"] {
    grid-column: 1 / -1;
  }

  .project-sms-labeling-print-table [data-print-field="action"] {
    display: flex;
    justify-content: flex-end;
  }

  .project-sms-labeling-print-table [data-print-field="action"]::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .project-sms-labeling-print-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .project-sms-labeling-print-dialog__panel {
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }

  .project-sms-labeling-print-header,
  .project-sms-labeling-print-body,
  .project-sms-labeling-print-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .project-sms-labeling-print-header {
    gap: 12px;
  }

  .project-sms-labeling-print-header-actions {
    gap: 8px;
  }

  .project-sms-labeling-print-actions-menu summary {
    width: 36px;
    justify-content: center;
    padding: 7px;
    overflow: hidden;
    color: transparent;
    white-space: nowrap;
  }

  .project-sms-labeling-print-actions-menu summary::before {
    margin-right: 0;
    color: #64748b;
  }

  .project-sms-labeling-print-actions-menu > div {
    right: -46px;
    min-width: min(260px, calc(100vw - 48px));
  }

  .project-sms-labeling-print-summary,
  .project-sms-labeling-print-result__grid {
    grid-template-columns: 1fr;
  }

  .project-sms-labeling-print-variant-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .project-sms-labeling-print-variant-card {
    flex: 0 0 min(280px, 86vw);
  }

  .project-sms-labeling-print-bulk > div {
    flex-direction: column;
  }

  .project-sms-labeling-print-bulk p button,
  .project-sms-labeling-print-result-card a {
    width: 100%;
  }

  .project-sms-labeling-print-result-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .project-sms-labeling-print-result-card a {
    grid-column: 1 / -1;
  }

  .project-sms-labeling-print-footer {
    grid-template-columns: 1fr;
  }

  .project-sms-labeling-print-footer span {
    display: none;
  }
}

.project-sms-labeling-summary-details {
  width: 100%;
}

.project-sms-labeling-summary-details > summary {
  display: inline-flex;
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

.project-sms-labeling-summary-details > summary::-webkit-details-marker {
  display: none;
}

.project-sms-labeling-summary-panel {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.project-sms-labeling-summary-panel header h5 {
  margin: 0;
}

.project-sms-labeling-summary-panel header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.project-sms-labeling-summary-overview,
.project-sms-labeling-summary-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}

.project-sms-labeling-summary-overview > div,
.project-sms-labeling-summary-fields > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 6px;
  background: #f8fafc;
}

.project-sms-labeling-summary-overview dt,
.project-sms-labeling-summary-fields dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-sms-labeling-summary-overview dd,
.project-sms-labeling-summary-fields dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.project-sms-labeling-summary-preview {
  margin: 0;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.project-sms-labeling-summary-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.project-sms-labeling-summary-media-list {
  display: grid;
  gap: 10px;
}

.project-sms-labeling-summary-media {
  margin: 0;
}

.project-sms-labeling-summary-media img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}

.project-sms-labeling-summary-media-link {
  width: fit-content;
  font-size: 13px;
}

.project-sms-labeling-summary-instructions {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 13px;
}

.project-sms-labeling-summary-instructions p {
  margin: 0;
  overflow-wrap: anywhere;
}

.accessory-snapshot-stale-notice {
  display: grid;
  gap: 4px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  font-size: 13px;
}

.accessory-snapshot-stale-notice strong {
  font-size: 14px;
}

.project-sms-labeling-stale-notice {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.project-sms-labeling-stale-notice div {
  display: grid;
  gap: 3px;
}

.project-sms-labeling-stale-notice small {
  color: inherit;
}

@media (max-width: 720px) {
  .project-sms-labeling-stale-notice {
    grid-template-columns: 1fr;
  }
}

body.page-projekt .project-sms-labeling-process-dashboard {
  gap: 14px;
  padding: 16px;
  border-color: #e5e7eb;
  background: #f9fafb;
}

body.page-projekt .project-sms-labeling-dashboard-header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.page-projekt .project-sms-labeling-dashboard-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.15;
}

body.page-projekt .project-sms-labeling-dashboard-header p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

body.page-projekt .project-sms-labeling-kpi-card,
body.page-projekt .project-sms-labeling-process-card,
body.page-projekt .project-sms-labeling-positions-overview,
body.page-projekt .project-sms-labeling-partner-feedback-card,
body.page-projekt .project-sms-labeling-completion-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

body.page-projekt .project-sms-labeling-kpi-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 90px;
  padding: 12px 14px;
}

body.page-projekt .project-sms-labeling-kpi-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #16a34a;
}

body.page-projekt .project-sms-labeling-kpi-card--warning .project-sms-labeling-kpi-card__icon {
  border-color: #fed7aa;
  background: #fffaf0;
  color: #d97706;
}

body.page-projekt .project-sms-labeling-kpi-card .project-order-key-icon,
body.page-projekt .project-sms-labeling-completion-card .project-order-key-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

body.page-projekt .project-sms-labeling-kpi-card .project-order-key-icon svg,
body.page-projekt .project-sms-labeling-completion-card .project-order-key-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

body.page-projekt .project-sms-labeling-kpi-card span:not(.project-sms-labeling-kpi-card__icon) {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.page-projekt .project-sms-labeling-kpi-card strong {
  display: block;
  margin-top: 3px;
  color: #15803d;
  font-size: 17px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-kpi-card--warning strong {
  color: #d97706;
}

body.page-projekt .project-sms-labeling-kpi-card p {
  margin: 5px 0 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

body.page-projekt .project-sms-labeling-process-card {
  padding: 14px;
}

body.page-projekt .project-sms-labeling-process-card h4,
body.page-projekt .project-sms-labeling-positions-overview h4,
body.page-projekt .project-sms-labeling-partner-feedback-card h4,
body.page-projekt .project-sms-labeling-completion-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.25;
}

body.page-projekt .project-sms-labeling-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

body.page-projekt .project-sms-labeling-process-column {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

body.page-projekt .project-sms-labeling-process-column--active,
body.page-projekt .project-sms-labeling-process-column--partner:not(.project-sms-labeling-process-column--success) {
  border-color: #fed7aa;
  background: #ffffff;
}

body.page-projekt .project-sms-labeling-process-column > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-projekt .project-sms-labeling-process-column > header span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #bbf7d0;
  border-radius: 9px;
  background: #f0fdf4;
  color: #16a34a;
}

body.page-projekt .project-sms-labeling-process-column--active > header span,
body.page-projekt .project-sms-labeling-process-column--partner:not(.project-sms-labeling-process-column--success) > header span {
  border-color: #fed7aa;
  background: #fffaf0;
  color: #d97706;
}

body.page-projekt .project-sms-labeling-process-column > header .project-order-key-icon,
body.page-projekt .project-sms-labeling-process-column > header .project-order-key-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

body.page-projekt .project-sms-labeling-process-column h5 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
}

body.page-projekt .project-sms-labeling-process-steps {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-projekt .project-sms-labeling-process-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #334155;
  font-size: 12px;
  min-height: 24px;
}

body.page-projekt .project-sms-labeling-process-step span {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: transparent;
  font-size: 10px;
  font-weight: 900;
}

body.page-projekt .project-sms-labeling-process-step--done span {
  border-color: #16a34a;
  background: #dcfce7;
  color: #15803d;
}

body.page-projekt .project-sms-labeling-process-step--active span {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #f59e0b;
}

body.page-projekt .project-sms-labeling-process-step strong {
  min-width: 0;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #fbfdff;
}

body.page-projekt .project-sms-labeling-summary-grid div {
  min-width: 0;
  padding: 8px;
  border-left: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-labeling-summary-grid div:first-child {
  border-left: 0;
}

body.page-projekt .project-sms-labeling-summary-grid dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body.page-projekt .project-sms-labeling-summary-grid dd {
  margin: 3px 0 0;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-process-note {
  margin: auto 0 0;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}

body.page-projekt .project-sms-labeling-process-actions,
body.page-projekt .project-sms-labeling-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.page-projekt .project-sms-labeling-process-actions {
  margin-top: auto;
}

body.page-projekt .project-sms-labeling-process-actions .ghost,
body.page-projekt .project-sms-labeling-link-row .ghost {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
}

body.page-projekt .project-sms-labeling-process-actions .ghost.primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}

body.page-projekt .project-sms-labeling-action-muted {
  color: #64748b;
}

body.page-projekt .project-sms-labeling-positions-overview {
  display: grid;
  gap: 8px;
  padding: 12px;
}

body.page-projekt .project-sms-labeling-positions-overview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-labeling-table-head,
body.page-projekt .project-sms-labeling-clean-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(96px, 0.78fr) minmax(104px, 0.82fr) minmax(88px, 0.72fr) minmax(160px, 1.08fr) minmax(112px, 0.78fr) minmax(220px, 1fr);
  gap: 8px;
  align-items: center;
}

body.page-projekt .project-sms-labeling-table-head {
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px 10px 0 0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-positions-overview .project-sms-labeling-card-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 12px 12px;
  border-top: 0;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-clean-row {
  min-width: 0;
  min-height: 78px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid #e2e8f0;
  border-radius: 0;
  box-shadow: none;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-clean-row:first-child {
  border-top: 0;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-clean-card--waiting {
  opacity: 1;
  background: #fff;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-clean-row > .project-sms-labeling-select {
  display: none;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-product {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 9px;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-image {
  width: 50px;
  height: 42px;
  border-radius: 8px;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-product strong {
  margin-top: 3px;
  font-size: 12px;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-product small {
  margin-top: 3px;
  font-size: 10px;
}

body.page-projekt .project-sms-labeling-row-cell {
  min-width: 0;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-size-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-size-cell {
  min-width: 32px;
  padding: 3px 5px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.1;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-size-cell strong {
  display: block;
  margin-top: 2px;
}

body.page-projekt .project-sms-labeling-status-pill {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

body.page-projekt .project-sms-labeling-status-pill--released {
  background: #dcfce7;
  color: #15803d;
}

body.page-projekt .project-sms-labeling-status-pill--complete,
body.page-projekt .project-sms-labeling-status-pill--info {
  background: #e0f2fe;
  color: #0369a1;
}

body.page-projekt .project-sms-labeling-status-pill--supplier-open {
  background: #e0f2fe;
  color: #0369a1;
}

body.page-projekt .project-sms-labeling-status-pill--pdf-open {
  background: #ffedd5;
  color: #c2410c;
}

body.page-projekt .project-sms-labeling-status-pill--draft {
  background: #fef3c7;
  color: #92400e;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-actions .ghost {
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 10px;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-actions .ghost.primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-actions .ghost:disabled {
  opacity: 0.46;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-release-action:disabled,
body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-action-muted {
  border-color: #e2e8f0;
  background: #fff;
  color: #64748b;
}

body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-new-variant-notice,
body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-details {
  grid-column: 1 / -1;
}

body.page-projekt .project-sms-labeling-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}

body.page-projekt .project-sms-labeling-partner-feedback-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

body.page-projekt .project-sms-labeling-partner-feedback-card .project-sms-labeling-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-projekt .project-sms-labeling-url-chip {
  display: inline-flex;
  min-height: 28px;
  max-width: 360px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-projekt .project-sms-labeling-url-chip--empty {
  color: #64748b;
}

body.page-projekt .project-sms-labeling-affected-positions {
  display: grid;
  gap: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

body.page-projekt .project-sms-labeling-affected-positions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-projekt .project-sms-labeling-affected-positions li {
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-labeling-affected-positions li::before {
  content: none;
}

body.page-projekt .project-sms-labeling-completion-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 100%;
  padding: 16px;
  border-color: #bbf7d0;
}

body.page-projekt .project-sms-labeling-completion-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #dcfce7;
  color: #16a34a;
}

body.page-projekt .project-sms-labeling-completion-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.page-projekt .project-sms-labeling-completion-card p {
  margin: 9px 0 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

body.page-projekt .project-sms-labeling-completion-card small {
  display: block;
  margin-top: 12px;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  body.page-projekt .project-sms-labeling-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-labeling-process-grid,
  body.page-projekt .project-sms-labeling-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-labeling-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-labeling-table-head {
    display: none;
  }

  body.page-projekt .project-sms-labeling-positions-overview .project-sms-labeling-card-list {
    gap: 10px;
    border: 0;
    border-radius: 0;
  }

  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-clean-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    min-height: 0;
  }

  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-product,
  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-actions,
  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-new-variant-notice,
  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-details {
    grid-column: 1 / -1;
  }

  body.page-projekt .project-sms-labeling-row-cell::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
  }
}

@media (max-width: 900px) {
  body.page-projekt .project-sms-labeling-process-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  body.page-projekt .project-sms-labeling-process-dashboard {
    gap: 12px;
    padding: 12px;
  }

  body.page-projekt .project-sms-labeling-dashboard-header,
  body.page-projekt .project-sms-labeling-positions-overview > header {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-labeling-kpi-grid,
  body.page-projekt .project-sms-labeling-process-grid,
  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-clean-row,
  body.page-projekt .project-sms-labeling-summary-grid,
  body.page-projekt .project-sms-labeling-partner-feedback-card .project-sms-labeling-summary-grid,
  body.page-projekt .project-sms-labeling-affected-positions ul,
  body.page-projekt .project-sms-labeling-completion-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-projekt .project-sms-labeling-kpi-card {
    min-height: 78px;
  }

  body.page-projekt .project-sms-labeling-process-dashboard .project-sms-labeling-card-actions .ghost {
    flex: 1 1 auto;
  }

  body.page-projekt .project-sms-labeling-summary-grid div,
  body.page-projekt .project-sms-labeling-summary-grid div:first-child {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-labeling-summary-grid div:first-child {
    border-top: 0;
  }

  body.page-projekt .project-sms-labeling-process-actions .ghost,
  body.page-projekt .project-sms-labeling-link-row .ghost,
  body.page-projekt .project-sms-labeling-url-chip {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}
.sms-delivery-planning-partner-page {
  margin: 0;
  background: #f6f7f9;
  color: #172033;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.delivery-planning-partner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 44px;
}

.delivery-planning-partner__header,
.delivery-planning-partner__card,
.delivery-planning-partner__meta-card {
  border: 1px solid #dce3ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.delivery-planning-partner__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 20px;
}

.delivery-planning-partner__brand {
  display: block;
  margin-bottom: 6px;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
}

.delivery-planning-partner h1,
.delivery-planning-partner h2 {
  margin: 0;
  letter-spacing: 0;
}

.delivery-planning-partner h1 {
  font-size: 32px;
  line-height: 1.12;
}

.delivery-planning-partner h2 {
  margin-bottom: 14px;
  font-size: 19px;
}

.delivery-planning-partner__badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 11px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.delivery-planning-partner__badge.is-completed {
  border-color: rgba(22, 101, 52, 0.24);
  background: rgba(22, 101, 52, 0.08);
  color: #166534;
}

.delivery-planning-partner__root {
  display: grid;
  gap: 16px;
}

.delivery-planning-partner__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.delivery-planning-partner__meta-card,
.delivery-planning-partner__card {
  padding: 16px;
}

.delivery-planning-partner__meta-card {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.delivery-planning-partner__meta-card span,
.delivery-planning-partner__form label span,
.delivery-planning-partner__completed dt {
  color: #667085;
  font-size: 12px;
  font-weight: 750;
}

.delivery-planning-partner__meta-card strong,
.delivery-planning-partner__table td {
  overflow-wrap: anywhere;
}

.delivery-planning-partner__table-wrap {
  overflow-x: auto;
}

.delivery-planning-partner__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.delivery-planning-partner__table th,
.delivery-planning-partner__table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.delivery-planning-partner__table th {
  color: #475569;
  font-size: 12px;
}

.delivery-planning-partner__form,
.delivery-planning-partner__form label,
.delivery-planning-partner__completed dl {
  display: grid;
  gap: 12px;
}

.delivery-planning-partner__choice,
.delivery-planning-partner__grid,
.delivery-planning-partner__actions {
  display: flex;
  gap: 12px;
}

.delivery-planning-partner__choice {
  flex-wrap: wrap;
}

.delivery-planning-partner__choice label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.delivery-planning-partner__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.delivery-planning-partner__form input,
.delivery-planning-partner__form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 11px;
  font: inherit;
}

.delivery-planning-partner__actions {
  align-items: center;
}

.delivery-planning-partner__actions button {
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  background: #166534;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.delivery-planning-partner__actions button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.delivery-planning-partner__completed dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.delivery-planning-partner__completed div {
  display: grid;
  gap: 4px;
}

.delivery-planning-partner__completed dd {
  margin: 0;
  font-weight: 700;
}

@media (max-width: 760px) {
  .delivery-planning-partner__header,
  .delivery-planning-partner__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .delivery-planning-partner h1 {
    font-size: 26px;
  }

  .delivery-planning-partner__meta,
  .delivery-planning-partner__grid,
  .delivery-planning-partner__completed dl {
    grid-template-columns: 1fr;
  }
}
.selection-position-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color, #d7dde8);
  border-radius: 8px;
  background: #f8fafc;
}
.selection-position-summary > div {
  display: grid;
  gap: 3px;
}
.selection-position-summary span {
  color: var(--muted-color, #64748b);
  font-size: 0.82rem;
}
.selection-position-summary ul {
  margin: 0;
  padding-left: 18px;
}
.selection-legacy-notice {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #f4c77b;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
}
.selection-wizard-dialog__content {
  width: min(1180px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}
.selection-wizard-dialog__body {
  display: grid;
  gap: 14px;
  overflow: auto;
}
.selection-wizard-error {
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
}
.selection-wizard-steps {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.selection-wizard-steps button {
  flex: 0 0 auto;
  border: 1px solid var(--border-color, #d7dde8);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}
.selection-wizard-steps button.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.selection-wizard-panel {
  display: grid;
  gap: 14px;
}
.selection-source-model-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.selection-source-model-card img,
.selection-reference-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.selection-source-model-card img {
  aspect-ratio: 4 / 3;
}
.selection-reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.selection-reference-card-list,
.selection-document-list,
.selection-segment-editor {
  display: grid;
  gap: 10px;
}
.selection-reference-card,
.selection-document-row,
.selection-segment-card {
  border: 1px solid var(--border-color, #d7dde8);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.selection-reference-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 12px;
}
.selection-reference-card__preview {
  display: grid;
  place-items: center;
  min-height: 70px;
  border-radius: 8px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 700;
}
.selection-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}
.selection-document-row__badges,
.selection-document-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.selection-segment-card {
  display: grid;
  gap: 12px;
}
.selection-segment-card header,
.selection-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.selection-segment-original {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}
.selection-segment-original span {
  color: var(--muted-color, #64748b);
}
.selection-reference-model-box,
.selection-technical-note,
.selection-public-preview,
.selection-open-issues {
  border: 1px solid var(--border-color, #d7dde8);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.selection-open-issues ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.selection-open-issues li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.selection-upload-form {
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog {
  position: fixed;
  inset: 0;
  width: min(940px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  margin: auto;
}
#quoteLineSelectionWizardDialog[open] {
  display: flex;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header {
  flex: 0 0 auto;
  min-height: 76px;
  padding: 18px 24px 14px;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header strong {
  color: #111827;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.18;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header p {
  margin-top: 6px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog [data-action='close-selection-wizard'].small {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 20px;
  line-height: 1;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(92vh - 150px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: auto;
  padding: 12px 24px 14px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-wizard-error {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(185, 28, 28, 0.22);
  border-radius: 10px;
  background: #fff7f7;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.35;
}
#quoteLineSelectionWizardDialog .selection-wizard-error[hidden] {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-wizard-steps {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  height: 3px;
  padding: 0;
}
#quoteLineSelectionWizardDialog .selection-wizard-steps button {
  flex: 0 0 96px;
  min-height: 3px;
  height: 3px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  color: transparent;
  font-size: 0;
  line-height: 1;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-wizard-steps button.is-active {
  border-color: rgba(15, 23, 42, 0.28);
  background: #0f172a;
  color: #fff;
}
#quoteLineSelectionWizardDialog .selection-wizard-panel,
#quoteLineSelectionWizardDialog .selection-check-section,
#quoteLineSelectionWizardDialog .selection-public-preview,
#quoteLineSelectionWizardDialog .selection-open-issues {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-wizard-panel[hidden] {
  display: none;
}
#quoteLineSelectionWizardDialog [data-selection-wizard-panel='0'] {
  padding: 12px 16px;
}
#quoteLineSelectionWizardDialog [data-selection-wizard-panel='3'] {
  padding: 0;
  border: 0;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-source-model-card {
  display: grid;
  grid-template-columns: 104px minmax(180px, 1fr);
  gap: 12px 18px;
  align-items: center;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-source-model-card img,
#quoteLineSelectionWizardDialog .selection-source-model-card > span {
  width: 104px;
  height: 96px;
  object-fit: contain;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-source-model-card h4,
#quoteLineSelectionWizardDialog .selection-panel-head h4,
#quoteLineSelectionWizardDialog .selection-public-preview h4,
#quoteLineSelectionWizardDialog .selection-open-issues h5,
#quoteLineSelectionWizardDialog .selection-wizard-subcard h5 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-source-model-card h4,
#quoteLineSelectionWizardDialog .customer-create-field > span {
  color: #475569;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
#quoteLineSelectionWizardDialog .selection-source-model-card strong {
  display: block;
  margin-top: 8px;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-source-model-card p,
#quoteLineSelectionWizardDialog .selection-panel-head p,
#quoteLineSelectionWizardDialog .selection-wizard-subcard p,
#quoteLineSelectionWizardDialog .selection-public-preview p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__fields,
#quoteLineSelectionWizardDialog .selection-upload-form .customer-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-mode-section,
#quoteLineSelectionWizardDialog .selection-saved-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-mode-section h4,
#quoteLineSelectionWizardDialog .selection-saved-section h4,
#quoteLineSelectionWizardDialog .selection-saved-section h5 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-mode-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  text-align: left;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-mode-card strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-mode-card span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.3;
}
#quoteLineSelectionWizardDialog .selection-mode-card.is-active {
  border-color: #0f172a;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-saved-section {
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fbfcfe;
}
#quoteLineSelectionWizardDialog .selection-saved-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#quoteLineSelectionWizardDialog .selection-saved-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-saved-grid > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-hex-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 36px;
  gap: 8px;
  align-items: center;
}
#quoteLineSelectionWizardDialog .selection-hex-field input[type='color'] {
  width: 48px;
  height: 40px;
  padding: 2px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
}
#quoteLineSelectionWizardDialog [data-selection-hex-preview] {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: transparent;
}
#quoteLineSelectionWizardDialog [data-selection-hex-input].is-invalid {
  border-color: rgba(185, 28, 28, 0.55);
  background: #fff7f7;
}
#quoteLineSelectionWizardDialog .customer-create-field {
  min-width: 0;
  gap: 7px;
}
#quoteLineSelectionWizardDialog .customer-create-field input:not([type='checkbox']):not([type='radio']):not([type='file']),
#quoteLineSelectionWizardDialog .customer-create-field select {
  width: 100%;
  min-height: 40px;
  height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-panel-head,
#quoteLineSelectionWizardDialog .selection-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-section-icon,
#quoteLineSelectionWizardDialog .selection-preview-icon,
#quoteLineSelectionWizardDialog .selection-wizard-subcard__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid rgba(15, 23, 42, 0.44);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.22) 0 2px, transparent 3px);
}
#quoteLineSelectionWizardDialog .selection-reference-actions,
#quoteLineSelectionWizardDialog .selection-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-reference-actions .ghost,
#quoteLineSelectionWizardDialog .selection-reference-more > summary,
#quoteLineSelectionWizardDialog .selection-check-actions .ghost {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-reference-actions .ghost.primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}
#quoteLineSelectionWizardDialog .selection-reference-more {
  position: relative;
}
#quoteLineSelectionWizardDialog .selection-reference-more > summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
#quoteLineSelectionWizardDialog .selection-reference-more > summary::-webkit-details-marker {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-reference-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
#quoteLineSelectionWizardDialog .selection-reference-more[open] > .selection-reference-actions {
  position: static;
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}
#quoteLineSelectionWizardDialog .selection-wizard-subcard,
#quoteLineSelectionWizardDialog .selection-empty-segments,
#quoteLineSelectionWizardDialog .selection-upload-form,
#quoteLineSelectionWizardDialog .selection-color-reference-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-empty-segments {
  grid-template-columns: 1fr;
}
#quoteLineSelectionWizardDialog .selection-wizard-subcard--materials .selection-empty-segments {
  padding: 0;
  border: 0;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-wizard-subcard--materials {
  grid-template-columns: 1fr;
}
#quoteLineSelectionWizardDialog .selection-upload-form {
  grid-template-columns: 1fr;
  border-style: dashed;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-upload-form[hidden] {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-color-reference-form {
  grid-template-columns: 1fr;
  background: #fff;
}
#quoteLineSelectionWizardDialog .customer-create-field--wide {
  grid-column: 1 / -1;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview {
  display: grid;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--color-border-subtle, rgba(15, 23, 42, 0.12));
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-surface, #fff);
  overflow: hidden;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview[hidden] {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__media {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  max-height: 248px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle, rgba(15, 23, 42, 0.08));
  border-radius: var(--radius-sm, 7px);
  background: var(--color-bg-muted, #f8fafc);
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 232px;
  object-fit: contain;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__status {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__name {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-reference-image-preview__footer .ghost {
  max-width: 100%;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-picker-results {
  display: grid;
  gap: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #111827;
  text-align: left;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result img,
#quoteLineSelectionWizardDialog .selection-material-picker-result > span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
  background: #e2e8f0;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result strong,
#quoteLineSelectionWizardDialog .selection-material-picker-result small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-reference-card-list,
#quoteLineSelectionWizardDialog .selection-document-list,
#quoteLineSelectionWizardDialog .selection-segment-editor {
  display: grid;
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-reference-card,
#quoteLineSelectionWizardDialog .selection-document-row,
#quoteLineSelectionWizardDialog .selection-segment-card {
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
}
#quoteLineSelectionWizardDialog .selection-reference-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
#quoteLineSelectionWizardDialog .selection-original-entry-card input[type='checkbox'],
#quoteLineSelectionWizardDialog .selection-reference-card input[type='radio'] {
  width: 18px;
  height: 18px;
  margin: 0;
}
#quoteLineSelectionWizardDialog .selection-reference-card__preview {
  min-height: 56px;
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-variant-preview {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-variant-preview span,
#quoteLineSelectionWizardDialog .selection-material-position-card__position span {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}
#quoteLineSelectionWizardDialog .selection-variant-preview strong {
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.25;
  word-break: break-word;
}
#quoteLineSelectionWizardDialog .selection-variant-preview p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-position-list {
  gap: 7px;
}
#quoteLineSelectionWizardDialog .selection-material-position-card {
  display: grid;
  grid-template-columns: 22px 62px 44px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.11);
  border-radius: 8px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-position-card[data-selection-original-component] {
  grid-template-columns: 22px 62px minmax(0, 1fr) auto;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__drag {
  color: #94a3b8;
  cursor: grab;
  font-weight: 800;
  line-height: 1;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__position {
  display: grid;
  gap: 3px;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__position strong,
#quoteLineSelectionWizardDialog .selection-material-position-card__position input {
  width: 54px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  background: #f8fafc;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__main strong,
#quoteLineSelectionWizardDialog .selection-material-position-card__main p,
#quoteLineSelectionWizardDialog .selection-material-position-card__main small {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__main strong {
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__main p,
#quoteLineSelectionWizardDialog .selection-material-position-card__main small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-material-position-card__main select {
  max-width: 150px;
  min-height: 28px;
  height: 28px;
  margin-left: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  background: #fff;
  color: #111827;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-original-order-warning {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 8px;
  background: #fff7ed;
  color: #92400e;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-original-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
  overflow-x: auto;
}
#quoteLineSelectionWizardDialog .selection-original-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  min-width: min-content;
}
#quoteLineSelectionWizardDialog .selection-original-component {
  display: grid;
  gap: 4px;
  min-width: 96px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-original-component span {
  color: #475569;
  font-size: 0.82rem;
}
#quoteLineSelectionWizardDialog .selection-document-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}
#quoteLineSelectionWizardDialog .selection-segment-card {
  display: grid;
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-segment-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-segment-original {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: stretch;
}
#quoteLineSelectionWizardDialog .selection-public-preview,
#quoteLineSelectionWizardDialog .selection-open-issues {
  align-content: start;
}
#quoteLineSelectionWizardDialog .project-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 9px;
  background: #fbfcfe;
}
#quoteLineSelectionWizardDialog .project-summary-strip > div {
  min-width: 0;
  padding: 9px 10px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}
#quoteLineSelectionWizardDialog .project-summary-strip > div:first-child {
  border-left: 0;
}
#quoteLineSelectionWizardDialog .project-summary-strip span,
#quoteLineSelectionWizardDialog .selection-preview-summary strong {
  display: block;
  color: #475569;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.035em;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .project-summary-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
#quoteLineSelectionWizardDialog .selection-preview-summary > div {
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}
#quoteLineSelectionWizardDialog .selection-preview-summary > div:first-child {
  padding-left: 0;
  border-left: 0;
}
#quoteLineSelectionWizardDialog .selection-preview-icon {
  display: block;
  margin-bottom: 8px;
}
#quoteLineSelectionWizardDialog .selection-preview-summary p {
  margin-top: 8px;
  min-height: 28px;
}
#quoteLineSelectionWizardDialog .selection-preview-detail {
  display: grid;
  gap: 8px;
}
#quoteLineSelectionWizardDialog .selection-preview-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#quoteLineSelectionWizardDialog .selection-preview-notes p {
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 7px;
  background: #f8fafc;
  font-size: 11px;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-open-issues {
  background: #fffaf3;
  border-color: rgba(217, 119, 6, 0.28);
}
#quoteLineSelectionWizardDialog .selection-open-issues ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#quoteLineSelectionWizardDialog .selection-open-issues .badge.warning {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 8px;
  background: #fff7ed;
  color: #b45309;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #fff;
  color: #111827;
  font-size: 14px;
  font-weight: 750;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost.primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
#quoteLineSelectionWizardDialog {
  box-sizing: border-box;
  min-width: 0;
  width: min(1120px, calc(100vw - 32px));
}
#quoteLineSelectionWizardDialog .selection-material-config-steps {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 8px;
}
#quoteLineSelectionWizardDialog .selection-material-config-steps button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-material-config-steps button.is-active {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-config-steps button.is-done {
  border-color: rgba(22, 163, 74, 0.3);
  background: #f0fdf4;
  color: #166534;
}
#quoteLineSelectionWizardDialog .selection-material-config-steps button.is-warning {
  border-color: rgba(217, 119, 6, 0.32);
  background: #fff7ed;
  color: #9a3412;
}
#quoteLineSelectionWizardDialog .selection-material-config-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 312px);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-config-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fbfcfe;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary header,
#quoteLineSelectionWizardDialog .selection-material-config-summary section {
  display: grid;
  gap: 8px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary h5 {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-align: left;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row strong,
#quoteLineSelectionWizardDialog .selection-material-config-summary__row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row strong {
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row small {
  color: #64748b;
  font-size: 11px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row b {
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__swatch {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__variant {
  margin: 0;
  padding: 8px;
  border-radius: 7px;
  background: #fff;
  color: #111827;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
  display: flex;
  justify-content: flex-end;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost {
  width: auto;
  min-width: 132px;
  padding-inline: 16px;
}
@media (max-width: 1023px) {
  #quoteLineSelectionWizardDialog .selection-material-config-layout {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-material-config-summary {
    position: static;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }
  #quoteLineSelectionWizardDialog .selection-mode-grid,
  #quoteLineSelectionWizardDialog .selection-saved-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card__fields {
    grid-column: 1 / -1;
  }
  #quoteLineSelectionWizardDialog .selection-review-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  #quoteLineSelectionWizardDialog {
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__content {
    max-height: calc(100dvh - 16px);
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__header {
    min-height: 74px;
    padding: 18px 18px 14px;
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__header strong {
    font-size: 19px;
  }
  #quoteLineSelectionWizardDialog [data-action='close-selection-wizard'].small {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__body {
    max-height: calc(100dvh - 152px);
    padding: 12px 16px 14px;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card,
  #quoteLineSelectionWizardDialog .selection-mode-grid,
  #quoteLineSelectionWizardDialog .selection-source-model-card__fields,
  #quoteLineSelectionWizardDialog .selection-upload-form .customer-create-grid,
  #quoteLineSelectionWizardDialog .selection-color-reference-form .customer-create-grid,
  #quoteLineSelectionWizardDialog .project-summary-strip,
  #quoteLineSelectionWizardDialog .selection-preview-summary,
  #quoteLineSelectionWizardDialog .selection-document-row,
  #quoteLineSelectionWizardDialog .selection-material-position-card,
  #quoteLineSelectionWizardDialog .selection-material-position-card[data-selection-original-component],
  #quoteLineSelectionWizardDialog .selection-segment-original {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card img,
  #quoteLineSelectionWizardDialog .selection-source-model-card > span {
    width: 100%;
    max-width: 112px;
  }
  #quoteLineSelectionWizardDialog .project-summary-strip > div,
  #quoteLineSelectionWizardDialog .selection-preview-summary > div {
    padding: 10px 0;
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }
  #quoteLineSelectionWizardDialog .project-summary-strip > div:first-child,
  #quoteLineSelectionWizardDialog .selection-preview-summary > div:first-child {
    border-top: 0;
  }
  #quoteLineSelectionWizardDialog .selection-reference-more[open] > .selection-reference-actions {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    box-shadow: none;
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost {
    width: 100%;
  }
}
#quoteLineSelectionWizardDialog {
  width: min(900px, calc(100vw - 32px));
  max-height: 90vh;
  border-radius: 16px;
  background: transparent;
}
#quoteLineSelectionWizardDialog [hidden] {
  display: none !important;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__content {
  max-height: 90vh;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header {
  min-height: 70px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header strong {
  font-size: 21px;
  line-height: 1.15;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header p {
  margin-top: 6px;
  font-size: 14px;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__body {
  max-height: calc(90vh - 140px);
  gap: 12px;
  padding: 12px 24px 14px;
  overflow: auto;
}
#quoteLineSelectionWizardDialog .selection-wizard-panel,
#quoteLineSelectionWizardDialog [data-selection-wizard-panel='0'] {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-material-config-steps {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-source-model-card {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 11px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-source-model-card img,
#quoteLineSelectionWizardDialog .selection-source-model-card > span {
  width: 88px;
  height: 74px;
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-source-model-card strong {
  margin-top: 2px;
  font-size: 16px;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__main {
  gap: 5px;
}
#quoteLineSelectionWizardDialog .selection-material-config-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
#quoteLineSelectionWizardDialog .selection-material-config-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-mode-section {
  grid-column: 1;
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-wizard-subcard--materials {
  grid-column: 1;
}
#quoteLineSelectionWizardDialog .selection-material-areas {
  grid-column: 1;
}
#quoteLineSelectionWizardDialog .selection-active-material-area {
  display: grid;
  grid-column: 1;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-active-material-area > header {
  display: grid;
  gap: 3px;
}
#quoteLineSelectionWizardDialog .selection-active-material-area h4 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-mode-section h4,
#quoteLineSelectionWizardDialog .selection-material-areas h4 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-mode-section > p {
  margin-top: -5px;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 102px;
  padding: 12px 13px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 9px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-mode-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 50%;
  background: #f8fafc;
  color: #0f172a;
}
#quoteLineSelectionWizardDialog .selection-mode-card__icon svg,
#quoteLineSelectionWizardDialog .selection-material-config-summary__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#quoteLineSelectionWizardDialog .selection-mode-card__copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-mode-card__copy strong {
  display: block;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}
#quoteLineSelectionWizardDialog .selection-mode-card__copy span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
#quoteLineSelectionWizardDialog .selection-mode-card.is-active {
  border-color: rgba(37, 99, 235, 0.55);
  background: rgba(37, 99, 235, 0.04);
}
#quoteLineSelectionWizardDialog .selection-mode-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-wizard-subcard,
#quoteLineSelectionWizardDialog .selection-empty-segments,
#quoteLineSelectionWizardDialog .selection-upload-form,
#quoteLineSelectionWizardDialog .selection-color-reference-form {
  padding: 0px;
  border: 0px solid !important;
  border-radius: 9px;
}
#quoteLineSelectionWizardDialog .selection-material-areas {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-area-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-area-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
  color: #111827;
  text-align: left;
}
#quoteLineSelectionWizardDialog .selection-material-area-row.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(37, 99, 235, 0.035);
}
#quoteLineSelectionWizardDialog .selection-material-area-row__icon,
#quoteLineSelectionWizardDialog .selection-material-config-summary__icon {
  display: grid;
  place-items: center;
  color: #64748b;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__main strong {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__main span,
#quoteLineSelectionWizardDialog .selection-material-area-row__main small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__meta {
  display: grid;
  grid-template-columns: minmax(74px, 1fr) minmax(80px, 1fr) minmax(82px, 1fr);
  gap: 8px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__meta span {
  display: grid;
  gap: 4px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__meta em {
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  line-height: 1.1;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__meta b {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: #111827;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__chevron {
  color: #64748b;
  font-size: 20px;
  line-height: 1;
}
#quoteLineSelectionWizardDialog .selection-material-color-dot {
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 50%;
  background: var(--selection-material-color, transparent);
  vertical-align: -1px;
}
#quoteLineSelectionWizardDialog .selection-material-source-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-source-badge--original {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.09);
  color: #166534;
}
#quoteLineSelectionWizardDialog .selection-material-source-badge--customer {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
}
#quoteLineSelectionWizardDialog .selection-material-source-badge--known,
#quoteLineSelectionWizardDialog .selection-material-source-badge--catalog {
  border-color: rgba(99, 102, 241, 0.16);
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
}
#quoteLineSelectionWizardDialog .selection-material-source-badge--custom,
#quoteLineSelectionWizardDialog .selection-material-source-badge--open {
  border-color: rgba(100, 116, 139, 0.18);
  background: #f8fafc;
  color: #475569;
}
#quoteLineSelectionWizardDialog .selection-material-add-row {
  justify-self: start;
  min-height: 34px;
  height: 34px;
  padding-inline: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 9px;
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail h5 {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail .selection-material-position-card {
  grid-template-columns: 18px 54px 38px minmax(0, 1fr) auto;
  padding: 7px 8px;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail .selection-material-position-card[data-selection-original-component] {
  grid-template-columns: 18px 54px minmax(0, 1fr) auto;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail .selection-material-position-card__position strong,
#quoteLineSelectionWizardDialog .selection-material-area-detail .selection-material-position-card__position input {
  width: 48px;
  min-height: 28px;
  height: 28px;
}
#quoteLineSelectionWizardDialog .selection-material-area-detail .selection-reference-actions .ghost {
  min-height: 30px;
  height: 30px;
  padding-inline: 10px;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-variant-inline {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}
#quoteLineSelectionWizardDialog .selection-material-variant-inline span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
#quoteLineSelectionWizardDialog .selection-material-variant-inline strong {
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary {
  position: static;
  grid-column: 1;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary header strong {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-review-area {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
#quoteLineSelectionWizardDialog .selection-review-area h5 {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-review-area ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#quoteLineSelectionWizardDialog .selection-review-area li {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, 1fr) minmax(130px, 1.2fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  min-height: 50px;
  padding: 8px;
  border-color: rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row strong {
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__row small {
  display: flex;
  align-items: center;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  white-space: normal;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 4px 0 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(100, 116, 139, 0.35);
  border-radius: 50%;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th,
#quoteLineSelectionWizardDialog .selection-material-summary-table td {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #111827;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  vertical-align: middle;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td .selection-reference-actions {
  flex-wrap: wrap;
  gap: 5px;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 14px;
  padding: 12px 24px 16px;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost {
  width: 100%;
  min-width: 0;
  height: 42px;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions #quoteLineSelectionWizardSaveBtn {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}
@media (max-width: 1023px) {
  #quoteLineSelectionWizardDialog .selection-material-config-layout {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-material-config-summary {
    position: static;
  }
  #quoteLineSelectionWizardDialog .selection-material-areas {
    grid-column: auto;
  }
}
@media (max-width: 640px) {
  #quoteLineSelectionWizardDialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__content {
    max-height: calc(100dvh - 16px);
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__body {
    max-height: calc(100dvh - 150px);
    padding: 12px 14px 14px;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card img,
  #quoteLineSelectionWizardDialog .selection-source-model-card > span {
    width: 74px;
    height: 68px;
  }
	  #quoteLineSelectionWizardDialog .selection-mode-grid,
	  #quoteLineSelectionWizardDialog .selection-material-area-row__meta {
	    grid-template-columns: 1fr;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-area-list {
	    grid-template-columns: 1fr;
	  }
  #quoteLineSelectionWizardDialog .selection-material-area-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  #quoteLineSelectionWizardDialog .selection-mode-card {
    min-height: 92px;
  }
  #quoteLineSelectionWizardDialog .selection-material-area-row {
    gap: 8px;
  }
  #quoteLineSelectionWizardDialog .selection-material-area-row__chevron {
    display: none;
  }
	  #quoteLineSelectionWizardDialog .selection-material-area-row__meta {
	    gap: 6px;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
	    overflow: visible;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table,
	  #quoteLineSelectionWizardDialog .selection-material-summary-table thead,
	  #quoteLineSelectionWizardDialog .selection-material-summary-table tbody,
	  #quoteLineSelectionWizardDialog .selection-material-summary-table tr,
	  #quoteLineSelectionWizardDialog .selection-material-summary-table th,
	  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
	    display: block;
	    width: 100%;
	    min-width: 0;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table thead {
	    display: none;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table tr {
	    margin-bottom: 8px;
	    padding: 8px;
	    border: 1px solid rgba(15, 23, 42, 0.1);
	    border-radius: 8px;
	    background: #fff;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
	    display: grid;
	    grid-template-columns: 88px minmax(0, 1fr);
	    gap: 8px;
	    padding: 5px 0;
	    border-bottom: 0;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table td::before {
	    content: attr(data-label);
	    color: #64748b;
	    font-size: 10px;
	    font-weight: 800;
	    text-transform: uppercase;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table td[data-label="Aktion"] {
	    grid-template-columns: 1fr;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-summary-table td[data-label="Aktion"]::before {
	    display: none;
	  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 14px 14px;
  }
}
#quoteLineSelectionWizardDialog {
  width: min(1080px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__content {
  max-height: 90vh;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header {
  min-height: auto;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header strong {
  font-size: 22px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__header p {
  margin-top: 5px;
  font-size: 13px;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__body {
  max-height: calc(90vh - 138px);
  gap: 14px;
  padding: 16px 24px 14px;
}
#quoteLineSelectionWizardDialog .selection-source-model-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 86px;
  padding: 14px 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__image {
  display: grid;
  place-items: center;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__image img,
#quoteLineSelectionWizardDialog .selection-source-model-card__image > span {
  width: 120px;
  height: 70px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 7px;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__fields > div {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__fields > div:first-child {
  border-left: 0;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__fields span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-source-model-card__fields strong {
  margin: 0;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-config-layout,
#quoteLineSelectionWizardDialog .selection-material-config-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-areas,
#quoteLineSelectionWizardDialog .selection-active-material-area,
#quoteLineSelectionWizardDialog .selection-material-config-summary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-material-areas {
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-material-areas h4,
#quoteLineSelectionWizardDialog .selection-active-material-area h4 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-material-area-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-area-row {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px;
  border-color: rgba(15, 23, 42, 0.12);
  border-radius: 7px;
}
#quoteLineSelectionWizardDialog .selection-material-area-row.is-active {
  border-color: rgba(37, 99, 235, 0.8);
  background: rgba(37, 99, 235, 0.04);
  color: #0b5ed7;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__icon {
  width: 22px;
  height: 22px;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__icon img {
  width: 22px;
  height: 22px;
}
#quoteLineSelectionWizardDialog .selection-material-area-row__main strong {
  font-size: 13px;
}
#quoteLineSelectionWizardDialog .selection-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#quoteLineSelectionWizardDialog .selection-mode-card {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 108px;
  padding: 16px 18px;
  border-color: rgba(15, 23, 42, 0.12);
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-mode-card__icon {
  width: 48px;
  height: 48px;
  border: 0;
  background: #f3f5f8;
}
#quoteLineSelectionWizardDialog .selection-mode-card__copy strong {
  font-size: 13px;
}
#quoteLineSelectionWizardDialog .selection-mode-card.is-active {
  border-color: rgba(37, 99, 235, 0.85);
  background: rgba(37, 99, 235, 0.035);
}
#quoteLineSelectionWizardDialog .selection-mode-card.is-active::after {
  background: #0b5ed7;
}
#quoteLineSelectionWizardDialog .selection-wizard-subcard,
#quoteLineSelectionWizardDialog .selection-empty-segments,
#quoteLineSelectionWizardDialog .selection-upload-form,
#quoteLineSelectionWizardDialog .selection-color-reference-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  border: 0 !important;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-color-reference-form .customer-create-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
#quoteLineSelectionWizardDialog .selection-color-reference-form .customer-create-field--wide {
  grid-column: span 2;
}
#quoteLineSelectionWizardDialog .selection-material-request-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-material-request-form__primary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  min-width: 0;
  align-items: end;
}
#quoteLineSelectionWizardDialog .selection-material-request-form__hex {
  grid-template-columns: minmax(0, 1fr) 44px 36px;
  gap: 6px;
}
#quoteLineSelectionWizardDialog .selection-material-request-form__hex input[type='color'] {
  width: 44px;
}
#quoteLineSelectionWizardDialog .selection-material-request-details {
  display: grid;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-request-details > summary {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
#quoteLineSelectionWizardDialog .selection-material-request-details > summary::-webkit-details-marker {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-material-request-details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
#quoteLineSelectionWizardDialog .selection-material-request-details[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}
#quoteLineSelectionWizardDialog .selection-material-request-details__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  gap: 16px;
  min-width: 0;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 9px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-request-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 12px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-request-details__custom {
  grid-column: 1 / -1;
}
#quoteLineSelectionWizardDialog .selection-material-request-details__description {
  grid-column: span 2;
}
#quoteLineSelectionWizardDialog .selection-material-request-details__image {
  grid-column: span 2;
}
#quoteLineSelectionWizardDialog .selection-material-request-details__hint {
  grid-column: span 2;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 7px;
  background: rgba(37, 99, 235, 0.05);
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1.35;
}
#quoteLineSelectionWizardDialog .selection-material-request-preview {
  align-self: start;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-request-preview span {
  color: #475569;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
#quoteLineSelectionWizardDialog .selection-material-request-preview__swatch {
  width: 100%;
  min-height: 128px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-material-request-preview__swatch.is-empty {
  background: #f8fafc;
}
#quoteLineSelectionWizardDialog .selection-material-request-preview strong {
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
#quoteLineSelectionWizardDialog .selection-material-request-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
#quoteLineSelectionWizardDialog .selection-material-request-actions .ghost {
  width: 100%;
  min-height: 44px;
  height: 44px;
  border-radius: 7px;
}
#quoteLineSelectionWizardDialog .selection-material-request-actions .ghost.primary {
  border-color: #070d19;
  background: #070d19;
  color: #fff;
}
#quoteLineSelectionWizardDialog.selection-wizard-dialog--inline-material-request .selection-wizard-dialog__actions {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-material-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
#quoteLineSelectionWizardDialog .selection-material-picker-results {
  gap: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result__image,
#quoteLineSelectionWizardDialog .selection-material-picker-result__image img,
#quoteLineSelectionWizardDialog .selection-material-picker-result__image > span {
  width: 56px;
  height: 56px;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result__image img,
#quoteLineSelectionWizardDialog .selection-material-picker-result__image > span {
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 7px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 11px;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-picker-result__main strong,
#quoteLineSelectionWizardDialog .selection-material-picker-result__main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-reference-card {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 62px;
  padding: 8px 10px;
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-reference-card__preview,
#quoteLineSelectionWizardDialog .selection-reference-card__preview img,
#quoteLineSelectionWizardDialog .selection-reference-card__preview > span {
  width: 52px;
  height: 52px;
  min-height: 52px;
}
#quoteLineSelectionWizardDialog .selection-original-preview {
  padding: 10px;
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary header strong {
  font-size: 16px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table {
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th {
  padding: 10px 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 13px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table tbody tr:last-child td {
  border-bottom: 0;
  border-left: 1px solid #dbe3ee;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area strong {
  font-size: 13px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action {
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action--danger {
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
#quoteLineSelectionWizardDialog .selection-material-summary-empty {
  padding: 18px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions .ghost {
  height: 44px;
  border-radius: 7px;
}
#quoteLineSelectionWizardDialog .selection-wizard-dialog__actions #quoteLineSelectionWizardSaveBtn {
  border-color: #070d19;
  background: #070d19;
  color: #fff;
}
@media (max-width: 1023px) {
  #quoteLineSelectionWizardDialog .selection-source-model-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card__fields > div:nth-child(odd) {
    border-left: 0;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card__fields > div:nth-child(n + 3) {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }
  #quoteLineSelectionWizardDialog .selection-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-color-reference-form .customer-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-material-request-form__primary {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-material-request-details__body {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-material-request-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-material-request-preview {
    max-width: 260px;
  }
}
@media (max-width: 640px) {
  #quoteLineSelectionWizardDialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__content {
    max-height: calc(100dvh - 16px);
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__body {
    max-height: calc(100dvh - 144px);
    padding: 12px 14px 14px;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  #quoteLineSelectionWizardDialog .selection-source-model-card__fields {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quoteLineSelectionWizardDialog .selection-material-area-list,
  #quoteLineSelectionWizardDialog .selection-mode-grid,
  #quoteLineSelectionWizardDialog .selection-color-reference-form .customer-create-grid,
  #quoteLineSelectionWizardDialog .selection-material-search-form,
  #quoteLineSelectionWizardDialog .selection-material-picker-result {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-color-reference-form .customer-create-field--wide {
    grid-column: 1;
  }
  #quoteLineSelectionWizardDialog .selection-material-request-form__primary,
  #quoteLineSelectionWizardDialog .selection-material-request-details__grid,
  #quoteLineSelectionWizardDialog .selection-material-request-actions {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-material-request-details > summary {
    justify-self: stretch;
    justify-content: center;
  }
  #quoteLineSelectionWizardDialog .selection-material-request-details__body {
    padding: 12px;
  }
  #quoteLineSelectionWizardDialog .selection-material-request-details__description,
  #quoteLineSelectionWizardDialog .selection-material-request-details__image,
  #quoteLineSelectionWizardDialog .selection-material-request-details__hint {
    grid-column: 1;
  }
  #quoteLineSelectionWizardDialog .selection-material-request-preview {
    max-width: none;
  }
	  #quoteLineSelectionWizardDialog .selection-material-request-preview__swatch {
	    min-height: 92px;
	  }
	  #quoteLineSelectionWizardDialog .selection-reference-image-preview__media {
	    min-height: 96px;
	    max-height: 214px;
	  }
	  #quoteLineSelectionWizardDialog .selection-reference-image-preview__media img {
	    max-height: 198px;
	  }
	  #quoteLineSelectionWizardDialog .selection-reference-image-preview__footer {
	    grid-template-columns: 1fr;
	    align-items: stretch;
	  }
	  #quoteLineSelectionWizardDialog .selection-reference-image-preview__name {
	    white-space: normal;
	    overflow-wrap: anywhere;
	  }
	  #quoteLineSelectionWizardDialog .selection-reference-image-preview__footer .ghost {
	    width: 100%;
	  }
	  #quoteLineSelectionWizardDialog .selection-material-picker-result__image {
	    justify-self: start;
	  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
    overflow: visible;
    border: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table,
  #quoteLineSelectionWizardDialog .selection-material-summary-table thead,
  #quoteLineSelectionWizardDialog .selection-material-summary-table tbody,
  #quoteLineSelectionWizardDialog .selection-material-summary-table tr,
  #quoteLineSelectionWizardDialog .selection-material-summary-table th,
  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table thead {
    display: none;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table tr {
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: #fff;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 0;
    border-bottom: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td[data-label="Aktionen"] {
    grid-template-columns: 1fr;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td[data-label="Aktionen"]::before {
    display: none;
  }
  #quoteLineSelectionWizardDialog .selection-wizard-dialog__actions {
    gap: 10px;
    padding: 12px 14px 14px;
  }
}
#quoteLineSelectionWizardDialog .selection-material-config-summary {
  gap: 12px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary > header {
  min-height: 34px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
#quoteLineSelectionWizardDialog .selection-material-config-summary > header strong {
  color: #111827;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__tools .ghost {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th:nth-child(1),
#quoteLineSelectionWizardDialog .selection-material-summary-table td:nth-child(1) {
  width: 260px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th:nth-child(3),
#quoteLineSelectionWizardDialog .selection-material-summary-table td:nth-child(3) {
  width: 176px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th {
  height: 48px;
  padding: 12px 30px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td {
  min-width: 0;
  height: 62px;
  padding: 10px 30px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  vertical-align: middle;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th + th,
#quoteLineSelectionWizardDialog .selection-material-summary-table td + td {
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}
#quoteLineSelectionWizardDialog .selection-material-group-row:last-child td {
  border-bottom: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area {
  gap: 18px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area img {
  width: 24px;
  height: 24px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area strong {
  color: #111827;
  font-size: 18px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-group-items-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-group-items {
  display: flex;
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-color: rgba(100, 116, 139, 0.28) transparent;
  scrollbar-width: thin;
}
#quoteLineSelectionWizardDialog .selection-material-group-items::-webkit-scrollbar {
  height: 6px;
}
#quoteLineSelectionWizardDialog .selection-material-group-items::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.26);
}
#quoteLineSelectionWizardDialog .selection-material-group-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 150px;
  min-height: 34px;
  padding: 8px 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  cursor: grab;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-group-chip__handle {
  color: #94a3b8;
  opacity: 0;
}
#quoteLineSelectionWizardDialog .selection-material-group-chip:hover .selection-material-group-chip__handle,
#quoteLineSelectionWizardDialog .selection-material-group-chip:focus-visible .selection-material-group-chip__handle {
  opacity: 1;
}
#quoteLineSelectionWizardDialog .selection-material-group-chip--more {
  cursor: pointer;
}
#quoteLineSelectionWizardDialog .selection-material-group-chip.is-dragging,
#quoteLineSelectionWizardDialog .selection-material-group-detail.is-dragging {
  border-color: rgba(37, 99, 235, 0.65);
  background: #eff6ff;
  cursor: grabbing;
}
#quoteLineSelectionWizardDialog .selection-material-group-chip.is-drop-target,
#quoteLineSelectionWizardDialog .selection-material-group-detail.is-drop-target {
  outline: 2px solid rgba(37, 99, 235, 0.25);
  outline-offset: 2px;
}
#quoteLineSelectionWizardDialog .selection-material-group-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
#quoteLineSelectionWizardDialog .selection-material-group-details {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
#quoteLineSelectionWizardDialog .selection-material-group-detail {
  display: grid;
  grid-template-columns: 28px minmax(94px, 1fr) minmax(94px, 1fr) minmax(92px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  cursor: grab;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-group-detail > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-summary-actions {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action svg {
  width: 18px;
  height: 18px;
}

#quoteLineSelectionWizardDialog .selection-custom-material-editor {
  min-width: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-requirement-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-requirement-form section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-requirement-grid,
#quoteLineSelectionWizardDialog .selection-custom-procurement-grid,
#quoteLineSelectionWizardDialog .selection-custom-contact-fields {
  min-width: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-contact-fields {
  margin: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-color-picker {
  max-width: 120px;
}

#quoteLineSelectionWizardDialog .selection-custom-color-picker input[type="color"] {
  min-height: 42px;
  padding: 4px;
}

#quoteLineSelectionWizardDialog .selection-custom-requirement-form h4,
#quoteLineSelectionWizardDialog .selection-custom-requirement-form h5 {
  margin: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-attachments {
  display: grid;
  gap: 8px;
}

#quoteLineSelectionWizardDialog .selection-custom-attachment {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border, #d7dee8);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}

#quoteLineSelectionWizardDialog .selection-custom-attachment__preview,
#quoteLineSelectionWizardDialog .selection-custom-attachment__preview img {
  width: 54px;
  height: 54px;
  border-radius: 6px;
}

#quoteLineSelectionWizardDialog .selection-custom-attachment__preview {
  display: grid;
  place-items: center;
  background: #eef2f7;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
}

#quoteLineSelectionWizardDialog .selection-custom-attachment__preview img {
  object-fit: cover;
}

#quoteLineSelectionWizardDialog .selection-custom-attachment strong,
#quoteLineSelectionWizardDialog .selection-custom-attachment a {
  display: block;
  overflow-wrap: anywhere;
}

#quoteLineSelectionWizardDialog .selection-custom-attachment > div:nth-child(2) {
  min-width: 0;
}

#quoteLineSelectionWizardDialog .selection-material-summary-area svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

@media (max-width: 520px) {
  #quoteLineSelectionWizardDialog .selection-custom-requirement-form .customer-create-grid,
  #quoteLineSelectionWizardDialog .selection-custom-contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #quoteLineSelectionWizardDialog .selection-custom-color-picker {
    max-width: none;
  }

  #quoteLineSelectionWizardDialog .selection-custom-attachment {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  #quoteLineSelectionWizardDialog .selection-custom-attachment__preview,
  #quoteLineSelectionWizardDialog .selection-custom-attachment__preview img {
    width: 44px;
    height: 44px;
  }

  #quoteLineSelectionWizardDialog .selection-custom-attachment .ghost {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 1023px) {
  #quoteLineSelectionWizardDialog .selection-material-summary-table th:nth-child(1),
  #quoteLineSelectionWizardDialog .selection-material-summary-table td:nth-child(1) {
    width: 210px;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table th:nth-child(3),
  #quoteLineSelectionWizardDialog .selection-material-summary-table td:nth-child(3) {
    width: 142px;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table th,
  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
    padding-right: 18px;
    padding-left: 18px;
  }
  #quoteLineSelectionWizardDialog .selection-material-group-chip {
    min-width: 128px;
  }
}
@media (max-width: 640px) {
  #quoteLineSelectionWizardDialog .selection-material-config-summary > header {
    align-items: flex-start;
    min-height: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table,
  #quoteLineSelectionWizardDialog .selection-material-summary-table tbody,
  #quoteLineSelectionWizardDialog .selection-material-summary-table tr,
  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table thead {
    display: none;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table tr {
    margin: 0;
    padding: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
    height: auto;
    padding: 0;
    border: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td + td {
    margin-top: 10px;
    border-left: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td::before {
    display: none;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-actions {
    width: 100%;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-action {
    width: 42px;
    min-width: 42px;
  }
  #quoteLineSelectionWizardDialog .selection-material-group-items-shell {
    grid-template-columns: minmax(0, 1fr) 30px;
  }
  #quoteLineSelectionWizardDialog .selection-material-group-chip {
    min-width: 104px;
    min-height: 38px;
    padding: 9px 14px;
    font-size: 13px;
  }
  #quoteLineSelectionWizardDialog .selection-material-group-detail {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }
  #quoteLineSelectionWizardDialog .selection-material-group-detail > span:nth-of-type(n + 3),
  #quoteLineSelectionWizardDialog .selection-material-group-detail .selection-material-source-badge {
    display: none;
  }
}
#quoteLineSelectionWizardDialog .selection-material-summary-table-wrap {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: auto;
  border-color: #dbe3ee;
  border-radius: 9px;
  box-shadow: none;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  color: #111827;
  border-collapse: separate;
  border-spacing: 0;
}
#quoteLineSelectionWizardDialog .selection-material-col-area {
  width: 210px;
}
#quoteLineSelectionWizardDialog .selection-material-col-content {
  width: auto;
}
#quoteLineSelectionWizardDialog .selection-material-col-actions {
  width: 112px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table th {
  height: 46px;
  padding: 11px 16px;
  border-bottom: 1px solid #dbe3ee;
  background: #fbfdff;
  color: #42526e;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td {
  height: 58px;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid #dbe3ee;
  background: #fff;
  vertical-align: middle;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td + td,
#quoteLineSelectionWizardDialog .selection-material-summary-table th + th {
  border-left: 1px solid #dbe3ee;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td.selection-material-summary-area-cell {
  width: 210px;
  background: #fbfdff;
  vertical-align: middle;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td.selection-material-summary-content-cell,
#quoteLineSelectionWizardDialog .selection-material-summary-table td.selection-material-summary-detail-cell {
  width: auto;
}
#quoteLineSelectionWizardDialog .selection-material-summary-table td.selection-material-summary-actions-cell {
  width: 112px;
  min-width: 112px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-row:last-child td,
#quoteLineSelectionWizardDialog .selection-material-summary-detail-row:last-child td {
  border-bottom: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area img,
#quoteLineSelectionWizardDialog .selection-material-summary-area svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area > span {
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area strong {
  display: block;
  min-width: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
}
#quoteLineSelectionWizardDialog .selection-material-summary-area small {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid #d7e0ec;
  border-radius: 6px;
  background: #f3f6fa;
  color: #42526e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-material-summary-main {
  display: grid;
  grid-template-columns: 22px 38px 42px minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(145px, 1fr) minmax(0, max-content) 38px;
  column-gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-drag {
  display: grid;
  place-items: center;
  width: 22px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: grab;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
#quoteLineSelectionWizardDialog .selection-material-summary-row.is-dragging,
#quoteLineSelectionWizardDialog .selection-material-summary-row.is-drop-target {
  background: #eff6ff;
}
#quoteLineSelectionWizardDialog .selection-material-summary-row.is-dragging .selection-material-summary-drag {
  cursor: grabbing;
}
#quoteLineSelectionWizardDialog .selection-material-summary-row.is-drop-target td {
  box-shadow: inset 0 2px 0 rgba(37, 99, 235, 0.45);
}
#quoteLineSelectionWizardDialog .selection-material-summary-order {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fbfdff;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-summary-preview {
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #cfd6e1;
  border-radius: 5px;
  background: var(--selection-material-color, #f8fafc);
}
#quoteLineSelectionWizardDialog .selection-material-summary-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#quoteLineSelectionWizardDialog .selection-material-summary-preview--empty {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
}
#quoteLineSelectionWizardDialog .selection-material-summary-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-summary-cell strong {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-summary-cell small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-summary-legacy-meta {
  display: none;
}
#quoteLineSelectionWizardDialog .selection-material-color-dot {
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border-color: rgba(15, 23, 42, 0.24);
}
#quoteLineSelectionWizardDialog .selection-material-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  min-height: 23px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-summary-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-self: end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  min-height: 23px;
  padding: 2px 7px 2px 3px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.16s ease, opacity 0.16s ease;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
  transition: transform 0.16s ease;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch.is-active {
  border-color: rgba(22, 163, 74, 0.18);
  background: #f0fdf4;
  color: #15803d;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch.is-active .selection-material-research-switch__track {
  background: #16a34a;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch.is-active .selection-material-research-switch__thumb {
  transform: translateX(14px);
}
#quoteLineSelectionWizardDialog .selection-material-research-switch.is-inactive {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch.is-saving {
  cursor: wait;
  color: #475569;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch.is-saving .selection-material-research-switch__track {
  opacity: 0.72;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch input:focus-visible + .selection-material-research-switch__track {
  outline: 3px solid rgba(22, 163, 74, 0.28);
  outline-offset: 2px;
}
#quoteLineSelectionWizardDialog .selection-material-research-switch:has(input:disabled) {
  pointer-events: none;
}
#quoteLineSelectionWizardDialog .selection-material-detail-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fff;
  color: #111827;
  cursor: pointer;
}
#quoteLineSelectionWizardDialog .selection-material-detail-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.16s ease;
}
#quoteLineSelectionWizardDialog .selection-material-detail-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
#quoteLineSelectionWizardDialog .selection-material-summary-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 64px;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-color: #dbe3ee;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-summary-action--danger {
  border-color: rgba(239, 68, 68, 0.28);
  color: #ef4444;
}
#quoteLineSelectionWizardDialog .selection-material-summary-detail-row td {
  padding: 0px !important;
  background: #fff;
}
#quoteLineSelectionWizardDialog .selection-material-summary-detail-row td[data-label="Aktionen"] {
  padding: 0;
  border-left: 1px solid #dbe3ee;
}
#quoteLineSelectionWizardDialog .selection-material-summary-detail {
  padding: 14px 16px;
  border: 1px solid #dbe3ee;
  background: #fbfcff;
}
#quoteLineSelectionWizardDialog .selection-material-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
#quoteLineSelectionWizardDialog .selection-material-detail-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe3ee;
}
#quoteLineSelectionWizardDialog .selection-material-detail-field--wide {
  grid-column: span 2;
}
#quoteLineSelectionWizardDialog .selection-material-detail-field span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
#quoteLineSelectionWizardDialog .selection-material-detail-field strong {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#quoteLineSelectionWizardDialog .selection-material-detail-swatch {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 1px solid rgba(15, 23, 42, 0.22);
  border-radius: 4px;
  background: var(--selection-material-color, transparent);
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachments > div {
  display: grid;
  gap: 8px;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__preview,
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__preview img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  background: #eef2f7;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__preview img {
  display: block;
  object-fit: cover;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__meta strong,
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-detail-attachment__meta small {
  color: #64748b;
  font-size: 11px;
}
#quoteLineSelectionWizardDialog .selection-material-detail-empty {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

#quoteLineSelectionWizardDialog .selection-material-form-section {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 14px;
  background: rgba(248, 250, 252, 0.72);
}

#quoteLineSelectionWizardDialog .selection-material-form-section + .selection-material-form-section,
#quoteLineSelectionWizardDialog .selection-material-form-section + .selection-material-request-details,
#quoteLineSelectionWizardDialog .selection-material-request-details + .selection-material-form-section {
  margin-top: 12px;
}

#quoteLineSelectionWizardDialog .selection-material-form-section h4,
#quoteLineSelectionWizardDialog .selection-material-form-section h5 {
  margin: 0 0 10px;
}

#quoteLineSelectionWizardDialog .selection-material-language-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#quoteLineSelectionWizardDialog .selection-material-auto-tr {
  min-height: 74px;
  justify-content: center;
}

#quoteLineSelectionWizardDialog .selection-material-auto-tr strong {
  color: #0f172a;
}

#quoteLineSelectionWizardDialog .selection-custom-legacy-details {
  margin-top: 12px;
}

@media (max-width: 640px) {
  #quoteLineSelectionWizardDialog .selection-material-language-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fbfdff;
  color: #42526e;
  font-size: 12px;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint > span {
  display: block;
  min-width: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1.35;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint > span:first-child {
  flex: 1 1 auto;
}
#quoteLineSelectionWizardDialog .selection-material-config-summary__hint > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  #quoteLineSelectionWizardDialog .selection-material-summary-main {
    grid-template-columns: 20px 34px 40px minmax(96px, 1fr) minmax(86px, 0.75fr) minmax(96px, 0.8fr) max-content 34px;
    gap: 9px;
  }
  #quoteLineSelectionWizardDialog .selection-material-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 780px) {
  #quoteLineSelectionWizardDialog .selection-material-summary-table,
  #quoteLineSelectionWizardDialog .selection-material-summary-table tbody,
  #quoteLineSelectionWizardDialog .selection-material-summary-table tr,
  #quoteLineSelectionWizardDialog .selection-material-summary-table td {
    display: block;
    width: 100%;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table thead {
    display: none;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-table td,
  #quoteLineSelectionWizardDialog .selection-material-summary-table td + td {
    height: auto;
    padding: 10px 12px;
    border-left: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-area-cell {
    border-top: 1px solid #dbe3ee;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-main {
    grid-template-columns: 22px 34px 40px minmax(0, 1fr) 34px;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-cell--color,
  #quoteLineSelectionWizardDialog .selection-material-summary-cell--code,
  #quoteLineSelectionWizardDialog .selection-material-summary-badges {
    grid-column: 4 / 5;
    justify-self: start;
  }
  #quoteLineSelectionWizardDialog .selection-material-detail-toggle {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
  }
  #quoteLineSelectionWizardDialog .selection-material-summary-actions {
    justify-content: flex-start;
    min-height: 0;
  }
  #quoteLineSelectionWizardDialog .selection-material-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  #quoteLineSelectionWizardDialog .selection-material-detail-grid,
  #quoteLineSelectionWizardDialog .selection-material-detail-field--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-column: auto;
  }
  #quoteLineSelectionWizardDialog .selection-material-config-summary__hint {
    align-items: flex-start;
    flex-direction: column;
  }
  #quoteLineSelectionWizardDialog .selection-material-detail-attachment {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  #quoteLineSelectionWizardDialog .selection-material-detail-attachment__open {
    grid-column: 1 / -1;
    width: fit-content;
  }
}
@media (min-width: 1101px) {
  #quoteLineSelectionWizardDialog {
    width: min(1180px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
  }
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .selection-wizard-dialog__content {
    width: calc(100vw - 12px);
  }
  .selection-source-model-card,
  .selection-reference-card,
  .selection-document-row,
  .selection-segment-original {
    grid-template-columns: 1fr;
  }
  .selection-segment-card header,
  .selection-panel-head {
    display: grid;
  }
  .selection-wizard-dialog__actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--border-color, #d7dde8);
  }
}

body.page-selection-presentation .selection-presentation-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 12px 14px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-sidebar-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

body.page-selection-presentation .selection-presentation-step.is-warning .selection-presentation-step-index {
  border-color: rgba(217, 119, 6, 0.36);
  background: #fffbeb;
  color: #b45309;
}

body.page-selection-presentation .selection-presentation-step.is-open .selection-presentation-step-index {
  border-color: rgba(100, 116, 139, 0.22);
  background: #f8fafc;
  color: #475569;
}

body.page-selection-presentation .selection-presentation-native-tool-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-native-tool-panel h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

body.page-selection-presentation .selection-presentation-native-tool-panel p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

body.page-selection-presentation .selection-presentation-summary-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

body.page-selection-presentation .selection-presentation-summary-card {
  display: grid;
  grid-template-rows: minmax(112px, 1fr) auto auto;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-summary-card span:first-child {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

body.page-selection-presentation .selection-presentation-summary-card strong {
  display: block;
  margin-top: 6px;
  color: #111827;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.1;
}

body.page-selection-presentation .selection-presentation-summary-card p {
  display: -webkit-box;
  min-height: 38px;
  margin: 8px 0 0;
  overflow: hidden;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.page-selection-presentation .selection-presentation-issue-group {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  text-align: left;
}

body.page-selection-presentation .selection-presentation-issue-group strong {
  font-size: 13px;
  line-height: 1.2;
}

body.page-selection-presentation .selection-presentation-issue-group span {
  color: #92400e;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1200px) {
  body.page-selection-presentation .selection-presentation-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.page-selection-presentation .selection-presentation-native-tool-panel,
  body.page-selection-presentation .selection-presentation-summary-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .project-selection-sms-main-grid {
    grid-template-columns: 1fr;
  }

  .project-selection-sms-side {
    position: static;
  }

  .project-selection-sms-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .project-selection-sms-audit-table__head {
    display: none;
  }

  .project-selection-sms-audit-table {
    border: 0;
    overflow: visible;
  }

  .project-selection-sms-audit-row {
    grid-template-columns: 1fr;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .project-selection-sms-audit-row > span:not(.project-selection-sms-audit-position) {
    display: inline-flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
  }

  .project-selection-sms-audit-row > span::before {
    content: attr(data-label);
    color: #64748b;
  }

  .project-selection-sms-detail-grid {
    grid-template-columns: 1fr;
  }

  .project-selection-sms-detail-top,
  .project-selection-sms-position-workspace {
    grid-template-columns: 1fr;
  }

  .project-selection-sms-review-area {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .project-selection-sms-review-area button {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
  }
}

.material-research-group-code,
.material-research-group-link {
  min-height: 32px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.material-research-position {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}
.material-research-position + .material-research-position {
  margin-top: 12px;
}
.material-research-position__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.material-research-position__summary::-webkit-details-marker {
  display: none;
}
.material-research-position__summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}
.material-research-position__summary .selection-source-model-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 86px;
  padding: 14px 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
}
.material-research-position__summary .selection-source-model-card__image {
  display: grid;
  place-items: center;
  min-width: 0;
}
.material-research-position__summary .selection-source-model-card__image img,
.material-research-position__summary .selection-source-model-card__image > span {
  width: 120px;
  height: 70px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.material-research-position__summary .selection-source-model-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 7px;
}
.material-research-position__summary .selection-source-model-card__fields > div {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}
.material-research-position__summary .selection-source-model-card__fields > div:first-child {
  border-left: 0;
}
.material-research-position__summary .selection-source-model-card__fields span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.material-research-position__summary .selection-source-model-card__fields strong {
  margin: 0;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-position__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  justify-self: end;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.material-research-position__toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.material-research-position[open] .material-research-position__toggle {
  transform: rotate(180deg);
}
.material-research-position__materials {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}
.material-research-area-group {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 10px;
}
.material-research-area-group > header {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  color: #111827;
}
.material-research-area-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #eef2f7;
}
.material-research-area-group > header strong,
.material-research-area-group > header small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.material-research-area-group > header small {
  grid-column: 2;
  color: #64748b;
  font-size: 12px;
}
.material-research-summary-row {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}
.material-research-summary-row + .material-research-summary-row {
  margin-top: 8px;
}
.material-research-summary-main {
  display: grid;
  grid-template-columns: 30px 52px minmax(116px, 1.1fr) minmax(116px, 1fr) minmax(110px, 0.9fr) auto auto auto 26px;
  gap: 9px;
  align-items: center;
  min-height: 68px;
  padding: 8px 10px;
  list-style: none;
  cursor: pointer;
}
.material-research-summary-main::-webkit-details-marker {
  display: none;
}
.material-research-sort-number {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.material-research-material-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 7px;
  background: #f8fafc;
}
.material-research-material-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.material-research-material-preview--empty::after {
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid rgba(100, 116, 139, 0.45);
  border-radius: 4px;
}
.material-research-summary-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.material-research-summary-cell small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.material-research-summary-cell strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-detail-toggle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.material-research-summary-row[open] .material-research-detail-toggle::before {
  transform: translateY(2px) rotate(225deg);
}
.material-research-summary-detail-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
}
.material-research-summary-detail {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.material-research-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.material-research-detail-field {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 7px;
  background: #fff;
}
.material-research-detail-field--wide {
  grid-column: span 2;
}
.material-research-detail-field dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}
.material-research-detail-field dd {
  margin: 3px 0 0;
  color: #111827;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.material-research-group-row__detail--research-redesign {
  grid-template-columns: minmax(280px, 0.38fr) minmax(0, 0.62fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  background: #f8fafc;
}
.material-research-detail-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #fff;
}
.material-research-detail-card h4,
.material-research-detail-card h5,
.material-research-groupwide-attachments h5 {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}
.material-research-detail-card__header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.material-research-detail-grid--original {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.material-research-original-preview {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
}
.material-research-original-preview__media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.material-research-original-preview__media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.material-research-original-preview__media--swatch span {
  width: min(170px, 46%);
  aspect-ratio: 1;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 10px;
  background: var(--material-research-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.material-research-original-preview__media--empty {
  padding: 20px;
}
.material-research-original-preview__identity {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.material-research-original-preview__identity span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.material-research-original-preview__identity strong {
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.material-research-original-preview__identity small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.material-research-proposal-accordion-list,
.material-research-groupwide-attachments,
.material-research-attachment-list {
  display: grid;
  gap: 10px;
}
.material-research-proposal-accordion {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #fff;
}
.material-research-proposal-accordion > summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  background: #fbfdff;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
}
.material-research-proposal-accordion > summary::-webkit-details-marker {
  display: none;
}
.material-research-proposal-accordion > summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: -3px;
}
.material-research-proposal-accordion[open] > summary {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.material-research-proposal-accordion[open] > summary .material-research-detail-toggle::before {
  transform: translateY(2px) rotate(225deg);
}
.material-research-proposal-accordion__body {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 0.68fr);
  gap: 16px;
  padding: 16px;
}
.material-research-proposal-image {
  display: grid;
  place-items: center;
  align-self: start;
  width: 100%;
  min-height: 150px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.material-research-proposal-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.material-research-proposal-image--empty {
  padding: 16px;
}
.material-research-detail-grid--proposal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.material-research-attachment-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}
.material-research-attachment-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 850;
}
.material-research-attachment-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.material-research-attachment-thumb.is-broken::after,
.material-research-original-preview__media.is-broken::after,
.material-research-proposal-image.is-broken::after {
  content: "Vorschau nicht verfügbar";
  padding: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.material-research-attachment-row__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.material-research-attachment-row__meta strong,
.material-research-attachment-row__meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-attachment-row__meta strong {
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}
.material-research-attachment-row__meta small {
  color: #64748b;
  font-size: 11px;
}
.material-research-detail-attachments,
.material-research-partner-result {
  display: grid;
  gap: 8px;
}
.material-research-detail-attachments h4,
.material-research-partner-result h4 {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}
.material-research-detail-attachment {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}
.material-research-detail-attachment__thumb,
.material-research-detail-attachment__thumb img {
  width: 44px;
  height: 44px;
}
.material-research-detail-attachment__thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: #e5e7eb;
}
.material-research-detail-attachment__thumb img {
  object-fit: contain;
}
.material-research-detail-attachment strong,
.material-research-detail-attachment small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-detail-attachment small {
  color: #64748b;
}
.material-research-partner-result {
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.material-research-positions .selection-material-summary-table-wrap {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
}
.material-research-positions .selection-material-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: #111827;
}
.material-research-positions .selection-material-col-area {
  width: 210px;
}
.material-research-positions .selection-material-col-actions {
  width: 172px;
}
.material-research-positions .selection-material-summary-table th {
  height: 46px;
  padding: 11px 16px;
  border-bottom: 1px solid #dbe3ee;
  background: #fbfdff;
  color: #42526e;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.material-research-positions .selection-material-summary-table td {
  height: 58px;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid #dbe3ee;
  background: #fff;
  vertical-align: middle;
}
.material-research-positions .selection-material-summary-table td + td,
.material-research-positions .selection-material-summary-table th + th {
  border-left: 1px solid #dbe3ee;
}
.material-research-positions .selection-material-summary-area-cell {
  background: #fbfdff !important;
}
.material-research-positions .selection-material-summary-area {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.material-research-positions .selection-material-summary-area img,
.material-research-positions .selection-material-summary-area svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.material-research-positions .selection-material-summary-area svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.material-research-positions .selection-material-summary-area strong {
  display: block;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.material-research-positions .selection-material-summary-area small {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid #d7e0ec;
  border-radius: 6px;
  background: #f3f6fa;
  color: #42526e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.material-research-positions .selection-material-summary-main {
  display: grid;
  grid-template-columns: 22px 38px 42px 50px minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(145px, 1fr) minmax(0, max-content) 38px;
  column-gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
}
.material-research-positions .selection-material-summary-drag {
  display: grid;
  place-items: center;
  width: 22px;
  height: 34px;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
}
.material-research-positions .selection-material-summary-order {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fbfdff;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}
.material-research-positions .selection-material-summary-preview {
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 5px;
  background: var(--selection-material-color, #f8fafc);
}
.material-research-positions .selection-material-summary-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.material-research-positions .selection-material-summary-preview--empty {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
}
.material-research-positions .selection-material-summary-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.material-research-positions .selection-material-summary-cell strong {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-positions .selection-material-summary-cell small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-positions .selection-material-source-badge {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  max-width: 128px;
  min-width: 0;
  min-height: 23px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-positions .selection-material-source-badge--original {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.09);
  color: #166534;
}
.material-research-positions .selection-material-source-badge--customer {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
}
.material-research-positions .selection-material-source-badge--known,
.material-research-positions .selection-material-source-badge--catalog {
  border-color: rgba(99, 102, 241, 0.16);
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
}
.material-research-positions .selection-material-source-badge--custom,
.material-research-positions .selection-material-source-badge--open {
  border-color: rgba(100, 116, 139, 0.18);
  background: #f8fafc;
  color: #475569;
}
.material-research-positions .selection-material-detail-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fff;
  color: #111827;
  cursor: pointer;
}
.material-research-positions .selection-material-detail-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.16s ease;
}
.material-research-positions .selection-material-detail-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.material-research-positions .selection-material-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 64px;
}
.material-research-positions .selection-material-summary-action {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-color: #dbe3ee;
  background: #fff;
}
.material-research-positions .selection-material-summary-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.material-research-positions .selection-material-summary-detail-row td {
  height: auto;
  padding: 0 !important;
  background: #fff;
}
.material-research-positions .selection-material-summary-detail-row td[data-label="Aktionen"] {
  border-left: 1px solid #dbe3ee;
}
.material-research-positions .selection-material-summary-detail {
  padding: 14px 16px;
  border: 1px solid #dbe3ee;
  background: #fbfcff;
}
.material-research-positions .selection-material-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.material-research-positions .selection-material-detail-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe3ee;
}
.material-research-positions .selection-material-detail-field--wide {
  grid-column: span 2;
}
.material-research-positions .selection-material-detail-field span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.material-research-positions .selection-material-detail-field strong {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.material-research-positions .selection-material-detail-attachments > div {
  display: grid;
  gap: 8px;
}
.material-research-positions .selection-material-detail-attachment {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.material-research-positions .selection-material-detail-attachment__preview,
.material-research-positions .selection-material-detail-attachment__preview img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.material-research-positions .selection-material-detail-attachment__preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  background: #eef2f7;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
}
.material-research-positions .selection-material-detail-attachment__preview img {
  display: block;
  object-fit: cover;
}
.material-research-positions .selection-material-detail-attachment__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.material-research-positions .selection-material-detail-attachment__meta strong,
.material-research-positions .selection-material-detail-attachment__meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-research-positions .selection-material-detail-attachment__meta small {
  color: #64748b;
  font-size: 11px;
}
.material-research-positions .material-research-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #f8fafc;
  color: #42526e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
@media (max-width: 1023px) {
  .material-research-area-group {
    grid-template-columns: 1fr;
  }
  .material-research-summary-main {
    grid-template-columns: 28px 52px minmax(0, 1fr) minmax(0, 1fr);
  }
  .material-research-summary-main > .selection-material-source-badge,
  .material-research-summary-main > .badge,
  .material-research-group-code,
  .material-research-detail-toggle {
    justify-self: start;
  }
  .material-research-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .material-research-group-row__detail--research-redesign {
    grid-template-columns: 1fr;
  }
  .material-research-proposal-accordion__body {
    grid-template-columns: minmax(130px, 0.36fr) minmax(0, 0.64fr);
  }
  .material-research-positions .selection-material-summary-main {
    grid-template-columns: 20px 34px 40px minmax(96px, 1fr) minmax(86px, 0.75fr) minmax(96px, 0.8fr) max-content 34px;
    gap: 9px;
  }
  .material-research-positions .selection-material-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .material-research-position__summary {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 8px;
    padding: 10px;
  }
  .material-research-position__summary .selection-source-model-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .material-research-position__summary .selection-source-model-card__image img,
  .material-research-position__summary .selection-source-model-card__image > span {
    width: 78px;
    height: 58px;
  }
  .material-research-position__summary .selection-source-model-card__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .material-research-position__summary .selection-source-model-card__fields > div {
    padding: 9px 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0;
  }
  .material-research-position__summary .selection-source-model-card__fields > div:first-child {
    border-top: 0;
  }
  .material-research-position__toggle {
    width: 36px;
    height: 36px;
  }
  .material-research-summary-main {
    grid-template-columns: 26px 48px minmax(0, 1fr) 26px;
  }
  .material-research-summary-main .material-research-summary-cell,
  .material-research-summary-main .selection-material-source-badge,
  .material-research-summary-main .badge,
  .material-research-summary-main .material-research-group-code {
    grid-column: 3 / -1;
  }
  .material-research-detail-grid,
  .material-research-detail-field--wide,
  .material-research-detail-attachment {
    grid-template-columns: 1fr;
    grid-column: 1;
  }
  .material-research-group-row__detail--research-redesign {
    padding: 12px;
  }
  .material-research-detail-card {
    padding: 12px;
  }
  .material-research-detail-card__header {
    display: grid;
    justify-items: start;
  }
  .material-research-original-preview__media {
    min-height: 180px;
    max-height: 280px;
  }
  .material-research-proposal-accordion__body,
  .material-research-detail-grid--original,
  .material-research-detail-grid--proposal,
  .material-research-attachment-row {
    grid-template-columns: 1fr;
  }
  .material-research-proposal-image {
    min-height: 180px;
    aspect-ratio: 4 / 3;
  }
  .material-research-attachment-thumb {
    justify-self: start;
  }
  .material-research-detail-attachment__thumb {
    justify-self: start;
  }
  .material-research-positions .selection-material-summary-table,
  .material-research-positions .selection-material-summary-table tbody,
  .material-research-positions .selection-material-summary-table tr,
  .material-research-positions .selection-material-summary-table td {
    display: block;
    width: 100%;
  }
  .material-research-positions .selection-material-summary-table thead {
    display: none;
  }
  .material-research-positions .selection-material-summary-table td,
  .material-research-positions .selection-material-summary-table td + td {
    height: auto;
    padding: 10px 12px;
    border-left: 0;
  }
  .material-research-positions .selection-material-summary-area-cell {
    border-top: 1px solid #dbe3ee;
  }
  .material-research-positions .selection-material-summary-main {
    grid-template-columns: 22px 34px 40px minmax(0, 1fr) 34px;
  }
  .material-research-positions .selection-material-summary-cell--color,
  .material-research-positions .selection-material-summary-cell--code,
  .material-research-positions .selection-material-source-badge {
    grid-column: 4 / 5;
    justify-self: start;
  }
  .material-research-positions .selection-material-detail-toggle {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
  }
  .material-research-positions .selection-material-summary-actions {
    justify-content: flex-start;
    min-height: 0;
  }
  .material-research-positions .selection-material-detail-grid,
  .material-research-positions .selection-material-detail-field--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-column: auto;
  }
  .material-research-positions .selection-material-detail-attachment {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .material-research-positions .selection-material-detail-attachment__open {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

body.page-projekt .project-customer-requests {
  margin: 14px 0;
}

body.page-projekt .project-customer-requests-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

body.page-projekt .project-customer-requests-counters span {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--muted-color, #6b7280);
}

body.page-projekt .project-customer-requests-counters strong {
  display: block;
  color: var(--text-color, #111827);
  font-size: 1.15rem;
}

body.page-projekt .project-customer-requests-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

body.page-projekt .project-customer-request-card {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

body.page-projekt .project-customer-request-card header,
body.page-projekt .project-customer-request-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

body.page-projekt .project-customer-request-card h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}

body.page-projekt .project-customer-request-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

body.page-projekt .project-customer-request-card dt {
  color: var(--muted-color, #6b7280);
  font-size: 0.78rem;
}

body.page-projekt .project-customer-request-card dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

body.page-projekt .project-customer-request-card footer {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.project-customer-request-dialog::backdrop {
  background: rgba(15, 23, 42, 0.38);
}

.project-customer-request-dialog__content {
  width: min(920px, calc(100vw - 28px));
  max-height: min(88vh, 920px);
  overflow: auto;
  padding: 18px;
}

.project-customer-request-dialog__content > header,
.project-customer-request-dialog__content > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.project-customer-request-dialog__content > footer {
  justify-content: flex-end;
  margin: 14px 0 0;
}

.project-customer-request-dialog__content .project-ticket-detail__head {
  margin-bottom: 14px;
}

.project-customer-request-dialog__content .project-ticket-context-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.project-customer-request-dialog__content .project-ticket-detail--chat {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.project-customer-request-dialog__content .project-ticket-chat-wrap {
  background: #f8faf9;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 16px;
}

.project-ticket-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-ticket-chat-message {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  max-width: 78%;
}

.project-ticket-chat-message--customer {
  align-self: flex-start;
  flex-direction: row;
}

.project-ticket-chat-message--portal {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.project-ticket-chat-avatar {
  align-items: center;
  background: #d8eee0;
  border: 1px solid #b9dbc5;
  border-radius: 999px;
  color: #14532d;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 0.78rem;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.project-ticket-chat-message--portal .project-ticket-chat-avatar {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #374151;
}

.project-ticket-chat-bubble {
  background: #ffffff;
  border: 1px solid #dfe8e2;
  border-radius: 12px;
  color: #111827;
  padding: 12px 14px;
}

.project-ticket-chat-message--customer .project-ticket-chat-bubble {
  background: #f3fbf6;
  border-color: #cfe8d8;
}

.project-ticket-chat-message--portal .project-ticket-chat-bubble {
  background: #f7f7f8;
  border-color: #e2e4e7;
}

.project-ticket-chat-bubble p {
  line-height: 1.45;
  margin: 0;
  white-space: pre-wrap;
}

.project-ticket-chat-bubble time {
  color: #667085;
  font-size: 12px;
}

.project-ticket-chat-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.project-ticket-chat-delete,
.project-ticket-chat-attachment-delete {
  font-size: 0.74rem;
  padding: 3px 7px;
}

.project-ticket-chat-attachments {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.project-ticket-chat-attachment-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.project-ticket-chat-attachment {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #111827;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  max-width: 100%;
  padding: 8px 10px;
  text-decoration: none;
}

.project-ticket-chat-attachment:hover,
.project-ticket-chat-attachment:focus-visible {
  border-color: #94a3b8;
  color: #0f172a;
  text-decoration: none;
}

.project-ticket-chat-attachment:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.project-ticket-chat-attachment__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-ticket-chat-attachment__body span,
.project-ticket-chat-attachment__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-ticket-chat-attachment__body span,
.project-ticket-attachment-input span {
  font-weight: 700;
}

.project-ticket-chat-attachment__body small,
.project-ticket-attachment-input small {
  color: #667085;
  font-size: 0.78rem;
}

.project-ticket-chat-attachment__download {
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
}

.project-ticket-attachment-input {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.project-customer-request-dialog__content .project-ticket-reply-form {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.pcr-management-section {
  border-top: 1px solid #e5e7eb;
  margin-top: 14px;
  padding-top: 12px;
}

.pcr-management-section summary {
  cursor: pointer;
  font-weight: 800;
}

.pcr-form-builder,
.pcr-timeline,
.pcr-history {
  display: grid;
  gap: 8px;
}

.pcr-field-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 140px minmax(110px, 0.7fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
}

.pcr-response-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.4fr) 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

@media (max-width: 760px) {
  body.page-projekt .project-customer-requests-counters,
  body.page-projekt .project-customer-request-card dl,
  .project-customer-request-dialog__content .pcr-detail-meta,
  .pcr-field-row,
  .pcr-response-row {
    grid-template-columns: 1fr;
  }

  .project-customer-request-dialog__content {
    width: min(100vw - 16px, 920px);
    max-height: 94vh;
    padding: 12px;
  }

  .project-ticket-chat-message {
    max-width: 88%;
  }

  .project-ticket-chat-attachment {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .project-ticket-chat-attachment-row {
    grid-template-columns: 1fr;
  }

  .project-ticket-chat-attachment__download {
    grid-column: 2;
  }

  .ticket-comment-actions {
    flex-wrap: wrap;
  }
}

body.page-quote-price-approval .price-approval-position-image,
body.page-quote-price-approval .price-approval-tech-nav-thumb,
body.page-quote-price-approval .price-approval-tech-image-frame,
body.page-quote-price-approval .price-approval-material-media,
body.page-quote-price-approval .price-approval-material-image-button {
  position: relative;
}

body.page-quote-price-approval .price-approval-position-image {
  width: 100px;
  height: 40px;
}

body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image {
  width: 112px;
  height: 66px;
}

body.page-quote-price-approval .price-approval-image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body.page-quote-price-approval .price-approval-image-placeholder[hidden] {
  display: none !important;
}

body.page-quote-price-approval .price-approval-image-placeholder--failed {
  gap: 6px;
}

@media (max-width: 980px) {
  body.page-quote-price-approval .price-approval-position-image,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image {
    width: 100%;
    height: 118px;
  }
}

@media (max-width: 520px) {
  body.page-quote-price-approval .price-approval-position-image,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image {
    width: 82px;
    height: 56px;
  }
}

.project-ticket-create-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.project-ticket-create-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.project-ticket-create-dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  padding: 18px;
}

.project-ticket-create-dialog header,
.project-ticket-create-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-ticket-create-dialog footer {
  margin-top: 14px;
  justify-content: flex-end;
}

.project-ticket-create-dialog .full-width {
  grid-column: 1 / -1;
}

.project-ticket-create-dialog .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-quote-price-approval {
  --qpa-blue: #2563eb;
  --qpa-text: #172033;
  --qpa-muted: #667085;
  --qpa-border: #dfe5ee;
  --qpa-border-soft: #e8edf5;
  --qpa-active: #f4f8ff;
  --qpa-bg: #f6f8fb;
  background: var(--qpa-bg);
  color: var(--qpa-text);
}

body.page-quote-price-approval .price-approval-shell {
  padding: 24px clamp(24px, 3vw, 36px) 36px;
  background: var(--qpa-bg);
}

body.page-quote-price-approval .public-container--wide,
body.page-quote-price-approval .public-container {
  max-width: 1520px;
  margin: 0 auto;
}

body.page-quote-price-approval .price-approval-header {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-quote-price-approval .price-approval-topbar,
body.page-quote-price-approval .price-approval-heading-row,
body.page-quote-price-approval .price-approval-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.page-quote-price-approval .price-approval-topbar {
  justify-content: space-between;
}

body.page-quote-price-approval .price-approval-title-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--qpa-muted);
  font-size: 13px;
  font-weight: 700;
}

body.page-quote-price-approval .price-approval-breadcrumb strong {
  color: var(--qpa-text);
}

body.page-quote-price-approval .public-title {
  margin: 0;
  color: var(--qpa-text);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: 0;
}

body.page-quote-price-approval .public-status-badge {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

body.page-quote-price-approval .quote-price-approval-meta {
  margin: 0;
  color: var(--qpa-muted);
}

body.page-quote-price-approval .price-approval-content {
  display: grid;
  gap: 14px;
}

body.page-quote-price-approval .card,
body.page-quote-price-approval .price-approval-general-info,
body.page-quote-price-approval .price-approval-position,
body.page-quote-price-approval .price-approval-final,
body.page-quote-price-approval .price-renegotiation-section {
  border: 1px solid var(--qpa-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

body.page-quote-price-approval .price-approval-general-info {
  display: grid;
  gap: 16px;
  padding: 20px;
}

body.page-quote-price-approval .price-approval-header {
  display: none;
}

body.page-quote-price-approval .price-approval-general-info h2,
body.page-quote-price-approval .price-approval-final h2 {
  margin: 0;
  color: var(--qpa-text);
  font-size: 18px;
  line-height: 1.25;
}

body.page-quote-price-approval .price-approval-info-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--qpa-border);
  border-radius: 9px;
}

body.page-quote-price-approval .price-approval-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 0.55fr)) minmax(360px, 1.65fr);
  gap: 12px;
}

body.page-quote-price-approval .price-approval-info-strip div,
body.page-quote-price-approval .price-approval-info-tile,
body.page-quote-price-approval .price-approval-info-notice {
  min-width: 0;
}

body.page-quote-price-approval .price-approval-info-strip span,
body.page-quote-price-approval .price-approval-info-tile span,
body.page-quote-price-approval .price-approval-position-facts dt {
  display: block;
  margin-bottom: 7px;
  color: var(--qpa-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

body.page-quote-price-approval .price-approval-info-strip strong,
body.page-quote-price-approval .price-approval-info-tile strong {
  display: block;
  color: var(--qpa-text);
  font-size: 17px;
  line-height: 1.35;
}

body.page-quote-price-approval .price-approval-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--qpa-blue);
}

body.page-quote-price-approval .price-approval-info-tile,
body.page-quote-price-approval .price-approval-info-notice {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--qpa-border);
  border-radius: 9px;
  background: #fff;
}

body.page-quote-price-approval .price-approval-info-notice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
}

body.page-quote-price-approval .price-approval-info-notice p {
  margin: 8px 0 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.55;
}

body.page-quote-price-approval .price-approval-note-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--qpa-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-supplier {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.page-quote-price-approval .price-approval-position-list {
  display: grid;
  gap: 14px;
}

body.page-quote-price-approval .price-approval-position {
  display: block;
  padding: 20px;
}

body.page-quote-price-approval .price-approval-position-head {
  display: grid;
  grid-template-columns: 42px 108px minmax(210px, 1fr) minmax(440px, 1.2fr);
  gap: 18px;
  align-items: start;
}

body.page-quote-price-approval .price-approval-position-index {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: var(--qpa-blue);
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-position-image img,
body.page-quote-price-approval .price-approval-position-image .price-approval-image-placeholder {
  width: 108px;
  height: 96px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #f8fafc;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-position-title strong {
  color: var(--qpa-text);
  font-size: 20px;
}

body.page-quote-price-approval .price-approval-position-title p,
body.page-quote-price-approval .price-approval-position-title span {
  margin: 4px 0 0;
  color: #344054;
  font-size: 14px;
}

body.page-quote-price-approval .price-approval-position-facts {
  display: grid;
  grid-template-columns: minmax(92px, 0.55fr) minmax(105px, 0.55fr) minmax(250px, 1fr);
  gap: 16px;
  margin: 0;
}

body.page-quote-price-approval .price-approval-position-facts div {
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-quote-price-approval .price-approval-position-facts dd {
  margin: 0;
  color: var(--qpa-text);
  font-size: 20px;
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-size-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 12px;
}

body.page-quote-price-approval .price-approval-size-table th,
body.page-quote-price-approval .price-approval-size-table td {
  padding: 7px 10px;
  border: 1px solid var(--qpa-border);
  text-align: center;
}

body.page-quote-price-approval .price-approval-position-detail-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

body.page-quote-price-approval .price-approval-materials-details,
body.page-quote-price-approval .price-approval-techpack {
  padding: 0;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

body.page-quote-price-approval .price-approval-materials-details > summary,
body.page-quote-price-approval .price-approval-techpack > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: #fbfdff;
  color: var(--qpa-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

body.page-quote-price-approval .price-approval-materials-details > summary:hover,
body.page-quote-price-approval .price-approval-techpack > summary:hover {
  background: #f1f7ff;
}

body.page-quote-price-approval .price-approval-materials-details[open] > summary,
body.page-quote-price-approval .price-approval-techpack[open] > summary {
  border-bottom: 1px solid #dfe5ee;
  background: #f8fbff;
}

body.page-quote-price-approval .price-approval-materials-details > summary::-webkit-details-marker,
body.page-quote-price-approval .price-approval-techpack > summary::-webkit-details-marker {
  display: none;
}

body.page-quote-price-approval .price-approval-materials-details > summary::after,
body.page-quote-price-approval .price-approval-techpack > summary::after {
  content: "⌄";
  color: var(--qpa-muted);
  font-size: 18px;
  line-height: 1;
}

body.page-quote-price-approval .price-approval-materials-details[open] > summary::after,
body.page-quote-price-approval .price-approval-techpack[open] > summary::after {
  content: "⌃";
}

body.page-quote-price-approval .price-approval-materials-content {
  padding: 14px 16px 16px;
}

body.page-quote-price-approval .price-approval-material-groups {
  display: grid;
  gap: 10px;
}

body.page-quote-price-approval .price-approval-material-group {
  min-width: 0;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

body.page-quote-price-approval .price-approval-material-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  background: #f8fafc;
  cursor: pointer;
  list-style: none;
}

body.page-quote-price-approval .price-approval-material-group-summary::-webkit-details-marker {
  display: none;
}

body.page-quote-price-approval .price-approval-material-group-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-group-summary strong,
body.page-quote-price-approval .price-approval-material-group-summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.page-quote-price-approval .price-approval-material-group-summary strong {
  color: var(--qpa-text);
  font-size: 14px;
}

body.page-quote-price-approval .price-approval-material-group-summary small {
  color: var(--qpa-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.page-quote-price-approval .price-approval-material-group-count {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #cfd7e3;
  border-radius: 999px;
  background: #fff;
  color: var(--qpa-text);
  font-size: 12px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-material-group-content {
  padding: 12px;
  border-top: 1px solid var(--qpa-border);
}

body.page-quote-price-approval .price-approval-material-group .price-approval-material-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

body.page-quote-price-approval .price-approval-material-group[data-material-count="1"] .price-approval-material-grid {
  grid-template-columns: minmax(280px, 520px);
  display: contents;
}

body.page-quote-price-approval .price-approval-material-group[data-material-count="2"] .price-approval-material-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-quote-price-approval .price-approval-material-group[data-material-count="3"] .price-approval-material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-quote-price-approval .price-approval-material-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 14px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

body.page-quote-price-approval .price-approval-material-item:hover {
  border-color: #93c5fd;
  background: var(--qpa-active);
}

body.page-quote-price-approval .price-approval-material-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-labels {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: auto;
}

body.page-quote-price-approval .price-approval-material-labels strong,
body.page-quote-price-approval .price-approval-material-labels p {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  writing-mode: horizontal-tb;
}

body.page-quote-price-approval .price-approval-material-type-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid #d8e0eb;
  border-radius: 999px;
  background: #eef4fb;
  color: #344256;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.page-quote-price-approval .price-approval-material-labels p,
body.page-quote-price-approval .price-approval-material-description {
  color: var(--qpa-text);
  font-size: 13px;
  line-height: 1.45;
}

body.page-quote-price-approval .price-approval-material-labels p,
body.page-quote-price-approval .price-approval-material-description {
  margin-top: 4px;
}

body.page-quote-price-approval .price-approval-material-color-preview {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  max-width: 130px;
}

body.page-quote-price-approval .price-approval-material-color-swatch {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  aspect-ratio: 1;
  border: 1px solid #cfd7e3;
  border-radius: 9px;
  background: var(--material-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

body.page-quote-price-approval .price-approval-material-color-value {
  display: inline;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--qpa-muted);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 400;
  white-space: nowrap;
}

body.page-quote-price-approval .price-approval-material-media {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-image-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 112px;
  padding: 8px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
}

body.page-quote-price-approval .price-approval-material-image-button img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-material-image-button .price-approval-image-placeholder {
  width: 100%;
  height: 112px;
  border: 0;
  background: #f8fafc;
}

body.page-quote-price-approval .price-approval-material-thumbnails {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

body.page-quote-price-approval .price-approval-material-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--qpa-border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

body.page-quote-price-approval .price-approval-material-thumb.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}

body.page-quote-price-approval .price-approval-material-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-material-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-meta small {
  display: inline;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--qpa-muted);
  background: transparent;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: normal;
}

body.page-quote-price-approval .price-approval-material-meta small + small::before {
  content: "·";
  margin-right: 8px;
  color: var(--qpa-muted);
}

body.page-quote-price-approval .price-approval-material-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-quote-price-approval .price-approval-material-item--details-open .price-approval-material-description {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

body.page-quote-price-approval .price-approval-material-detail-toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  color: #2563eb;
  background: transparent;
}

body.page-quote-price-approval .price-approval-material-extra {
  display: grid;
  gap: 6px;
  margin: 0;
}

body.page-quote-price-approval .price-approval-material-extra div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-extra dt {
  color: var(--qpa-muted);
  font-size: 11px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-material-extra dd {
  margin: 0;
  color: var(--qpa-text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

body.page-quote-price-approval .price-approval-material-files {
  display: grid;
  gap: 6px;
}

body.page-quote-price-approval .price-approval-material-files a {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  color: var(--qpa-text);
  background: #f8fafc;
  text-decoration: none;
}

body.page-quote-price-approval .price-approval-material-files small {
  color: var(--qpa-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  body.page-quote-price-approval .price-approval-material-group .price-approval-material-grid,
  body.page-quote-price-approval .price-approval-material-group[data-material-count="3"] .price-approval-material-grid,
  body.page-quote-price-approval .price-approval-material-group[data-material-count="4"] .price-approval-material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.page-quote-price-approval .price-approval-materials-content {
    padding: 10px;
  }

  body.page-quote-price-approval .price-approval-material-group .price-approval-material-grid,
  body.page-quote-price-approval .price-approval-material-group[data-material-count] .price-approval-material-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-material-group-summary {
    min-height: 48px;
    padding: 10px;
  }
}

body.page-quote-price-approval .price-approval-material-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.72);
}

body.page-quote-price-approval .price-approval-material-lightbox-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(980px, 100%);
  max-height: min(86vh, 760px);
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
}

body.page-quote-price-approval .price-approval-material-lightbox-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-quote-price-approval .price-approval-material-lightbox-dialog header div {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-quote-price-approval .price-approval-material-lightbox-frame {
  display: grid;
  place-items: center;
  min-height: 0;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #f8fafc;
  overflow: auto;
}

body.page-quote-price-approval .price-approval-material-lightbox-frame img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-tech-workspace {
  display: grid;
  grid-template-columns: minmax(190px, 21%) minmax(0, 49%) minmax(240px, 30%);
  gap: 12px;
  min-height: 0;
  padding: 16px;
}

body.page-quote-price-approval .price-approval-tech-sidebar,
body.page-quote-price-approval .price-approval-tech-stage-panel,
body.page-quote-price-approval .price-approval-tech-note-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #fff;
}

body.page-quote-price-approval .price-approval-tech-sidebar,
body.page-quote-price-approval .price-approval-tech-note-panel {
  overflow-y: auto;
  padding: 14px;
}

body.page-quote-price-approval .price-approval-tech-sidebar h4,
body.page-quote-price-approval .price-approval-tech-note-panel h4 {
  margin: 0 0 12px;
  color: var(--qpa-text);
  font-size: 14px;
}

body.page-quote-price-approval .price-approval-tech-nav {
  display: grid;
  gap: 8px;
}

body.page-quote-price-approval .price-approval-tech-nav-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #fbfdff;
  color: #344054;
  text-align: left;
  cursor: pointer;
}

body.page-quote-price-approval .price-approval-tech-nav-item.is-active {
  border-color: var(--qpa-blue);
  background: var(--qpa-active);
  color: var(--qpa-blue);
}

body.page-quote-price-approval .price-approval-tech-nav-thumb {
  display: grid;
  place-items: center;
  border: 1px solid var(--qpa-border);
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

body.page-quote-price-approval .price-approval-tech-nav-thumb {
  width: 62px;
}

body.page-quote-price-approval .price-approval-tech-nav-thumb img,
body.page-quote-price-approval .price-approval-tech-nav-thumb .price-approval-image-placeholder {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-tech-nav-item strong,
body.page-quote-price-approval .price-approval-tech-nav-item small {
  display: block;
  overflow-wrap: anywhere;
}

body.page-quote-price-approval .price-approval-tech-nav-item strong {
  font-size: 13px;
}

body.page-quote-price-approval .price-approval-tech-nav-item small {
  margin-top: 3px;
  color: var(--qpa-muted);
  font-size: 12px;
}

body.page-quote-price-approval .price-approval-tech-stage-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 14px;
}

body.page-quote-price-approval .price-approval-tech-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

body.page-quote-price-approval .price-approval-tech-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.page-quote-price-approval .price-approval-tech-controls .ghost {
  min-width: 34px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 7px;
}

body.page-quote-price-approval .price-approval-tech-view-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

body.page-quote-price-approval .price-approval-tech-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

body.page-quote-price-approval .price-approval-tech-image-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(var(--qpa-view-zoom, 1));
  transform-origin: center center;
}

body.page-quote-price-approval .price-approval-tech-image-canvas > img[data-price-approval-image],
body.page-quote-price-approval .price-approval-tech-image-canvas > .price-approval-image-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-tech-annotation-stage {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  opacity: 1;
}

body.page-quote-price-approval .price-approval-tech-geometry {
  background: transparent;
}

body.page-quote-price-approval .price-approval-annotation-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-quote-price-approval .price-approval-annotation-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

body.page-quote-price-approval .price-approval-annotation-number,
body.page-quote-price-approval .price-approval-tech-marker {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marker-color, #1d1d1f);
  color: #fff;
  font-weight: 800;
  line-height: 1;
}

body.page-quote-price-approval .price-approval-annotation-number {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

body.page-quote-price-approval .price-approval-annotation-list p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
}

body.page-quote-price-approval .price-approval-annotation-list a {
  display: inline-block;
  margin-top: 4px;
  color: var(--qpa-blue);
  font-size: 12px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-price-panel {
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--qpa-border);
  border-radius: 9px;
  background: #fff;
}

body.page-quote-price-approval .price-approval-tech-workspace:fullscreen {
  grid-template-columns: minmax(220px, 20%) minmax(0, 1fr) minmax(260px, 24%);
  width: 100vw;
  height: 100vh;
  padding: 16px;
  background: #f8fafc;
}

body.page-quote-price-approval .price-approval-price-panel-head {
  margin-bottom: 10px;
}

body.page-quote-price-approval .price-approval-price-workspace {
  grid-template-columns: minmax(210px, 0.8fr) minmax(360px, 1.45fr) minmax(260px, 0.9fr);
}

body.page-quote-price-approval .price-approval-tier-row {
  grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) 80px 70px;
}

body.page-quote-price-approval .price-approval-note-field textarea {
  min-height: 112px;
}

body.page-quote-price-approval .price-approval-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

body.page-quote-price-approval .price-approval-final {
  display: grid;
  gap: 14px;
  padding: 22px;
}

body.page-quote-price-approval .price-approval-final-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 42px;
  align-items: start;
}

body.page-quote-price-approval .price-approval-final-left {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-final-grid label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-final-grid input[type="text"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  padding: 9px 12px;
  background: #fff;
}

body.page-quote-price-approval .price-approval-check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #344054;
  line-height: 1.55;
}

body.page-quote-price-approval .price-approval-check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

body.page-quote-price-approval .price-approval-signature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

body.page-quote-price-approval .price-approval-signature canvas {
  width: 100%;
  height: 172px;
  border: 1px solid var(--qpa-border);
  border-radius: 8px;
  background: #fff;
  touch-action: none;
}

body.page-quote-price-approval .price-approval-missing-warning {
  padding: 14px 16px;
  border: 1px solid #f2c65d;
  border-radius: 8px;
  background: #fff8e8;
  color: #92400e;
}

body.page-quote-price-approval .price-approval-missing-warning strong,
body.page-quote-price-approval .price-approval-missing-warning p {
  margin: 0;
}

body.page-quote-price-approval .price-approval-final-actions {
  justify-content: flex-end;
}

body.page-quote-price-approval .price-approval-final-actions [data-role="final-feedback"] {
  order: -1;
  margin-right: auto;
}

body.page-quote-price-approval .price-approval-header-actions .btn,
body.page-quote-price-approval .price-approval-final-actions .btn {
  border-color: var(--qpa-blue);
  background: var(--qpa-blue);
  color: #fff;
}

body.page-quote-price-approval .price-approval-header-actions .ghost,
body.page-quote-price-approval .price-approval-final-actions .ghost {
  border-color: #bfdbfe;
  background: #fff;
  color: var(--qpa-blue);
}

@media (max-width: 1200px) {
  body.page-quote-price-approval .price-approval-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-quote-price-approval .price-approval-info-notice {
    grid-column: 1 / -1;
  }

  body.page-quote-price-approval .price-approval-position-head {
    grid-template-columns: 42px 96px minmax(180px, 1fr);
  }

  body.page-quote-price-approval .price-approval-position-facts {
    grid-column: 1 / -1;
  }

  body.page-quote-price-approval .price-approval-tech-workspace {
    grid-template-columns: minmax(170px, 23%) minmax(0, 47%) minmax(220px, 30%);
  }

  body.page-quote-price-approval .price-approval-price-workspace {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  }

  body.page-quote-price-approval .price-approval-price-workspace .price-approval-note-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  body.page-quote-price-approval .price-approval-topbar,
  body.page-quote-price-approval .price-approval-final-grid {
    grid-template-columns: 1fr;
  }

  body.page-quote-price-approval .price-approval-topbar {
    display: grid;
  }

  body.page-quote-price-approval .price-approval-header-actions {
    justify-content: flex-start;
  }

  body.page-quote-price-approval .price-approval-info-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-quote-price-approval .price-approval-tech-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
    height: auto;
  }

  body.page-quote-price-approval .price-approval-tech-sidebar {
    grid-column: 1 / -1;
    overflow-x: auto;
  }

  body.page-quote-price-approval .price-approval-tech-nav {
    display: flex;
  }

  body.page-quote-price-approval .price-approval-tech-nav-item {
    flex: 0 0 190px;
  }

  body.page-quote-price-approval .price-approval-tech-view-media {
    min-height: 420px;
  }
}

@media (max-width: 680px) {
  body.page-quote-price-approval .price-approval-shell {
    padding: 16px 12px 28px;
  }

  body.page-quote-price-approval .price-approval-heading-row,
  body.page-quote-price-approval .price-approval-header-actions,
  body.page-quote-price-approval .price-approval-final-actions {
    flex-wrap: wrap;
  }

  body.page-quote-price-approval .price-approval-header-actions .btn,
  body.page-quote-price-approval .price-approval-header-actions .ghost,
  body.page-quote-price-approval .price-approval-final-actions .btn,
  body.page-quote-price-approval .price-approval-final-actions .ghost {
    flex: 1 1 100%;
  }

  body.page-quote-price-approval .price-approval-general-info,
  body.page-quote-price-approval .price-approval-position,
  body.page-quote-price-approval .price-approval-final {
    padding: 14px;
  }

  body.page-quote-price-approval .price-approval-info-strip,
  body.page-quote-price-approval .price-approval-info-grid,
  body.page-quote-price-approval .price-approval-position-head,
  body.page-quote-price-approval .price-approval-position-facts,
  body.page-quote-price-approval .price-approval-tech-workspace,
  body.page-quote-price-approval .price-approval-price-workspace,
  body.page-quote-price-approval .price-approval-final-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-position-image img,
  body.page-quote-price-approval .price-approval-position-image .price-approval-image-placeholder {
    width: 96px;
    height: 80px;
  }

  body.page-quote-price-approval .price-approval-material-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-material-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-material-item-head {
    display: grid;
  }

  body.page-quote-price-approval .price-approval-material-color-preview {
    width: auto;
    max-width: 130px;
  }

  body.page-quote-price-approval .price-approval-material-image-button,
  body.page-quote-price-approval .price-approval-material-image-button img,
  body.page-quote-price-approval .price-approval-material-image-button .price-approval-image-placeholder {
    max-height: 130px;
  }

  body.page-quote-price-approval .price-approval-material-image-button {
    min-height: 112px;
  }

  body.page-quote-price-approval .price-approval-material-lightbox-dialog {
    max-height: 88vh;
  }

  body.page-quote-price-approval .price-approval-material-lightbox-dialog header {
    display: grid;
  }

  body.page-quote-price-approval .price-approval-material-lightbox-dialog header,
  body.page-quote-price-approval .price-approval-material-lightbox-dialog header div {
    align-items: stretch;
  }

  body.page-quote-price-approval .price-approval-tech-workspace {
    padding: 0 10px 10px;
  }

  body.page-quote-price-approval .price-approval-tech-stage-panel,
  body.page-quote-price-approval .price-approval-tech-sidebar,
  body.page-quote-price-approval .price-approval-tech-note-panel {
    padding: 10px;
  }

  body.page-quote-price-approval .price-approval-tech-view-media {
    min-height: 320px;
  }

  body.page-quote-price-approval .price-approval-tier-row,
  body.page-quote-price-approval .price-approval-tier-row--head {
    grid-template-columns: minmax(90px, 1fr) minmax(92px, 1fr) 60px;
  }

  body.page-quote-price-approval .price-approval-tier-row > .price-approval-field-status,
  body.page-quote-price-approval .price-approval-tier-row--head span:last-child {
    display: none;
  }

  body.page-quote-price-approval .price-approval-size-table {
    min-width: 0;
  }
}

body.page-quote-price-approval {
  --qpa-blue: #2563eb;
  --qpa-blue-strong: #1d4ed8;
  --qpa-text: #111c36;
  --qpa-muted: #5d6b85;
  --qpa-soft: #f7f9fc;
  --qpa-line: #dce4ef;
  --qpa-line-soft: #e9eef6;
  background: #f5f7fb;
}

body.page-quote-price-approval .price-approval-shell {
  width: 100%;
  max-width: none;
  padding: 0 30px 28px;
}

body.page-quote-price-approval .public-container,
body.page-quote-price-approval .public-container--wide {
  width: 100%;
  max-width: 1468px;
  margin: 0 auto;
}

body.page-quote-price-approval .quote-price-approval-public-content {
  gap: 12px;
  padding-top: 16px;
}

body.page-quote-price-approval .public-footer {
  padding: 12px 0 0;
  color: #8a97ad;
  font-size: 12px;
}

body.page-quote-price-approval .price-approval-public-header {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 64px;
  margin: -16px -30px 16px;
  padding: 0 30px;
  border-bottom: 1px solid var(--qpa-line-soft);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

body.page-quote-price-approval .price-approval-brand,
body.page-quote-price-approval .price-approval-header-title,
body.page-quote-price-approval .price-approval-header-tools {
  display: flex;
  align-items: center;
  min-width: 0;
}

body.page-quote-price-approval .price-approval-brand {
  gap: 10px;
}

body.page-quote-price-approval .price-approval-brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid #6b7892;
  border-radius: 7px 7px 12px 12px;
  color: #6b7892;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

body.page-quote-price-approval .price-approval-brand-text {
  display: grid;
  gap: 0;
  color: var(--qpa-text);
  line-height: 1.05;
}

body.page-quote-price-approval .price-approval-brand-text strong {
  font-size: 22px;
  letter-spacing: 0;
}

body.page-quote-price-approval .price-approval-brand-text small {
  color: #59677f;
  font-size: 9px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-header-divider {
  width: 1px;
  height: 30px;
  background: #cfd8e7;
}

body.page-quote-price-approval .price-approval-header-title {
  gap: 12px;
}

body.page-quote-price-approval .price-approval-header-title h1 {
  margin: 0;
  color: var(--qpa-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
}

body.page-quote-price-approval .price-approval-request-pill,
body.page-quote-price-approval .price-approval-language-pill,
body.page-quote-price-approval .price-approval-help-pill,
body.page-quote-price-approval .price-approval-info-strip em,
body.page-quote-price-approval .price-approval-row-status,
body.page-quote-price-approval .price-approval-field-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid #d8e1ee;
  border-radius: 7px;
  background: #f7f9fd;
  color: #45607f;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

body.page-quote-price-approval .price-approval-header-tools {
  gap: 14px;
}

body.page-quote-price-approval .price-approval-language-pill span {
  margin-right: 7px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e11d2e;
  color: #fff;
  font-size: 10px;
}

body.page-quote-price-approval .price-approval-help-pill {
  border-color: #d8e6ff;
  background: #f6f9ff;
  color: var(--qpa-blue);
}

body.page-quote-price-approval .price-approval-general-info,
body.page-quote-price-approval .price-approval-progress-card,
body.page-quote-price-approval .price-approval-position,
body.page-quote-price-approval .price-approval-final {
  border: 1px solid var(--qpa-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

body.page-quote-price-approval .price-approval-general-info {
  gap: 12px;
  padding: 16px 22px;
}

body.page-quote-price-approval .price-approval-info-strip {
  grid-template-columns: 1.05fr 1.15fr 1.25fr;
  gap: 28px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--qpa-line-soft);
  border-radius: 0;
}

body.page-quote-price-approval .price-approval-info-strip span,
body.page-quote-price-approval .price-approval-info-tile span,
body.page-quote-price-approval .price-approval-progress-card span,
body.page-quote-price-approval .price-approval-position-facts dt {
  margin-bottom: 5px;
  color: #61708b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

body.page-quote-price-approval .price-approval-info-strip strong {
  color: var(--qpa-text);
  font-size: 16px;
  line-height: 1.3;
}

body.page-quote-price-approval .price-approval-info-strip em {
  margin-left: 8px;
  min-height: 20px;
  padding: 2px 8px;
  border-color: #d8e7ff;
  background: #eef5ff;
  color: var(--qpa-blue);
  font-size: 11px;
}

body.page-quote-price-approval .price-approval-info-grid {
  grid-template-columns: minmax(160px, 0.7fr) minmax(160px, 0.7fr) minmax(150px, 0.65fr) minmax(420px, 2.25fr);
  gap: 10px;
}

body.page-quote-price-approval .price-approval-info-tile,
body.page-quote-price-approval .price-approval-info-notice {
  min-height: 96px;
  padding: 14px;
  border-radius: 7px;
}

body.page-quote-price-approval .price-approval-info-tile strong {
  color: var(--qpa-text);
  font-size: 20px;
  line-height: 1.25;
}

body.page-quote-price-approval .price-approval-info-tile small {
  color: #59677f;
  font-size: 12px;
  font-weight: 500;
}

body.page-quote-price-approval .price-approval-info-notice {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
}

body.page-quote-price-approval .price-approval-info-notice strong {
  color: var(--qpa-text);
  font-size: 14px;
}

body.page-quote-price-approval .price-approval-info-notice p {
  margin-top: 6px;
  color: #34425d;
  font-size: 12px;
  line-height: 1.45;
}

body.page-quote-price-approval .price-approval-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  min-height: 68px;
  padding: 12px 24px;
}

body.page-quote-price-approval .price-approval-progress-label {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

body.page-quote-price-approval .price-approval-progress-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-width: 0;
  padding: 0 56px 0 8px;
}

body.page-quote-price-approval .price-approval-progress-step {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border-radius: 999px;
  overflow: visible;
  background: #e8edf5;
  color: #4f5f78;
  font-size: 11px;
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-progress-step::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  z-index: -1;
  width: calc((100vw - 620px) / 10);
  max-width: 110px;
  min-width: 28px;
  height: 1px;
  background: #d9e1ec;
}

body.page-quote-price-approval .price-approval-progress-step:first-child::before {
  display: none;
}

body.page-quote-price-approval .price-approval-progress-step.is-active,
body.page-quote-price-approval .price-approval-progress-step.is-complete {
  background: var(--qpa-blue);
  color: #fff;
}

body.page-quote-price-approval .price-approval-progress-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 7px;
  padding-left: 32px;
  border-left: 1px solid var(--qpa-line);
}

body.page-quote-price-approval .price-approval-progress-summary span {
  grid-column: 1 / -1;
}

body.page-quote-price-approval .price-approval-progress-summary strong {
  color: var(--qpa-text);
  font-size: 20px;
  line-height: 1;
}

body.page-quote-price-approval .price-approval-progress-summary small {
  color: #61708b;
  font-size: 13px;
}

body.page-quote-price-approval .price-approval-position-list {
  gap: 8px;
}

body.page-quote-price-approval .price-approval-position {
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

body.page-quote-price-approval .price-approval-position.is-active {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

body.page-quote-price-approval .price-approval-position-head {
  grid-template-columns: 38px 120px minmax(210px, 1.1fr) minmax(520px, 2fr) 26px;
  gap: 18px;
  align-items: center;
  min-height: 84px;
  padding: 9px 14px;
  cursor: pointer;
}

body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-head {
  min-height: 94px;
  padding: 14px;
}

body.page-quote-price-approval .price-approval-position-index {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #eaf2ff;
  color: var(--qpa-blue);
  font-size: 13px;
}

body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-index {
  width: 30px;
  height: 30px;
  background: var(--qpa-blue);
  color: #fff;
}

body.page-quote-price-approval .price-approval-position-image img,
body.page-quote-price-approval .price-approval-position-image .price-approval-image-placeholder {
  width: 100px;
  height: 40px;
  border-radius: 5px;
}

body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image img,
body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image .price-approval-image-placeholder {
  width: 112px;
  height: 66px;
  border-radius: 7px;
}

body.page-quote-price-approval .price-approval-position-title strong {
  font-size: 16px;
}

body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-title strong {
  font-size: 19px;
}

body.page-quote-price-approval .price-approval-position-title p,
body.page-quote-price-approval .price-approval-position-title span {
  display: inline-flex;
  margin: 4px 6px 0 0;
  color: #42516b;
  font-size: 12px;
}

body.page-quote-price-approval .price-approval-position-title span {
  padding: 3px 8px;
  border-radius: 6px;
  background: #eef3fb;
}

body.page-quote-price-approval .price-approval-position-facts {
  grid-template-columns: minmax(100px, 0.55fr) minmax(300px, 1.35fr) minmax(126px, 0.6fr);
  gap: 14px;
  align-items: center;
}

body.page-quote-price-approval .price-approval-position-facts dd {
  font-size: 15px;
  line-height: 1.2;
}

body.page-quote-price-approval .price-approval-position-facts dd small {
  color: #5d6b85;
  font-size: 12px;
  font-weight: 500;
}

body.page-quote-price-approval .price-approval-size-table {
  min-width: 290px;
  background: #fff;
  font-size: 11px;
}

body.page-quote-price-approval .price-approval-size-table th,
body.page-quote-price-approval .price-approval-size-table td {
  min-width: 42px;
  padding: 4px 8px;
}

body.page-quote-price-approval .price-approval-size-table th:first-child {
  min-width: 56px;
  background: #fbfcfe;
  color: #43526a;
}

body.page-quote-price-approval .price-approval-row-status {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c46a00;
}

body.page-quote-price-approval .price-approval-row-status.is-complete {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

body.page-quote-price-approval .price-approval-position-toggle {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #52627a;
  font-size: 18px;
  cursor: pointer;
}

body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-toggle {
  transform: rotate(180deg);
}

body.page-quote-price-approval .price-approval-mobile-facts {
  display: none;
}

body.page-quote-price-approval .price-approval-position-detail-stack {
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--qpa-line);
}

body.page-quote-price-approval .price-approval-position:not(.is-active) .price-approval-position-detail-stack,
body.page-quote-price-approval .price-approval-position:not(.is-active) .price-approval-mobile-facts {
  display: none;
}

body.page-quote-price-approval .price-approval-materials-details,
body.page-quote-price-approval .price-approval-techpack,
body.page-quote-price-approval .price-approval-packaging {
  border-width: 0 0 1px;
  border-color: var(--qpa-line);
  border-radius: 0;
}

body.page-quote-price-approval .price-approval-materials-details > summary,
body.page-quote-price-approval .price-approval-techpack > summary,
body.page-quote-price-approval .price-approval-packaging > summary {
  min-height: 38px;
  padding: 0 16px;
  background: #fbfdff;
}

body.page-quote-price-approval .price-approval-materials-details > summary span::before,
body.page-quote-price-approval .price-approval-techpack > summary span::before,
body.page-quote-price-approval .price-approval-packaging > summary span::before {
  content: "+";
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  place-items: center;
  border-radius: 5px;
  color: var(--qpa-blue);
  font-weight: 900;
}

body.page-quote-price-approval .price-approval-materials-details > summary::after,
body.page-quote-price-approval .price-approval-techpack > summary::after,
body.page-quote-price-approval .price-approval-packaging > summary::after {
  content: "⌄";
}

body.page-quote-price-approval .price-approval-price-panel {
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 0;
}

body.page-quote-price-approval .price-approval-price-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body.page-quote-price-approval .price-approval-price-panel-head h3 {
  color: var(--qpa-text);
  font-size: 13px;
}

body.page-quote-price-approval .price-approval-price-panel-head p {
  margin: 3px 0 0;
  color: #5d6b85;
  font-size: 11px;
}

body.page-quote-price-approval .price-approval-price-workspace {
  display: grid;
  grid-template-columns: minmax(270px, 0.65fr) minmax(420px, 1.05fr) minmax(360px, 0.9fr);
  gap: 20px;
  align-items: start;
}

body.page-quote-price-approval .price-approval-normal-price label,
body.page-quote-price-approval .price-approval-note-field label {
  color: #1c2940;
  font-size: 12px;
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-input-with-currency {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  border: 1px solid var(--qpa-line);
  border-radius: 5px;
  overflow: hidden;
}

body.page-quote-price-approval .price-approval-input-with-currency input,
body.page-quote-price-approval .price-approval-tier-row input,
body.page-quote-price-approval .price-approval-note-field textarea,
body.page-quote-price-approval .price-approval-final-grid input[type="text"] {
  min-height: 34px;
  border: 1px solid var(--qpa-line);
  border-radius: 5px;
  color: var(--qpa-text);
  font-size: 12px;
  box-shadow: none;
}

body.page-quote-price-approval .price-approval-input-with-currency input {
  border: 0;
  border-radius: 0;
}

body.page-quote-price-approval .price-approval-input-with-currency input + input {
  border-left: 1px solid var(--qpa-line);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

body.page-quote-price-approval .price-approval-tier-table {
  overflow-x: auto;
}

body.page-quote-price-approval .price-approval-tier-row {
  display: grid;
  grid-template-columns: minmax(135px, 1fr) minmax(120px, 1fr) 70px 114px;
  gap: 6px;
  align-items: center;
  min-width: 500px;
}

body.page-quote-price-approval .price-approval-tier-row--head {
  color: #5d6b85;
  font-size: 11px;
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-tier-list {
  display: grid;
  gap: 6px;
}

body.page-quote-price-approval .price-approval-tier-label {
  color: var(--qpa-text);
  font-size: 12px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-field-status {
  min-height: 26px;
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c46a00;
  font-size: 11px;
}

body.page-quote-price-approval .price-approval-field-status[data-price-field-status="approved"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

body.page-quote-price-approval .price-approval-note-field textarea {
  min-height: 58px;
  resize: vertical;
}

body.page-quote-price-approval .price-approval-actions {
  justify-content: flex-end;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--qpa-line-soft);
}

body.page-quote-price-approval .price-approval-actions .btn,
body.page-quote-price-approval .price-approval-final-actions .btn,
body.page-quote-price-approval .price-approval-actions .ghost,
body.page-quote-price-approval .price-approval-final-actions .ghost {
  min-height: 34px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-final {
  gap: 10px;
  padding: 14px 20px 12px;
}

body.page-quote-price-approval .price-approval-final h2 {
  font-size: 14px;
}

body.page-quote-price-approval .price-approval-final > .muted,
body.page-quote-price-approval .price-approval-complete-hint {
  margin: 0;
  color: #5d6b85;
  font-size: 12px;
}

body.page-quote-price-approval .price-approval-final-grid {
  grid-template-columns: minmax(230px, 0.7fr) minmax(230px, 0.55fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: end;
}

body.page-quote-price-approval .price-approval-final-left {
  display: contents;
}

body.page-quote-price-approval .price-approval-signature canvas {
  height: 56px;
}

body.page-quote-price-approval .price-approval-signature-head {
  margin: 0 0 5px;
}

body.page-quote-price-approval .price-approval-check {
  padding: 0;
  font-size: 12px;
  line-height: 1.35;
}

body.page-quote-price-approval .price-approval-missing-warning {
  width: fit-content;
  max-width: 390px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 5px;
}

body.page-quote-price-approval .price-approval-final-actions {
  padding: 0;
  border: 0;
}

body.page-quote-price-approval .price-approval-final-actions [data-role="final-feedback"] {
  align-self: center;
}

body.page-quote-price-approval .price-approval-progress-step {
  border: 0;
  cursor: pointer;
}

body.page-quote-price-approval .price-approval-progress-step.is-complete {
  background: #16a34a;
}

body.page-quote-price-approval .price-approval-progress-step.is-active {
  background: var(--qpa-blue);
}

body.page-quote-price-approval .price-approval-progress-step.is-active.is-complete {
  background: var(--qpa-blue);
  box-shadow: 0 0 0 3px #dbeafe;
}

body.page-quote-price-approval .price-approval-main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--qpa-line-soft);
  background: #fbfdff;
}

body.page-quote-price-approval .price-approval-main-tab {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-right: 1px solid var(--qpa-line-soft);
  background: #fbfdff;
  color: var(--qpa-text);
  text-align: left;
  cursor: pointer;
}

body.page-quote-price-approval .price-approval-main-tab:last-child {
  border-right: 0;
}

body.page-quote-price-approval .price-approval-main-tab > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 5px;
  background: #eef5ff;
  color: var(--qpa-blue);
  font-size: 12px;
  font-weight: 900;
}

body.page-quote-price-approval .price-approval-main-tab strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-quote-price-approval .price-approval-main-tab small {
  color: #7a879b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

body.page-quote-price-approval .price-approval-main-tab.is-active {
  background: #eff6ff;
  box-shadow: inset 0 -2px 0 var(--qpa-blue);
}

body.page-quote-price-approval .price-approval-tab-panel {
  padding: 12px 14px;
  border-bottom: 1px solid var(--qpa-line-soft);
  background: #fff;
}

body.page-quote-price-approval .price-approval-tab-panel[hidden] {
  display: none !important;
}

body.page-quote-price-approval .price-approval-tab-panel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--qpa-text);
}

body.page-quote-price-approval .price-approval-tab-panel-meta span {
  color: #7a879b;
  font-size: 11px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-material-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-quote-price-approval .price-approval-material-group {
  display: contents;
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-quote-price-approval .price-approval-material-group-summary {
  display: none;
  align-items: baseline;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-quote-price-approval .price-approval-material-group-summary strong {
  color: var(--qpa-text);
  font-size: 12px;
  font-weight: 850;
}

body.page-quote-price-approval .price-approval-material-group-summary small {
  color: #7a879b;
  font-size: 11px;
}

body.page-quote-price-approval .price-approval-material-grid {
  display: contents;
}

body.page-quote-price-approval .price-approval-material-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  min-height: 104px;
  padding: 10px;
  border: 1px solid var(--qpa-line-soft);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

body.page-quote-price-approval .price-approval-material-item:not(.price-approval-material-item--has-media) {
  grid-template-columns: minmax(0, 1fr);
}

body.page-quote-price-approval .price-approval-material-media {
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-image-button {
  width: 96px;
  min-height: 84px;
  max-height: 96px;
  border-color: var(--qpa-line-soft);
  border-radius: 6px;
}

body.page-quote-price-approval .price-approval-material-image-button img,
body.page-quote-price-approval .price-approval-material-image-button .price-approval-image-placeholder {
  width: 100%;
  height: 84px;
  max-height: 96px;
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-material-thumbnails,
body.page-quote-price-approval .price-approval-material-files {
  display: none;
}

body.page-quote-price-approval .price-approval-material-item-body {
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 4px;
}

body.page-quote-price-approval .price-approval-material-labels {
  min-width: 0;
}

body.page-quote-price-approval .price-approval-material-labels strong {
  display: block;
  overflow: hidden;
  color: var(--qpa-text);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-quote-price-approval .price-approval-material-type-badge {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 3px;
  padding: 2px 6px;
  border: 1px solid #dbe7f8;
  border-radius: 5px;
  background: #f8fbff;
  color: #52627a;
  font-size: 10px;
  font-weight: 800;
}

body.page-quote-price-approval .price-approval-material-color-preview {
  flex: 0 0 auto;
  width: auto;
  max-width: 112px;
  min-height: 24px;
  padding: 3px 6px;
  border-color: var(--qpa-line-soft);
  border-radius: 5px;
}

body.page-quote-price-approval .price-approval-material-color-swatch {
  width: 16px;
  height: 16px;
}

body.page-quote-price-approval .price-approval-material-color-value,
body.page-quote-price-approval .price-approval-material-meta small,
body.page-quote-price-approval .price-approval-material-description {
  font-size: 11px;
  line-height: 1.35;
}

body.page-quote-price-approval .price-approval-material-description {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.page-quote-price-approval .price-approval-material-detail-toggle {
  min-height: 26px;
  margin-top: 6px;
  padding: 3px 8px;
}

body.page-quote-price-approval .price-approval-material-extra,
body.page-quote-price-approval .price-approval-material-detail-only {
  display: none;
}

body.page-quote-price-approval .price-approval-material-item--details-open .price-approval-material-extra,
body.page-quote-price-approval .price-approval-material-item--details-open .price-approval-material-detail-only {
  display: grid;
}

body.page-quote-price-approval .price-approval-material-item--details-open .price-approval-material-description {
  display: block;
  overflow: visible;
}

body.page-quote-price-approval .price-approval-tech-notes {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--qpa-line-soft);
  border-radius: 6px;
  background: #fbfdff;
}

body.page-quote-price-approval .price-approval-tech-notes p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

body.page-quote-price-approval .price-approval-tech-workspace {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 260px;
  gap: 10px;
  min-height: 0;
  padding: 0;
}

body.page-quote-price-approval .price-approval-tech-sidebar,
body.page-quote-price-approval .price-approval-tech-stage-panel,
body.page-quote-price-approval .price-approval-tech-note-panel {
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--qpa-line-soft);
  border-radius: 7px;
  background: #fff;
}

body.page-quote-price-approval .price-approval-tech-sidebar h4,
body.page-quote-price-approval .price-approval-tech-note-panel h4 {
  margin: 0 0 8px;
  font-size: 12px;
}

body.page-quote-price-approval .price-approval-tech-nav {
  display: grid;
  gap: 6px;
  max-height: 344px;
  overflow-y: auto;
}

body.page-quote-price-approval .price-approval-tech-nav-item {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  min-height: 58px;
  padding: 5px;
  border-color: var(--qpa-line-soft);
  border-radius: 6px;
}

body.page-quote-price-approval .price-approval-tech-nav-thumb,
body.page-quote-price-approval .price-approval-tech-nav-thumb img,
body.page-quote-price-approval .price-approval-tech-nav-thumb .price-approval-image-placeholder {
  width: 46px;
  height: 46px;
}

body.page-quote-price-approval .price-approval-tech-nav-thumb {
  flex: 0 0 46px;
}

body.page-quote-price-approval .price-approval-tech-nav-thumb img {
  display: block;
}

body.page-quote-price-approval .price-approval-tech-stage-head {
  min-height: 30px;
  margin: 0 0 8px;
}

body.page-quote-price-approval .price-approval-tech-view-media {
  min-height: 0;
  height: 350px;
}

body.page-quote-price-approval .price-approval-tech-image-frame {
  height: 100%;
  min-height: 0;
}

body.page-quote-price-approval .price-approval-tech-image-canvas {
  width: 100%;
  height: 100%;
}

body.page-quote-price-approval .price-approval-tech-image-canvas img {
  object-fit: contain;
}

body.page-quote-price-approval .price-approval-tech-note-panel {
  max-height: 390px;
  overflow-y: auto;
}

body.page-quote-price-approval .price-approval-annotation-list {
  gap: 6px;
}

body.page-quote-price-approval .price-approval-annotation-list li {
  gap: 7px;
  padding: 7px;
}

body.page-quote-price-approval .price-approval-annotation-list p,
body.page-quote-price-approval .price-approval-annotation-list a {
  font-size: 11px;
  line-height: 1.35;
}

body.page-quote-price-approval .price-approval-price-panel {
  background: #fff;
}

body.page-quote-price-approval .price-approval-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 16px;
  border-top: 1px solid var(--qpa-line-soft);
  background: #fbfdff;
}

body.page-quote-price-approval .price-approval-actions [data-role="feedback"] {
  margin-right: auto;
}

@media (max-width: 1180px) {
  body.page-quote-price-approval .price-approval-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-quote-price-approval .price-approval-info-notice {
    grid-column: 1 / -1;
  }

  body.page-quote-price-approval .price-approval-position-head {
    grid-template-columns: 38px 100px minmax(180px, 1fr) 26px;
  }

  body.page-quote-price-approval .price-approval-position-facts {
    grid-column: 1 / -1;
  }

  body.page-quote-price-approval .price-approval-price-workspace,
  body.page-quote-price-approval .price-approval-final-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-final-left {
    display: grid;
  }

  body.page-quote-price-approval .price-approval-tech-workspace {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-tech-note-panel {
    grid-column: 1 / -1;
    max-height: 180px;
  }
}

@media (max-width: 760px) {
  body.page-quote-price-approval .price-approval-shell {
    padding: 0 12px 24px;
  }

  body.page-quote-price-approval .quote-price-approval-public-content {
    padding-top: 12px;
  }

  body.page-quote-price-approval .price-approval-public-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 72px;
    margin: -12px -12px 12px;
    padding: 10px 12px;
  }

  body.page-quote-price-approval .price-approval-header-divider {
    display: none;
  }

  body.page-quote-price-approval .price-approval-brand {
    grid-column: 1;
  }

  body.page-quote-price-approval .price-approval-header-title {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 8px;
  }

  body.page-quote-price-approval .price-approval-header-tools {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
  }

  body.page-quote-price-approval .price-approval-help-pill {
    display: none;
  }

  body.page-quote-price-approval .price-approval-info-strip,
  body.page-quote-price-approval .price-approval-info-grid,
  body.page-quote-price-approval .price-approval-progress-card,
  body.page-quote-price-approval .price-approval-progress-label,
  body.page-quote-price-approval .price-approval-position-head,
  body.page-quote-price-approval .price-approval-position-facts,
  body.page-quote-price-approval .price-approval-price-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-general-info,
  body.page-quote-price-approval .price-approval-progress-card,
  body.page-quote-price-approval .price-approval-final {
    padding: 12px;
  }

  body.page-quote-price-approval .price-approval-progress-summary {
    grid-template-columns: auto auto minmax(0, 1fr);
    padding: 12px 0 0;
    border-top: 1px solid var(--qpa-line);
    border-left: 0;
  }

  body.page-quote-price-approval .price-approval-progress-track {
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 2px;
  }

  body.page-quote-price-approval .price-approval-progress-step::before {
    display: none;
  }

  body.page-quote-price-approval .price-approval-position-head {
    gap: 10px;
    padding: 12px;
  }

  body.page-quote-price-approval .price-approval-position-image img,
  body.page-quote-price-approval .price-approval-position-image .price-approval-image-placeholder,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image img,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image .price-approval-image-placeholder {
    width: 100%;
    height: 118px;
  }

  body.page-quote-price-approval .price-approval-position-facts {
    gap: 8px;
  }

  body.page-quote-price-approval .price-approval-size-fact {
    overflow-x: auto;
  }

  body.page-quote-price-approval .price-approval-state-fact {
    justify-self: start;
  }

  body.page-quote-price-approval .price-approval-position-toggle {
    position: absolute;
    top: 14px;
    right: 12px;
  }

  body.page-quote-price-approval .price-approval-position {
    position: relative;
  }

  body.page-quote-price-approval .price-approval-price-panel-head {
    display: grid;
  }

  body.page-quote-price-approval .price-approval-tier-row,
  body.page-quote-price-approval .price-approval-tier-row--head {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-tier-row--head {
    display: none;
  }

  body.page-quote-price-approval .price-approval-tier-row {
    padding: 8px;
    border: 1px solid var(--qpa-line-soft);
    border-radius: 6px;
  }

  body.page-quote-price-approval .price-approval-final-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-main-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--qpa-line-soft);
  }

  body.page-quote-price-approval .price-approval-main-tab {
    flex: 0 0 215px;
    min-height: 44px;
    padding: 8px 10px;
  }

  body.page-quote-price-approval .price-approval-tab-panel {
    padding: 10px;
  }

  body.page-quote-price-approval .price-approval-material-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-material-item,
  body.page-quote-price-approval .price-approval-material-item.price-approval-material-item--has-media {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 96px;
    padding: 8px;
  }

  body.page-quote-price-approval .price-approval-material-image-button,
  body.page-quote-price-approval .price-approval-material-image-button img,
  body.page-quote-price-approval .price-approval-material-image-button .price-approval-image-placeholder {
    width: 84px;
    height: 76px;
    min-height: 76px;
    max-height: 84px;
  }

  body.page-quote-price-approval .price-approval-tech-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-tech-nav {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.page-quote-price-approval .price-approval-tech-nav-item {
    flex: 0 0 176px;
  }

  body.page-quote-price-approval .price-approval-tech-view-media {
    height: clamp(280px, 82vw, 360px);
    min-height: 0;
  }

  body.page-quote-price-approval .price-approval-tech-note-panel {
    max-height: 220px;
  }

  body.page-quote-price-approval .price-approval-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.page-quote-price-approval .price-approval-actions .btn {
    width: 100%;
  }
}

.techpack-media-stage.markup-geometry-move-active {
  cursor: grab;
  touch-action: none;
}

.techpack-media-stage.markup-geometry-dragging {
  cursor: grabbing;
}

@media (max-width: 760px) {
  body.page-quote-price-approval .price-approval-material-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-quote-price-approval .price-approval-material-item,
  body.page-quote-price-approval .price-approval-material-item.price-approval-material-item--has-media {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-material-item-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.page-quote-price-approval .price-approval-material-type-badge {
    writing-mode: horizontal-tb;
    max-width: 100%;
    overflow-wrap: normal;
  }

  body.page-quote-price-approval .price-approval-material-labels strong {
    white-space: normal;
  }

  body.page-quote-price-approval .price-approval-material-media {
    display: none;
  }
}

.quote-line-annotation-markup-section,
.quote-line-annotation-style-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  background: #f8fafc;
}

/* Public quote price approval final reference layout */
body.page-quote-price-approval {
  overflow-x: clip;
}

body.page-quote-price-approval .price-approval-shell {
  padding: 0 clamp(16px, 2.2vw, 32px) 30px;
}

body.page-quote-price-approval .public-container,
body.page-quote-price-approval .public-container--wide {
  max-width: 1440px;
}

body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--qpa-line-soft);
  background: #fff;
  overflow: visible;
}

body.page-quote-price-approval .price-approval-progress-step::before {
  pointer-events: none;
}

body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 28px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--qpa-line-soft);
  background: #fbfdff;
  box-shadow: none;
}

body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab:last-child {
  border-bottom: 0;
}

body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab.is-active {
  background: #f7fbff;
  box-shadow: inset 3px 0 0 var(--qpa-blue);
}

body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab strong {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab em {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #d8e6ff;
  border-radius: 6px;
  color: var(--qpa-blue);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

body.page-quote-price-approval .price-approval-tab-panel {
  padding: 14px 16px;
}

body.page-quote-price-approval .price-approval-material-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

body.page-quote-price-approval .price-approval-material-item {
  min-height: 112px;
}

body.page-quote-price-approval [data-role="position-materials"] .price-approval-material-extra,
body.page-quote-price-approval [data-role="position-materials"] .price-approval-material-detail-only {
  display: grid;
}

body.page-quote-price-approval [data-role="position-materials"] .price-approval-material-description {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

body.page-quote-price-approval .price-approval-tech-workspace {
  grid-template-columns: minmax(200px, 230px) minmax(0, 1fr) minmax(260px, 320px);
  gap: 10px;
  min-height: 420px;
  max-height: 500px;
  padding: 0;
}

body.page-quote-price-approval .price-approval-tech-sidebar,
body.page-quote-price-approval .price-approval-tech-stage-panel,
body.page-quote-price-approval .price-approval-tech-note-panel {
  height: 100%;
  min-height: 0;
}

body.page-quote-price-approval .price-approval-tech-view-media {
  width: 100%;
  height: 352px;
  min-height: 352px;
}

body.page-quote-price-approval .price-approval-tech-nav {
  max-height: 424px;
}

body.page-quote-price-approval .price-approval-tech-note-panel {
  max-height: 424px;
  overflow-y: auto;
}

body.page-quote-price-approval .price-approval-price-workspace {
  grid-template-columns: minmax(260px, 0.75fr) minmax(430px, 1.15fr) minmax(300px, 0.9fr);
  gap: 18px;
}

body.page-quote-price-approval .price-approval-note-field textarea {
  min-height: 112px;
}

body.page-quote-price-approval .price-approval-final {
  gap: 14px;
  padding: 22px;
}

body.page-quote-price-approval .price-approval-final h2 {
  font-size: 18px;
}

body.page-quote-price-approval .price-approval-final-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(520px, 1.45fr) minmax(260px, 0.9fr);
  gap: 24px;
  align-items: start;
}

body.page-quote-price-approval .price-approval-final-left {
  display: grid;
  gap: 14px;
}

body.page-quote-price-approval .price-approval-signature {
  min-width: 0;
}

body.page-quote-price-approval .price-approval-signature-head .ghost {
  flex: 0 0 auto;
  width: auto;
  min-height: 30px;
  padding: 5px 10px;
}

body.page-quote-price-approval .price-approval-signature canvas {
  display: block;
  width: 100%;
  min-width: 520px;
  height: 204px;
  min-height: 180px;
  border: 1px solid var(--qpa-line);
  border-radius: 7px;
  background: #fff;
  touch-action: none;
}

body.page-quote-price-approval .price-approval-check {
  align-self: start;
  max-width: 360px;
  padding: 4px 0;
  line-height: 1.45;
}

body.page-quote-price-approval .price-approval-missing-warning {
  width: 100%;
  max-width: none;
  padding: 14px 16px;
  border: 1px solid #f2c65d;
  border-radius: 7px;
  background: #fff8e8;
}

body.page-quote-price-approval .price-approval-final-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

@media (max-width: 1180px) {
  body.page-quote-price-approval .price-approval-tech-workspace {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(250px, 300px);
  }

  body.page-quote-price-approval .price-approval-price-workspace {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  }

  body.page-quote-price-approval .price-approval-price-workspace .price-approval-note-field {
    grid-column: 1 / -1;
  }

  body.page-quote-price-approval .price-approval-final-grid {
    grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.3fr);
  }

  body.page-quote-price-approval .price-approval-check {
    grid-column: 1 / -1;
    max-width: 720px;
  }
}

@media (max-width: 900px) {
  body.page-quote-price-approval .price-approval-signature canvas {
    min-width: 0;
  }

  body.page-quote-price-approval .price-approval-tech-workspace {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  body.page-quote-price-approval .price-approval-tech-sidebar {
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.page-quote-price-approval .price-approval-tech-nav {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body.page-quote-price-approval .price-approval-tech-nav-item {
    flex: 0 0 150px;
  }

  body.page-quote-price-approval .price-approval-tech-view-media {
    height: clamp(280px, 82vw, 360px);
    min-height: 280px;
  }

  body.page-quote-price-approval .price-approval-tech-note-panel {
    max-height: 240px;
  }
}

@media (max-width: 760px) {
  body.page-quote-price-approval .price-approval-shell {
    padding: 0 12px 24px;
  }

  body.page-quote-price-approval .price-approval-public-header {
    margin: -12px -12px 12px;
    padding: 10px 12px;
  }

  body.page-quote-price-approval .price-approval-position-head,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-head {
    display: grid;
    grid-template-columns: 36px 82px minmax(0, 1fr) 28px;
    gap: 10px;
    align-items: center;
    min-height: 82px;
    padding: 12px;
  }

  body.page-quote-price-approval .price-approval-position-title strong {
    font-size: 14px;
  }

  body.page-quote-price-approval .price-approval-position-title p,
  body.page-quote-price-approval .price-approval-position-title span {
    display: block;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
  }

  body.page-quote-price-approval .price-approval-position-image img,
  body.page-quote-price-approval .price-approval-position-image .price-approval-image-placeholder,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image img,
  body.page-quote-price-approval .price-approval-position.is-active .price-approval-position-image .price-approval-image-placeholder {
    width: 82px;
    height: 56px;
  }

  body.page-quote-price-approval .price-approval-position-facts {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-left: 46px;
  }

  body.page-quote-price-approval .price-approval-size-fact {
    max-width: 100%;
    overflow-x: auto;
  }

  body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion {
    display: grid;
    overflow: visible;
  }

  body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab {
    grid-template-columns: 24px minmax(0, 1fr) auto 28px;
    flex: none;
    min-height: 50px;
    padding: 9px 12px;
  }

  body.page-quote-price-approval .price-approval-main-tabs.price-approval-main-accordion .price-approval-main-tab small {
    font-size: 10px;
  }

  body.page-quote-price-approval .price-approval-material-groups,
  body.page-quote-price-approval .price-approval-material-group .price-approval-material-grid,
  body.page-quote-price-approval .price-approval-material-group[data-material-count] .price-approval-material-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-material-item,
  body.page-quote-price-approval .price-approval-material-item.price-approval-material-item--has-media {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body.page-quote-price-approval .price-approval-material-media {
    display: grid;
  }

  body.page-quote-price-approval .price-approval-material-image-button,
  body.page-quote-price-approval .price-approval-material-image-button img,
  body.page-quote-price-approval .price-approval-material-image-button .price-approval-image-placeholder {
    width: 100%;
    height: 120px;
    max-height: 140px;
  }

  body.page-quote-price-approval .price-approval-price-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.page-quote-price-approval .price-approval-tier-table {
    overflow: visible;
  }

  body.page-quote-price-approval .price-approval-tier-row {
    grid-template-columns: minmax(0, 1fr) minmax(86px, 0.8fr) 58px auto;
    min-width: 0;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--qpa-line-soft);
    border-radius: 6px;
  }

  body.page-quote-price-approval .price-approval-tier-row--head {
    display: none;
  }

  body.page-quote-price-approval .price-approval-tier-row > .price-approval-field-status {
    display: inline-flex;
  }

  body.page-quote-price-approval .price-approval-note-field textarea {
    min-height: 118px;
  }

  body.page-quote-price-approval .price-approval-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body.page-quote-price-approval .price-approval-final {
    padding: 14px;
  }

  body.page-quote-price-approval .price-approval-final-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.page-quote-price-approval .price-approval-signature canvas {
    min-width: 0;
    height: 224px;
    min-height: 220px;
  }

  body.page-quote-price-approval .price-approval-signature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body.page-quote-price-approval .price-approval-signature-head .ghost {
    width: auto;
  }

  body.page-quote-price-approval .price-approval-check {
    max-width: none;
  }

  body.page-quote-price-approval .price-approval-final-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-quote-price-approval .price-approval-final-actions [data-action="approve-quote-price-approval"] {
    order: -2;
  }

  body.page-quote-price-approval .price-approval-final-actions [data-role="final-feedback"] {
    order: -3;
    margin: 0;
  }
}

.quote-line-annotation-markup-section h5,
.quote-line-annotation-style-section h5 {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.quote-line-annotation-style-section[hidden],
.quote-line-annotation-style-size[hidden] {
  display: none;
}

.selection-link-shell,
.selection-presentation-shell {
  width: min(1180px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 20px 0 40px;
}

.selection-presentation-shell {
  width: min(1360px, calc(100vw - 32px));
}

.selection-link-topbar,
.selection-presentation-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.selection-link-topbar h1,
.selection-presentation-topbar h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.selection-link-status,
.selection-presentation-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.selection-link-tabs,
.selection-presentation-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.selection-link-tabs button,
.selection-presentation-tabs button {
  min-height: 36px;
  white-space: nowrap;
}

.selection-link-tabs button.active,
.selection-presentation-tabs button.active {
  background: var(--color-primary, #1f6feb);
  color: #fff;
  border-color: var(--color-primary, #1f6feb);
}

.selection-link-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #f0b4b4;
  background: #fff5f5;
  color: #8a1f1f;
  border-radius: 8px;
}

.selection-link-content,
.selection-presentation-content {
  display: grid;
  gap: 14px;
}

.selection-link-position-card,
.selection-presentation-position-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  background: #fff;
}

.selection-presentation-position-card {
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: 22px;
  padding: 18px;
}

.selection-presentation-position-card--no-image {
  grid-template-columns: minmax(0, 1fr);
}

.selection-link-position-image,
.selection-presentation-position-image {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #f4f5f7;
  border-radius: 6px;
  overflow: hidden;
  color: #65717c;
  font-size: 13px;
}

.selection-presentation-position-image {
  width: 100%;
  min-height: 220px;
}

.selection-link-position-image img,
.selection-presentation-position-image img,
.selection-link-spec-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.selection-link-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 14px;
  margin: 8px 0 0;
}

.selection-link-facts div {
  min-width: 0;
}

.selection-link-facts dt {
  color: #65717c;
  font-size: 12px;
}

.selection-link-facts dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.selection-link-form {
  display: grid;
  gap: 10px;
}

.selection-link-form input,
.selection-link-form select,
.selection-link-form textarea,
.selection-link-url input {
  width: 100%;
  min-height: 36px;
}

.selection-link-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.selection-link-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #c5ccd3;
  border-radius: 4px;
  vertical-align: middle;
}

.selection-link-spec-view {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  background: #fff;
}

.selection-link-spec-view img {
  max-height: 420px;
  background: #f4f5f7;
  border-radius: 6px;
}

.selection-presentation-overview {
  display: grid;
  gap: 16px;
}

.selection-presentation-overview h2 {
  margin: 0 0 4px;
  font-size: 24px;
}

.selection-link-url {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.selection-link-qr img {
  width: 132px;
  height: 132px;
  image-rendering: crisp-edges;
}

.project-selection-link-permission {
  min-width: 0;
}

.project-selection-link-create-panel,
.project-selection-link-manage-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.project-selection-presentation-settings {
  border: 1px solid var(--border-color, #d7dde8);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.project-selection-presentation-settings summary {
  cursor: pointer;
  font-weight: 700;
}

.project-selection-meeting-link-card .project-selection-link-menu__meta,
.project-selection-link-manage-panel .project-selection-link-menu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

@media (max-width: 680px) {
  .selection-link-topbar,
  .selection-presentation-topbar,
  .selection-link-url {
    grid-template-columns: 1fr;
    display: grid;
  }

  .selection-link-position-card,
  .selection-presentation-position-card {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .selection-presentation-position-card--no-image {
    grid-template-columns: minmax(0, 1fr);
  }

  .selection-link-position-image {
    width: 86px;
  }
}

body.page-selection-presentation {
  margin: 0;
  min-height: 100vh;
  background: #eef2f7;
  color: #111827;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.page-selection-presentation .selection-presentation-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 84px;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

body.page-selection-presentation .selection-presentation-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #d8dee8;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(10px);
}

body.page-selection-presentation .selection-presentation-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  padding-right: 20px;
  border-right: 1px solid #d8dee8;
}

body.page-selection-presentation .selection-presentation-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #061637;
  color: #061637;
  font-weight: 800;
  font-size: 22px;
}

body.page-selection-presentation .selection-presentation-brand-text {
  font-weight: 800;
  color: #0f172a;
}

body.page-selection-presentation .selection-presentation-heading {
  min-width: 0;
}

body.page-selection-presentation .selection-presentation-heading h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: 0;
}

body.page-selection-presentation .selection-presentation-heading p {
  margin: 5px 0 0;
  color: #526070;
  font-size: 14px;
}

body.page-selection-presentation .selection-presentation-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-badge--success {
  border-color: #b7e4c7;
  background: #ecfdf3;
  color: #166534;
}

body.page-selection-presentation .selection-presentation-badge--info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.page-selection-presentation .selection-presentation-badge--warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

body.page-selection-presentation .selection-presentation-badge--danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

body.page-selection-presentation .selection-presentation-button,
body.page-selection-presentation .selection-presentation-step,
body.page-selection-presentation .selection-presentation-footer-btn,
body.page-selection-presentation .selection-presentation-card-actions button,
body.page-selection-presentation .selection-presentation-view-actions button,
body.page-selection-presentation .selection-presentation-annotation-row button,
body.page-selection-presentation .selection-presentation-matrix button {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

body.page-selection-presentation button:focus-visible,
body.page-selection-presentation a:focus-visible,
body.page-selection-presentation input:focus-visible,
body.page-selection-presentation select:focus-visible,
body.page-selection-presentation textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

body.page-selection-presentation .selection-presentation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  text-decoration: none;
}

body.page-selection-presentation .selection-presentation-button--primary {
  border-color: #1d4ed8;
  background: #1d4ed8;
  color: #fff;
}

body.page-selection-presentation .selection-presentation-button--subtle {
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-tabs {
  position: sticky;
  top: 71px;
  z-index: 19;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 28px;
  overflow-x: auto;
  background: rgba(248, 250, 252, 0.96);
  border-bottom: 1px solid #d8dee8;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

body.page-selection-presentation .selection-presentation-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  padding: 7px 13px 7px 8px;
  background: #fff;
  color: #475569;
}

body.page-selection-presentation .selection-presentation-step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef2f7;
  color: #334155;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-step.is-done span {
  background: #dcfce7;
  color: #166534;
}

body.page-selection-presentation .selection-presentation-step.is-active {
  border-color: #0b1b3d;
  background: #0b1b3d;
  color: #fff;
}

body.page-selection-presentation .selection-presentation-step.is-active span {
  background: #2563eb;
  color: #fff;
}

body.page-selection-presentation .selection-link-error {
  margin: 12px 28px 0;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 10px;
  font-weight: 700;
}

body.page-selection-presentation .selection-link-error--success {
  border-color: #b7e4c7;
  background: #ecfdf3;
  color: #166534;
}

body.page-selection-presentation .selection-presentation-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 18px 28px 24px;
}

body.page-selection-presentation .selection-presentation-sidebar {
  position: sticky;
  top: 133px;
  align-self: start;
  max-height: calc(100vh - 226px);
  overflow: auto;
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

body.page-selection-presentation .selection-presentation-sidebar-head h2,
body.page-selection-presentation .selection-presentation-section-head h2,
body.page-selection-presentation .selection-presentation-overview-card h3,
body.page-selection-presentation .selection-presentation-color-card h3,
body.page-selection-presentation .selection-presentation-material-card h3,
body.page-selection-presentation .selection-presentation-spec-list h3,
body.page-selection-presentation .selection-presentation-summary-position h3 {
  margin: 0;
  color: #0f172a;
  letter-spacing: 0;
}

body.page-selection-presentation .selection-presentation-sidebar-head span {
  color: #64748b;
  font-size: 13px;
}

body.page-selection-presentation .selection-presentation-position-list {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-side-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 12px;
  text-align: left;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.page-selection-presentation .selection-presentation-side-card.is-active {
  border-color: #0b1b3d;
  box-shadow: 0 0 0 2px rgba(11, 27, 61, 0.08), 0 12px 28px rgba(15, 23, 42, 0.10);
}

body.page-selection-presentation .selection-presentation-side-image,
body.page-selection-presentation .selection-presentation-overview-image,
body.page-selection-presentation .selection-presentation-summary-image {
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-side-image img,
body.page-selection-presentation .selection-presentation-overview-image img,
body.page-selection-presentation .selection-presentation-summary-image img,
body.page-selection-presentation .selection-presentation-product-image img,
body.page-selection-presentation .selection-presentation-spec-canvas img,
body.page-selection-presentation .selection-presentation-color-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body.page-selection-presentation .selection-presentation-side-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body.page-selection-presentation .selection-presentation-side-body strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

body.page-selection-presentation .selection-presentation-side-body span {
  color: #475569;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-side-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
}

body.page-selection-presentation .selection-presentation-progress-dots {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

body.page-selection-presentation .selection-presentation-progress-dots span {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}

body.page-selection-presentation .selection-presentation-progress-dots span.is-done {
  border-color: #16a34a;
  background: #16a34a;
}

body.page-selection-presentation .selection-presentation-sidebar-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #d8dee8;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.page-selection-presentation .selection-presentation-sidebar-summary div {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-sidebar-summary span,
body.page-selection-presentation .selection-presentation-kpi-grid span,
body.page-selection-presentation .selection-presentation-data-card span,
body.page-selection-presentation .selection-presentation-compact-facts dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

body.page-selection-presentation .selection-presentation-sidebar-actions {
  display: grid;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-content {
  min-width: 0;
  display: block;
}

body.page-selection-presentation .selection-presentation-workbench {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d8dee8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

body.page-selection-presentation .selection-presentation-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.page-selection-presentation .selection-presentation-section-head p {
  margin: 0 0 4px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body.page-selection-presentation .selection-presentation-section-head h2 {
  font-size: 22px;
}

body.page-selection-presentation .selection-presentation-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-kpi-grid div,
body.page-selection-presentation .selection-presentation-data-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fbfdff;
}

body.page-selection-presentation .selection-presentation-kpi-grid strong,
body.page-selection-presentation .selection-presentation-data-card strong {
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 17px;
}

body.page-selection-presentation .selection-presentation-overview-grid,
body.page-selection-presentation .selection-presentation-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-overview-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-overview-card h3 {
  font-size: 17px;
}

body.page-selection-presentation .selection-presentation-compact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 12px;
  margin: 10px 0;
}

body.page-selection-presentation .selection-presentation-compact-facts dd {
  margin: 2px 0 0;
  color: #111827;
  overflow-wrap: anywhere;
}

body.page-selection-presentation .selection-presentation-article-grid {
  display: grid;
  grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.page-selection-presentation .selection-presentation-product-image {
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #94a3b8;
}

body.page-selection-presentation .selection-presentation-view-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

body.page-selection-presentation .selection-presentation-view-actions button {
  padding: 0 12px;
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-view-actions button.is-active {
  border-color: #1d4ed8;
  color: #1d4ed8;
}

body.page-selection-presentation .selection-presentation-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-input-card input,
body.page-selection-presentation .selection-presentation-editor input,
body.page-selection-presentation .selection-presentation-editor select,
body.page-selection-presentation .selection-presentation-editor textarea,
body.page-selection-presentation .selection-presentation-size-cell input,
body.page-selection-presentation .selection-presentation-matrix input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
}

body.page-selection-presentation .selection-presentation-input-card em {
  color: #94a3b8;
  font-style: normal;
  font-weight: 600;
}

body.page-selection-presentation .selection-presentation-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
}

body.page-selection-presentation .selection-presentation-card-list {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-color-card,
body.page-selection-presentation .selection-presentation-material-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-color-visual,
body.page-selection-presentation .selection-presentation-material-swatch {
  width: 88px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #e2e8f0;
  color: #334155;
  font-weight: 900;
}

body.page-selection-presentation .selection-presentation-color-card p,
body.page-selection-presentation .selection-presentation-material-card p {
  margin: 4px 0 0;
  color: #475569;
}

body.page-selection-presentation .selection-presentation-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

body.page-selection-presentation .selection-presentation-card-actions button,
body.page-selection-presentation .selection-presentation-annotation-row button,
body.page-selection-presentation .selection-presentation-matrix button {
  min-height: 32px;
  padding: 5px 9px;
  background: #f8fafc;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
}

body.page-selection-presentation .selection-presentation-editor[hidden] {
  display: none;
}

body.page-selection-presentation .selection-presentation-editor-head,
body.page-selection-presentation .selection-presentation-editor-wide {
  grid-column: 1 / -1;
}

body.page-selection-presentation .selection-presentation-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.page-selection-presentation .selection-presentation-editor-head h3 {
  margin: 0;
}

body.page-selection-presentation .selection-presentation-editor label,
body.page-selection-presentation .selection-presentation-size-cell {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-pill {
  display: inline-flex;
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-pill.is-warning {
  background: #fff7ed;
  color: #9a3412;
}

body.page-selection-presentation .selection-presentation-spec-layout {
  display: grid;
  gap: 14px;
}

body.page-selection-presentation .selection-presentation-spec-view {
  display: grid;
  grid-template-columns: minmax(300px, 52%) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 14px;
}

body.page-selection-presentation .selection-presentation-spec-canvas {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-annotation-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #0b1b3d;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(11, 27, 61, 0.22);
}

body.page-selection-presentation .selection-presentation-spec-list {
  display: grid;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-annotation-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

body.page-selection-presentation .selection-presentation-size-form {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-size-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-size-cell {
  padding: 10px;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fbfdff;
}

body.page-selection-presentation .selection-presentation-size-cell span {
  display: grid;
  gap: 5px;
}

body.page-selection-presentation .selection-presentation-total {
  padding: 10px 14px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
}

body.page-selection-presentation .selection-presentation-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-chip-row span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-table-wrap {
  overflow-x: auto;
  border: 1px solid #d8dee8;
  border-radius: 12px;
}

body.page-selection-presentation .selection-presentation-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-matrix th,
body.page-selection-presentation .selection-presentation-matrix td {
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-matrix th {
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-summary {
  gap: 16px;
}

body.page-selection-presentation .selection-presentation-summary-position {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-summary-position header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

body.page-selection-presentation .selection-presentation-summary-position section {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fbfdff;
}

body.page-selection-presentation .selection-presentation-summary-position h4 {
  margin: 0 0 6px;
  color: #334155;
  font-size: 12px;
  text-transform: uppercase;
}

body.page-selection-presentation .selection-presentation-summary-position p {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

body.page-selection-presentation .selection-presentation-issue {
  color: #9a3412;
}

body.page-selection-presentation .selection-presentation-empty {
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
}

body.page-selection-presentation .selection-presentation-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(220px, 320px) minmax(220px, 340px);
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: #081632;
  box-shadow: 0 -12px 30px rgba(8, 22, 50, 0.25);
}

body.page-selection-presentation .selection-presentation-footer-btn {
  min-height: 48px;
  padding: 0 18px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: 10px;
}

body.page-selection-presentation .selection-presentation-footer-btn--save {
  justify-self: center;
  width: 100%;
}

body.page-selection-presentation .selection-presentation-footer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  body.page-selection-presentation .selection-presentation-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    padding: 14px;
  }

  body.page-selection-presentation .selection-presentation-topbar,
  body.page-selection-presentation .selection-presentation-tabs,
  body.page-selection-presentation .selection-presentation-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.page-selection-presentation .selection-presentation-side-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  body.page-selection-presentation .selection-presentation-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.page-selection-presentation .selection-presentation-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.page-selection-presentation .selection-presentation-brand {
    min-width: 0;
    border-right: 0;
    padding-right: 0;
  }

  body.page-selection-presentation .selection-presentation-tabs {
    top: 150px;
  }

  body.page-selection-presentation .selection-presentation-layout {
    height: auto;
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-sidebar {
    position: static;
    max-height: none;
  }

  body.page-selection-presentation .selection-presentation-position-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 82vw);
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body.page-selection-presentation .selection-presentation-article-grid,
  body.page-selection-presentation .selection-presentation-spec-view {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-summary-position {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.page-selection-presentation .selection-presentation-shell {
    padding-bottom: 154px;
  }

  body.page-selection-presentation .selection-presentation-status,
  body.page-selection-presentation .selection-presentation-section-head,
  body.page-selection-presentation .selection-presentation-card-actions {
    justify-content: flex-start;
  }

  body.page-selection-presentation .selection-presentation-kpi-grid,
  body.page-selection-presentation .selection-presentation-card-grid,
  body.page-selection-presentation .selection-presentation-editor {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-overview-card,
  body.page-selection-presentation .selection-presentation-color-card,
  body.page-selection-presentation .selection-presentation-material-card,
  body.page-selection-presentation .selection-presentation-summary-position header {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-annotation-row {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-footer {
    grid-template-columns: 1fr;
  }
}

/* Selection presentation v4: compact meeting configurator */
body.page-selection-presentation {
  --presentation-ink: #0f172a;
  --presentation-muted: #64748b;
  --presentation-border: #e5e7eb;
  --presentation-border-strong: #d7dce5;
  --presentation-bg: #f7f8fa;
  --presentation-navy: #071833;
  --presentation-active: #102445;
  --presentation-success: #16a365;
  --presentation-warning: #d98619;
  --presentation-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--presentation-bg);
  color: var(--presentation-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

body.page-selection-presentation .selection-presentation-shell {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0 0 76px;
  display: grid;
  grid-template-rows: 72px 62px minmax(0, 1fr);
}

body.page-selection-presentation .selection-presentation-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 72px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 10px 22px;
  border-bottom: 1px solid var(--presentation-border);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}

body.page-selection-presentation .selection-presentation-brand {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px;
  border-right: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-brand-logo {
  width: 206px;
  height: 44px;
  flex: 0 0 206px;
  object-fit: contain;
  display: block;
}

body.page-selection-presentation .selection-presentation-logo {
  display: none;
}

body.page-selection-presentation .selection-presentation-brand-text {
  display: none;
}

body.page-selection-presentation .selection-presentation-heading {
  min-width: 0;
}

body.page-selection-presentation .selection-presentation-heading h1 {
  margin: 0;
  color: var(--presentation-ink);
  font-size: 25px;
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: 0;
}

body.page-selection-presentation .selection-presentation-heading p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 6px 0 0;
  color: var(--presentation-muted);
  font-size: 13px;
  line-height: 1.2;
}

body.page-selection-presentation #selectionPresentationSubtitle {
  color: #334155;
  font-weight: 650;
}

body.page-selection-presentation #selectionPresentationMeetingDate {
  color: var(--presentation-muted);
}

body.page-selection-presentation .selection-presentation-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  border: 1px solid var(--presentation-border);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-badge--success {
  border-color: #bce8cf;
  background: #edfdf4;
  color: #13794d;
}

body.page-selection-presentation .selection-presentation-badge--warning {
  border-color: #f6d7a9;
  background: #fff8ed;
  color: #9a5b0f;
}

body.page-selection-presentation .selection-presentation-badge--danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

body.page-selection-presentation .selection-presentation-badge--info,
body.page-selection-presentation .selection-presentation-badge--neutral {
  border-color: var(--presentation-border);
  background: #fff;
  color: #334155;
}

body.page-selection-presentation .selection-presentation-button,
body.page-selection-presentation .selection-presentation-step,
body.page-selection-presentation .selection-presentation-footer-btn,
body.page-selection-presentation .selection-presentation-card-actions button,
body.page-selection-presentation .selection-presentation-view-rail button,
body.page-selection-presentation .selection-presentation-color-sources button,
body.page-selection-presentation .selection-presentation-annotation-row button,
body.page-selection-presentation .selection-presentation-matrix button {
  min-height: 38px;
  border: 1px solid var(--presentation-border-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--presentation-ink);
  font: inherit;
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
}

body.page-selection-presentation button:focus-visible,
body.page-selection-presentation a:focus-visible,
body.page-selection-presentation input:focus-visible,
body.page-selection-presentation select:focus-visible,
body.page-selection-presentation textarea:focus-visible {
  outline: 3px solid rgba(16, 36, 69, 0.22);
  outline-offset: 2px;
}

body.page-selection-presentation .selection-presentation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  text-decoration: none;
}

body.page-selection-presentation .selection-presentation-button--primary {
  border-color: var(--presentation-active);
  background: var(--presentation-active);
  color: #fff;
}

body.page-selection-presentation .selection-presentation-button--subtle {
  border-color: var(--presentation-border);
  background: #fff;
  color: var(--presentation-ink);
}

body.page-selection-presentation .selection-presentation-tabs {
  position: sticky;
  top: 72px;
  z-index: 24;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  margin: 0;
  padding: 0 22px;
  overflow: hidden;
  border-bottom: 1px solid var(--presentation-border);
  background: #fff;
  box-shadow: none;
}

body.page-selection-presentation .selection-presentation-step {
  position: relative;
  min-width: 0;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: #475569;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 37px;
  left: calc(50% + 62px);
  right: calc(-50% + 62px);
  height: 1px;
  background: var(--presentation-border);
  z-index: -1;
}

body.page-selection-presentation .selection-presentation-step-index {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd5df;
  border-radius: 50%;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-step .selection-presentation-step-label {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  display: block;
  border: 0;
  background: #fff;
  color: inherit;
  font-size: 12px;
  line-height: 1.18;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 3px;
}

body.page-selection-presentation .selection-presentation-step.is-active .selection-presentation-step-label,
body.page-selection-presentation .selection-presentation-step.is-done .selection-presentation-step-label {
  width: auto;
  height: auto;
  border: 0;
  background: #fff;
  color: inherit;
}

body.page-selection-presentation .selection-presentation-step.is-active {
  border: 0;
  background: transparent;
  color: var(--presentation-ink);
}

body.page-selection-presentation .selection-presentation-step.is-active .selection-presentation-step-index {
  border-color: var(--presentation-active);
  background: var(--presentation-active);
  color: #fff;
}

body.page-selection-presentation .selection-presentation-step.is-done .selection-presentation-step-index {
  border-color: #bce8cf;
  background: #eafaf1;
  color: #157b50;
}

body.page-selection-presentation .selection-link-error {
  margin: 10px 22px 0;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 750;
}

body.page-selection-presentation .selection-link-error--success {
  border-color: #bce8cf;
  background: #edfdf4;
  color: #13794d;
}

body.page-selection-presentation .selection-presentation-layout {
  box-sizing: border-box;
  height: calc(100vh - 72px - 62px - 76px);
  min-height: 0;
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 14px 22px 18px;
}

body.page-selection-presentation .selection-presentation-sidebar {
  position: sticky;
  top: 148px;
  align-self: start;
  max-height: 100%;
  min-width: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding-right: 2px;
}

body.page-selection-presentation .selection-presentation-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

body.page-selection-presentation .selection-presentation-sidebar-head h2,
body.page-selection-presentation .selection-presentation-workbench-head h2,
body.page-selection-presentation .selection-presentation-info-block h3,
body.page-selection-presentation .selection-presentation-block-head h3,
body.page-selection-presentation .selection-presentation-color-card h3,
body.page-selection-presentation .selection-presentation-material-card h3,
body.page-selection-presentation .selection-presentation-spec-list h3,
body.page-selection-presentation .selection-presentation-summary-position h3 {
  margin: 0;
  color: var(--presentation-ink);
  letter-spacing: 0;
}

body.page-selection-presentation .selection-presentation-sidebar-head h2 {
  font-size: 18px;
  line-height: 1.2;
}

body.page-selection-presentation .selection-presentation-sidebar-head span {
  color: var(--presentation-muted);
  font-size: 12px;
  font-weight: 700;
}

body.page-selection-presentation .selection-presentation-position-list {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-side-card {
  position: relative;
  width: 100%;
  min-height: 132px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--presentation-card-shadow);
  text-align: left;
}

body.page-selection-presentation .selection-presentation-side-card.is-active {
  border: 2px solid var(--presentation-active);
  padding: 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.page-selection-presentation .selection-presentation-side-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--presentation-active);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-side-status {
  display: none;
}

body.page-selection-presentation .selection-presentation-side-image,
body.page-selection-presentation .selection-presentation-context-image,
body.page-selection-presentation .selection-presentation-overview-image,
body.page-selection-presentation .selection-presentation-summary-image {
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #fafbfc;
  color: #94a3b8;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-side-image img,
body.page-selection-presentation .selection-presentation-context-image img,
body.page-selection-presentation .selection-presentation-overview-image img,
body.page-selection-presentation .selection-presentation-summary-image img,
body.page-selection-presentation .selection-presentation-product-image img,
body.page-selection-presentation .selection-presentation-spec-canvas img,
body.page-selection-presentation .selection-presentation-color-visual img,
body.page-selection-presentation .selection-presentation-material-swatch img,
body.page-selection-presentation .selection-presentation-view-rail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body.page-selection-presentation .selection-presentation-side-body {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding-right: 22px;
}

body.page-selection-presentation .selection-presentation-side-body strong {
  overflow-wrap: anywhere;
  color: var(--presentation-ink);
  font-size: 15px;
  line-height: 1.18;
}

body.page-selection-presentation .selection-presentation-side-body span {
  color: #475569;
  font-size: 12px;
  line-height: 1.25;
}

body.page-selection-presentation .selection-presentation-progress-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}

body.page-selection-presentation .selection-presentation-progress-dots span {
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 8px;
  line-height: 1;
}

body.page-selection-presentation .selection-presentation-progress-dots span.is-done {
  border-color: var(--presentation-success);
  background: var(--presentation-success);
  color: #fff;
}

body.page-selection-presentation .selection-presentation-progress-dots span.is-current {
  border-color: var(--presentation-active);
  box-shadow: 0 0 0 3px rgba(16, 36, 69, 0.08);
}

body.page-selection-presentation .selection-presentation-sidebar-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--presentation-card-shadow);
}

body.page-selection-presentation .selection-presentation-sidebar-summary div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 14px;
  background: transparent;
}

body.page-selection-presentation .selection-presentation-sidebar-summary div + div {
  border-left: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-sidebar-summary span,
body.page-selection-presentation .selection-presentation-fact-rows dt,
body.page-selection-presentation .selection-presentation-context-strip span,
body.page-selection-presentation .selection-presentation-field span,
body.page-selection-presentation .selection-presentation-summary-hero span {
  color: var(--presentation-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.page-selection-presentation .selection-presentation-sidebar-summary strong {
  color: var(--presentation-ink);
  font-size: 16px;
}

body.page-selection-presentation .selection-presentation-sidebar-actions {
  display: grid;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-content {
  min-width: 0;
  min-height: 0;
  display: flex;
}

body.page-selection-presentation .selection-presentation-workbench {
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--presentation-card-shadow);
}

body.page-selection-presentation .selection-presentation-workbench-head,
body.page-selection-presentation .selection-presentation-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 2px;
}

body.page-selection-presentation .selection-presentation-workbench-head p,
body.page-selection-presentation .selection-presentation-section-head p {
  margin: 0 0 4px;
  color: var(--presentation-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

body.page-selection-presentation .selection-presentation-workbench-head h2,
body.page-selection-presentation .selection-presentation-section-head h2 {
  font-size: 22px;
  line-height: 1.15;
}

body.page-selection-presentation .selection-presentation-workbench-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--presentation-muted);
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-article-panel {
  display: grid;
  grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.page-selection-presentation .selection-presentation-article-media,
body.page-selection-presentation .selection-presentation-spec-media {
  min-width: 0;
  display: grid;
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-product-image {
  width: 100%;
  aspect-ratio: 1.46;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fafbfc;
  color: #94a3b8;
}

body.page-selection-presentation .selection-presentation-article-details {
  min-width: 0;
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-info-block {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-info-block h3,
body.page-selection-presentation .selection-presentation-block-head h3 {
  font-size: 16px;
  line-height: 1.2;
}

body.page-selection-presentation .selection-presentation-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body.page-selection-presentation .selection-presentation-block-head p {
  margin: 3px 0 0;
  color: var(--presentation-muted);
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-fact-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-fact-rows div {
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-fact-rows dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--presentation-ink);
  font-size: 15px;
  font-weight: 750;
}

body.page-selection-presentation .selection-presentation-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

body.page-selection-presentation .selection-presentation-field em,
body.page-selection-presentation .selection-presentation-input-card em {
  color: #94a3b8;
  font-style: normal;
  font-weight: 700;
  text-transform: none;
}

body.page-selection-presentation .selection-presentation-field input,
body.page-selection-presentation .selection-presentation-input-card input,
body.page-selection-presentation .selection-presentation-editor input,
body.page-selection-presentation .selection-presentation-editor select,
body.page-selection-presentation .selection-presentation-editor textarea,
body.page-selection-presentation .selection-presentation-size-cell input,
body.page-selection-presentation .selection-presentation-matrix input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--presentation-border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--presentation-ink);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}

body.page-selection-presentation .selection-presentation-context-strip {
  display: grid;
  grid-template-columns: 78px minmax(220px, 1.35fr) repeat(2, minmax(170px, 1fr));
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-context-image {
  aspect-ratio: 1.25;
}

body.page-selection-presentation .selection-presentation-context-strip > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.page-selection-presentation .selection-presentation-context-strip strong {
  overflow-wrap: anywhere;
  color: var(--presentation-ink);
  font-size: 14px;
}

body.page-selection-presentation .selection-presentation-context-strip small {
  color: var(--presentation-muted);
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-color-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

body.page-selection-presentation .selection-presentation-color-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-color-sources button {
  flex: 1 1 150px;
  min-height: 40px;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-color-sources button.is-active {
  border-color: var(--presentation-active);
  background: var(--presentation-active);
  color: #fff;
}

body.page-selection-presentation .selection-presentation-selected-colors {
  min-width: 0;
  display: grid;
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-selected-colors h4 {
  margin: 0;
  color: #334155;
  font-size: 13px;
}

body.page-selection-presentation .selection-presentation-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-color-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--presentation-border);
  border-radius: 10px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-color-visual,
body.page-selection-presentation .selection-presentation-material-swatch {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #f2f3f5;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-color-card div:nth-child(2),
body.page-selection-presentation .selection-presentation-material-card div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.page-selection-presentation .selection-presentation-color-card span {
  color: var(--presentation-muted);
  font-size: 11px;
  font-weight: 750;
}

body.page-selection-presentation .selection-presentation-color-card strong,
body.page-selection-presentation .selection-presentation-material-card h3 {
  overflow-wrap: anywhere;
  color: var(--presentation-ink);
  font-size: 14px;
}

body.page-selection-presentation .selection-presentation-color-card small,
body.page-selection-presentation .selection-presentation-material-card small,
body.page-selection-presentation .selection-presentation-material-card p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--presentation-muted);
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-material-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-material-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--presentation-border);
  border-radius: 10px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-material-card .selection-presentation-card-actions {
  grid-column: 2 / -1;
  justify-content: flex-start;
}

body.page-selection-presentation .selection-presentation-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body.page-selection-presentation .selection-presentation-card-actions button,
body.page-selection-presentation .selection-presentation-annotation-row button,
body.page-selection-presentation .selection-presentation-matrix button {
  min-height: 30px;
  padding: 5px 8px;
  border-color: var(--presentation-border);
  background: #fff;
  color: #334155;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-pill {
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #bce8cf;
  border-radius: 999px;
  background: #edfdf4;
  color: #13794d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-pill.is-warning {
  border-color: #f7dcae;
  background: #fff8ed;
  color: #a15e10;
}

body.page-selection-presentation .selection-presentation-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fafbfc;
}

body.page-selection-presentation .selection-presentation-editor[hidden] {
  display: none;
}

body.page-selection-presentation .selection-presentation-editor-head,
body.page-selection-presentation .selection-presentation-editor-wide {
  grid-column: 1 / -1;
}

body.page-selection-presentation .selection-presentation-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.page-selection-presentation .selection-presentation-editor-head h3 {
  margin: 0;
  font-size: 15px;
}

body.page-selection-presentation .selection-presentation-editor label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-spec-panel {
  display: grid;
  grid-template-columns: minmax(420px, 58%) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

body.page-selection-presentation .selection-presentation-spec-canvas {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fafbfc;
}

body.page-selection-presentation .selection-presentation-annotation-marker {
  position: absolute;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--presentation-active);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

body.page-selection-presentation .selection-presentation-view-rail {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
}

body.page-selection-presentation .selection-presentation-view-rail button {
  min-width: 112px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 5px 8px;
  text-align: left;
}

body.page-selection-presentation .selection-presentation-view-rail button.is-active {
  border-color: var(--presentation-active);
  color: var(--presentation-ink);
}

body.page-selection-presentation .selection-presentation-view-rail span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-view-rail small {
  display: block;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-view-rail img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 6px;
  background: #fafbfc;
}

body.page-selection-presentation .selection-presentation-spec-list {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-missing-view-image {
  display: grid;
  min-height: 260px;
  place-items: center;
  padding: 24px;
  color: #667085;
  font-weight: 800;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-annotation-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-annotation-row:last-child {
  border-bottom: 0;
}

body.page-selection-presentation .selection-presentation-annotation-row strong,
body.page-selection-presentation .selection-presentation-annotation-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

body.page-selection-presentation .selection-presentation-size-form {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-size-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid var(--presentation-border);
  border-bottom: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

body.page-selection-presentation .selection-presentation-size-cell {
  width: 66px;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-size-cell input {
  min-height: 36px;
  padding: 6px 7px;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-size-label-input {
  background: #fafbfc;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-total {
  display: grid;
  gap: 2px;
  min-width: 122px;
  padding: 7px 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 10px;
  background: #fff;
  color: var(--presentation-ink);
  text-align: right;
}

body.page-selection-presentation .selection-presentation-total span {
  color: var(--presentation-muted);
  font-size: 11px;
}

body.page-selection-presentation .selection-presentation-total b {
  font-size: 18px;
}

body.page-selection-presentation .selection-presentation-delivery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
}

body.page-selection-presentation .selection-presentation-delivery-head h3 {
  margin: 0;
  font-size: 16px;
}

body.page-selection-presentation .selection-presentation-delivery-head p {
  margin: 3px 0 0;
  color: var(--presentation-muted);
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-chip-row span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid #d8e4f2;
  border-radius: 8px;
  background: #f6fafc;
  color: #17324f;
  font-size: 13px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-chip-row span.is-success {
  border-color: #cfeadb;
  background: #f0fbf5;
  color: #145c3d;
}

body.page-selection-presentation .selection-presentation-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
}

body.page-selection-presentation .selection-presentation-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-matrix th,
body.page-selection-presentation .selection-presentation-matrix td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--presentation-border);
  text-align: center;
  vertical-align: middle;
}

body.page-selection-presentation .selection-presentation-matrix th {
  background: #fafbfc;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-matrix tfoot th {
  background: #f6f7f9;
  color: var(--presentation-ink);
}

body.page-selection-presentation .selection-presentation-matrix input {
  min-height: 32px;
  padding: 5px 7px;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #f7dcae;
  border-radius: 10px;
  background: #fff8ed;
  color: #8b530f;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-summary-position {
  display: grid;
  gap: 13px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-selection-presentation .selection-presentation-summary-hero {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-summary-hero h3 {
  margin-top: 4px;
  font-size: 20px;
}

body.page-selection-presentation .selection-presentation-summary-hero p {
  margin: 5px 0 0;
  color: var(--presentation-muted);
}

body.page-selection-presentation .selection-presentation-summary-columns,
body.page-selection-presentation .selection-presentation-summary-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-summary-position section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-summary-position h4 {
  margin: 0 0 7px;
  color: var(--presentation-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

body.page-selection-presentation .selection-presentation-summary-position strong {
  color: var(--presentation-ink);
  font-size: 16px;
}

body.page-selection-presentation .selection-presentation-summary-position p {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

body.page-selection-presentation .selection-presentation-summary-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

body.page-selection-presentation .selection-presentation-summary-swatches span {
  min-width: 34px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid var(--presentation-border);
  border-radius: 7px;
  background: #f2f3f5;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
}

body.page-selection-presentation .selection-presentation-summary-details {
  grid-template-columns: 1.2fr 1.2fr minmax(0, 0.9fr);
}

body.page-selection-presentation .selection-presentation-open-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.page-selection-presentation .selection-presentation-open-issues h4 {
  flex-basis: 100%;
}

body.page-selection-presentation .selection-presentation-issue {
  display: inline-flex;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #f7dcae;
  border-radius: 8px;
  background: #fff8ed;
  color: #8b530f;
  font-weight: 750;
}

body.page-selection-presentation .selection-presentation-empty {
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fafbfc;
  color: #64748b;
  font-weight: 750;
}

body.page-selection-presentation .selection-presentation-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  height: 76px;
  display: grid;
  grid-template-columns: minmax(150px, 240px) minmax(220px, 320px) minmax(240px, 360px);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: var(--presentation-navy);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
}

body.page-selection-presentation .selection-presentation-footer-btn {
  min-height: 48px;
  padding: 0 18px;
  border-color: rgba(255, 255, 255, 0.32);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  font-size: 15px;
}

body.page-selection-presentation .selection-presentation-footer-btn--save {
  justify-self: center;
  width: 100%;
}

body.page-selection-presentation .selection-presentation-footer-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

@media (max-width: 1320px) {
  body.page-selection-presentation .selection-presentation-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.page-selection-presentation .selection-presentation-step {
    gap: 6px;
  }

  body.page-selection-presentation .selection-presentation-step .selection-presentation-step-label {
    padding: 0 1px;
    font-size: 12px;
  }

  body.page-selection-presentation #selectionPresentationMeetingDate {
    display: none;
  }

  body.page-selection-presentation .selection-presentation-layout {
    grid-template-columns: 312px minmax(0, 1fr);
    gap: 14px;
    padding-left: 18px;
    padding-right: 18px;
  }

  body.page-selection-presentation .selection-presentation-side-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  body.page-selection-presentation .selection-presentation-color-workspace {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-step-label {
    font-size: 12px;
  }
}

@media (max-width: 1180px) {
  body.page-selection-presentation .selection-presentation-topbar {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body.page-selection-presentation .selection-presentation-status {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.page-selection-presentation .selection-presentation-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  body.page-selection-presentation .selection-presentation-context-strip,
  body.page-selection-presentation .selection-presentation-article-panel,
  body.page-selection-presentation .selection-presentation-spec-panel,
  body.page-selection-presentation .selection-presentation-color-workspace {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-summary-columns,
  body.page-selection-presentation .selection-presentation-summary-details {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  body.page-selection-presentation .selection-presentation-shell {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  body.page-selection-presentation .selection-presentation-topbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.page-selection-presentation .selection-presentation-brand {
    height: auto;
    border-right: 0;
    padding-right: 0;
  }

  body.page-selection-presentation .selection-presentation-tabs {
    position: static;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    overflow-x: auto;
  }

  body.page-selection-presentation .selection-presentation-layout {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-sidebar {
    position: static;
    max-height: none;
  }

  body.page-selection-presentation .selection-presentation-position-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 82vw);
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body.page-selection-presentation .selection-presentation-workbench {
    min-height: auto;
    height: auto;
  }
}

@media (max-width: 640px) {
  body.page-selection-presentation .selection-presentation-shell {
    padding-bottom: 172px;
  }

  body.page-selection-presentation .selection-presentation-workbench-head,
  body.page-selection-presentation .selection-presentation-block-head,
  body.page-selection-presentation .selection-presentation-delivery-head,
  body.page-selection-presentation .selection-presentation-status,
  body.page-selection-presentation .selection-presentation-card-actions {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  body.page-selection-presentation .selection-presentation-field-grid,
  body.page-selection-presentation .selection-presentation-fact-rows,
  body.page-selection-presentation .selection-presentation-editor,
  body.page-selection-presentation .selection-presentation-summary-columns,
  body.page-selection-presentation .selection-presentation-summary-details,
  body.page-selection-presentation .selection-presentation-summary-hero {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-material-card,
  body.page-selection-presentation .selection-presentation-color-card,
  body.page-selection-presentation .selection-presentation-annotation-row {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-footer {
    height: auto;
    grid-template-columns: 1fr;
  }
}

body.page-selection-presentation .selection-presentation-portal-tools {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 1120px;
  max-width: 1120px;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
}

body.page-selection-presentation .selection-presentation-portal-tools dialog,
body.page-selection-presentation .selection-presentation-portal-tools dialog * {
  pointer-events: auto;
}

body.page-selection-presentation .selection-presentation-real-tool-callout {
  border-color: #cbd5e1;
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-card-actions--start {
  justify-content: flex-start;
}

body.page-selection-presentation .selection-presentation-size-cell--readonly {
  min-height: 68px;
  align-content: center;
  justify-items: center;
  border: 1px solid var(--presentation-border);
  border-radius: 10px;
  background: #fafbfc;
}

body.page-selection-presentation .selection-presentation-size-cell--readonly strong {
  color: var(--presentation-ink);
  font-size: 14px;
}

body.page-selection-presentation .selection-presentation-size-cell--readonly span {
  color: #334155;
  font-size: 18px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-annotation-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
}

body.page-selection-presentation .selection-presentation-workspace-modal[hidden] {
  display: none;
}

body.page-selection-presentation .selection-presentation-workspace-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: stretch;
}

body.page-selection-presentation .selection-presentation-workspace-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
}

body.page-selection-presentation .selection-presentation-workspace-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 22px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.34);
}

body.page-selection-presentation .selection-presentation-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--presentation-border);
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-workspace-head span {
  color: var(--presentation-muted);
  font-size: 12px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-workspace-head h2 {
  margin: 2px 0 0;
  color: var(--presentation-ink);
  font-size: 18px;
  letter-spacing: 0;
}

body.page-selection-presentation .selection-presentation-workspace-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

body.meeting-workspace-embedded .top-nav,
body.meeting-workspace-embedded .sidebar {
  display: none !important;
}

body.meeting-workspace-embedded .header-actions,
body.meeting-workspace-embedded #quoteLineSpecQuote,
body.meeting-workspace-embedded #quoteLineSpecLine,
body.meeting-workspace-embedded #quoteLineTechpackQuote,
body.meeting-workspace-embedded #quoteLineTechpackLine {
  display: none !important;
}

body.meeting-workspace-embedded .layout {
  display: block;
  min-height: 100vh;
  padding: 0;
}

body.meeting-workspace-embedded .content {
  width: 100%;
  max-width: none;
  padding: 14px;
}

/* Selection presentation meeting view */
body.page-selection-presentation .selection-presentation-shell {
  grid-template-rows: 72px 78px minmax(0, 1fr);
}

body.page-selection-presentation .selection-presentation-topbar,
body.page-selection-presentation .selection-presentation-tabs,
body.page-selection-presentation .selection-presentation-layout,
body.page-selection-presentation .selection-presentation-footer {
  box-sizing: border-box;
  max-width: 100vw;
}

body.page-selection-presentation .selection-presentation-topbar {
  grid-template-columns: 220px minmax(0, 1fr) auto;
}

body.page-selection-presentation .selection-presentation-brand-logo {
  flex-basis: 44px;
}

body.page-selection-presentation .selection-presentation-brand-text {
  display: none;
  font-size: 18px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-heading {
  display: flex;
  align-items: center;
  gap: 18px;
}

body.page-selection-presentation .selection-presentation-heading h1 {
  font-size: 21px;
}

body.page-selection-presentation .selection-presentation-heading p {
  margin: 0;
}

body.page-selection-presentation #selectionPresentationSubtitle {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 9px;
  border-radius: 7px;
  background: #eef0f4;
  color: #475569;
  font-size: 13px;
}

body.page-selection-presentation .selection-presentation-tabs {
  top: 72px;
  height: 78px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 42px;
}

body.page-selection-presentation .selection-presentation-step {
  min-height: 78px;
}

body.page-selection-presentation .selection-presentation-step.is-active::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  background: #111827;
}

body.page-selection-presentation .selection-presentation-layout {
  height: calc(100vh - 72px - 78px - 76px);
  grid-template-columns: 318px minmax(0, 1fr);
}

body.page-selection-presentation .selection-presentation-side-card {
  min-height: 118px;
  grid-template-columns: 86px minmax(0, 1fr);
  border-radius: 8px;
  box-shadow: none;
}

body.page-selection-presentation .selection-presentation-side-card.is-active {
  border-color: #2f73ff;
  border-left-width: 4px;
  padding-left: 9px;
}

body.page-selection-presentation .selection-presentation-side-status-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid #d4d9e2;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

body.page-selection-presentation .selection-presentation-side-status-pill.is-active {
  border-color: #bcd3ff;
  background: #eef5ff;
  color: #1f63d9;
}

body.page-selection-presentation .selection-presentation-side-status-pill.is-complete {
  border-color: #bce8cf;
  background: #edfdf4;
  color: #13794d;
}

body.page-selection-presentation .selection-presentation-side-progress,
body.page-selection-presentation .selection-presentation-overview-progress {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

body.page-selection-presentation .selection-presentation-side-progress i,
body.page-selection-presentation .selection-presentation-overview-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2f73ff;
}

body.page-selection-presentation .selection-presentation-sidebar-summary--meeting {
  grid-template-columns: 1fr;
}

body.page-selection-presentation .selection-presentation-sidebar-summary--meeting div + div {
  border-left: 0;
}

body.page-selection-presentation .selection-presentation-icon-btn,
body.page-selection-presentation .selection-presentation-row-actions button {
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--presentation-border);
  border-radius: 7px;
  background: #fff;
  color: var(--presentation-ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

body.page-selection-presentation .selection-presentation-article-summary {
  display: grid;
  grid-template-columns: 78px repeat(5, minmax(0, 1fr));
  align-items: center;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-article-summary > div {
  min-width: 0;
  padding: 12px 16px;
  border-left: 1px solid var(--presentation-border);
  text-align: center;
}

body.page-selection-presentation .selection-presentation-article-summary .selection-presentation-context-image {
  border-radius: 0;
  border-left: 0;
}

body.page-selection-presentation .selection-presentation-article-summary span,
body.page-selection-presentation .selection-presentation-delivery-kpis span,
body.page-selection-presentation .selection-presentation-quantity-kpis span {
  display: block;
  color: var(--presentation-muted);
  font-size: 11px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-article-summary strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

body.page-selection-presentation .selection-presentation-material-workspace,
body.page-selection-presentation .selection-presentation-material-editor,
body.page-selection-presentation .selection-presentation-material-summary {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-material-workspace h3,
body.page-selection-presentation .selection-presentation-step-specification > h3 {
  margin: 0;
  font-size: 15px;
}

body.page-selection-presentation .selection-presentation-segment-row,
body.page-selection-presentation .selection-presentation-mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.page-selection-presentation .selection-presentation-segment-row button,
body.page-selection-presentation .selection-presentation-mode-row button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 7px;
  background: #fff;
  color: var(--presentation-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.page-selection-presentation .selection-presentation-mode-row button {
  min-height: 86px;
  display: grid;
  justify-content: start;
  text-align: left;
}

body.page-selection-presentation .selection-presentation-mode-row small {
  color: var(--presentation-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.page-selection-presentation .selection-presentation-segment-row button.is-active,
body.page-selection-presentation .selection-presentation-mode-row button.is-active {
  border-color: #2f73ff;
  background: #f5f9ff;
}

body.page-selection-presentation .selection-presentation-segment-row img,
body.page-selection-presentation .selection-presentation-area-label img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body.page-selection-presentation .selection-presentation-inline-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #fbfcfe;
}

body.page-selection-presentation .selection-presentation-inline-panel label,
body.page-selection-presentation .selection-presentation-delivery-block-head label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-inline-panel input,
body.page-selection-presentation .selection-presentation-inline-panel select,
body.page-selection-presentation .selection-presentation-delivery-block input,
body.page-selection-presentation .selection-presentation-size-table input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--presentation-border-strong);
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

body.page-selection-presentation .selection-presentation-size-table {
  table-layout: fixed;
  width: 100%;
}

body.page-selection-presentation .selection-presentation-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

body.page-selection-presentation .selection-presentation-variant-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

body.page-selection-presentation .selection-presentation-variant-cards article {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-variant-cards article.is-active {
  border-color: #2f73ff;
  background: #f5f9ff;
}

body.page-selection-presentation .selection-presentation-variant-cards img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

body.page-selection-presentation .selection-presentation-manual-fields {
  margin-top: 12px;
}

body.page-selection-presentation .selection-presentation-step-specification {
  height: calc(100vh - 210px);
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--presentation-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--presentation-card-shadow);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__shell {
  display: grid;
  grid-template-areas:
    "header"
    "body"
    "footer";
  grid-template-rows: 72px minmax(0, 1fr) 68px;
  position: relative;
  height: 100%;
  min-height: 0;
  color: #1d2430;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__header,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #fff;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__header {
  grid-area: header;
  min-height: 72px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer {
  grid-area: footer;
  justify-content: space-between;
  min-height: 68px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__title-block {
  min-width: 230px;
  max-width: 360px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__title-block h3,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__title-block p {
  margin: 0;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__title-block h3 {
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__title-block .label {
  display: block;
  margin-bottom: 2px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__title-block p {
  margin-top: 3px;
  color: #6b7280;
  font-size: 12px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__meta {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__meta span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__meta strong {
  color: #111827;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__actions,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer-nav,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__actions {
  margin-left: auto;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__overflow {
  position: relative;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__overflow summary {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 7px;
  color: #475569;
  cursor: pointer;
  list-style: none;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__overflow summary::-webkit-details-marker {
  display: none;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__overflow div {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__overflow:not([open]) div {
  display: none;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__close {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__error {
  position: absolute;
  top: 80px;
  left: 18px;
  right: 18px;
  z-index: 90;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__body {
  grid-area: body;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 310px;
  min-height: 0;
  overflow: hidden;
  background: #eef1f5;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__views,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__side {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__views {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(15, 23, 42, 0.1);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__side {
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__views-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 7px 8px 7px 6px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-card.is-active {
  border-color: rgba(37, 99, 235, 0.14);
  border-left-color: #2563eb;
  background: #eef5ff;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__thumb,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage-thumb {
  width: 46px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 7px;
  background: #f1f5f9;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__thumb img,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__thumb-empty {
  padding: 4px;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-text strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.2;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-text small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__editor {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__editor-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-editor--workspace {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: transparent;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-editor--workspace .annotation-add {
  flex: 0 0 auto;
  position: relative;
  z-index: 25;
  padding: 4px 12px 8px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-editor--workspace .techpack-controls {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  padding: 8px 12px 4px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .techpack-controls .control-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-toolbar-label,
body.page-selection-presentation .quote-line-spec-workspace--presentation #quoteLineTechpackFile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .techpack-media-stage {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  margin: auto auto 12px;
  aspect-ratio: 1 / 1;
  border-color: rgba(15, 23, 42, 0.1);
  border-radius: 10px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .techpack-media-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-side--workspace {
  border: 0;
  box-shadow: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 14px 14px 10px;
  background: #fff;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation #quoteLineSpecificationWorkspaceSidePanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation #techpackAnnotationList {
  flex: 1 1 auto;
  min-height: 120px;
  padding-right: 4px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage {
  position: absolute;
  inset: 86px 18px 82px auto;
  z-index: 70;
  width: min(440px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

body.page-selection-presentation .quote-line-spec-workspace--presentation [hidden],
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage[hidden] {
  display: none !important;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage-head,
body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage-grid {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__manage-row {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer-view {
  min-width: 120px;
  text-align: center;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
}

body.page-selection-presentation .quote-line-spec-workspace--presentation #techpackAnnotationCreateDialog[open],
body.page-selection-presentation .quote-line-spec-workspace--presentation #techpackAnnotationEditDialog[open],
body.page-selection-presentation .quote-line-spec-workspace--presentation #quoteLineTechpackImportDialog[open] {
  width: min(620px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
}

@media (max-width: 1180px) {
  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__body {
    grid-template-columns: 170px minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1024px) {
  body.page-selection-presentation .selection-presentation-step-specification {
    height: calc(100dvh - 180px);
    min-height: 0;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__header {
    flex-wrap: wrap;
    min-height: 0;
    padding: 10px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__meta {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(320px, 1fr) minmax(210px, 32vh);
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__views {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px 10px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-card {
    width: 190px;
    flex: 0 0 190px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__side {
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
  }
}

@media (max-width: 768px) {
  body.page-selection-presentation .selection-presentation-step-specification {
    height: auto;
    min-height: calc(100dvh - 150px);
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__body {
    grid-template-rows: auto minmax(280px, 56vh) minmax(180px, 30vh);
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-editor--workspace {
    align-items: stretch;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-editor--workspace .annotation-add,
  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-techpack-editor--workspace .techpack-controls {
    padding: 8px 10px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .techpack-media-stage {
    margin: auto auto 10px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 10px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer-nav,
  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer-actions {
    width: 100%;
    justify-content: space-between;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__footer-actions button {
    flex: 1 1 0;
  }
}

@media (max-width: 430px) {
  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__actions {
    width: 100%;
    justify-content: space-between;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation .quote-line-spec-workspace__view-card {
    width: 176px;
    flex-basis: 176px;
  }

  body.page-selection-presentation .quote-line-spec-workspace--presentation #annotationAddBtn,
  body.page-selection-presentation .quote-line-spec-workspace--presentation .techpack-controls .ghost {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 12px;
  }
}

body.page-selection-presentation .selection-presentation-inline-panel details {
  grid-column: 1 / -1;
}

body.page-selection-presentation .selection-presentation-material-table {
  min-width: 760px;
}

body.page-selection-presentation .selection-presentation-material-table td {
  text-align: left;
}

body.page-selection-presentation .selection-presentation-area-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 850;
}

body.page-selection-presentation .selection-presentation-material-chip-scroll {
  max-width: 100%;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

body.page-selection-presentation .selection-presentation-material-chip {
  min-width: 116px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--presentation-border);
  border-radius: 7px;
  background: #fff;
  color: var(--presentation-ink);
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}

body.page-selection-presentation .selection-presentation-material-chip i,
body.page-selection-presentation .selection-presentation-size-distribution i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #e5e7eb;
}

body.page-selection-presentation .selection-presentation-row-actions {
  display: inline-flex;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-spec-panel {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
}

body.page-selection-presentation .selection-presentation-spec-canvas {
  min-height: 430px;
}

body.page-selection-presentation .selection-presentation-annotation-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

body.page-selection-presentation .selection-presentation-annotation-row strong {
  display: flex;
  align-items: center;
  gap: 9px;
}

body.page-selection-presentation .selection-presentation-annotation-row strong i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  font-style: normal;
  font-size: 12px;
}

body.page-selection-presentation .selection-presentation-active-views {
  display: grid;
  gap: 8px;
}

body.page-selection-presentation .selection-presentation-active-views .selection-presentation-matrix {
  min-width: 0;
}

body.page-selection-presentation .selection-presentation-quantity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 16px;
}

body.page-selection-presentation .selection-presentation-quantity-kpis,
body.page-selection-presentation .selection-presentation-delivery-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-quantity-kpis div,
body.page-selection-presentation .selection-presentation-delivery-kpis div {
  min-width: 0;
  padding: 22px;
  text-align: center;
}

body.page-selection-presentation .selection-presentation-quantity-kpis div + div,
body.page-selection-presentation .selection-presentation-delivery-kpis div + div {
  border-left: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-quantity-kpis strong,
body.page-selection-presentation .selection-presentation-delivery-kpis strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

body.page-selection-presentation .selection-presentation-size-distribution {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
}

body.page-selection-presentation .selection-presentation-size-distribution > span {
  grid-column: 1 / -1;
  color: #334155;
  font-weight: 800;
}

body.page-selection-presentation .selection-presentation-donut {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  position: relative;
}

body.page-selection-presentation .selection-presentation-donut::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-size-distribution p {
  display: grid;
  grid-template-columns: 22px 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin: 0 0 6px;
}

body.page-selection-presentation .selection-presentation-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

body.page-selection-presentation .selection-presentation-table-actions strong {
  margin-left: auto;
  font-size: 16px;
}

body.page-selection-presentation .selection-presentation-info-note {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid #2f73ff;
  border-radius: 7px;
  background: #eef5ff;
  color: #0f3478;
  font-weight: 650;
}

body.page-selection-presentation .selection-presentation-delivery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

body.page-selection-presentation .selection-presentation-delivery-blocks {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-delivery-block,
body.page-selection-presentation .selection-presentation-delivery-overview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-delivery-block {
  border-color: #2f73ff;
}

body.page-selection-presentation .selection-presentation-delivery-block-head {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

body.page-selection-presentation .selection-presentation-delivery-size-table {
  overflow: hidden;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
}

body.page-selection-presentation .selection-presentation-delivery-size-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(160px, 1.1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--presentation-border);
}

body.page-selection-presentation .selection-presentation-delivery-size-table > div:last-child {
  border-bottom: 0;
}

body.page-selection-presentation .selection-presentation-delivery-block-total {
  text-align: right;
  font-weight: 750;
}

body.page-selection-presentation .selection-presentation-delivery-overview h3,
body.page-selection-presentation .selection-presentation-delivery-overview p {
  margin: 0;
}

body.page-selection-presentation .selection-presentation-delivery-timeline {
  display: grid;
  gap: 12px;
}

body.page-selection-presentation .selection-presentation-delivery-timeline p {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body.page-selection-presentation .selection-presentation-delivery-timeline i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f73ff;
}

body.page-selection-presentation .selection-presentation-delivery-timeline i.is-muted {
  background: #c3c8d2;
}

@media (max-width: 1180px) {
  body.page-selection-presentation .selection-presentation-article-summary,
  body.page-selection-presentation .selection-presentation-quantity-layout,
  body.page-selection-presentation .selection-presentation-delivery-layout {
    grid-template-columns: 1fr;
  }

  body.page-selection-presentation .selection-presentation-inline-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.page-selection-presentation .selection-presentation-tabs {
    grid-template-columns: repeat(6, minmax(148px, 1fr));
  }

  body.page-selection-presentation .selection-presentation-layout {
    height: auto;
  }
}

@media (max-width: 640px) {
  body.page-selection-presentation .selection-presentation-heading,
  body.page-selection-presentation .selection-presentation-delivery-block-head,
  body.page-selection-presentation .selection-presentation-segment-row,
  body.page-selection-presentation .selection-presentation-mode-row,
  body.page-selection-presentation .selection-presentation-inline-panel,
  body.page-selection-presentation .selection-presentation-quantity-kpis,
  body.page-selection-presentation .selection-presentation-delivery-kpis,
  body.page-selection-presentation .selection-presentation-size-distribution {
    grid-template-columns: 1fr;
    display: grid;
  }

  body.page-selection-presentation .selection-presentation-article-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-selection-presentation .selection-presentation-article-summary .selection-presentation-context-image {
    grid-column: 1 / -1;
  }

  body.page-selection-presentation .selection-presentation-delivery-size-table > div {
    grid-template-columns: 70px 1fr;
  }

  body.page-selection-presentation .selection-presentation-delivery-size-table > div > :last-child {
    grid-column: 1 / -1;
  }
}

body.page-selection-presentation .selection-presentation-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 12px 14px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-sidebar-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 7px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

body.page-selection-presentation .selection-presentation-side-card {
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

body.page-selection-presentation .selection-presentation-side-card.is-active {
  padding: 0;
}

body.page-selection-presentation .selection-presentation-side-card__select {
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 42px 11px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

body.page-selection-presentation .selection-presentation-side-card__select:focus-visible,
body.page-selection-presentation .selection-presentation-side-card__action:focus-visible {
  outline: 2px solid #2f73ff;
  outline-offset: -2px;
}

body.page-selection-presentation .selection-presentation-side-card__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  gap: 5px;
}

body.page-selection-presentation .selection-presentation-side-card__action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  cursor: pointer;
  opacity: 0.72;
}

body.page-selection-presentation .selection-presentation-side-card:hover .selection-presentation-side-card__action,
body.page-selection-presentation .selection-presentation-side-card:focus-within .selection-presentation-side-card__action,
body.page-selection-presentation .selection-presentation-side-card.is-active .selection-presentation-side-card__action {
  opacity: 1;
}

body.page-selection-presentation .selection-presentation-side-card__action:hover {
  background: #f8fafc;
  color: #0f172a;
}

body.page-selection-presentation .selection-presentation-side-card__action--danger {
  color: #b42318;
}

body.page-selection-presentation .selection-presentation-side-card__action--danger:hover {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

body.page-selection-presentation .selection-presentation-empty--positions {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: start;
}

body.page-selection-presentation .selection-presentation-empty--positions strong {
  color: var(--presentation-ink);
  font-size: 15px;
}

body.page-selection-presentation .selection-presentation-empty--positions span {
  color: var(--presentation-muted);
}

body.page-selection-presentation .selection-presentation-button--danger {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

body.page-selection-presentation .selection-presentation-confirm-dialog {
  width: min(460px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

body.page-selection-presentation .selection-presentation-confirm-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

body.page-selection-presentation .selection-presentation-confirm-dialog__panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

body.page-selection-presentation .selection-presentation-confirm-dialog__panel header,
body.page-selection-presentation .selection-presentation-confirm-dialog__panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.page-selection-presentation .selection-presentation-confirm-dialog__panel h2,
body.page-selection-presentation .selection-presentation-confirm-dialog__panel p {
  margin: 0;
}

body.page-selection-presentation .selection-presentation-confirm-dialog__panel p {
  color: #475569;
  line-height: 1.45;
}

body.page-selection-presentation .selection-presentation-confirm-dialog__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--presentation-border);
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
}

@media (hover: none), (pointer: coarse) {
  body.page-selection-presentation .selection-presentation-side-card__action {
    width: 38px;
    min-width: 38px;
    height: 38px;
    opacity: 1;
  }

  body.page-selection-presentation .selection-presentation-side-card__select {
    padding-right: 52px;
  }
}

@media (max-width: 640px) {
  body.page-selection-presentation .selection-presentation-side-card__select {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

body.page-selection-presentation .selection-presentation-native-tool-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

body.page-selection-presentation .selection-presentation-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

body.page-selection-presentation .selection-presentation-summary-card {
  display: grid;
  grid-template-rows: minmax(112px, 1fr) auto auto;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

body.page-selection-presentation .selection-presentation-issue-group {
  display: grid;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  text-align: left;
}

body.page-selection-presentation .selection-presentation-step.is-warning .selection-presentation-step-index {
  border-color: rgba(217, 119, 6, 0.36);
  background: #fffbeb;
  color: #b45309;
}

body.page-selection-presentation .selection-presentation-step.is-open .selection-presentation-step-index {
  border-color: rgba(100, 116, 139, 0.22);
  background: #f8fafc;
  color: #475569;
}

.project-selection-sms-dashboard {
  display: grid;
  gap: 16px;
  min-width: 0;
  color: #0f172a;
}

.project-selection-sms-overview {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.project-selection-sms-overview__head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.project-selection-sms-overview__head h3 {
  margin: 0 0 3px;
  font-size: 22px;
  line-height: 1.15;
}

.project-selection-sms-overview__head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.project-selection-sms-dashboard__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.project-selection-sms-dashboard__head h2 {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.15;
}

.project-selection-sms-dashboard__head p,
.project-selection-sms-dashboard__head span {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.project-selection-sms-dashboard__head > div:last-child {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-selection-sms-kpis,
.project-selection-sms-skeleton {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.project-selection-sms-kpi,
.project-selection-sms-skeleton span {
  min-width: 0;
  min-height: 82px;
  max-height: 90px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-kpi {
  display: grid;
  align-content: center;
  gap: 5px;
}

.project-selection-sms-kpi__label,
.project-selection-sms-kpi small {
  overflow-wrap: anywhere;
  color: #64748b;
  font-size: 13px;
}

.project-selection-sms-kpi__label {
  display: flex;
  gap: 7px;
  align-items: center;
  font-weight: 700;
}

.project-selection-sms-kpi__label svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-selection-sms-kpi strong {
  font-size: 26px;
  line-height: 1;
}

.project-selection-sms-kpi--success {
  border-color: rgba(22, 163, 74, 0.25);
}

.project-selection-sms-kpi--warning {
  border-color: rgba(217, 119, 6, 0.28);
  background: #fff;
}

.project-selection-sms-kpi--danger {
  border-color: rgba(220, 38, 38, 0.25);
  background: #fff;
}

.project-selection-sms-progress-summary {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-progress-summary > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.project-selection-sms-progress-summary h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 4px;
  font-size: 18px;
}

.project-selection-sms-progress-summary p,
.project-selection-sms-progress-summary small,
.project-selection-sms-progress-summary footer {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.project-selection-sms-progress-summary > header > strong {
  flex: 0 0 auto;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.2;
  text-align: right;
}

.project-selection-sms-progress-info {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 50%;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1;
  cursor: help;
}

.project-selection-sms-progress-info::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 4;
  top: calc(100% + 8px);
  left: 0;
  width: min(310px, 82vw);
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.project-selection-sms-progress-info:hover::after,
.project-selection-sms-progress-info:focus::after {
  opacity: 1;
  transform: translateY(0);
}

.project-selection-sms-progress-bar {
  display: flex;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.project-selection-sms-progress-bar span {
  display: block;
  min-width: 0;
  height: 100%;
}

.project-selection-sms-progress-bar .is-complete {
  background: #16a34a;
}

.project-selection-sms-progress-bar .is-progress {
  background: #2563eb;
}

.project-selection-sms-progress-bar .is-not-started {
  background: #e5e7eb;
}

.project-selection-sms-progress-empty {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.project-selection-sms-progress-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.project-selection-sms-progress-states article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}

.project-selection-sms-progress-states span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.project-selection-sms-progress-states strong {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}

.project-selection-sms-progress-states small {
  overflow-wrap: anywhere;
}

.project-selection-sms-progress-summary footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, auto));
  gap: 0;
  align-items: center;
  padding-top: 2px;
}

.project-selection-sms-progress-summary footer span {
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  overflow-wrap: anywhere;
}

.project-selection-sms-progress-summary footer span:first-child {
  padding-left: 0;
  border-left: 0;
}

.project-selection-sms-tabs {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  max-width: 100%;
  contain: layout paint;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  padding: 0;
}

.project-selection-sms-tabs button {
  min-height: 42px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 700;
  white-space: nowrap;
}

.project-selection-sms-dashboard button {
  min-height: 26px !important;
}

.project-selection-sms-tabs button[aria-selected="true"] {
  border-color: #2563eb;
  background: transparent;
  color: #1d4ed8;
}

.project-selection-sms-main-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.project-selection-sms-main-grid > main,
.project-selection-sms-section,
.project-selection-sms-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.project-selection-sms-side {
  position: sticky;
  top: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-selection-sms-side > h3 {
  margin: 0;
  font-size: 17px;
}

.project-selection-sms-section > header,
.project-selection-sms-material > header,
.project-selection-sms-checks header,
.project-selection-sms-issues-summary header,
.project-selection-sms-position__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.project-selection-sms-section h3,
.project-selection-sms-checks h3,
.project-selection-sms-checks h4,
.project-selection-sms-issues-summary h3,
.project-selection-sms-issues-summary h4,
.project-selection-sms-actions h4 {
  margin: 0;
  font-size: 15px;
}

.project-selection-sms-section header span,
.project-selection-sms-material header span,
.project-selection-sms-position__head p {
  color: #64748b;
  font-size: 13px;
}

.project-selection-sms-position,
.project-selection-sms-material,
.project-selection-sms-checks,
.project-selection-sms-issues-summary,
.project-selection-sms-actions,
.project-selection-sms-error,
.project-selection-sms-preview__position {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.project-selection-sms-position {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.project-selection-sms-position__head h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.project-selection-sms-position__head h4 span {
  color: #2563eb;
  font-size: 13px;
}

.project-selection-sms-position__chips,
.project-selection-sms-actions,
.project-selection-sms-material footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-selection-sms-position__body {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.project-selection-sms-position__image {
  width: 86px;
  aspect-ratio: 1;
  min-height: 0;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.project-selection-sms-position__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-selection-sms-position__facts,
.project-selection-sms-material__grid,
.project-selection-sms-preview__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px 7px;
}

.project-selection-sms-position__fact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-selection-sms-position__fact span,
.project-selection-sms-position__fact dt {
  color: #64748b;
  font-size: 10.5px;
}

.project-selection-sms-position__fact strong,
.project-selection-sms-position__fact dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 11.5px;
  line-height: 1.15;
}

.project-selection-sms-missing {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 10.5px;
}

.project-selection-sms-position__materials {
  display: grid;
  gap: 4px;
}

.project-selection-sms-position__materials h5 {
  margin: 0;
  font-size: 12px;
}

.project-selection-sms-material-table {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
}

.project-selection-sms-material-table__head,
.project-selection-sms-material-row {
  display: grid;
  grid-template-columns: .85fr 1.05fr .9fr 1.05fr .9fr .68fr .62fr .58fr .82fr;
  gap: 6px;
  min-width: 920px;
  padding: 5px 6px;
  align-items: center;
}

.project-selection-sms-material-table__head {
  background: #f8fafc;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
}

.project-selection-sms-material-section-title {
  min-width: 920px;
  padding: 8px 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  color: #0f172a;
  font-size: 12px;
}

.project-selection-sms-material-section-title strong {
  display: block;
}

.project-selection-sms-material-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  min-height: 31px;
  font-size: 10.8px;
}

.project-selection-sms-material-row small {
  display: block;
  color: #64748b;
}

.project-selection-sms-material__wish small {
  display: inline;
  color: #64748b;
}

.project-selection-sms-material__wish small:not(:empty)::before {
  content: ' · ';
}

.project-selection-sms-material__wish {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

.project-selection-sms-material__swatch {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 5px;
  background-size: cover;
  background-position: center;
}

.project-selection-sms-material__swatch--empty {
  background: #f1f5f9;
}

.project-selection-sms-material__mr,
.project-selection-sms-material .link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.project-selection-sms-material-list {
  display: grid;
  gap: 10px;
}

.project-selection-sms-grouped-material-table {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
}

.project-selection-sms-grouped-material-table__head,
.project-selection-sms-grouped-material-row {
  display: grid;
  grid-template-columns: .68fr 1.15fr .9fr .95fr .75fr .68fr .72fr .78fr;
  gap: 6px;
  min-width: 780px;
  padding: 6px;
  align-items: center;
}

.project-selection-sms-grouped-material-table__head {
  background: #f8fafc;
  color: #475569;
  font-size: 10.8px;
  font-weight: 700;
}

.project-selection-sms-material {
  gap: 0;
  padding: 0;
  border-width: 0;
  border-top-width: 1px;
  border-radius: 0;
  box-shadow: none;
  font-size: 10.8px;
}

.project-selection-sms-material__members {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.project-selection-sms-material__members[hidden] {
  display: none !important;
}

.project-selection-sms-material__members span {
  padding: 4px 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #f8fafc;
  font-size: 12px;
}

.project-selection-sms-checks ul,
.project-selection-sms-issues-summary ul {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.project-selection-sms-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 13px;
}

.project-selection-sms-check--success span {
  color: #16a34a;
}

.project-selection-sms-check--danger span {
  color: #dc2626;
}

.project-selection-sms-issues-summary li {
  display: grid;
  gap: 2px;
}

.project-selection-sms-issues-summary small {
  color: #64748b;
}

.project-selection-sms-actions {
  justify-content: stretch;
}

.project-selection-sms-actions button {
  width: 100%;
}

.project-selection-sms-nav-action {
  justify-self: start;
  min-height: 34px;
  border-color: rgba(15, 23, 42, 0.14);
  background: #fff;
  color: #334155;
  font-weight: 700;
}

.project-selection-sms-audit-table {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
}

.project-selection-sms-audit-table__head,
.project-selection-sms-audit-row {
  display: grid;
  grid-template-columns: 220px repeat(8, minmax(82px, .7fr)) 110px;
  gap: 6px;
  min-width: 1040px;
  padding: 7px 8px;
  align-items: center;
}

.project-selection-sms-audit-table__head {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.project-selection-sms-audit-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  font-size: 12px;
}

.project-selection-sms-audit-row.is-active {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.project-selection-sms-audit-position {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.project-selection-sms-audit-position img,
.project-selection-sms-audit-position i {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.project-selection-sms-audit-position strong,
.project-selection-sms-audit-position em,
.project-selection-sms-audit-position small {
  display: block;
  overflow-wrap: anywhere;
}

.project-selection-sms-audit-position em {
  font-style: normal;
  font-weight: 700;
}

.project-selection-sms-audit-position small {
  color: #64748b;
  font-size: 11px;
}

.project-selection-sms-ready-list {
  display: grid;
  gap: 10px;
}

.project-selection-sms-ready-row {
  display: grid;
  grid-template-columns: 44px minmax(210px, .9fr) minmax(0, 1.5fr) minmax(150px, .7fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-ready-row.is-selected {
  border-color: rgba(20, 184, 166, 0.45);
  background: #f8fffd;
  box-shadow: inset 3px 0 0 #14b8a6;
}

.project-selection-sms-ready-row.is-active {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: inset 3px 0 0 #2563eb;
}

.project-selection-sms-position-select {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
}

.project-selection-sms-position-select input {
  width: 20px;
  height: 20px;
  accent-color: #0f766e;
}

.project-selection-sms-position-select__check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 900;
}

.project-selection-sms-conversion-card,
.project-selection-sms-selection-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-conversion-card__facts,
.project-selection-sms-selection-bar__actions,
.project-selection-sms-conversion-card__orders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.project-selection-sms-conversion-card__facts div {
  display: grid;
  gap: 2px;
  min-width: 130px;
}

.project-selection-sms-conversion-card__facts span,
.project-selection-sms-selection-bar small {
  color: #64748b;
  font-size: 12px;
}

.project-selection-sms-selection-bar {
  position: sticky;
  top: 0;
  z-index: 2;
}

.project-selection-sms-position-sms-status {
  display: grid;
  gap: 3px;
  color: #475569;
  font-size: 12px;
}

.project-selection-sms-position-sms-status--included strong {
  color: #15803d;
}

.project-selection-sms-position-sms-status a {
  color: #2563eb;
  font-weight: 750;
  text-decoration: none;
}

.project-selection-sms-ready-row__identity {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.project-selection-sms-ready-row__identity img,
.project-selection-sms-ready-row__identity > span {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
}

.project-selection-sms-ready-row__identity strong,
.project-selection-sms-ready-row__identity small {
  display: block;
  overflow-wrap: anywhere;
}

.project-selection-sms-ready-row__identity strong {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.project-selection-sms-ready-row__identity small {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.project-selection-sms-ready-row__checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.project-selection-sms-inline-status-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 2px;
}

.project-selection-sms-check-chip {
  box-sizing: border-box;
  display: inline-flex;
  flex: 1 1 0;
  justify-content: center;
  gap: 5px;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.project-selection-sms-inline-status-checks .project-selection-sms-check-chip {
  flex: 0 1 auto;
}

.project-selection-sms-check-chip b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.project-selection-sms-check-chip--success b {
  color: #15803d;
}

.project-selection-sms-check-chip--warning b,
.project-selection-sms-check-chip--neutral b {
  color: #b45309;
}

.project-selection-sms-check-chip--danger b {
  color: #dc2626;
}

.project-selection-sms-ready-row__actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.project-selection-sms-create-summary,
.project-selection-sms-create-positions,
.project-selection-sms-create-warnings {
  display: grid;
  gap: 10px;
}

.project-selection-sms-create-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-selection-sms-create-summary span,
.project-selection-sms-create-positions article,
.project-selection-sms-create-warnings article {
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.project-selection-sms-create-positions article {
  display: grid;
  gap: 3px;
}

.project-selection-sms-create-positions small {
  color: #64748b;
}

.project-selection-sms-modal__message--error {
  border-color: rgba(220, 38, 38, 0.28);
  background: #fef2f2;
  color: #991b1b;
}

.project-selection-sms-create-error {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  padding: 10px 12px;
}

.project-selection-sms-create-error[hidden] {
  display: none;
}

.project-selection-sms-create-error small {
  color: #7f1d1d;
}

.project-selection-sms-position-summary + .project-selection-sms-position-inline-detail {
  margin-top: -6px;
}

.project-selection-sms-position-inline-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.26);
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.project-selection-sms-position-inline-detail[hidden] {
  display: none !important;
}

.project-selection-sms-position-inline-detail__grid,
.project-selection-sms-position-inline-detail__top {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2.2fr);
  gap: 12px;
  align-items: start;
}

.project-selection-sms-inline-process-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.project-selection-sms-inline-process-buttons .project-position-overview__process-button {
  width: 100%;
  min-width: 0;
  min-height: 72px;
}

.project-selection-sms-inline-process-buttons .project-position-overview__process-content {
  min-width: 0;
}

.project-selection-sms-inline-process-buttons .project-position-overview__process-content strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.project-selection-sms-inline-card,
.project-selection-sms-inline-section,
.project-selection-sms-materials-inline {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-inline-card h4,
.project-selection-sms-inline-section h4,
.project-selection-sms-materials-inline h4 {
  margin: 0;
  font-size: 14px;
}

.project-selection-sms-inline-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-selection-sms-inline-view-action {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 28px !important;
  padding: 4px 9px !important;
  white-space: nowrap;
}

.project-selection-sms-inline-view-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-selection-sms-wizard-host {
  position: fixed;
  width: 0;
  height: 0;
  overflow: visible;
}

.project-selection-sms-wizard-host #quoteRequestDetailCard > .muted,
.project-selection-sms-wizard-host .project-selection-quote-detail > :not(dialog) {
  display: none !important;
}

.project-selection-sms-article-overview dl,
.project-selection-sms-inline-section dl,
.project-selection-sms-code-card dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.project-selection-sms-inline-section--delivery,
.project-selection-sms-inline-section--materials {
  grid-column: 1 / -1;
}

.project-selection-sms-quick-overview {
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.project-selection-sms-quick-overview__head {
  margin-bottom: 12px;
}

.project-selection-sms-quick-overview__head h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.project-selection-sms-quick-overview__head p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
}

.project-selection-sms-quick-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.project-selection-sms-quick-overview__item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 260px;
  padding: 22px 22px 20px;
  border: 1px solid #e5eaf1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.project-selection-sms-quick-overview__item > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-selection-sms-quick-overview__item > header strong {
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.project-selection-sms-quick-overview__status {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0px auto 0;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.project-selection-sms-quick-overview__status.is-success {
  color: #139843;
  background: radial-gradient(circle, rgba(232, 249, 239, 0.96) 0%, rgba(232, 249, 239, 0.9) 64%, rgba(232, 249, 239, 0.58) 100%);
}

.project-selection-sms-quick-overview__status.is-warning {
  color: #d97706;
  background: #fff7ed;
}

.project-selection-sms-quick-overview__status.is-danger {
  color: #ef4444;
  background: radial-gradient(circle, rgba(254, 236, 235, 0.98) 0%, rgba(254, 236, 235, 0.9) 64%, rgba(254, 236, 235, 0.58) 100%);
}

.project-selection-sms-quick-overview__status.is-neutral {
  color: #64748b;
  background: #f1f5f9;
}

.project-selection-sms-quick-overview__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 146px;
  text-align: center;
}

.project-selection-sms-quick-overview__body > strong {
  display: block;
  min-width: 0;
  margin-top: 22px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-selection-sms-quick-overview__body p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-selection-sms-quick-overview__link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: #16a34a;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.project-selection-sms-quick-overview__link:hover {
  background: color-mix(in srgb, currentColor 7%, white);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.project-selection-sms-quick-overview__link:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.28);
  outline-offset: 3px;
}

.project-selection-sms-quick-overview__link--danger {
  color: #ef4444;
}

.project-selection-sms-quick-overview__link--warning {
  color: #d97706;
}

.project-selection-sms-quick-overview__link--neutral {
  color: #64748b;
}

.project-selection-sms-quick-overview__link-icon {
  font-size: 20px;
  line-height: 1;
}

.project-selection-sms-quick-overview__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  width: 100%;
  max-width: 260px;
  margin-top: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 5px;
  border-radius: 14px;
}

.project-selection-sms-quick-overview__prices span {
  min-width: 0;
  padding: 0 18px;
}

.project-selection-sms-quick-overview__prices span + span {
  border-left: 1px solid #e2e8f0;
}

.project-selection-sms-quick-overview__prices small {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.project-selection-sms-quick-overview__prices strong {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.project-selection-sms-quick-overview__research {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  width: 100%;
  margin-top: 18px;
  text-align: left;
}

.project-selection-sms-quick-overview__donut {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 53%, transparent 54%),
    conic-gradient(#d97706 var(--sms-progress), #e5e7eb 0);
}

.project-selection-sms-quick-overview__donut--success {
  background:
    radial-gradient(circle at center, #fff 0 53%, transparent 54%),
    conic-gradient(#16a34a var(--sms-progress), #e5e7eb 0);
}

.project-selection-sms-quick-overview__donut--neutral {
  background:
    radial-gradient(circle at center, #fff 0 53%, transparent 54%),
    conic-gradient(#94a3b8 var(--sms-progress), #e5e7eb 0);
}

.project-selection-sms-quick-overview__donut--warning {
  background:
    radial-gradient(circle at center, #fff 0 53%, transparent 54%),
    conic-gradient(#d97706 var(--sms-progress), #e5e7eb 0);
}

.project-selection-sms-quick-overview__donut strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.project-selection-sms-quick-overview__research-copy {
  min-width: 0;
}

.project-selection-sms-quick-overview__research-copy strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.project-selection-sms-quick-overview__research-copy p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
}

.project-selection-sms-quick-overview__research-copy small {
  display: block;
  margin-top: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .project-selection-sms-quick-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .project-selection-sms-quick-overview__grid {
    grid-template-columns: 1fr;
  }

  .project-selection-sms-quick-overview__item {
    min-height: 250px;
    padding: 20px;
  }

  .project-selection-sms-quick-overview__research {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
    text-align: center;
  }
}

.project-selection-sms-position-inline-detail .selection-material-summary-table-wrap {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
}

.project-selection-sms-position-inline-detail .selection-material-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: #111827;
}

.project-selection-sms-position-inline-detail .selection-material-col-area {
  width: 210px;
}

.project-selection-sms-position-inline-detail .selection-material-col-actions {
  width: 112px;
}

.project-selection-sms-position-inline-detail .selection-material-summary-table th {
  height: 46px;
  padding: 11px 16px;
  border-bottom: 1px solid #dbe3ee;
  background: #fbfdff;
  color: #42526e;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.project-selection-sms-position-inline-detail .selection-material-summary-table td {
  height: 58px;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid #dbe3ee;
  background: #fff;
  vertical-align: middle;
}

.project-selection-sms-position-inline-detail .selection-material-summary-table td + td,
.project-selection-sms-position-inline-detail .selection-material-summary-table th + th {
  border-left: 1px solid #dbe3ee;
}

.project-selection-sms-position-inline-detail .selection-material-summary-area-cell {
  background: #fbfdff !important;
}

.project-selection-sms-position-inline-detail .selection-material-summary-area {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.project-selection-sms-position-inline-detail .selection-material-summary-area img,
.project-selection-sms-position-inline-detail .selection-material-summary-area svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.project-selection-sms-position-inline-detail .selection-material-summary-area svg {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.project-selection-sms-position-inline-detail .selection-material-summary-area strong {
  display: block;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.project-selection-sms-position-inline-detail .selection-material-summary-area small {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid #d7e0ec;
  border-radius: 6px;
  background: #f3f6fa;
  color: #42526e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.project-selection-sms-position-inline-detail .selection-material-summary-main {
  display: grid;
  grid-template-columns: 22px 38px 42px minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(145px, 1fr) minmax(0, max-content) 38px;
  column-gap: 14px;
  align-items: center;
  min-width: 760px;
  min-height: 62px;
}

.project-selection-sms-position-inline-detail .selection-material-summary-main--readonly {
  grid-template-columns: 38px 42px minmax(150px, 1fr) 180px 260px 170px;
  min-width: 0;
}

.project-selection-sms-position-inline-detail .selection-material-summary-drag {
  display: grid;
  place-items: center;
  width: 22px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: grab;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.project-selection-sms-position-inline-detail .selection-material-summary-order {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fbfdff;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.project-selection-sms-position-inline-detail .selection-material-summary-preview {
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #cfd6e1;
  border-radius: 5px;
  background: var(--selection-material-color, #f8fafc);
}

.project-selection-sms-position-inline-detail .selection-material-summary-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-selection-sms-position-inline-detail .selection-material-summary-preview--empty {
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
}

.project-selection-sms-position-inline-detail .selection-material-summary-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-selection-sms-position-inline-detail .selection-material-summary-cell strong {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-selection-sms-position-inline-detail .selection-material-summary-cell small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-selection-sms-position-inline-detail .selection-material-summary-table--sms-readonly .selection-material-summary-cell--code strong {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.project-selection-sms-position-inline-detail .selection-material-summary-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-self: end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.project-selection-sms-position-inline-detail .selection-material-color-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  background: var(--selection-material-color, #f8fafc);
}

.project-selection-sms-position-inline-detail .selection-material-summary-actions-cell {
  text-align: center;
}

.project-selection-sms-position-inline-detail .selection-material-summary-research-status {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-width: 0;
}

.project-selection-sms-position-inline-detail .selection-material-summary-research-status small {
  max-width: 100%;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-selection-sms-position-inline-detail .selection-material-summary-table--sms-readonly button,
.project-selection-sms-position-inline-detail .selection-material-summary-table--sms-readonly input {
  display: none;
}

.project-selection-sms-position-inline-detail .selection-material-source-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 23px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-selection-sms-position-inline-detail .selection-material-source-badge--customer {
  border-color: rgba(37, 99, 235, 0.16);
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
}

.project-selection-sms-position-inline-detail .selection-material-research-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 23px;
  padding: 2px 7px 2px 3px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.project-selection-sms-position-inline-detail .selection-material-research-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.project-selection-sms-position-inline-detail .selection-material-research-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
}

.project-selection-sms-position-inline-detail .selection-material-research-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
}

.project-selection-sms-position-inline-detail .selection-material-research-switch.is-active {
  border-color: rgba(22, 163, 74, 0.18);
  background: #f0fdf4;
  color: #15803d;
}

.project-selection-sms-position-inline-detail .selection-material-research-switch.is-active .selection-material-research-switch__track {
  background: #16a34a;
}

.project-selection-sms-position-inline-detail .selection-material-research-switch.is-active .selection-material-research-switch__thumb {
  transform: translateX(14px);
}

.project-selection-sms-position-inline-detail .selection-material-detail-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fff;
  color: #111827;
  cursor: pointer;
}

.project-selection-sms-position-inline-detail .selection-material-detail-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.project-selection-sms-position-inline-detail .selection-material-detail-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.project-selection-sms-position-inline-detail .selection-material-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 62px;
}

.project-selection-sms-delivery-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.project-selection-sms-delivery-plan {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.project-selection-sms-delivery-table {
  display: grid;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-delivery-table__head,
.project-selection-sms-delivery-table__row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) repeat(var(--sms-delivery-size-count, 5), minmax(54px, .5fr)) minmax(70px, .65fr);
  min-width: max-content;
}

.project-selection-sms-delivery-table__head span,
.project-selection-sms-delivery-table__row span {
  min-width: 0;
  padding: 8px 10px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
  overflow-wrap: anywhere;
  text-align: center;
}

.project-selection-sms-delivery-table__head span:first-child,
.project-selection-sms-delivery-table__row span:first-child {
  border-left: 0;
  text-align: left;
}

.project-selection-sms-delivery-table__head {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.project-selection-sms-delivery-table__row {
  min-height: 44px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 13px;
}

.project-selection-sms-delivery-table__row span:last-child {
  font-weight: 850;
}

.project-selection-sms-delivery-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}

.project-selection-sms-delivery-block header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.project-selection-sms-delivery-sizes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.project-selection-sms-delivery-sizes span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}

.project-selection-sms-material__select {
  min-height: 24px;
}

.project-selection-sms-article-overview .project-selection-sms-position__image {
  width: min(160px, 100%);
  justify-self: start;
}

.project-selection-sms-position-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.project-selection-sms-position-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-position-list h3 {
  margin: 0;
  font-size: 16px;
}

.project-selection-sms-position-filters {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.project-selection-sms-position-filters [aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.35);
  background: #eff6ff;
  color: #1d4ed8;
}

.project-selection-sms-position-list__items {
  display: grid;
  gap: 8px;
}

.project-selection-sms-position-list__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  min-height: 76px;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.project-selection-sms-position-list__item.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: #eff6ff;
}

.project-selection-sms-position-list__item img,
.project-selection-sms-position-list__item > span:first-child {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
}

.project-selection-sms-position-list__item strong,
.project-selection-sms-position-list__item em,
.project-selection-sms-position-list__item small {
  display: block;
  overflow-wrap: anywhere;
}

.project-selection-sms-position-list__item em {
  font-style: normal;
  font-weight: 700;
}

.project-selection-sms-position-list__item small {
  color: #64748b;
  font-size: 11px;
}

.project-selection-sms-position-list__item .badge {
  grid-column: 1 / -1;
  justify-self: start;
}

.project-selection-sms-symbol {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}

.project-selection-sms-symbol--success {
  color: #15803d;
  background: #dcfce7;
}

.project-selection-sms-symbol--warning,
.project-selection-sms-symbol--neutral {
  color: #b45309;
  background: #fef3c7;
}

.project-selection-sms-symbol--danger {
  color: #dc2626;
  background: #fee2e2;
}

.project-selection-sms-detail-grid,
.project-selection-sms-detail-top {
  display: grid;
  grid-template-columns: minmax(160px, .75fr) minmax(260px, 1.2fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: start;
}

.project-selection-sms-detail-top {
  grid-template-columns: minmax(180px, .55fr) minmax(300px, 1fr);
}

.project-selection-sms-identity,
.project-selection-sms-review-areas,
.project-selection-sms-code-card,
.project-selection-sms-material-research-card,
.project-selection-sms-next {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-identity h4,
.project-selection-sms-review-areas h4,
.project-selection-sms-code-card h4,
.project-selection-sms-material-research-card h4,
.project-selection-sms-next h4 {
  margin: 0;
  font-size: 14px;
}

.project-selection-sms-identity p,
.project-selection-sms-material-research-card p,
.project-selection-sms-material-research-card small {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.project-selection-sms-review-area {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 8px;
}

.project-selection-sms-review-area--field {
  grid-template-columns: 1fr auto;
  align-items: start;
}

.project-selection-sms-review-area--field header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.project-selection-sms-review-area--field p,
.project-selection-sms-review-area--field ul {
  grid-column: 1 / -1;
  margin: 0;
}

.project-selection-sms-review-area--field ul {
  display: grid;
  gap: 3px;
  padding-left: 18px;
  color: #475569;
  font-size: 12px;
}

.project-selection-sms-review-area--field > button {
  grid-column: auto;
  grid-row: auto;
  justify-self: end;
}

.project-selection-sms-review-area--field > button + button {
  grid-column: 1 / -1;
  justify-self: start;
}

.project-selection-sms-detail-accordions {
  display: grid;
  gap: 10px;
}

.project-selection-sms-accordion {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-accordion summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
}

.project-selection-sms-accordion > .project-selection-sms-code-card,
.project-selection-sms-accordion > .project-selection-sms-material-research-card,
.project-selection-sms-accordion > .project-selection-sms-material-details {
  margin: 0 12px 12px;
}

.project-selection-sms-material-details[hidden] {
  display: none !important;
}

.project-selection-sms-review-area small {
  grid-column: 2;
  color: #64748b;
  font-size: 12px;
}

.project-selection-sms-review-area button {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.project-selection-sms-code-card section {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 8px;
}

.project-selection-sms-code-table {
  display: grid;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.project-selection-sms-code-table__head,
.project-selection-sms-code-row {
  display: grid;
  grid-template-columns: .8fr 1fr 1.1fr 1fr;
  gap: 8px;
  padding: 7px 9px;
  align-items: center;
}

.project-selection-sms-code-table__head {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.project-selection-sms-code-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 12px;
}

.project-selection-sms-inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-selection-sms-code-card h5 {
  margin: 0;
  font-size: 12px;
  color: #334155;
}

.project-selection-sms-position-review {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 10px;
}

.project-selection-sms-position-review--released {
  border-top-color: rgba(22, 163, 74, 0.18);
  background: rgba(240, 253, 244, 0.72);
  margin: 0 -4px -4px;
  padding: 12px;
  border-radius: 8px;
}

.project-selection-sms-position-review div {
  margin-right: auto;
}

.project-selection-sms-position-review p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 12px;
}

.project-selection-sms-detail-head {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.8fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  background: #fff;
}

.project-selection-sms-detail-head__identity {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.project-selection-sms-detail-head__identity img,
.project-selection-sms-detail-head__identity > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 48px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #f8fafc;
  object-fit: contain;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.project-selection-sms-detail-head__identity strong,
.project-selection-sms-detail-head__identity small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-selection-sms-detail-head__identity strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 850;
}

.project-selection-sms-detail-head__identity small {
  margin-top: 2px;
  color: #42526e;
  font-size: 13px;
}

.project-selection-sms-detail-head__rings {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.project-selection-sms-head-ring {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.project-selection-sms-inline-section > h4 {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0;
}

.project-selection-sms-position-inline-detail .project-selection-sms-inline-section {
  padding: 14px;
  border-color: #e4e8ef;
  border-radius: 10px;
}

.selection-material-status-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
}

.selection-material-status-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.selection-material-status-table th:nth-child(2),
.selection-material-status-table td:nth-child(2) {
  width: 28%;
}

.selection-material-status-table th,
.selection-material-status-table td {
  box-sizing: border-box;
  padding: 10px 12px;
  border-bottom: 1px solid #e4e8ef;
  text-align: left;
  vertical-align: middle;
}

.selection-material-status-table th {
  height: 38px;
  background: #fbfdff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.selection-material-status-table td {
  height: 58px;
  color: #0f172a;
  font-size: 12px;
}

.selection-material-status-table tr:last-child td {
  border-bottom: 0;
}

.selection-material-status-area,
.selection-material-status-material {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.selection-material-status-area img,
.selection-material-status-area svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.selection-material-status-area svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.selection-material-status-area strong,
.selection-material-status-material strong,
.selection-material-status-result strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-material-status-material small,
.selection-material-status-result small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-material-status-material .selection-material-summary-preview {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 5px;
  background: var(--selection-material-color, #f8fafc);
}

.selection-material-status-material .selection-material-summary-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selection-material-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.selection-material-status-pill--active,
.selection-material-status-pill--complete {
  border-color: rgba(22, 163, 74, 0.18);
  background: #f0fdf4;
  color: #15803d;
}

.selection-material-status-pill--progress {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
  color: #92400e;
}

.selection-material-status-pill--inactive {
  border-color: #d7dde6;
  background: #f8fafc;
  color: #64748b;
}

.selection-material-status-pill[role="button"] {
  cursor: pointer;
}

.project-selection-sms-donut {
  --sms-progress: 0;
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(#2563eb calc(var(--sms-progress) * 1%), #e2e8f0 0);
  position: relative;
  text-align: center;
}

.project-selection-sms-donut::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}

.project-selection-sms-donut strong,
.project-selection-sms-donut span {
  position: relative;
  z-index: 1;
  display: block;
}

.project-selection-sms-donut span {
  color: #64748b;
  font-size: 12px;
}

.project-selection-sms-progress-list {
  display: grid;
  gap: 5px;
  margin: 0;
}

.project-selection-sms-status-line {
  display: block;
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 15px;
}

.project-selection-sms-confirm-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
}

.project-selection-sms-progress-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.project-selection-sms-progress-list dt,
.project-selection-sms-progress-list dd {
  margin: 0;
}

.project-selection-sms-next-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.project-selection-sms-next-step small {
  grid-column: 2;
  color: #64748b;
}

.project-selection-sms-next-step em {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-style: normal;
}

.project-selection-sms-material-table__head,
.project-selection-sms-material-row {
  grid-template-columns: .85fr 1.05fr .9fr 1.05fr .9fr .68fr .62fr .58fr .82fr;
}

.project-selection-sms-compact-action {
  min-height: 24px !important;
  padding: 3px 6px !important;
  white-space: nowrap;
  font-size: 10.5px !important;
}

.project-selection-sms-note {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
}

.project-selection-sms-note p {
  margin: 6px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.project-selection-sms-issue-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.project-selection-sms-issue-filters [aria-pressed="true"] {
  border-color: rgba(37, 99, 235, 0.35);
  background: #eff6ff;
  color: #1d4ed8;
}

.project-selection-sms-issue-group {
  display: grid;
  gap: 10px;
}

.project-selection-sms-issue-group h4 {
  margin: 8px 0 0;
}

.project-selection-sms-issue {
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
}

.project-selection-sms-issue header,
.project-selection-sms-issue footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.project-selection-sms-issue dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.project-selection-sms-warning,
.project-selection-sms-modal__message {
  padding: 10px 12px;
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
}

.project-selection-sms-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}

.project-selection-sms-modal__panel {
  display: grid;
  gap: 14px;
  width: min(940px, 100%);
  max-height: min(780px, calc(100vh - 40px));
  overflow: auto;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}

.project-selection-sms-modal[data-sms-release-confirm-modal] {
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(1px);
}

.project-selection-sms-modal__panel--release-confirm {
  --release-text: #0f172a;
  --release-muted: #475569;
  --release-border: rgba(148, 163, 184, 0.28);
  --release-warning: #d97706;
  --release-warning-border: rgba(217, 119, 6, 0.24);
  --release-warning-surface: #fff7ed;
  --release-info: #2563eb;
  --release-info-border: rgba(37, 99, 235, 0.18);
  --release-info-surface: #eff6ff;
  box-sizing: border-box;
  gap: 18px;
  width: min(712px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 24px 26px 26px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.project-selection-sms-modal__panel--release-confirm > header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 36px;
  gap: 18px;
  align-items: start;
}

.project-selection-sms-release-warning-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--release-warning-border);
  border-radius: 10px;
  background: var(--release-warning-surface);
  color: var(--release-warning);
}

.project-selection-sms-release-warning-icon__svg,
.project-selection-sms-confirm-list__svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-selection-sms-release-title {
  min-width: 0;
  padding-top: 3px;
}

.project-selection-sms-release-title strong {
  display: block;
  color: var(--release-text);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}

.project-selection-sms-release-title p {
  margin: 7px 0 0;
  color: var(--release-muted);
  font-size: 14px;
  line-height: 1.4;
}

.project-selection-sms-release-close {
  display: inline-grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0 !important;
  border: 1px solid var(--release-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.project-selection-sms-release-close:hover,
.project-selection-sms-release-close:focus-visible {
  border-color: rgba(15, 23, 42, 0.22) !important;
  background: #f8fafc !important;
}

.project-selection-sms-modal__panel--release-confirm .project-selection-sms-confirm-list {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--release-warning-border);
  border-radius: 12px;
  background: rgba(255, 251, 235, 0.52);
  color: var(--release-text);
  font-size: 14px;
  list-style: none;
}

.project-selection-sms-modal__panel--release-confirm .project-selection-sms-confirm-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 47px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(217, 119, 6, 0.16);
  line-height: 1.35;
}

.project-selection-sms-modal__panel--release-confirm .project-selection-sms-confirm-list li:last-child {
  border-bottom: 0;
}

.project-selection-sms-confirm-list__icon {
  display: grid;
  place-items: center;
  color: var(--release-warning);
}

.project-selection-sms-confirm-list__svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

.project-selection-sms-release-empty {
  margin: 4px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--release-warning-border);
  border-radius: 12px;
  background: rgba(255, 251, 235, 0.52);
  color: var(--release-muted);
  font-size: 14px;
}

.project-selection-sms-release-info {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--release-info-border);
  border-radius: 11px;
  background: var(--release-info-surface);
  color: #172554;
}

.project-selection-sms-release-info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.project-selection-sms-release-info__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--release-info);
}

.project-selection-sms-release-info__svg {
  width: 22px;
  height: 22px;
  fill: var(--release-info);
}

.project-selection-sms-release-info__svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.project-selection-sms-release-note-field {
  gap: 8px;
}

.project-selection-sms-release-note-field > span:first-child {
  color: var(--release-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.project-selection-sms-release-note-box {
  position: relative;
  display: block;
}

.project-selection-sms-release-note-box textarea {
  width: 100%;
  min-height: 90px;
  padding: 14px 16px 26px;
  border: 1px solid var(--release-border);
  border-radius: 11px;
  background: #fff;
  color: var(--release-text);
  font-size: 14px;
  line-height: 1.45;
  resize: none;
}

.project-selection-sms-release-note-box textarea::placeholder {
  color: #94a3b8;
}

.project-selection-sms-release-note-box textarea:focus {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.project-selection-sms-release-note-counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.project-selection-sms-modal__panel--release-confirm > footer {
  align-items: center;
  margin-top: 2px;
}

.project-selection-sms-release-cancel,
.project-selection-sms-release-confirm {
  min-height: 46px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.project-selection-sms-release-cancel {
  padding: 0 22px !important;
  border: 1px solid var(--release-border) !important;
  background: #fff !important;
  color: var(--release-text) !important;
}

.project-selection-sms-release-cancel:hover,
.project-selection-sms-release-cancel:focus-visible {
  border-color: rgba(15, 23, 42, 0.24) !important;
  background: #f8fafc !important;
}

.project-selection-sms-release-confirm {
  padding: 0 24px !important;
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.project-selection-sms-release-confirm:hover,
.project-selection-sms-release-confirm:focus-visible {
  background: #111827 !important;
  border-color: #111827 !important;
}

.project-selection-sms-release-confirm:disabled {
  cursor: wait;
  opacity: 0.72;
}

.project-selection-sms-modal--drawer {
  place-items: stretch end;
}

.project-selection-sms-modal--drawer .project-selection-sms-modal__panel {
  width: min(720px, 100%);
  height: 100%;
  max-height: none;
  border-radius: 8px 0 0 8px;
}

.project-selection-sms-drawer-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.project-selection-sms-modal__panel > header,
.project-selection-sms-modal__panel > footer,
.project-selection-sms-proposal header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.project-selection-sms-proposals {
  display: grid;
  gap: 12px;
}

.project-selection-sms-proposal {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
}

.project-selection-sms-proposal.is-selected {
  border-color: rgba(22, 163, 74, 0.35);
  background: #fff;
}

.project-selection-sms-proposal.is-pending {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.project-selection-sms-proposal dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.project-selection-sms-proposal__attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-selection-sms-skeleton span {
  min-height: 78px;
  background: linear-gradient(90deg, #f8fafc, #eef2f7, #f8fafc);
}

@media (max-width: 1199px) {
  .project-selection-sms-kpis,
  .project-selection-sms-skeleton {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-selection-sms-progress-summary footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .project-selection-sms-progress-summary footer span:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .project-selection-sms-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-selection-sms-position-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .project-selection-sms-ready-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .project-selection-sms-ready-row__checks,
  .project-selection-sms-ready-row__actions,
  .project-selection-sms-position-sms-status {
    grid-column: 1 / -1;
  }

  .project-selection-sms-position-inline-detail__grid,
  .project-selection-sms-position-inline-detail__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-selection-sms-inline-process-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-selection-sms-detail-head {
    grid-template-columns: 1fr;
  }

  .project-selection-sms-detail-head__rings {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .project-selection-sms-position-inline-detail__grid > .project-selection-sms-code-card {
    grid-column: 1 / -1;
  }

  .project-selection-sms-side {
    position: static;
  }
}

@media (max-width: 767px) {
  .project-selection-sms-dashboard {
    gap: 12px;
  }

  .project-selection-sms-dashboard__head,
  .project-selection-sms-overview__head,
  .project-selection-sms-section > header,
  .project-selection-sms-position__head {
    display: grid;
  }

  .project-selection-sms-kpis,
  .project-selection-sms-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .project-selection-sms-progress-summary > header {
    display: grid;
  }

  .project-selection-sms-progress-summary > header > strong {
    text-align: left;
  }

  .project-selection-sms-progress-info::after {
    display: none;
  }

  .project-selection-sms-progress-states {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-selection-sms-progress-states article {
    padding: 9px;
  }

  .project-selection-sms-progress-states strong {
    font-size: 24px;
  }

  .project-selection-sms-position__body,
  .project-selection-sms-material__grid,
  .project-selection-sms-preview__grid,
  .project-selection-sms-issue dl,
  .project-selection-sms-proposal dl,
  .project-selection-sms-position-workspace,
  .project-selection-sms-detail-top,
  .project-selection-sms-position-inline-detail__grid,
  .project-selection-sms-position-inline-detail__top,
  .project-selection-sms-inline-process-buttons,
  .project-selection-sms-quick-overview__grid {
    grid-template-columns: 1fr;
  }

  .project-selection-sms-quick-overview__link {
    min-height: 44px;
  }

  .project-selection-sms-detail-head {
    padding: 12px;
  }

  .project-selection-sms-detail-head__rings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .project-selection-sms-head-ring {
    justify-content: flex-start;
  }

  .project-selection-sms-ready-row {
    min-height: 0;
  }

  .project-selection-sms-conversion-card,
  .project-selection-sms-selection-bar,
  .project-selection-sms-selection-bar__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .project-selection-sms-selection-bar__actions button {
    width: 100%;
  }

  .project-selection-sms-ready-row__checks,
  .project-selection-sms-inline-status-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .project-selection-sms-ready-row__checks .project-selection-sms-check-chip,
  .project-selection-sms-inline-status-checks .project-selection-sms-check-chip {
    width: 100%;
  }

  .project-selection-sms-ready-row__identity {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .project-selection-sms-ready-row__identity img,
  .project-selection-sms-ready-row__identity > span {
    width: 56px;
    height: 56px;
  }

  .project-selection-sms-ready-row__actions {
    justify-items: stretch;
  }

  .project-selection-sms-ready-row__actions button {
    width: 100%;
  }

  .project-selection-sms-position__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-selection-sms-position__image {
    width: 100%;
    max-width: 140px;
    justify-self: center;
  }

  .project-selection-sms-material-table,
  .project-selection-sms-grouped-material-table {
    overflow: visible;
    border: 0;
  }

  .selection-material-status-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .selection-material-status-table,
  .selection-material-status-table tbody,
  .selection-material-status-table tr,
  .selection-material-status-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .selection-material-status-table {
    table-layout: auto;
  }

  .selection-material-status-table thead {
    display: none;
  }

  .selection-material-status-table tr {
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background: #fff;
  }

  .selection-material-status-table td {
    height: auto;
    padding: 0;
    border: 0;
  }

  .selection-material-status-table td::before {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
  }

  .selection-material-status-area strong,
  .selection-material-status-material strong,
  .selection-material-status-result strong,
  .selection-material-status-material small,
  .selection-material-status-result small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .project-selection-sms-delivery-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .project-selection-sms-delivery-table__head {
    display: none;
  }

  .project-selection-sms-delivery-table__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e4e8ef;
    border-radius: 8px;
    background: #fff;
  }

  .project-selection-sms-delivery-table__row span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .project-selection-sms-delivery-table__row span::before {
    color: #64748b;
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-table,
  .project-selection-sms-position-inline-detail .selection-material-summary-table tbody,
  .project-selection-sms-position-inline-detail .selection-material-summary-table tr,
  .project-selection-sms-position-inline-detail .selection-material-summary-table td {
    display: block;
    width: 100%;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-table thead {
    display: none;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-table td {
    height: auto;
    padding: 10px 12px;
    border-left: 0;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-area-cell {
    border-top: 1px solid #dbe3ee;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-main {
    grid-template-columns: 22px 32px 36px minmax(0, 1fr) 36px;
    min-width: 0;
    row-gap: 8px;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-main--readonly {
    grid-template-columns: 32px 40px minmax(0, 1fr);
    min-width: 0;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-cell--material,
  .project-selection-sms-position-inline-detail .selection-material-summary-cell--color,
  .project-selection-sms-position-inline-detail .selection-material-summary-cell--code,
  .project-selection-sms-position-inline-detail .selection-material-summary-badges {
    grid-column: 4;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-main--readonly .selection-material-summary-cell--material,
  .project-selection-sms-position-inline-detail .selection-material-summary-main--readonly .selection-material-summary-cell--color,
  .project-selection-sms-position-inline-detail .selection-material-summary-main--readonly .selection-material-summary-cell--code,
  .project-selection-sms-position-inline-detail .selection-material-summary-main--readonly .selection-material-summary-badges {
    grid-column: 3;
  }

  .project-selection-sms-position-inline-detail .selection-material-detail-toggle {
    grid-column: 5;
    grid-row: 1;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-badges {
    justify-self: start;
    max-width: 100%;
  }

  .project-selection-sms-position-inline-detail .selection-material-summary-actions {
    justify-content: flex-start;
    min-height: 44px;
  }

  .project-selection-sms-material-table__head,
  .project-selection-sms-grouped-material-table__head,
  .project-selection-sms-code-table__head {
    display: none;
  }

  .project-selection-sms-material-row,
  .project-selection-sms-grouped-material-row,
  .project-selection-sms-code-row {
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: #fff;
  }

  .project-selection-sms-material-row > span,
  .project-selection-sms-grouped-material-row > span,
  .project-selection-sms-code-row > span {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
  }

  .project-selection-sms-material-row > span::before,
  .project-selection-sms-grouped-material-row > span::before,
  .project-selection-sms-code-row > span::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
  }

  .project-selection-sms-material-row .project-selection-sms-material__wish {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .project-selection-sms-material-row .project-selection-sms-material__wish::after {
    content: '';
    width: 22px;
    height: 22px;
    grid-column: 2;
    grid-row: 1;
  }

  .project-selection-sms-material__wish .project-selection-sms-material__swatch {
    grid-column: 2;
    grid-row: 1;
  }

  .project-selection-sms-material__wish > span:last-child {
    grid-column: 2;
    grid-row: 1;
    padding-left: 30px;
  }

  .project-selection-sms-position__chips,
  .project-selection-sms-material footer {
    justify-content: flex-start;
  }

  .project-selection-sms-modal {
    padding: 0;
  }

  .project-selection-sms-modal__panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .project-selection-sms-modal[data-sms-release-confirm-modal] {
    padding: 12px;
    place-items: center;
  }

  .project-selection-sms-modal__panel--release-confirm {
    width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100dvh - 24px);
    padding: 18px;
    border-radius: 14px;
  }

  .project-selection-sms-modal__panel--release-confirm > header {
    grid-template-columns: 46px minmax(0, 1fr) 36px;
    gap: 12px;
  }

  .project-selection-sms-release-warning-icon {
    width: 46px;
    height: 46px;
  }

  .project-selection-sms-release-title strong {
    font-size: 20px;
  }

  .project-selection-sms-modal__panel--release-confirm .project-selection-sms-confirm-list li {
    min-height: 46px;
    padding: 10px 14px;
  }

  .project-selection-sms-release-info {
    padding: 12px 14px;
  }

  .project-selection-sms-modal__panel--release-confirm > footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }

  .project-selection-sms-release-cancel,
  .project-selection-sms-release-confirm {
    width: 100%;
  }

  .project-selection-sms-modal--drawer .project-selection-sms-modal__panel {
    width: 100%;
    border-radius: 0;
  }
}

@media (max-width: 359px) {
  .project-selection-sms-position__facts,
  .project-selection-sms-progress-states,
  .project-selection-sms-ready-row__checks,
  .project-selection-sms-inline-status-checks,
  .project-selection-sms-material-row > span,
  .project-selection-sms-grouped-material-row > span,
  .project-selection-sms-material-row .project-selection-sms-material__wish {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 379px) {
  .project-selection-sms-kpis,
  .project-selection-sms-skeleton {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  body.page-selection-presentation .selection-presentation-summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.page-selection-presentation .selection-presentation-native-tool-panel,
  body.page-selection-presentation .selection-presentation-summary-cards {
    grid-template-columns: 1fr;
  }
}
.project-sms-orders-overview,
.project-sms-remaining-positions,
.project-sms-order-detail-host {
  box-sizing: border-box;
  margin-bottom: 12px;
  min-width: 0;
}

.project-sms-orders-overview {
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: var(--surface, #fff);
  padding: 14px;
}

.project-sms-orders-overview__head,
.project-sms-remaining-positions header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.project-sms-orders-overview__head h3,
.project-sms-remaining-positions h4,
.project-sms-order-detail-host__head h3 {
  margin: 0;
}

.project-sms-orders-overview__head p,
.project-sms-remaining-positions p {
  margin: 4px 0 0;
  color: var(--muted, #667085);
}

.project-sms-orders-overview__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.project-sms-orders-overview__metrics span,
.project-sms-order-overview-card__positions span {
  border: 1px solid var(--border, #d8dee8);
  border-radius: 999px;
  background: var(--surface-muted, #f7f8fb);
  color: var(--text, #1f2937);
  font-size: 0.86rem;
  line-height: 1.2;
  padding: 5px 9px;
}

.project-sms-orders-overview__list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}

.project-sms-order-overview-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface, #fff);
}

.project-sms-order-overview-card.is-active {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.project-sms-order-overview-card__top,
.project-sms-control header,
.project-sms-work-section > header,
.project-sms-next-action,
.project-sms-supply-section > header,
.project-sms-phase4e-section > header,
.project-sms-production-readiness > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.project-sms-order-overview-card__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.project-sms-order-overview-card__identity > div,
.project-sms-next-action > div,
.project-sms-work-section header > div,
.project-sms-control header > div {
  min-width: 0;
}

.project-sms-order-overview-card__identity span,
.project-sms-next-action span,
.project-sms-control__grid span,
.project-sms-deadlines span {
  display: block;
  color: var(--muted, #667085);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-sms-order-overview-card__identity strong,
.project-sms-order-overview-card__identity small {
  display: block;
  overflow-wrap: anywhere;
}

.project-sms-order-overview-card__identity small {
  color: var(--muted, #667085);
  margin-top: 2px;
}

.project-sms-order-overview-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e9f2ff, #eef7f0);
  border: 1px solid var(--border, #d8dee8);
  flex: 0 0 auto;
}

.project-sms-order-overview-card__metrics,
.project-sms-order-overview-card__positions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-sms-order-overview-card__positions {
  display: block;
}

.project-sms-order-overview-card__positions summary {
  cursor: pointer;
  color: var(--muted, #667085);
  font-weight: 700;
}

.project-sms-order-overview-card__positions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.project-sms-order-overview-card__metrics span {
  color: var(--text, #1f2937);
  font-size: 0.9rem;
}

.project-sms-order-overview-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.project-sms-order-overview-card__actions--secondary {
  justify-content: flex-start;
}

.project-sms-control,
.project-sms-next-action,
.project-sms-deadlines,
.project-sms-work-section {
  box-sizing: border-box;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: var(--surface-muted, #f7f8fb);
  padding: 12px;
}

.project-sms-control h4,
.project-sms-work-section h4,
.project-sms-deadlines h4,
.project-sms-production-readiness h4,
.project-sms-phase4e-section h4,
.project-sms-supply-section h4 {
  margin: 0;
}

.project-sms-control p,
.project-sms-work-section p,
.project-sms-phase4e-section p,
.project-sms-supply-section p,
.project-sms-production-readiness p {
  margin: 3px 0 0;
  color: var(--muted, #667085);
  font-size: 0.9rem;
}

.project-sms-control__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.project-sms-control__grid div,
.project-sms-deadlines article {
  min-width: 0;
  border-left: 2px solid var(--border, #d8dee8);
  padding-left: 10px;
}

.project-sms-control__grid strong,
.project-sms-deadlines strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.project-sms-control__grid small,
.project-sms-deadlines small {
  display: block;
  margin-top: 2px;
  color: var(--muted, #667085);
  overflow-wrap: anywhere;
}

.project-sms-next-action {
  align-items: center;
  background: #fff;
  border-color: color-mix(in srgb, var(--primary, #2563eb) 28%, var(--border, #d8dee8));
}

.project-sms-next-action strong {
  display: block;
  margin-top: 2px;
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.project-sms-next-action p {
  margin: 4px 0 0;
  color: var(--muted, #667085);
}

.project-sms-deadlines h4 {
  margin-bottom: 8px;
}

.project-sms-deadlines > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.project-sms-deadlines article.is-urgent {
  border-left-color: #d97706;
}

.project-sms-timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.project-sms-timeline__step {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: #fff;
  color: var(--text, #1f2937);
  cursor: pointer;
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 8px;
  text-align: left;
}

.project-sms-timeline__step span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border, #d8dee8);
}

.project-sms-timeline__step strong,
.project-sms-timeline__step small {
  overflow-wrap: anywhere;
}

.project-sms-timeline__step small {
  color: var(--muted, #667085);
  font-size: 0.78rem;
}

.project-sms-timeline__step.is-completed span { background: #16a34a; }
.project-sms-timeline__step.is-active span { background: var(--primary, #2563eb); }
.project-sms-timeline__step.is-attention span,
.project-sms-timeline__step.is-blocked span { background: #d97706; }

.project-sms-work-areas {
  display: grid;
  gap: 12px;
}

.project-sms-work-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}

.project-sms-work-facts span {
  display: block;
  overflow-wrap: anywhere;
}

.project-sms-supplier-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.project-sms-supplier-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  border-top: 1px solid var(--border, #d8dee8);
  padding-top: 8px;
}

.project-sms-supplier-list strong,
.project-sms-supplier-list small,
.project-sms-supplier-list p {
  display: block;
  overflow-wrap: anywhere;
}

.project-sms-supplier-list small {
  color: var(--muted, #667085);
  margin-top: 2px;
}

.project-sms-supplier-list p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted, #667085);
}

.project-sms-supply-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.project-sms-research-inline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--border, #d8dee8);
  margin-top: 10px;
  padding-top: 10px;
}

.project-sms-research-inline strong,
.project-sms-research-inline span {
  display: block;
  overflow-wrap: anywhere;
}

.project-sms-research-inline span {
  color: var(--muted, #667085);
  margin-top: 2px;
}

.project-sms-supply-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-sms-supply-section__items {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.project-sms-supply-item {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted, #f7f8fb);
}

.project-sms-supply-item header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.project-sms-supply-item strong,
.project-sms-supply-item small,
.project-sms-supply-item span {
  overflow-wrap: anywhere;
}

.project-sms-supply-item small {
  display: block;
  color: var(--muted, #667085);
  margin-top: 2px;
}

.project-sms-supply-item__facts {
  display: grid;
  gap: 4px 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  font-size: 0.9rem;
}

.project-sms-phase4e-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border, #d8dee8);
  padding-top: 10px;
}

.project-sms-phase4e-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.project-sms-phase4e-card {
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted, #f7f8fb);
}

.project-sms-phase4e-card--wide {
  grid-column: 1 / -1;
}

.project-sms-phase4e-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.project-sms-phase4e-card strong,
.project-sms-phase4e-card small,
.project-sms-phase4e-card span,
.project-sms-phase4e-card li {
  overflow-wrap: anywhere;
}

.project-sms-phase4e-card small {
  display: block;
  color: var(--muted, #667085);
  margin-top: 2px;
}

.sms-partner-feasibility-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sms-partner-feasibility-card {
  border: 1px solid var(--border, #d7dde8);
  border-radius: 8px;
  padding: 0.85rem;
  background: var(--surface, #fff);
}

.sms-partner-feasibility-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.sms-partner-feasibility-card h4 {
  margin: 0 0 0.2rem;
}

.sms-partner-feasibility-note,
.sms-partner-feasibility-stale,
.sms-partner-feasibility-missing {
  margin: 0.6rem 0;
  padding: 0.65rem;
  border-radius: 8px;
  background: #fff7df;
}

.sms-partner-feasibility-stale,
.sms-partner-feasibility-missing {
  border: 1px solid #f2c46d;
}

.project-sms-remaining-positions {
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: var(--surface, #fff);
  padding: 14px;
}

.project-sms-remaining-positions__list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.project-sms-remaining-position {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--border, #d8dee8);
  padding-top: 8px;
}

.project-sms-remaining-position span {
  color: var(--muted, #667085);
  font-size: 0.9rem;
}

.project-sms-order-detail-host__head {
  margin: 0 0 8px;
}

@media (max-width: 980px) {
  .project-sms-control__grid,
  .project-sms-deadlines > div,
  .project-sms-supply-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-sms-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .project-sms-orders-overview__head,
  .project-sms-remaining-positions header,
  .project-sms-order-overview-card,
  .project-sms-order-overview-card__top,
  .project-sms-control header,
  .project-sms-next-action,
  .project-sms-work-section > header,
  .project-sms-research-inline {
    display: grid;
    grid-template-columns: 1fr;
  }

  .project-sms-control__grid,
  .project-sms-deadlines > div,
  .project-sms-timeline,
  .project-sms-supply-columns,
  .project-sms-supplier-list article {
    grid-template-columns: 1fr;
  }

  .project-sms-orders-overview__head .ghost,
  .project-sms-remaining-positions header .ghost,
  .project-sms-order-overview-card__actions .ghost,
  .project-sms-next-action .ghost,
  .project-sms-work-section .ghost {
    min-height: 44px;
    width: 100%;
  }
}

@media (max-width: 360px) {
  .project-sms-orders-overview,
  .project-sms-order-overview-card,
  .project-sms-control,
  .project-sms-next-action,
  .project-sms-deadlines,
  .project-sms-work-section,
  .project-sms-supply-item,
  .project-sms-phase4e-card {
    max-width: 100%;
    overflow-x: hidden;
  }
}
.project-sms-packaging-order-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.project-sms-packaging-order-dialog__card {
  width: 100%;
  max-width: 720px;
}

.project-sms-packaging-order-list {
  display: grid;
  gap: 10px;
}

.project-sms-packaging-order-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
}

.project-sms-packaging-order-option div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-sms-packaging-order-option span,
.project-sms-packaging-order-option small {
  color: var(--muted, #64748b);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .project-sms-packaging-order-dialog {
    width: min(100vw - 16px, 720px);
    max-width: calc(100vw - 16px);
  }

  .project-sms-packaging-order-option {
    grid-template-columns: 1fr;
  }
}

body.page-projekt .project-sms-delivery-planning__hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

body.page-projekt .project-sms-delivery-planning__hero h2 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.16;
}

body.page-projekt .project-sms-delivery-planning__hero small {
  display: block;
  color: #33415c;
  font-size: 14px;
  font-weight: 800;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, auto));
  gap: 8px;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 44px;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__hero-statuses .badge {
  justify-self: start;
  white-space: normal;
}

body.page-projekt .project-sms-delivery-planning__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.page-projekt .project-sms-delivery-planning__section-head h3 {
  margin: 0;
  color: #071532;
  font-size: 16px;
  line-height: 1.2;
}

body.page-projekt .project-sms-delivery-planning__deadlines {
  display: grid;
  gap: 10px;
}

body.page-projekt .project-sms-delivery-planning__deadline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body.page-projekt .project-sms-delivery-planning__deadline-card {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 108px;
  padding: 14px 15px;
  border: 1px solid #dbe4ef;
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  background: #fff;
}

body.page-projekt .project-sms-delivery-planning__deadline-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__deadline-card strong {
  color: #071532;
  font-size: 21px;
  line-height: 1.1;
}

body.page-projekt .project-sms-delivery-planning__deadline-card small,
body.page-projekt .project-sms-delivery-planning__deadline-card em {
  color: #33415c;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

body.page-projekt .project-sms-delivery-planning__deadline-card.is-success {
  border-left-color: #16a34a;
}

body.page-projekt .project-sms-delivery-planning__deadline-card.is-warning {
  border-left-color: #d97706;
  background: #fffaf0;
}

body.page-projekt .project-sms-delivery-planning__deadline-card.is-danger {
  border-left-color: #dc2626;
  background: #fff5f5;
}

body.page-projekt .project-sms-delivery-planning__context {
  grid-template-columns: 190px minmax(280px, 1fr) 250px;
}

body.page-projekt .project-sms-delivery-planning__next-action {
  border-right: 0;
}

body.page-projekt .project-sms-delivery-planning__table {
  min-width: 860px;
}

body.page-projekt .project-sms-delivery-planning__table > thead > tr > th:nth-child(2),
body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(2) {
  width: 220px;
}

body.page-projekt .project-sms-delivery-planning__sizes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

body.page-projekt .project-sms-delivery-planning__sizes-table th,
body.page-projekt .project-sms-delivery-planning__sizes-table td {
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  text-align: center;
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__sizes-table th {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__sizes-table th:first-child {
  width: 54px;
  text-align: left;
}

body.page-projekt .project-sms-delivery-planning__sizes-table thead th:not(:first-child),
body.page-projekt .project-sms-delivery-planning__sizes-table td {
  color: #071532;
  font-weight: 850;
}

body.page-projekt .project-sms-delivery-planning__timeline {
  min-height: 0;
}

body.page-projekt .project-sms-delivery-planning__axis {
  height: 214px;
}

body.page-projekt .project-sms-delivery-planning__axis-line {
  top: 162px;
}

body.page-projekt .project-sms-delivery-planning__axis-start {
  top: 153px;
}

body.page-projekt .project-sms-delivery-planning__marker-dot {
  top: calc(162px - var(--marker-top, 0px));
}

body.page-projekt .project-sms-delivery-planning__marker-label {
  width: var(--marker-label-width, 132px);
}

body.page-projekt .project-sms-delivery-planning__axis-marker strong {
  font-size: 11px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker em {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.1;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--material {
  color: #7c2d12;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--packaging {
  color: #6d28d9;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--material .project-sms-delivery-planning__marker-dot {
  background: #ea580c;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--packaging .project-sms-delivery-planning__marker-dot {
  background: #7c3aed;
}

body.page-projekt .project-sms-delivery-planning__phase-row {
  display: block;
  height: 70px;
  margin-top: 0;
  padding: 0;
  position: relative;
}

body.page-projekt .project-sms-delivery-planning__phase-row .project-sms-delivery-planning__phase:first-child {
  margin-left: 0;
}

body.page-projekt .project-sms-delivery-planning__phase {
  align-content: center;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 64px;
  justify-content: center;
  left: var(--phase-left, 0);
  min-width: 0;
  overflow: hidden;
  padding: 7px 4px;
  position: absolute;
  width: var(--phase-width, 10%);
}

body.page-projekt .project-sms-delivery-planning__phase strong {
  color: #071532;
  font-size: 12px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.page-projekt .project-sms-delivery-planning__phase small {
  display: block;
  opacity: 1;
  position: static;
}

body.page-projekt .project-sms-delivery-planning__phase.is-compact {
  padding-left: 2px;
  padding-right: 2px;
}

body.page-projekt .project-sms-delivery-planning__phase.is-compact span {
  font-size: 7.5px;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__phase.is-compact strong,
body.page-projekt .project-sms-delivery-planning__phase.is-compact small {
  display: none;
}

body.page-projekt .project-sms-delivery-planning__phase:hover small,
body.page-projekt .project-sms-delivery-planning__phase:focus-visible small {
  background: transparent;
  color: #64748b;
  padding: 0;
  position: static;
  transform: none;
}

body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact span {
  text-transform: none;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-0 {
  --marker-label-top: 0px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-1 {
  --marker-label-top: 42px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-2 {
  --marker-label-top: 84px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker--level-3 {
  --marker-label-top: 122px;
}

body.page-projekt .project-sms-delivery-planning__marker-label {
  top: var(--marker-label-top, 0px);
}

body.page-projekt button.project-sms-delivery-planning__axis-marker,
body.page-projekt button.project-sms-delivery-planning__phase {
  appearance: none;
  font: inherit;
}

body.page-projekt .project-sms-delivery-planning__axis-marker {
  --marker-label-width: 148px;
  cursor: pointer;
  width: 1px;
  height: 1px;
  min-height: 1px;
  overflow: visible;
}

body.page-projekt .project-sms-delivery-planning__axis-marker:focus-visible,
body.page-projekt .project-sms-delivery-planning__phase:focus-visible {
  outline: 2px solid rgba(11, 111, 232, 0.42);
  outline-offset: 3px;
}

body.page-projekt .project-sms-delivery-planning__axis-marker[aria-expanded="true"] .project-sms-delivery-planning__marker-dot,
body.page-projekt .project-sms-delivery-planning__axis-marker:hover .project-sms-delivery-planning__marker-dot {
  box-shadow: 0 0 0 5px rgba(11, 111, 232, 0.14);
}

body.page-projekt .project-sms-delivery-planning__axis-marker.is-success .project-sms-delivery-planning__marker-dot {
  background: #16a34a;
}

body.page-projekt .project-sms-delivery-planning__axis-marker.is-warning .project-sms-delivery-planning__marker-dot {
  background: #d97706;
}

body.page-projekt .project-sms-delivery-planning__axis-marker.is-danger .project-sms-delivery-planning__marker-dot {
  background: #dc2626;
}

body.page-projekt .project-sms-delivery-planning__axis-marker.is-neutral .project-sms-delivery-planning__marker-dot,
body.page-projekt .project-sms-delivery-planning__axis-marker.is-info .project-sms-delivery-planning__marker-dot {
  background: #0b6fe8;
}

body.page-projekt .project-sms-delivery-planning__marker-label {
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: var(--marker-label-width, 148px);
  pointer-events: auto;
}

body.page-projekt .project-sms-delivery-planning__marker-label small,
body.page-projekt .project-sms-delivery-planning__marker-label strong {
  white-space: nowrap;
}

body.page-projekt .project-sms-delivery-planning__marker-label strong {
  font-size: 12px;
  line-height: 1.1;
}

body.page-projekt .project-sms-delivery-planning__phase {
  cursor: pointer;
}

body.page-projekt .project-sms-delivery-planning__phase[aria-expanded="true"] {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(11, 111, 232, 0.12);
}

body.page-projekt .project-sms-delivery-planning__detail-popover[hidden] {
  display: none !important;
}

body.page-projekt .project-sms-delivery-planning__detail-popover {
  position: fixed;
  z-index: 1200;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  color: #071532;
}

body.page-projekt .project-sms-delivery-planning__detail-popover.is-mobile {
  width: auto;
  max-height: min(62vh, 420px);
  overflow: auto;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e2e8f0;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-head strong {
  color: #071532;
  font-size: 14px;
  line-height: 1.2;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-head span {
  color: #33415c;
  font-size: 13px;
  font-weight: 800;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-list div {
  display: grid;
  grid-template-columns: minmax(92px, 0.85fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-list dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}

body.page-projekt .project-sms-delivery-planning__detail-popover-list dd {
  min-width: 0;
  margin: 0;
  color: #071532;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  body.page-projekt .project-sms-delivery-planning__hero {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__hero-statuses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__deadline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__context {
    grid-template-columns: 170px minmax(220px, 1fr);
  }

  body.page-projekt .project-sms-delivery-planning__next-action {
    grid-column: 1 / -1;
    border-top: 1px solid #e2e8f0;
  }
}

@media (max-width: 640px) {
  body.page-projekt .project-sms-delivery-planning__hero-statuses,
  body.page-projekt .project-sms-delivery-planning__deadline-grid {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__deadline-card {
    min-height: 0;
  }

  body.page-projekt .project-sms-delivery-planning__deadline-card strong {
    font-size: 19px;
  }

  body.page-projekt .project-sms-delivery-planning__context {
    grid-template-columns: 1fr;
  }

  body.page-projekt .project-sms-delivery-planning__next-action {
    border-top: 0;
  }

  body.page-projekt .project-sms-delivery-planning__timeline {
    padding: 14px 14px 12px;
  }

  body.page-projekt .project-sms-delivery-planning__phase-row,
  body.page-projekt .project-sms-delivery-planning__ticks {
    min-width: 480px;
  }

  body.page-projekt .project-sms-delivery-planning__phase {
    align-items: flex-start;
    padding-inline: 8px;
    text-align: left;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact {
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact:nth-child(odd) {
    border-left: 0;
  }

  body.page-projekt .project-sms-delivery-planning__timeline-facts .project-sms-delivery-planning__fact:nth-child(-n + 2) {
    border-top: 0;
  }

  body.page-projekt .project-sms-delivery-planning__axis-marker--ready {
    --marker-label-shift: -100%;
  }

  body.page-projekt .project-sms-delivery-planning__axis-marker--ready .project-sms-delivery-planning__marker-label {
    justify-items: end;
    text-align: right;
  }
}

@media (max-width: 560px) {
  body.page-projekt .project-sms-delivery-planning__table {
    min-width: 0;
    width: 100%;
  }

  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(2)::before { content: "Artikelnummer"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(3)::before { content: "Farbcode"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(4)::before { content: "Gesamtmenge"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(5)::before { content: "Größen/Mengen"; }
  body.page-projekt .project-sms-delivery-planning__table > tbody > tr > td:nth-child(6)::before { content: "Status"; }

  body.page-projekt .project-sms-delivery-planning__position-image {
    grid-row: span 5;
  }

  body.page-projekt .project-sms-delivery-planning__ticks span {
    min-width: 44px;
    font-size: 11px;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table thead {
    display: table-header-group;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table tbody {
    display: table-row-group;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table tr {
    display: table-row;
    padding: 0;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table th,
  body.page-projekt .project-sms-delivery-planning__sizes-table td {
    display: table-cell;
    padding: 4px 5px;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table th:first-child {
    width: 50px;
  }

  body.page-projekt .project-sms-delivery-planning__sizes-table td:nth-child(n + 2)::before {
    content: none;
    display: none;
  }
}