/**
 * Forms Module
 * - input panels, form controls, validation
 */

.input-panel {
  position: relative;
  background: transparent;
  background-image: none !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: var(--transition-normal);
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.input-panel::before { content: none !important; display: none !important; }

.input-panel:hover {
  box-shadow: none;
  transform: none;
}

.panel-header { background: transparent; padding: 0.5rem 1rem 0.25rem 1rem; border-bottom: none; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.panel-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.panel-icon { width: 20px; height: 20px; color: var(--primary); }
.input-content { padding: 0.5rem 1rem 1rem 1rem; flex: 1; overflow-y: auto; }

.form-grid { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.form-group { position: relative; }
.form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem; transition: var(--transition-normal); line-height: 1.2; }
.material-selector-btn { text-align: left; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }

.form-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--rd-border); border-radius: calc(var(--rd-radius) * .5); font-size: 0.92rem; background: var(--surface); color: var(--text-primary); transition: var(--transition-normal); font-family: var(--font-family-mono); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

@media (max-width: 768px) {
  .input-panel {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lg);
    padding-bottom: 1rem;
  }

  .panel-header {
    padding: 0.75rem 1rem 0.5rem 1rem;
  }

  .panel-title {
    font-size: 1rem;
  }

  .input-content {
    padding: 0 1rem 1rem 1rem;
    max-height: none;
    overflow: visible;
  }

  .form-grid {
    gap: 0.85rem;
  }

  .form-label {
    font-size: 0.85rem;
  }

  .form-input,
  .form-select,
  .material-selector-btn {
    min-height: 48px;
    padding: 0.75rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
  }

  .material-selector-btn {
    gap: 0.75rem;
  }

  .target-button,
  .preset-button-group {
    transform: translateY(-50%) scale(0.9);
  }
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary-500, var(--primary));
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  color: var(--primary);
  transform: translateY(-2px);
}

.form-select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--rd-border); border-radius: calc(var(--rd-radius) * .5); font-size: 0.92rem; background: var(--surface); color: var(--text-primary); transition: var(--transition-normal); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

.form-select:focus { outline: none; border-color: var(--color-primary-500, var(--primary)); box-shadow: 0 0 0 3px rgba(59,130,246,.25); }

/* Validation */
.form-input.valid { border-color: var(--success); background: linear-gradient(135deg, var(--surface), rgba(16, 185, 129, 0.05)); }
.form-input.invalid { border-color: rgba(239, 68, 68, 0.9); background: linear-gradient(135deg, var(--surface), rgba(239, 68, 68, 0.10)); animation: shake 0.5s ease-in-out; }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.validation-message { position: absolute; top: 100%; left: 0; right: 0; font-size: 0.75rem; margin-top: 0.25rem; padding: 0.5rem; border-radius: var(--radius-sm); transition: var(--transition-normal); transform: translateY(-10px); opacity: 0; pointer-events: none; }
.validation-message.show { transform: translateY(0); opacity: 1; animation: slideInMessage 0.3s ease-out; }
@keyframes slideInMessage { 0% { transform: translateY(-10px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.validation-message.error { background: var(--error); color: white; }
.validation-message.warning { background: var(--warning); color: white; }
.validation-message.success { background: var(--success); color: white; }
.validation-message.info { background: var(--primary); color: white; }

.form-validation-message { display: none; margin: 0.5rem 0 0.5rem 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 700; box-shadow: var(--rd-elev-ring); }
.form-validation-message.error, .form-validation-message.warning { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.06)); border: 1px solid rgba(239, 68, 68, 0.55); color: var(--text-primary); }
.form-validation-message.error::before, .form-validation-message.warning::before { content: "\26A0  "; margin-right: 0.25rem; }

/* Input suggestions */
.input-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 1000; max-height: 200px; overflow-y: auto; margin-top: 0.25rem; opacity: 0; transform: translateY(-10px); transition: var(--transition-normal); }
.input-suggestions.show { opacity: 1; transform: translateY(0); animation: slideInSuggestions 0.3s ease-out; }
@keyframes slideInSuggestions { 0% { transform: translateY(-10px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.suggestion-item { padding: 0.75rem 1rem; cursor: pointer; transition: var(--transition-normal); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--surface-2); }
.suggestion-label { color: var(--text-primary); font-weight: 500; }
.suggestion-value { color: var(--text-secondary); font-family: var(--font-family-mono); font-size: 0.875rem; }