src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

/* Adding this as global stylesy */
.console {
  border-top: 1px solid #444;
  font-family: monospace;
}

/* Editor Layout */
.editor-layout {
  display: flex;
  flex: 1;
  height: 100%;
  flex-wrap: wrap;
}

.editor-panel {
  width: 50%;
  background-color: #25283d;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px; /* Ensures spacing on mobile */
}

.preview-panel {
  width: 50%;
  background-color: #121623;
  padding: 20px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  margin-bottom: 20px; /* Ensures spacing on mobile */
}

.editor-panel textarea {
  width: 100%;
  height: 80%;
  background-color: #35384f;
  color: #d6dbe1;
  padding: 15px;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 1rem;
  resize: none;
  box-sizing: border-box;
}

.editor-panel textarea:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

/* Console Styling */
.console {
  background-color: #2c2f43;
  color: #d6dbe1;
  padding: 20px;
  border-top: 2px solid #444;
  height: 200px;
  overflow-y: auto;
  font-size: 0.9rem;
}

.console h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #4caf50;
}

.console div {
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.console div.error {
  color: #f44336;
}

.console div.info {
  color: #00bcd4;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .editor-panel,
  .preview-panel {
    width: 100%; /* Full width for tablet and mobile */
    margin-bottom: 20px; /* Ensure space between panels */
  }

  .editor-panel textarea {
    height: 70%; /* Adjust height of textarea for mobile */
  }

  /* Adjust Console Styles */
  .console {
    height: 150px;
  }
}

/* Additional Mobile-First Adjustments */
@media (max-width: 768px) {
  .editor-layout {
    flex-direction: column; /* Stack editor and preview on mobile */
  }

  .tab-bar {
    flex-direction: column; /* Stack tabs vertically on mobile */
  }

  .tab-button {
    padding: 10px;
    font-size: 0.9rem;
  }
}
