/* Markdown Content Styles - Reusable across the application */

.markdown-content {
    overflow: auto;
    padding: var(--kendo-spacing-4, 1rem);
    background: var(--kendo-color-surface-alt, #ffffff);
    border-radius: var(--kendo-border-radius-lg, 0.5rem);
    line-height: var(--kendo-line-height, 1.6);
}

    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3,
    .markdown-content h4,
    .markdown-content h5,
    .markdown-content h6 {
        margin-top: var(--kendo-spacing-6, 1.5rem);
        margin-bottom: var(--kendo-spacing-4, 1rem);
        font-weight: var(--kendo-font-weight-semibold, 600);
        line-height: 1.25;
    }

    .markdown-content h1 {
        font-size: 2em;
        padding-bottom: var(--kendo-spacing-2, 0.5rem);
    }

    .markdown-content h2 {
        font-size: 1.5em;
        padding-bottom: var(--kendo-spacing-2, 0.5rem);
    }

    .markdown-content h3 {
        font-size: 1.25em;
    }

    .markdown-content h4 {
        font-size: 1em;
    }

    .markdown-content p {
        margin-bottom: var(--kendo-spacing-4, 1rem);
    }

    .markdown-content code {
        background-color: var(--kendo-code-bg, var(--kendo-color-surface-alt, #ffffff));
        color: var(--kendo-code-text, var(--kendo-color-on-app-surface, #323130));
        padding: var(--kendo-spacing-0-5, 0.125rem) var(--kendo-spacing-1-5, 0.375rem);
        border-radius: var(--kendo-border-radius-sm, 0.125rem);
        font-family: var(--kendo-font-family-monospace, 'Courier New', monospace);
        font-size: 0.9em;
    }

    .markdown-content pre {
        background-color: var(--kendo-color-surface, #faf9f8);
        border-radius: var(--kendo-border-radius-md, 0.25rem);
        padding: var(--kendo-spacing-4, 1rem);
        overflow: auto;
        margin-bottom: var(--kendo-spacing-4, 1rem);
    }

        .markdown-content pre code {
            background-color: transparent;
            padding: 0;
        }

    .markdown-content ul,
    .markdown-content ol {
        margin-bottom: var(--kendo-spacing-4, 1rem);
        padding-left: var(--kendo-spacing-8, 2rem);
    }

    .markdown-content li {
        margin-bottom: var(--kendo-spacing-2, 0.5rem);
    }

    .markdown-content blockquote {
        border-left: 2px solid var(--kendo-color-tertiary, #0078d4);
        padding-left: var(--kendo-spacing-4, 1rem);
        color: var(--kendo-color-subtle, #605e5c);
        margin-bottom: var(--kendo-spacing-4, 1rem);
    }

    .markdown-content table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: var(--kendo-spacing-4, 1rem);
    }

    .markdown-content th,
    .markdown-content td {
        border: 1px solid var(--kendo-color-subtle, #8a8886);
        padding: var(--kendo-spacing-2, 0.5rem) var(--kendo-spacing-3, 0.75rem);
    }

    .markdown-content th {
        background-color: var(--kendo-color-primary-subtle, #faf9f8);
        font-weight: var(--kendo-font-weight-semibold, 600);
    }

    .markdown-content a {
        color: var(--kendo-color-primary, #0078d4);
        text-decoration: none;
    }

        .markdown-content a:hover {
            text-decoration: underline;
        }

    .markdown-content img {
        max-width: 100%;
        height: auto;
        border-radius: var(--kendo-border-radius-lg, 0.5rem);
        margin: var(--kendo-spacing-4, 1rem) 0;
    }

    /* Callout boxes */
    .markdown-content .info,
    .markdown-content .success,
    .markdown-content .warning,
    .markdown-content .error {
        padding: var(--kendo-spacing-2, 1rem) var(--kendo-spacing-4, 1rem);
        margin-bottom: var(--kendo-spacing-3, 0.5rem);
        margin-top: var(--kendo-spacing-3, 0.5rem);
        border-left: 4px solid;
        border-radius: var(--kendo-border-radius-md, 0.25rem);
    }

    .markdown-content .info {
        background-color: var(--kendo-color-info-subtle, #cee5ff);
        border-left-color: var(--kendo-color-info, #0a7eff);
        color: var(--kendo-color-info-emphasis, #064f9f);
    }

    .markdown-content .success {
        background-color: var(--kendo-color-success-subtle, #dff6dd);
        border-left-color: var(--kendo-color-success, #55a554);
        color: var(--kendo-color-success-emphasis, #107c10);
    }

    .markdown-content .warning {
        background-color: var(--kendo-color-warning-subtle, #fff4ce);
        border-left-color: var(--kendo-color-warning, #ffc80a);
        color: var(--kendo-color-warning-emphasis, #4e4d4b);
    }

    .markdown-content .error {
        background-color: var(--kendo-color-error-subtle, #fde7e9);
        border-left-color: var(--kendo-color-error, #c2666b);
        color: var(--kendo-color-error-emphasis, #a4262c);
    }