/* MDX-Style Components for MudBlazor */

/* Callout Components */
.callout {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid;
    border-radius: 6px;
    background-color: var(--mud-palette-background-gray);
    box-shadow: var(--mud-elevation-1);
}

.callout-warning {
    border-left-color: var(--mud-palette-warning);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.08);
}

.callout-info {
    border-left-color: var(--mud-palette-info);
    background-color: rgba(var(--mud-palette-info-rgb), 0.08);
}

.callout-error {
    border-left-color: var(--mud-palette-error);
    background-color: rgba(var(--mud-palette-error-rgb), 0.08);
}

.callout-success {
    border-left-color: var(--mud-palette-success);
    background-color: rgba(var(--mud-palette-success-rgb), 0.08);
}

.callout-note {
    border-left-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.callout-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.callout-content {
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.callout-content p:last-child {
    margin-bottom: 0;
}

/* Enhanced Images */
.image-figure {
    margin: 2rem 0;
    text-align: center;
}

.enhanced-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--mud-elevation-2);
    transition: transform 0.2s ease-in-out;
}

.enhanced-image:hover {
    transform: scale(1.02);
}

.image-caption {
    margin-top: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Code Block Titles */
.code-block-title {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background-gray) 100%);
}

.code-block-title + pre {
    margin-top: 0 !important;
    border-radius: 0 0 6px 6px !important;
}

/* Enhanced Code Blocks */
.enhanced-code-block {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 6px !important;
    margin: 1.5rem 0 !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: var(--mud-elevation-1) !important;
}

.enhanced-code-block code {
    display: block !important;
    padding: 1rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--mud-palette-text-primary) !important;
    overflow-x: auto !important;
    white-space: pre !important;
}

/* Language indicator for enhanced code blocks */
.enhanced-code-block[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-weight: 500;
    background-color: var(--mud-palette-background);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    border: 1px solid var(--mud-palette-divider);
    z-index: 1;
}

/* Standard pre elements (for any code blocks not enhanced) */
pre:not(.enhanced-code-block) {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 6px !important;
    padding: 1rem !important;
    margin: 1.5rem 0 !important;
    overflow-x: auto !important;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: var(--mud-elevation-1) !important;
}

pre:not(.enhanced-code-block) code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}

/* Inline code */
code:not(pre code) {
    background-color: var(--mud-palette-background-gray) !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 3px !important;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 0.875em !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

/* Enhanced Tables */
.enhanced-table-wrapper {
    margin: 2rem 0;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: var(--mud-elevation-1);
}

.enhanced-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--mud-palette-background);
    margin: 0;
}

.enhanced-table th {
    background-color: var(--mud-palette-surface);
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
}

.enhanced-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.enhanced-table tr:hover {
    background-color: var(--mud-palette-action-hover);
}

.enhanced-table tr:last-child td {
    border-bottom: none;
}

/* Standard table fallback */
table:not(.enhanced-table) {
    border-collapse: collapse;
    margin: 2rem 0;
    width: 100%;
    box-shadow: var(--mud-elevation-1);
    border-radius: 8px;
    overflow: hidden;
}

table:not(.enhanced-table) th {
    background-color: var(--mud-palette-surface);
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--mud-palette-divider);
}

table:not(.enhanced-table) td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

table:not(.enhanced-table) tr:hover {
    background-color: var(--mud-palette-action-hover);
}

/* Enhanced Alerts (MudBlazor style) */
.mud-alert {
    border-radius: 6px !important;
    margin: 1rem 0 !important;
}

.mud-alert-message {
    font-weight: 500 !important;
}

/* Enhanced blockquotes */
blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

blockquote p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

/* Course Layout Specific Styles */
.course-tree-panel {
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-divider);
}

.course-content-panel {
    background-color: var(--mud-palette-background);
}

/* Tree View Enhancements */
.mud-treeview-item-content {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin: 0.125rem 0;
    transition: background-color 0.2s ease;
}

.mud-treeview-item-content:hover {
    background-color: var(--mud-palette-action-hover);
}

.mud-treeview-item-content.selected {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Journal Layout Specific Styles */
.journal-list-panel {
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-divider);
}

.journal-content-panel {
    background-color: var(--mud-palette-background);
}

/* Journal Post Item Enhancements */
.journal-post-item {
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 8px;
}

.journal-post-item:hover {
    transform: translateX(4px);
    box-shadow: var(--mud-elevation-2);
}

/* Selected Journal Post Item - FIXED STYLING */
.journal-post-item.journal-post-selected {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-left-color: var(--mud-palette-primary) !important;
}

.journal-post-item.journal-post-selected .journal-post-title {
    color: var(--mud-palette-primary-text) !important;
    font-weight: 600 !important;
}

.journal-post-item.journal-post-selected .journal-post-date {
    color: rgba(255, 255, 255, 0.8) !important;
}

.journal-post-item.journal-post-selected .journal-post-tag {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--mud-palette-primary-text) !important;
}

.journal-post-item.journal-post-selected .journal-post-tag .mud-chip-content {
    color: var(--mud-palette-primary-text) !important;
}

/* Hover state for non-selected items */
.journal-post-item:not(.journal-post-selected):hover {
    background-color: var(--mud-palette-action-hover);
}

/* Default text colors for non-selected items */
.journal-post-title {
    color: var(--mud-palette-text-primary);
}

.journal-post-date {
    color: var(--mud-palette-text-secondary);
}

.journal-post-tag {
    color: var(--mud-palette-text-primary);
}

/* Chip Enhancements */
.mud-chip-selected {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

.mud-chip-selected .mud-chip-content {
    color: var(--mud-palette-primary-text) !important;
}

/* Transition effects */
.transition-all {
    transition: all 0.2s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .callout {
        margin: 1rem 0;
        padding: 0.875rem 1rem;
    }
    
    .enhanced-image {
        border-radius: 6px;
    }
    
    .enhanced-code-block code,
    pre:not(.enhanced-code-block) {
        padding: 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .enhanced-table th,
    .enhanced-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Mobile course layout adjustments */
    .course-split-mobile {
        flex-direction: column;
    }
    
    .course-tree-mobile {
        height: auto !important;
        max-height: 40vh;
    }
    
    .course-content-mobile {
        height: auto !important;
    }
    
    /* Mobile journal layout adjustments */
    .journal-list-mobile {
        height: auto !important;
        max-height: 50vh;
    }
    
    .journal-content-mobile {
        height: auto !important;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .callout {
        background-color: var(--mud-palette-dark-background-gray);
    }
    
    .code-block-title {
        background: linear-gradient(135deg, var(--mud-palette-dark-surface) 0%, var(--mud-palette-dark-background-gray) 100%);
    }
    
    .enhanced-code-block {
        background-color: var(--mud-palette-dark-surface) !important;
    }
    
    .course-tree-panel,
    .journal-list-panel {
        background-color: var(--mud-palette-dark-surface);
    }
    
    .course-content-panel,
    .journal-content-panel {
        background-color: var(--mud-palette-dark-background);
    }
}

/* Animation for callouts */
.callout {
    animation: slideInFromLeft 0.3s ease-out;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Smooth content transitions */
.markdown-body {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}