.folder {
  cursor: pointer;
  font-weight: bold;
}

.file-info {
  font-size: 0.9em;
  color: #6c757d;
}

.nested {
  margin-left: 20px;
  display: none;
}

.open>.nested {
  display: block;
}

.highlight {
  background-color: #fff3cd;
}

#feedbackAlert {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#feedbackAlert.show {
  opacity: 1;
}

.icon-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

.icon-btn:hover {
  color: #0d6efd;
}

.comment-highlight {
  animation: highlightFade 2s ease;
  background-color: #e8f5e9 !important;
}

@keyframes highlightFade {
  0% {
    background-color: #c8e6c9;
  }

  100% {
    background-color: transparent;
  }
}

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

.dark-mode .folder,
.dark-mode .file-info,
.dark-mode .modal-content,
.dark-mode .text-muted {
  color: #ccc;
}

.dark-mode .nested {
  background-color: #1e1e1e;
}

.dark-mode .highlight {
  background-color: #2a2a2a !important;
}

.dark-mode .folder,
.dark-mode [class*="btn"] {
  background-color: transparent;
}

.dark-mode .btn,
.dark-mode .form-control {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #444;
}

.dark-mode .form-control::placeholder {
  color: #888;
}

.dark-mode #toggleDarkMode:hover {
  background-color: #3a3a3a;
}

.dark-mode select {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

.dark-mode select option {
  background-color: #2a2a2a;
  color: #fff;
}

.dark-mode select,
.dark-mode input,
.dark-mode textarea {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode .modal-content {
  background-color: #2b2b2b;
  color: #f1f1f1;
  border-color: #444;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: #444;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #3a3a3a;
  color: #fff;
  border: 1px solid #555;
}

body.dark-mode .form-control::placeholder {
  color: #ccc;
}

body.dark-mode .btn-close {
  filter: invert(1);
}

body.dark-mode .text-muted.ms-4.small {
  color: #ffffff !important;
}

body.dark-mode .bi-chat-left-text.text-muted {
  color: #ffffff !important;
}

body.dark-mode .bi.bi-image.ms-1.text-muted.btn-show-image {
  color: #ffffff !important;
}

body.dark-mode .bi.bi-camera-video.ms-1.text-muted.btn-show-video {
  color: #ffffff !important;
}

#clear-storage-btn {
  background-color: #eee;
  color: #000;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}

.dark-mode #clear-storage-btn {
  background-color: #333;
  color: #fff;
}