/* Mindmap specific styles using Tailwind CSS */

/* Ensure the canvas container takes full height */
.mindmap-container {
  @apply h-screen flex flex-col;
}

/* Toolbar styling */
.mindmap-toolbar {
  @apply bg-white border-b border-gray-200 p-2 flex items-center space-x-2;
}

.toolbar-button {
  @apply p-1 rounded hover:bg-gray-100 transition-colors;
}

.toolbar-button.active {
  @apply bg-gray-200;
}

.toolbar-divider {
  @apply border-l border-gray-300 h-6 mx-2;
}

/* Canvas styling */
.mindmap-canvas-container {
  @apply flex-grow relative overflow-hidden;
}

/* Node popup styling */
.node-popup {
  @apply absolute bg-white rounded-lg shadow-lg p-4 w-64 z-10;
}

.color-swatch {
  @apply w-4 h-4 rounded cursor-pointer;
}

/* Button styling */
.btn {
  @apply px-3 py-1 rounded transition-colors;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700;
}

/* Mindmap list styling */
.mindmap-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.mindmap-card-body {
  @apply p-6;
}

.mindmap-card-title {
  @apply text-xl font-semibold text-gray-800 mb-2;
}

.mindmap-card-description {
  @apply text-gray-600 mb-4;
}

/* Form styling */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-gray-700 font-medium mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}

/* Error message styling */
.error-container {
  @apply bg-red-50 text-red-700 p-4 rounded mb-4;
}

.error-title {
  @apply font-semibold;
}

.error-list {
  @apply list-disc pl-5 mt-2;
}