body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 20px;
  background-color: #f4f4f4;
  margin: 0; /* Add default margin reset */
}

.container {
  max-width: 900px;
  margin: 20px auto; /* Add top/bottom margin */
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
  color: #333;
  text-align: center;
  margin-top: 0; /* Adjust heading margins */
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555; /* Slightly adjust label color */
}

textarea, input[type="number"], input[type="text"] {
  box-sizing: border-box; /* Include padding and border in width */
  width: 100%; /* Use 100% instead of 98% */
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  min-height: 150px;
  font-family: monospace;
}

.buttons {
  margin-top: 15px;
  margin-bottom: 25px; /* Add space after buttons */
  display: flex;
  justify-content: space-around;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, opacity 0.3s ease; /* Added opacity */
}

#generateSapBtn { background-color: #5cb85c; color: white; }
#runStopBtn { background-color: #337ab7; color: white; width: 100px; /* Give fixed width */ text-align: center; }
#runStopBtn.running { background-color: #d9534f; }
#clearBtn { background-color: #f0ad4e; color: white; }
button:hover { opacity: 0.9; }
button:disabled { background-color: #cccccc; cursor: not-allowed; opacity: 0.7; }

/* Styles for SAP Code Output Section */
.sap-code-section { margin-top: 20px; }

#sapCodeOutput { /* Now a textarea */
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 200px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0; /* Lighter border */
  border-radius: 4px;
  background-color: #f8f9fa; /* Lighter background */
  font-family: monospace;
  white-space: pre;
  word-wrap: normal;
  overflow-x: scroll;
  font-size: 0.9rem;
  resize: vertical; /* Allow vertical resize */
}

#copySapCodeBtn {
  padding: 8px 15px;
  font-size: 0.9rem;
  background-color: #6c757d; /* Bootstrap secondary color */
  color: white;
  cursor: pointer;
  display: none;
  margin-bottom: 20px;
}
#copySapCodeBtn:hover { background-color: #5a6268; }

/* Console Output */
#resultOutput {
  background-color: #212529; /* Darker background */
  color: #e9ecef; /* Lighter text */
  padding: 15px;
  border-radius: 4px;
  margin-top: 20px;
  height: 400px;
  overflow-y: scroll;
  white-space: pre-wrap;   /* Preserve whitespace, wrap lines */
  overflow-wrap: break-word; /* Break long words/sequences */
  word-wrap: break-word; /* Older equivalent for compatibility */
  font-family: monospace;
  font-size: 0.9rem;
  border: 1px solid #495057; /* Subtle border */
}

/* Loading animation */
.loading::after {
  content: '...';
  display: inline-block;
  animation: dots 1s steps(3, end) infinite;
  vertical-align: bottom; /* Align dots better */
}
@keyframes dots {
  0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  40% { color: white; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  60% { text-shadow: .25em 0 0 white, .5em 0 0 rgba(0,0,0,0); }
  80%, 100% { text-shadow: .25em 0 0 white, .5em 0 0 white; }
}

/* Log message styling */
#resultOutput span { display: block; line-height: 1.4; } /* Ensure block display and spacing */
#resultOutput span:empty { display: none; } /* Hide empty spans */
#resultOutput span.error { color: #dc3545; /* Bootstrap danger */ font-weight: bold; }
#resultOutput span.warn { color: #ffc107; /* Bootstrap warning */ }
#resultOutput span.success { color: #28a745; /* Bootstrap success */ font-weight: bold;}
#resultOutput span.info { color: #17a2b8; /* Bootstrap info */ }
#resultOutput span.log { color: #e9ecef; } /* Default text color */
#resultOutput span.dot,
#resultOutput span.error90309999,
#resultOutput span.mismatch,
#resultOutput span.stock {
  display: inline; /* Keep these inline */
  margin: 0 1px; /* Add tiny space around them */
}
#resultOutput span.dot { color: #6c757d; } /* Secondary color */
#resultOutput span.error90309999 { color: #dc3545; } /* Bootstrap danger */
#resultOutput span.mismatch { color: #fd7e14; /* Bootstrap orange */ }
#resultOutput span.stock { color: #8935dc; }