/*
 * Official case form: the modal is intentionally isolated from the legacy
 * drawer/reference rules in styles.css.  Keep this file last in app.html so
 * the form has one predictable visual system.
 */
.case-form-stitch.case-form-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1300 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  overflow: auto !important;
  background: rgba(20, 28, 43, .52) !important;
}

.case-form-stitch .case-form-modal {
  width: min(680px, calc(100vw - 48px)) !important;
  height: min(520px, calc(100vh - 48px)) !important;
  margin: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #e0e5ef !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #1d2638 !important;
  box-shadow: 0 24px 70px rgba(17, 24, 39, .25) !important;
}

.case-form-stitch .case-form-modal > header {
  flex: none !important;
  min-height: 66px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 30px !important;
  border-bottom: 1px solid #edf0f5 !important;
}

.case-form-stitch .case-form-modal > header > div {
  display: flex !important;
  align-items: center !important;
}

.case-form-stitch .case-form-modal > header span {
  color: #6554e8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.case-form-stitch .case-form-modal > header h3,
.case-form-stitch .case-form-modal > header p {
  display: none !important;
}

.case-form-stitch .case-form-modal > header button {
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8490a3 !important;
  font-size: 27px !important;
  line-height: 30px !important;
}

.case-form-stitch .case-form-modal form {
  min-height: 0 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
}

.case-form-stitch .case-stitch-heading {
  flex: none !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) minmax(480px, 1.5fr) !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 20px 30px 18px !important;
  border-bottom: 1px solid #edf0f5 !important;
}

.case-form-stitch .case-stitch-title h3 {
  display: block !important;
  margin: 0 !important;
  color: #182238 !important;
  font-size: 27px !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

.case-form-stitch .case-stitch-title p {
  display: block !important;
  margin: 8px 0 0 !important;
  color: #94a0b3 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.case-form-stitch .case-form-steps {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 72px minmax(36px, 1fr) 72px minmax(36px, 1fr) 72px !important;
  align-items: start !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.case-form-stitch .case-form-steps button {
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8d98aa !important;
  font: inherit !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.case-form-stitch .case-form-steps button.active {
  color: #6554e8 !important;
  font-weight: 700 !important;
}

.case-form-stitch .case-form-steps b {
  height: 1px !important;
  margin: 20px 10px 0 !important;
  background: #dfe5ef !important;
}

.case-form-stitch .case-form-steps button.active + b {
  background: #8b7bf1 !important;
}

/* Reset every inherited i/svg rule before styling the vector icon. */
.case-form-stitch .case-form-steps i,
.case-form-stitch .case-form-accordion summary > i {
  position: static !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid #d8dfeb !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #7f8da2 !important;
  font: inherit !important;
  font-size: 0 !important;
  font-style: normal !important;
}

.case-form-stitch .case-form-steps button.active i {
  border-color: #705ce8 !important;
  background: #f0edff !important;
  color: #705ce8 !important;
  box-shadow: 0 0 0 5px rgba(112, 92, 232, .10) !important;
}

.case-form-stitch .case-form-steps i .case-vector-icon,
.case-form-stitch .case-form-accordion summary > i .case-vector-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 23px !important;
  height: 23px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.case-form-stitch .case-form-steps i::before,
.case-form-stitch .case-form-steps i::after,
.case-form-stitch .case-form-accordion summary > i::before,
.case-form-stitch .case-form-accordion summary > i::after {
  display: none !important;
  content: none !important;
}

.case-form-stitch .case-form-scroll {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 18px 30px 22px !important;
  background: #fff !important;
}

.case-form-stitch .case-form-accordion {
  margin: 0 0 14px !important;
  overflow: hidden !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.case-form-stitch .case-form-accordion summary {
  min-height: 58px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 40px auto 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.case-form-stitch .case-form-accordion summary::-webkit-details-marker { display: none !important; }
.case-form-stitch .case-form-accordion summary strong { color: #253147 !important; font-size: 16px !important; }
.case-form-stitch .case-form-accordion summary small { color: #9aa5b6 !important; font-size: 12px !important; font-weight: 400 !important; }
.case-form-stitch .case-form-accordion summary em { margin-left: 2px !important; color: #6554e8 !important; background: #f0edff !important; }
.case-form-stitch .case-form-accordion summary > span { color: #705ce8 !important; font-size: 18px !important; }
.case-form-stitch .case-form-accordion[open] summary { border-bottom: 1px solid #edf0f5 !important; }
.case-form-stitch .case-form-accordion summary > i { width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 9px !important; background: #f0edff !important; color: #705ce8 !important; }
.case-form-stitch .case-form-accordion summary > i .case-vector-icon { width: 20px !important; height: 20px !important; }

.case-form-stitch .case-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 15px 18px !important;
  padding: 18px !important;
}

.case-form-stitch .case-form-grid label { display: grid !important; gap: 7px !important; color: #697890 !important; font-size: 12px !important; }
.case-form-stitch .case-form-grid label.full { grid-column: 1 / -1 !important; }
.case-form-stitch .case-form-grid input,
.case-form-stitch .case-form-grid select,
.case-form-stitch .case-form-grid textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #dce3ee !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #263248 !important;
  font: inherit !important;
  outline: 0 !important;
}
.case-form-stitch .case-form-grid input,
.case-form-stitch .case-form-grid select { height: 42px !important; padding: 0 12px !important; }
.case-form-stitch .case-form-grid textarea { min-height: 108px !important; padding: 11px 12px !important; resize: vertical !important; line-height: 1.55 !important; }
.case-form-stitch .case-form-grid input:focus,
.case-form-stitch .case-form-grid select:focus,
.case-form-stitch .case-form-grid textarea:focus { border-color: #7564ed !important; box-shadow: 0 0 0 3px rgba(117, 100, 237, .12) !important; }
.case-form-stitch .case-field-help { display: flex !important; justify-content: space-between !important; color: #9aa5b6 !important; font-size: 11px !important; }

.case-form-stitch .case-color-image-upload-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.case-form-stitch .case-color-upload-card {
  position: relative !important;
  min-height: 138px !important;
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  border: 1px dashed #cbd5e4 !important;
  border-radius: 10px !important;
  background: #fafbfe !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.case-form-stitch .case-color-upload-card:hover,
.case-form-stitch .case-color-upload-card.is-dragging {
  border-color: #7564ed !important;
  background: #f6f4ff !important;
  box-shadow: 0 0 0 3px rgba(117, 100, 237, .10) !important;
}
.case-form-stitch .case-color-upload-card input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.case-form-stitch .case-color-upload-preview {
  position: relative !important;
  grid-row: 1 / 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 104px !important;
  height: 104px !important;
  border-radius: 9px !important;
  background: #eef1f7 center / cover no-repeat !important;
  color: #7564ed !important;
  overflow: hidden !important;
}
.case-form-stitch .case-color-upload-preview i { width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; background: #fff !important; color: #7564ed !important; font-size: 24px !important; font-style: normal !important; box-shadow: 0 2px 8px rgba(45, 53, 76, .12) !important; }
.case-form-stitch .case-color-upload-card strong { align-self: end !important; color: #354158 !important; font-size: 14px !important; }
.case-form-stitch .case-color-upload-card small { align-self: center !important; color: #8b96a7 !important; font-size: 11px !important; line-height: 1.45 !important; }
.case-form-stitch .case-color-upload-card em { align-self: start !important; color: #9ca5b4 !important; font-size: 10px !important; font-style: normal !important; }
.case-form-stitch .case-color-upload-preview.has-image::after { content: attr(data-case-replace-label) !important; display: grid !important; place-items: end center !important; position: absolute !important; inset: 45% 0 0 !important; padding-bottom: 7px !important; background: linear-gradient(transparent, rgba(21, 29, 43, .58)) !important; color: #fff !important; font-size: 10px !important; }

.case-form-stitch .case-publish-layout { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; padding: 18px !important; }
.case-form-stitch .case-publish-layout > label,
.case-form-stitch .case-publish-status { display: grid !important; align-content: start !important; gap: 7px !important; color: #697890 !important; font-size: 12px !important; }
.case-form-stitch .case-publish-layout input { height: 42px !important; box-sizing: border-box !important; border: 1px solid #dce3ee !important; border-radius: 8px !important; padding: 0 12px !important; }
.case-form-stitch .case-publish-status b { justify-self: start !important; border-radius: 6px !important; background: #f0f1f4 !important; color: #6c7789 !important; padding: 11px 14px !important; font-size: 12px !important; }
.case-form-stitch .case-visibility-toggle { display: flex !important; align-items: center !important; gap: 9px !important; padding-top: 27px !important; }
.case-form-stitch .case-visibility-toggle i { width: 36px !important; height: 21px !important; border: 0 !important; border-radius: 12px !important; background: #c9d0dc !important; }
.case-form-stitch .case-visibility-toggle i::after { display: block !important; content: "" !important; width: 15px !important; height: 15px !important; margin: 3px !important; border-radius: 50% !important; background: #fff !important; }
.case-form-stitch .case-publish-layout > p { grid-column: 1 / -1 !important; margin: 0 !important; color: #9aa5b6 !important; font-size: 11px !important; }

.case-form-stitch .case-form-error { flex: none !important; min-height: 18px !important; padding: 0 30px !important; color: #c34e5d !important; font-size: 12px !important; }
.case-form-stitch .case-form-modal footer {
  flex: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 30px 20px !important;
  border-top: 1px solid #edf0f5 !important;
  background: #fff !important;
}
.case-form-stitch .case-form-modal footer button { min-width: 108px !important; margin: 0 !important; border-radius: 8px !important; }

body[data-theme="dark"] .case-form-stitch .case-form-modal { border-color: #344155 !important; background: #141d2b !important; color: #eef1fa !important; }
body[data-theme="dark"] .case-form-stitch .case-form-modal > header,
body[data-theme="dark"] .case-form-stitch .case-stitch-heading,
body[data-theme="dark"] .case-form-stitch .case-form-modal footer { border-color: #2d394d !important; background: #141d2b !important; }
body[data-theme="dark"] .case-form-stitch .case-stitch-title h3,
body[data-theme="dark"] .case-form-stitch .case-form-accordion summary strong { color: #eef1fa !important; }
body[data-theme="dark"] .case-form-stitch .case-form-scroll,
body[data-theme="dark"] .case-form-stitch .case-form-accordion { background: #141d2b !important; }
body[data-theme="dark"] .case-form-stitch .case-form-accordion { border-color: #344155 !important; }
body[data-theme="dark"] .case-form-stitch .case-form-grid input,
body[data-theme="dark"] .case-form-stitch .case-form-grid select,
body[data-theme="dark"] .case-form-stitch .case-form-grid textarea,
body[data-theme="dark"] .case-form-stitch .case-publish-layout input { border-color: #3b4a62 !important; background: #0f1826 !important; color: #e3e8f4 !important; }

@media (max-width: 820px) {
  .case-form-stitch.case-form-modal-backdrop { padding: 0 !important; }
  .case-form-stitch .case-form-modal { width: 100vw !important; height: 100vh !important; border-radius: 0 !important; }
  .case-form-stitch .case-stitch-heading { grid-template-columns: 1fr !important; gap: 18px !important; }
  .case-form-stitch .case-form-steps { max-width: 560px !important; margin: 0 auto !important; width: 100% !important; }
}

@media (max-width: 560px) {
  .case-form-stitch .case-form-grid,
  .case-form-stitch .case-publish-layout { grid-template-columns: 1fr !important; }
  .case-form-stitch .case-form-grid label.full { grid-column: auto !important; }
  .case-form-stitch .case-form-scroll { padding-inline: 16px !important; }
  .case-form-stitch .case-form-modal footer { padding-inline: 16px !important; }
  .case-form-stitch .case-color-image-upload-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 821px) {
  .case-form-stitch .case-form-modal { height: auto !important; max-height: none !important; overflow: visible !important; }
  .case-form-stitch .case-form-modal form { flex: 0 0 auto !important; }
  .case-form-stitch .case-form-scroll { flex: 0 0 auto !important; overflow: visible !important; }
  .case-form-stitch .case-form-accordion { border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; }
  .case-form-stitch .case-form-modal > header { min-height: 54px !important; padding: 14px 24px !important; }
  .case-form-stitch .case-form-modal > header span { color: #1d2638 !important; font-size: 16px !important; }
  .case-form-stitch .case-form-modal > header button { width: 28px !important; height: 28px !important; font-size: 23px !important; line-height: 26px !important; }
  .case-form-stitch .case-form-scroll { padding: 14px 24px 16px !important; }
  .case-form-stitch .case-form-accordion { margin-bottom: 10px !important; border-radius: 8px !important; }
  .case-form-stitch .case-form-accordion summary { min-height: 46px !important; grid-template-columns: 30px auto 1fr !important; gap: 9px !important; padding: 0 14px !important; cursor: default !important; }
  .case-form-stitch .case-form-accordion summary > span { display: none !important; }
  .case-form-stitch .case-form-accordion summary strong { font-size: 13px !important; }
  .case-form-stitch .case-form-accordion summary small { font-size: 10px !important; }
  .case-form-stitch .case-form-accordion summary > i { width: 26px !important; height: 26px !important; border-radius: 7px !important; }
  .case-form-stitch .case-form-accordion summary > i .case-vector-icon { width: 17px !important; height: 17px !important; }
  .case-form-stitch .case-form-grid { gap: 12px 14px !important; padding: 14px !important; }
  .case-form-stitch .case-form-grid label { gap: 5px !important; font-size: 10px !important; }
  .case-form-stitch .case-form-grid input,
  .case-form-stitch .case-form-grid select { height: 34px !important; padding: 0 10px !important; }
  .case-form-stitch .case-form-grid textarea { min-height: 86px !important; padding: 9px 10px !important; }
  .case-form-stitch .case-field-help { font-size: 9px !important; }
  .case-form-stitch .case-color-upload-card { min-height: 110px !important; grid-template-columns: 84px minmax(0, 1fr) !important; column-gap: 10px !important; padding: 10px !important; }
  .case-form-stitch .case-color-upload-preview { width: 84px !important; height: 84px !important; }
  .case-form-stitch .case-color-upload-card strong { font-size: 12px !important; }
  .case-form-stitch .case-color-upload-card small { font-size: 9px !important; }
  .case-form-stitch .case-color-upload-card em { font-size: 8px !important; }
  .case-form-stitch .case-form-error { min-height: 14px !important; padding: 0 24px !important; font-size: 10px !important; }
  .case-form-stitch .case-form-modal footer { gap: 8px !important; padding: 12px 24px 14px !important; }
  .case-form-stitch .case-form-modal footer button { min-width: 80px !important; height: 34px !important; padding: 0 12px !important; font-size: 11px !important; border-radius: 7px !important; }
}