/* Custom Styles for Markdown Editor */

/* Toolbar Button Styles */
.toolbar-btn {
    @apply bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-3 py-2 rounded text-sm font-medium transition-all duration-200 hover:scale-105 active:scale-95;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.dark .toolbar-btn {
    border-color: rgba(75, 85, 99, 0.3);
}

.dark .toolbar-btn:hover {
    border-color: rgba(156, 163, 175, 0.5);
}

/* Editor Scrollbar Styling */
#markdownEditor::-webkit-scrollbar {
    width: 8px;
}

#markdownEditor::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

#markdownEditor::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded;
}

#markdownEditor::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Preview Scrollbar Styling */
#markdownPreview::-webkit-scrollbar {
    width: 8px;
}

#markdownPreview::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

#markdownPreview::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded;
}

#markdownPreview::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
}

/* Dropdown Animation */
.dropdown-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.dropdown-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Zen Mode Styles */
.zen-mode .toolbar-section,
.zen-mode header nav,
.zen-mode header section:last-child {
    display: none;
}

.zen-mode #markdownPreview {
    display: none;
}

.zen-mode #markdownEditor {
    width: 100%;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .mobile-editor-only #markdownPreview {
        display: none;
    }
    
    .mobile-preview-only #markdownEditor {
        display: none;
    }
    
    .mobile-editor-only article:first-child,
    .mobile-preview-only article:last-child {
        width: 100%;
        border-right: none;
    }
}

/* Print Styles */
@media print {
    header,
    .toolbar-section,
    #markdownEditor {
        display: none !important;
    }
    
    #markdownPreview {
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        color: black !important;
    }
    
    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        color: black !important;
    }
    
    .prose code {
        background: #f5f5f5 !important;
        color: black !important;
    }
    
    .prose pre {
        background: #f5f5f5 !important;
        color: black !important;
        border: 1px solid #ddd !important;
    }
}

/* Drag and Drop Styles */
.drag-over {
    @apply border-2 border-dashed border-accent-orange bg-orange-50 dark:bg-orange-900/20;
}

.drag-over::after {
    content: "Drop your .md file here";
    @apply absolute inset-0 flex items-center justify-center text-accent-orange font-medium text-lg bg-white/90 dark:bg-gray-900/90;
}

/* Loading Animation */
.loading {
    @apply relative;
}

.loading::after {
    content: "";
    @apply absolute inset-0 bg-white/50 dark:bg-gray-900/50 flex items-center justify-center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'%3E%3Cpath fill='%23ff6b35' d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Syntax Highlighting Overrides for Dark Theme */
.dark .hljs {
    background: transparent !important;
}

/* Custom Prose Styles for Better Preview */
.prose {
    @apply max-w-none;
}

.prose h1 {
    @apply text-3xl font-bold mb-4 mt-6 text-gray-900 dark:text-gray-100;
}

.prose h2 {
    @apply text-2xl font-bold mb-3 mt-5 text-gray-900 dark:text-gray-100;
}

.prose h3 {
    @apply text-xl font-bold mb-2 mt-4 text-gray-900 dark:text-gray-100;
}

.prose p {
    @apply mb-4 leading-relaxed text-gray-700 dark:text-gray-300;
}

.prose code {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1 py-0.5 rounded text-sm;
}

.prose pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
}

.prose pre code {
    @apply bg-transparent p-0;
}

.prose blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 mb-4;
}

.prose ul, .prose ol {
    @apply mb-4 pl-6;
}

.prose li {
    @apply mb-1;
}

.prose a {
    @apply text-blue-600 dark:text-blue-400 hover:underline;
}

.prose img {
    @apply max-w-full h-auto rounded-lg shadow-md mb-4;
}

.prose table {
    @apply w-full border-collapse border border-gray-300 dark:border-gray-600 mb-4;
}

.prose th, .prose td {
    @apply border border-gray-300 dark:border-gray-600 px-3 py-2 text-left;
}

.prose th {
    @apply bg-gray-100 dark:bg-gray-800 font-semibold;
}

.prose hr {
    @apply border-gray-300 dark:border-gray-600 my-6;
}