/*
 * Component Expansion Vol.2 — form controls layer
 *
 * Sprint 4: File Upload, Date Picker, Range Slider shell
 */

.tbt-form-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tbt-form-control__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.tbt-form-control__label,
.tbt-form-control__head > div.tbt-form-control__label {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.tbt-form-control__description,
.tbt-form-control__hint {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

.tbt-form-controls-demo__grid {
  align-items: start;
}

.tbt-form-controls-demo__stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.builder-form-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.builder-form-preview__badge {
  align-self: flex-start;
  border-radius: 999px;
  background: #ecfbfd;
  color: #0a6675;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.builder-form-preview__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.builder-form-preview__title {
  margin: 0;
  color: #0f172a;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.builder-form-preview__description,
.builder-form-preview__meta {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.55;
}

.builder-form-preview__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.builder-form-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.builder-form-preview[data-is-submitting] {
  opacity: 0.92;
}

.builder-form-preview[data-is-submitting] .builder-form-preview__body {
  pointer-events: none;
}

.builder-form-preview__feedback {
  border-radius: 12px;
  border: 1px solid #dbe4ea;
  background: #f8fafc;
  color: #334155;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
}

.builder-form-preview__feedback[data-state="loading"] {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.builder-form-preview__feedback[data-state="success"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.builder-form-preview__feedback[data-state="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.builder-contact__debug-shell {
  margin-top: 18px;
}

.tbt-file-upload__shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tbt-file-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.tbt-file-upload__dropzone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed #94a3b8;
  border-radius: 12px;
  background: #f8fafc;
  padding: 16px;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.tbt-form-control--file-upload[data-drag-active] .tbt-file-upload__dropzone,
.tbt-form-control--file-upload[data-has-files] .tbt-file-upload__dropzone {
  border-color: #0a6675;
  background: #ecfbfd;
  box-shadow: inset 0 0 0 1px rgba(10, 102, 117, 0.1);
}

.tbt-file-upload__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tbt-file-upload__copy strong {
  color: #0f172a;
  font-size: 14px;
}

.tbt-file-upload__copy span {
  color: #64748b;
  font-size: 12px;
}

.tbt-file-upload__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tbt-file-upload__status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tbt-file-upload__feedback {
  border-radius: 10px;
  border: 1px solid #dbe4ea;
  background: #f8fafc;
  color: #334155;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
}

.tbt-file-upload__feedback[data-state="loading"] {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.tbt-file-upload__feedback[data-state="success"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.tbt-file-upload__feedback[data-state="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.tbt-form-control--file-upload[data-is-uploading] .tbt-file-upload__dropzone {
  border-color: #0a6675;
  background: #f0fbfd;
  box-shadow: inset 0 0 0 1px rgba(10, 102, 117, 0.1);
}

.tbt-form-control--file-upload[data-is-uploading] .tbt-file-upload__actions {
  opacity: 0.72;
}

.tbt-file-upload__empty {
  color: #64748b;
  font-size: 12px;
}

.tbt-file-upload__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbt-file-upload__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #dbe4ea;
  padding: 10px 12px;
}

.tbt-file-upload__name {
  color: #0f172a;
  font-size: 13px;
}

.tbt-file-upload__meta {
  color: #64748b;
  font-size: 12px;
}

.tbt-file-upload__uploaded {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.tbt-file-upload__uploaded-title {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
}

.tbt-file-upload__uploaded-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbt-file-upload__item--uploaded {
  background: #f8fafc;
}

.tbt-file-upload__item--uploaded .tbt-file-upload__name {
  color: #0a6675;
  text-decoration: none;
}

.tbt-file-upload__item--uploaded .tbt-file-upload__name:hover {
  text-decoration: underline;
}

.tbt-date-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tbt-date-picker__range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tbt-date-picker__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid #dbe4ea;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.tbt-date-picker__field[data-has-value] {
  border-color: #0a6675;
  box-shadow: inset 0 0 0 1px rgba(10, 102, 117, 0.08);
}

.tbt-date-picker__field-label {
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.tbt-date-picker__field input {
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 14px;
  padding: 0;
  box-shadow: none;
}

.tbt-date-picker__field input:focus {
  outline: 0;
  box-shadow: none;
}

.tbt-date-picker__summary {
  border-radius: 10px;
  border: 1px solid #dbe4ea;
  background: #f8fafc;
  color: #475569;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
}

.tbt-date-picker__summary[data-state="ok"] {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0f766e;
}

.tbt-date-picker__summary[data-state="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.tbt-form-control--date-picker[data-invalid-range] .tbt-date-picker__field {
  border-color: #fca5a5;
  box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.08);
}

.tbt-range-slider__value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #0a6675;
  font-size: 13px;
}

.tbt-range-slider__value strong {
  font-size: 18px;
  line-height: 1;
}

.tbt-range-slider__track-shell {
  position: relative;
}

.tbt-range-slider__input {
  width: 100%;
  margin: 0;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #0a6675 0%,
    #0a6675 var(--tbt-range-progress, 50%),
    #dbe4ea var(--tbt-range-progress, 50%),
    #dbe4ea 100%
  );
  outline: none;
}

.tbt-range-slider__input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #0a6675;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(10, 25, 41, 0.14);
  cursor: pointer;
}

.tbt-range-slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #0a6675;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(10, 25, 41, 0.14);
  cursor: pointer;
}

.tbt-range-slider__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
}

.tbt-rating__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #0a6675;
  font-size: 13px;
}

.tbt-rating__summary strong {
  font-size: 18px;
  line-height: 1;
}

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

.tbt-rating__stars {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
}

.tbt-rating__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.tbt-rating__star {
  color: #cbd5e1;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, transform 150ms ease;
}

.tbt-rating__star[data-is-active],
.tbt-rating__star:hover,
.tbt-rating__star:hover ~ .tbt-rating__star,
.tbt-rating__input:focus-visible + .tbt-rating__star,
.tbt-rating__input:checked + .tbt-rating__star,
.tbt-rating__input:checked + .tbt-rating__star ~ .tbt-rating__star {
  color: #f59e0b;
}

.tbt-rating__input:focus-visible + .tbt-rating__star {
  transform: scale(1.08);
}

.tbt-rating__clear {
  white-space: nowrap;
}

.tbt-otp__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #0a6675;
  font-size: 13px;
}

.tbt-otp__summary strong {
  font-size: 18px;
  line-height: 1;
}

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

.tbt-otp__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 10px;
  max-width: 360px;
}

.tbt-otp__digit {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dbe4ea;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.tbt-otp__digit::placeholder {
  color: #cbd5e1;
  font-weight: 500;
}

.tbt-otp__digit[data-has-value],
.tbt-form-control--otp[data-has-value] .tbt-otp__digit {
  background: #f8fafc;
}

.tbt-otp__digit:focus {
  outline: 0;
  border-color: #0a6675;
  box-shadow: 0 0 0 3px rgba(10, 102, 117, 0.12);
}

.tbt-otp__clear {
  align-self: flex-start;
  white-space: nowrap;
}

.tbt-rich-text__meta {
  color: #0a6675;
  font-size: 12px;
  font-weight: 600;
}

.tbt-rich-text__shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tbt-rich-text__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tbt-rich-text__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #dbe4ea;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.tbt-rich-text__button:hover,
.tbt-rich-text__button:focus-visible,
.tbt-rich-text__button[data-is-active] {
  border-color: #0a6675;
  background: #ecfbfd;
  color: #0a6675;
}

.tbt-rich-text__button--ghost {
  margin-left: auto;
}

.tbt-rich-text__editor {
  min-height: 160px;
  border: 1px solid #dbe4ea;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.7;
  padding: 12px 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.tbt-form-control--rich-text[data-has-value] .tbt-rich-text__editor {
  background: #f8fafc;
}

.tbt-rich-text__editor:focus {
  outline: 0;
  border-color: #0a6675;
  box-shadow: 0 0 0 3px rgba(10, 102, 117, 0.12);
}

.tbt-rich-text__editor:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

.tbt-rich-text__editor p,
.tbt-rich-text__editor ul,
.tbt-rich-text__editor ol,
.tbt-rich-text__editor blockquote,
.tbt-rich-text__editor h3 {
  margin: 0 0 10px;
}

.tbt-rich-text__editor > *:last-child {
  margin-bottom: 0;
}

.tbt-rich-text__editor ul,
.tbt-rich-text__editor ol {
  padding-left: 18px;
}

.tbt-rich-text__editor blockquote {
  border-left: 3px solid #26c0d5;
  color: #475569;
  padding-left: 12px;
}

.tbt-rich-text__editor h3 {
  font-size: 1rem;
  line-height: 1.4;
}

.tbt-rich-text__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tbt-tag-input__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #0a6675;
  font-size: 13px;
}

.tbt-tag-input__summary strong {
  font-size: 18px;
  line-height: 1;
}

.tbt-tag-input__shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tbt-tag-input__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tbt-tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #b7dff0;
  border-radius: 999px;
  background: #ecfbfd;
  color: #0a6675;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tbt-tag-input__tag:hover,
.tbt-tag-input__tag:focus-visible {
  border-color: #0a6675;
  background: #d8f6fa;
}

.tbt-tag-input__remove {
  font-size: 14px;
  line-height: 1;
}

.tbt-tag-input__field {
  display: block;
}

.tbt-tag-input__input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dbe4ea;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  padding: 10px 12px;
}

.tbt-tag-input__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tbt-tag-input__empty {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 782px) {
  .builder-form-preview__grid {
    grid-template-columns: 1fr;
  }

  .tbt-date-picker__range {
    grid-template-columns: 1fr;
  }

  .tbt-file-upload__dropzone {
    align-items: stretch;
  }

  .tbt-file-upload__actions {
    width: 100%;
    justify-content: space-between;
  }

  .tbt-otp__inputs {
    max-width: none;
  }

  .tbt-rich-text__button--ghost {
    margin-left: 0;
  }
}