@use '../variables' as v;
@use '../mixins' as m;

// ── Form Builder layout ──────────────────────────────────────────────────────

.fb-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

// ── Top bar ──────────────────────────────────────────────────────────────────

.fb-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 56px;
  border-bottom: 1px solid v.$border-color;
  background: #fff;
}

.fb-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: v.$gray-500;
  text-decoration: none;
  white-space: nowrap;
  svg { width: 14px; height: 14px; }
  &:hover { color: v.$gray-800; }
}

.fb-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-form-name {
  font-size: 14px;
  font-weight: 600;
  color: v.$gray-900;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: v.$radius;
  padding: 4px 8px;
  outline: none;
  background: transparent;
  &:hover { border-color: v.$border-color; background: v.$gray-50; }
  &:focus { border-color: v.$primary; background: #fff; box-shadow: 0 0 0 3px v.$primary-light; }
}

.fb-draft-badge {
  font-size: 11px;
  font-weight: 600;
  color: v.$gray-500;
  background: v.$gray-100;
  border-radius: 99px;
  padding: 2px 8px;
}

.fb-topbar-center {
  display: flex;
  align-items: center;
  gap: 2px;
  background: v.$gray-100;
  border-radius: v.$radius;
  padding: 3px;
}

.fb-tab-btn {
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: v.$gray-500;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
  &:hover { color: v.$gray-800; }
  &.is-active {
    background: #fff;
    color: v.$gray-900;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }
}

.fb-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

// ── Workspace ─────────────────────────────────────────────────────────────────

.fb-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

// ── Left palette ──────────────────────────────────────────────────────────────

.fb-palette {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid v.$border-color;
  background: #fff;
  overflow-y: auto;
  @include m.scrollbar-thin;
  display: flex;
  flex-direction: column;
}

.fb-palette-search {
  padding: 12px 14px;
  border-bottom: 1px solid v.$border-color;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;

  input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid v.$border-color;
    border-radius: v.$radius;
    font-size: 13px;
    color: v.$gray-800;
    background: v.$gray-50 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'/%3E%3C/svg%3E") no-repeat 8px center / 16px;
    outline: none;
    font-family: inherit;
    &:focus { border-color: v.$primary; background-color: #fff; }
  }
}

.fb-palette-section {
  padding: 14px 14px 6px;
}

.fb-palette-label {
  font-size: 10px;
  font-weight: 700;
  color: v.$gray-400;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 8px;
}

.fb-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.fb-field-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1.5px solid v.$border-color;
  border-radius: 8px;
  cursor: grab;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
  user-select: none;

  &:hover {
    border-color: v.$primary;
    background: v.$primary-light;
    box-shadow: 0 1px 4px rgba(92,45,14,.10);
  }

  &:active { cursor: grabbing; }

  &.is-dragging {
    opacity: .5;
  }

  svg {
    width: 18px;
    height: 18px;
    color: v.$gray-500;
  }

  span {
    font-size: 11px;
    font-weight: 500;
    color: v.$gray-600;
    text-align: center;
    line-height: 1.2;
  }

  &:hover svg, &:hover span {
    color: v.$primary;
  }
}

// ── Canvas area ───────────────────────────────────────────────────────────────

.fb-canvas-wrap {
  flex: 1;
  overflow-y: auto;
  background: #f5f6f8;
  padding: 32px 24px;
  @include m.scrollbar-thin;
}

.fb-canvas {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  overflow: hidden;
}

.fb-canvas-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid v.$border-color;
}

.fb-form-title-input {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  color: v.$gray-900;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  margin-bottom: 6px;
  &::placeholder { color: v.$gray-300; }
  &:focus { background: v.$gray-50; border-radius: 4px; padding: 2px 4px; margin-left: -4px; }
}

.fb-form-desc-input {
  width: 100%;
  font-size: 13px;
  color: v.$gray-500;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  resize: none;
  &::placeholder { color: v.$gray-300; }
  &:focus { background: v.$gray-50; border-radius: 4px; padding: 2px 4px; margin-left: -4px; }
}

.fb-fields-list {
  padding: 16px 28px;
  min-height: 120px;
  position: relative;
}

.fb-drop-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  border: 2px dashed v.$border-color;
  border-radius: 10px;
  color: v.$gray-400;
  font-size: 13px;
  text-align: center;

  svg { width: 28px; height: 28px; color: v.$gray-300; }
  strong { color: v.$gray-500; }
}

.fb-drop-zone-active {
  background: v.$primary-light;
  border-color: v.$primary;
  color: v.$primary;
  svg { color: v.$primary; }
}

// ── Each field item on canvas ──────────────────────────────────────────────────

.fb-field-item {
  position: relative;
  padding: 14px 0;
  border-bottom: 1px solid v.$gray-50;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s;

  &:last-child { border-bottom: none; }

  &:hover { background: v.$gray-50; }

  &.is-selected {
    background: v.$primary-light;
    border-radius: 8px;

    .fb-field-actions { opacity: 1; }
    .fb-field-drag { opacity: 1; }
  }

  &.is-dragging-over::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: v.$primary;
    border-radius: 2px;
  }
}

.fb-field-drag {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  opacity: 0;
  cursor: grab;
  color: v.$gray-400;
  transition: opacity .15s;

  svg { width: 14px; height: 14px; }
  &:hover { color: v.$gray-600; }
}

.fb-field-inner {
  padding: 0 10px;
}

.fb-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.fb-field-label {
  font-size: 13px;
  font-weight: 600;
  color: v.$gray-800;
}

.fb-field-required {
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
}

.fb-field-help {
  font-size: 11px;
  color: v.$gray-400;
  margin-top: 4px;
}

.fb-field-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}

.fb-field-action-btn {
  width: 26px;
  height: 26px;
  border: 1px solid v.$border-color;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: v.$gray-400;
  transition: color .12s, background .12s;

  svg { width: 13px; height: 13px; }

  &:hover { background: v.$gray-50; color: v.$gray-700; }
  &--danger:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
}

// Fake input previews inside canvas
.fb-input-preview {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid v.$border-color;
  border-radius: v.$radius;
  font-size: 13px;
  color: v.$gray-400;
  background: #fff;
  pointer-events: none;
}

.fb-textarea-preview {
  @extend .fb-input-preview;
  height: 80px;
  resize: none;
  display: block;
}

.fb-select-preview {
  @extend .fb-input-preview;
  display: flex;
  align-items: center;
  justify-content: space-between;
  svg { width: 14px; height: 14px; color: v.$gray-400; }
}

.fb-radio-group, .fb-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-radio-item, .fb-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: v.$gray-700;
}

.fb-radio-dot {
  width: 16px;
  height: 16px;
  border: 1.5px solid v.$border-color;
  border-radius: 50%;
  flex-shrink: 0;
}

.fb-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid v.$border-color;
  border-radius: 4px;
  flex-shrink: 0;
}

.fb-section-break {
  border: none;
  border-top: 2px solid v.$border-color;
  margin: 8px 0;
}

.fb-section-label {
  font-size: 15px;
  font-weight: 700;
  color: v.$gray-800;
  margin-bottom: 4px;
}

.fb-rating-row {
  display: flex;
  gap: 6px;
}

.fb-rating-star {
  font-size: 20px;
  color: v.$gray-200;
  &--filled { color: #f59e0b; }
}

// ── Canvas submit button ───────────────────────────────────────────────────────

.fb-canvas-footer {
  padding: 20px 28px 28px;
}

.fb-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: v.$primary;
  color: #fff;
  border: none;
  border-radius: v.$radius;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

// ── Right settings panel ──────────────────────────────────────────────────────

.fb-settings {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid v.$border-color;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fb-settings-tabs {
  display: flex;
  border-bottom: 1px solid v.$border-color;
  flex-shrink: 0;
}

.fb-settings-tab {
  flex: 1;
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 600;
  color: v.$gray-500;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s;
  text-align: center;

  &:hover { color: v.$gray-800; }
  &.is-active { color: v.$primary; border-bottom-color: v.$primary; }
}

.fb-settings-body {
  flex: 1;
  overflow-y: auto;
  @include m.scrollbar-thin;
}

.fb-settings-panel {
  display: none;
  padding: 16px;
  &.is-visible { display: block; }
}

.fb-settings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: v.$gray-400;
  font-size: 13px;
  text-align: center;

  svg { width: 28px; height: 28px; color: v.$gray-300; }
}

.fb-settings-group {
  margin-bottom: 16px;
}

.fb-settings-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: v.$gray-500;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.fb-settings-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid v.$border-color;
  border-radius: v.$radius;
  font-size: 13px;
  color: v.$gray-800;
  font-family: inherit;
  outline: none;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  @include m.focus-ring;
  &::placeholder { color: v.$gray-400; }
}

.fb-settings-textarea {
  @extend .fb-settings-input;
  resize: vertical;
  min-height: 64px;
}

.fb-settings-select {
  @extend .fb-settings-input;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.8' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  padding-right: 28px;
  cursor: pointer;
}

.fb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.fb-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: v.$gray-700;
}

.fb-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;

  input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  &-track {
    position: absolute;
    inset: 0;
    background: v.$gray-200;
    border-radius: 99px;
    cursor: pointer;
    transition: background .2s;

    &::after {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      background: #fff;
      border-radius: 50%;
      top: 3px;
      left: 3px;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
  }

  input:checked + .fb-toggle-track {
    background: v.$primary;
    &::after { transform: translateX(16px); }
  }
}

.fb-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.fb-option-row {
  display: flex;
  align-items: center;
  gap: 6px;

  input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid v.$border-color;
    border-radius: v.$radius;
    font-size: 12px;
    color: v.$gray-800;
    font-family: inherit;
    outline: none;
    @include m.focus-ring;
  }

  button {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: v.$gray-400;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    svg { width: 13px; height: 13px; }
    &:hover { background: #fee2e2; color: #ef4444; }
  }
}

.fb-add-option-btn {
  font-size: 12px;
  color: v.$primary;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  svg { width: 13px; height: 13px; }
  &:hover { text-decoration: underline; }
}

.fb-divider {
  border: none;
  border-top: 1px solid v.$border-color;
  margin: 14px 0;
}

.fb-color-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fb-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  &:hover { transform: scale(1.15); }
  &.is-active { border-color: v.$gray-900; }
}

.fb-width-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.fb-width-btn {
  padding: 7px;
  border: 1.5px solid v.$border-color;
  border-radius: v.$radius;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: v.$gray-600;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, color .12s;
  &:hover { border-color: v.$primary; color: v.$primary; }
  &.is-active { border-color: v.$primary; background: v.$primary-light; color: v.$primary; }
}
