/* Themis-Compass Custom Styles v2.0 - RDRA+DDD+FSD+Atomic Design */

/* Task View Buttons */
.task-view-btn {
  @apply px-4 py-2 rounded-lg font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 transition-all duration-200;
}
.task-view-btn.active {
  @apply bg-gradient-to-r from-themis-primary to-themis-secondary text-white;
}

/* Kanban Board */
.kanban-column {
  @apply flex flex-col space-y-3;
}
.kanban-column-header {
  @apply px-4 py-3 rounded-lg font-bold text-gray-700 flex items-center justify-between;
}
.kanban-count {
  @apply bg-white px-3 py-1 rounded-full text-sm;
}
.kanban-column-content {
  @apply min-h-[500px] p-3 rounded-lg border-2 border-dashed border-gray-300 space-y-3 transition-all duration-200;
}
.kanban-column-content.drag-over {
  @apply bg-blue-50 border-blue-400;
}
.kanban-card {
  @apply p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 cursor-move;
}
.kanban-card.dragging {
  @apply opacity-50;
}
.kanban-card:hover {
  @apply border-themis-primary;
}

/* Timeline */
.timeline-item {
  @apply p-4 border border-gray-200 rounded-lg bg-white hover:shadow-md transition-all duration-200;
}
.timeline-bar-container {
  @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
}
.timeline-bar {
  @apply h-full transition-all duration-500;
}
.timeline-bar-pending {
  @apply bg-gray-400;
}
.timeline-bar-in_progress {
  @apply bg-blue-500;
}
.timeline-bar-completed {
  @apply bg-green-500;
}

/* Backlog */
.backlog-item {
  @apply p-4 border border-gray-200 rounded-lg bg-white hover:shadow-md transition-all duration-200;
}
.backlog-item-active {
  @apply border-blue-300 bg-blue-50;
}
.backlog-item-completed {
  @apply border-green-300 bg-green-50;
}

/* Journal (note.com style) */
.journal-article {
  @apply p-8 bg-white rounded-lg border border-gray-200 hover:shadow-lg transition-all duration-300 cursor-pointer;
}
.journal-article:hover {
  @apply border-themis-primary transform -translate-y-1;
}
.journal-title {
  @apply text-2xl font-bold text-gray-900 mb-4 hover:text-themis-primary transition-colors;
}
.journal-excerpt {
  @apply text-gray-600 leading-relaxed mb-4;
}
.journal-meta {
  @apply flex items-center justify-between text-sm text-gray-500 pt-4 border-t border-gray-100;
}
.journal-mood {
  @apply flex items-center space-x-2 font-medium;
}

/* Journal Editor */
.journal-title-input {
  @apply w-full text-4xl font-bold border-none focus:outline-none mb-6 text-gray-900 placeholder-gray-300;
}
.markdown-editor-container.edit {
  @apply grid grid-cols-1;
}
.markdown-editor-container.split {
  @apply grid grid-cols-2 gap-6;
}
.markdown-editor-container.preview {
  @apply grid grid-cols-1;
}
.markdown-textarea {
  @apply w-full min-h-[500px] p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-themis-primary focus:border-transparent resize-none font-mono text-gray-800 leading-relaxed;
}
.markdown-preview-pane {
  @apply flex flex-col border border-gray-200 rounded-lg p-6 bg-gray-50;
}
.markdown-content {
  @apply prose prose-lg max-w-none;
}
.markdown-content h1 {
  @apply text-3xl font-bold text-gray-900 mb-4 mt-6;
}
.markdown-content h2 {
  @apply text-2xl font-bold text-gray-900 mb-3 mt-5;
}
.markdown-content h3 {
  @apply text-xl font-bold text-gray-900 mb-2 mt-4;
}
.markdown-content p {
  @apply text-gray-700 leading-relaxed mb-4;
}
.markdown-content ul, .markdown-content ol {
  @apply mb-4 ml-6;
}
.markdown-content li {
  @apply text-gray-700 mb-2;
}
.markdown-content blockquote {
  @apply border-l-4 border-themis-primary pl-4 italic text-gray-600 mb-4;
}
.markdown-content code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono text-themis-primary;
}
.markdown-content pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}
.markdown-content a {
  @apply text-themis-primary hover:underline;
}
.markdown-mode-btn {
  @apply px-4 py-2 rounded-lg font-medium text-gray-600 hover:bg-gray-200 transition-all duration-200;
}
.markdown-mode-btn.active {
  @apply bg-white text-themis-primary shadow-sm;
}

/* Status Badges */
.status-badge {
  @apply px-3 py-1 rounded-full text-xs font-bold;
}
.status-backlog {
  @apply bg-gray-200 text-gray-700;
}
.status-pending {
  @apply bg-gray-200 text-gray-700;
}
.status-in_progress {
  @apply bg-blue-200 text-blue-700;
}
.status-completed {
  @apply bg-green-200 text-green-700;
}

/* Priority Badges */
.priority-badge {
  @apply px-3 py-1 rounded-full text-xs font-bold;
}
.priority-low {
  @apply bg-green-100 text-green-700;
}
.priority-medium {
  @apply bg-yellow-100 text-yellow-700;
}
.priority-high {
  @apply bg-red-100 text-red-700;
}

/* Navigation */
.nav-link {
  @apply px-4 py-2 rounded-lg font-medium text-gray-600 hover:bg-themis-primary hover:text-white transition-all duration-200;
}
.nav-link.active {
  @apply bg-themis-primary text-white;
}

/* Buttons */
.btn-primary {
  @apply px-6 py-2 bg-gradient-to-r from-themis-primary to-themis-secondary text-white rounded-lg font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-200;
}
.btn-secondary {
  @apply px-6 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-all duration-200;
}
.btn-icon {
  @apply w-10 h-10 rounded-lg flex items-center justify-center transition-all duration-200;
}
.btn-success {
  @apply bg-green-500 text-white hover:bg-green-600;
}
.btn-danger {
  @apply bg-red-500 text-white hover:bg-red-600;
}

/* Input Fields */
.input-field {
  @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-themis-primary focus:border-transparent transition-all duration-200;
}

/* Cards */
.task-card {
  @apply p-4 border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200 bg-white;
}
.journal-card {
  @apply p-6 border border-gray-200 rounded-lg bg-white hover:shadow-md transition-all duration-200;
}

/* Chat */
.chat-message {
  @apply px-4 py-3 rounded-lg;
}
.chat-user {
  @apply bg-gradient-to-r from-themis-primary to-themis-secondary text-white;
}
.chat-assistant {
  @apply bg-gray-100 text-gray-800;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.task-card, .journal-card, .chat-message, .kanban-card, .backlog-item {
  animation: fadeIn 0.3s ease-in-out;
}
.journal-article {
  animation: slideIn 0.4s ease-in-out;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Utilities */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
  .kanban-column-content { min-height: 300px; }
  .markdown-editor-container.split { grid-template-columns: 1fr; }
  .journal-title { font-size: 1.5rem; }
  .journal-title-input { font-size: 2rem; }
}