/* General styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f5f5f5;
  padding: 20px;
}

.container {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  height: 90vh;
}

/* Editor section */
.editor-container,
.view-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

h2 {
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #e1e1e1;
  padding-bottom: 10px;
}

.instructions {
  background-color: #f9f9f9;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  border-left: 4px solid #4caf50;
  font-size: 14px;
}

.instructions ul {
  margin-left: 20px;
}

#folderEditor {
  flex: 1;
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.button-container {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

#generateBtn,
#downloadBtn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

#generateBtn:hover {
  background-color: #3e8e41;
}

#downloadBtn {
  background-color: #2196f3;
}

#downloadBtn:hover {
  background-color: #0b7dda;
}

/* View section */
.folder-view {
  flex: 1;
  overflow-y: auto;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
}

/* Folder structure styling */
.folder,
.file {
  padding: 5px 0 5px 20px;
  position: relative;
}

.folder {
  color: #333;
  font-weight: bold;
}

.folder::before {
  content: "📁";
  margin-right: 5px;
}

.file {
  color: #555;
}

/* Generic file icon */
.file::before {
  content: "📄";
  margin-right: 5px;
}

/* File type specific icons */
/* Web Development */
.html-file::before {
  content: "🌐";
}

.css-file::before {
  content: "🎨";
}

.js-file::before {
  content: "📜";
}

.ts-file::before {
  content: "📘";
}

.react-file::before {
  content: "⚛️";
}

/* Images */
.image-file::before {
  content: "🖼️";
}

/* Documents */
.pdf-file::before {
  content: "📕";
}

.word-file::before {
  content: "📝";
}

.excel-file::before {
  content: "📊";
}

.powerpoint-file::before {
  content: "📽️";
}

.markdown-file::before {
  content: "📑";
}

.text-file::before {
  content: "📃";
}

/* Data */
.json-file::before {
  content: "🔄";
}

.xml-file::before {
  content: "📋";
}

.csv-file::before {
  content: "📈";
}

.sql-file::before {
  content: "🗄️";
}

/* Programming */
.python-file::before {
  content: "🐍";
}

.java-file::before {
  content: "☕";
}

.c-file::before,
.cpp-file::before {
  content: "🔧";
}

.csharp-file::before {
  content: "#️⃣";
}

.php-file::before {
  content: "🐘";
}

.ruby-file::before {
  content: "💎";
}

.go-file::before {
  content: "🐹";
}

/* Config files */
.yaml-file::before {
  content: "⚙️";
}

.config-file::before {
  content: "🔧";
}

.env-file::before {
  content: "🔐";
}

/* Archives */
.archive-file::before {
  content: "🗜️";
}

.children {
  padding-left: 20px;
  border-left: 1px dashed #ccc;
  margin-left: 10px;
}

/* Empty state */
.empty-state {
  color: #999;
  text-align: center;
  padding: 50px 0;
}