@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #ef4444; /* red-500 */
  --secondary-color: #eab308; /* yellow-500 */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.note-item {
  @apply bg-gray-700 p-4 rounded-lg cursor-pointer hover:bg-gray-600 transition-all duration-200;
}

.note-item.active {
  @apply bg-red-600 border-l-4 border-yellow-500;
}

.note-item h3 {
  @apply font-bold truncate;
}

.note-item p {
  @apply text-sm text-gray-300 mt-1 truncate;
}

.note-item .date {
  @apply text-xs text-gray-400 mt-2;
}

#editor-container {
  display: none;
}

#editor-container.active {
  display: block;
}

#no-note-selected {
  display: flex;
}

#editor-container.active ~ #no-note-selected {
  display: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1f2937;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}