/* Tremor-inspired form builder field widgets — https://www.tremor.so/ */
.tr-field-widget {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(229 231 235);
  background: rgb(255 255 255);
  color: rgb(55 65 81);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  ring: 1px solid rgb(0 0 0 / 0.03);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tr-field-widget:hover {
  border-color: rgb(153 246 228);
  box-shadow: 0 1px 3px 0 rgb(13 148 136 / 0.12);
}
html[data-theme="dark"] .tr-field-widget {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42);
  color: rgb(226 232 240);
}
.tr-field-widget--compact { font-size: 0.75rem; padding: 0.375rem 0.5rem; }
.tr-field-widget--normal { font-size: 0.875rem; padding: 0.5rem 0.75rem; }

.tr-upload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px dashed rgb(153 246 228);
  background: linear-gradient(165deg, rgb(240 253 250) 0%, rgb(255 255 255) 100%);
  color: rgb(13 148 136);
  text-align: center;
}
html[data-theme="dark"] .tr-upload-card {
  border-color: rgb(45 212 191 / 0.35);
  background: linear-gradient(165deg, rgb(15 39 68) 0%, rgb(15 23 42) 100%);
  color: rgb(45 212 191);
}
.tr-upload-card--compact { padding: 0.75rem; font-size: 0.75rem; }
.tr-upload-card--normal { padding: 1.25rem 1rem; font-size: 0.875rem; }

.tr-doc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  margin-top: 0.25rem;
}
.tr-doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgb(255 255 255);
  border: 1px solid rgb(204 251 241);
  color: rgb(15 118 110);
}
html[data-theme="dark"] .tr-doc-badge {
  background: rgb(30 41 59);
  border-color: rgb(45 212 191 / 0.25);
  color: rgb(94 234 212);
}

.tr-sig-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px dashed rgb(203 213 225);
  background: rgb(248 250 252);
  color: rgb(100 116 139);
}
html[data-theme="dark"] .tr-sig-card {
  border-color: rgb(71 85 105);
  background: rgb(30 41 59);
  color: rgb(148 163 184);
}

.tr-choice-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(243 244 246);
  background: rgb(249 250 251);
  color: rgb(75 85 99);
}
html[data-theme="dark"] .tr-choice-row {
  border-color: rgb(51 65 85);
  background: rgb(30 41 59);
  color: rgb(203 213 225);
}

.tr-metric-strip {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  width: 100%;
}
.tr-metric-pill {
  flex: 1;
  text-align: center;
  padding: 0.35rem;
  border-radius: 0.375rem;
  background: rgb(255 255 255);
  border: 1px solid rgb(229 231 235);
  font-size: 0.62rem;
  font-weight: 600;
  color: rgb(107 114 128);
}
.tr-metric-pill strong {
  display: block;
  font-size: 0.72rem;
  color: rgb(13 148 136);
}

/* Block palette cards */
.tr-block-palette .tr-palette-item {
  border-radius: 0.625rem;
  border: 1px solid rgb(229 231 235);
  background: rgb(255 255 255);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tr-block-palette .tr-palette-item:hover {
  transform: translateY(-1px);
  border-color: rgb(45 212 191);
  box-shadow: 0 4px 12px rgb(13 148 136 / 0.12);
}
html[data-theme="dark"] .tr-block-palette .tr-palette-item {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42);
}