/*
 * Wiki content styles — GitBook-inspired
 * Replaces CKEditor 5 content styles. Supports both legacy CKEditor HTML and Tiptap output.
 * Uses CSS custom properties from the app's design system for dark mode compatibility.
 */

/* ═══════════════════════════════════════════
   BASE TYPOGRAPHY
   ═══════════════════════════════════════════ */
.ck-content {
    line-height: 1.75;
    color: var(--color-content, inherit);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ck-content > *:first-child { margin-top: 0; }
.ck-content > *:last-child { margin-bottom: 0; }

/* Headings */
.ck-content h1 {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    line-height: 1.2;
}
.ck-content h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.ck-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.ck-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Paragraphs */
.ck-content p {
    margin-bottom: 0.875rem;
}

/* ═══════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════ */
.ck-content a {
    color: var(--color-primary-600, #2563eb);
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
}
.ck-content a:hover {
    text-decoration-color: var(--color-primary-600, #2563eb);
}

/* ═══════════════════════════════════════════
   INLINE CODE
   ═══════════════════════════════════════════ */
.ck-content code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.875em;
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    background: var(--color-primary-50, rgba(37, 99, 235, 0.08));
    color: var(--color-primary-600, #2563eb);
}
.dark .ck-content code {
    background: rgba(var(--color-primary-rgb, 37, 99, 235), 0.15);
}

/* ═══════════════════════════════════════════
   CODE BLOCKS
   ═══════════════════════════════════════════ */
.ck-content pre {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: var(--color-surface-subtle, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    overflow-x: auto;
    margin: 1.25rem 0;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    direction: ltr;
    text-align: left;
}
.ck-content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════
   BLOCKQUOTES (GitBook "hint" style)
   ═══════════════════════════════════════════ */
.ck-content blockquote {
    border-left: 4px solid rgba(var(--color-primary-rgb, 37, 99, 235), 0.4);
    background: var(--color-surface-subtle, #f8fafc);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.875rem 1.25rem;
    margin: 1.25rem 0;
    color: var(--color-content-subtle, #64748b);
    font-style: normal;
}
.ck-content blockquote > *:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════ */
.ck-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 0.875rem; }
.ck-content ul ul { list-style-type: circle; }
.ck-content ul ul ul { list-style-type: square; }
.ck-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 0.875rem; }
.ck-content ol ol { list-style-type: lower-latin; }
.ck-content ol ol ol { list-style-type: lower-roman; }
.ck-content li { margin-bottom: 0.25rem; }
.ck-content li > p { margin-bottom: 0.25rem; }

/* ═══════════════════════════════════════════
   TABLES (GitBook style)
   ═══════════════════════════════════════════ */
.ck-content .table,
.ck-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.25rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
}
.ck-content .table { display: table; margin: 1.25rem auto; }
.ck-content .table table { width: 100%; height: auto; border: none; }

.ck-content th,
.ck-content .table table th {
    background: var(--color-surface-subtle, #f1f5f9);
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ck-content td,
.ck-content .table table td {
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 0.625rem 1rem;
}

/* Subtle row hover */
.ck-content tr:hover td {
    background: var(--color-surface-subtle, rgba(0,0,0,0.02));
}

/* Table caption */
.ck-content .table > figcaption {
    display: table-caption;
    caption-side: top;
    text-align: center;
    font-size: 0.75em;
    padding: 0.5em;
    color: var(--color-content-subtle, #64748b);
}

/* ═══════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════ */
.ck-content .image,
.ck-content figure {
    display: table;
    clear: both;
    text-align: center;
    margin: 1.25rem auto;
}

.ck-content img,
.ck-content .wiki-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border, #e5e7eb);
}

.ck-content .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 100%;
}
.ck-content .image > figcaption,
.ck-content figure > figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.75em;
    padding: 0.5em;
    color: var(--color-content-subtle, #64748b);
}

/* Image sizing & alignment (CKEditor legacy) */
.ck-content .image.image_resized { max-width: 100%; display: block; box-sizing: border-box; }
.ck-content .image.image_resized img { width: 100%; }
.ck-content .image-style-side { float: right; margin-left: 1.5em; max-width: 50%; }
.ck-content .image-style-align-left { float: left; margin-right: 1.5em; }
.ck-content .image-style-align-center { margin-left: auto; margin-right: auto; }
.ck-content .image-style-align-right { float: right; margin-left: 1.5em; }

/* ═══════════════════════════════════════════
   HORIZONTAL RULES
   ═══════════════════════════════════════════ */
.ck-content hr {
    border: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 2rem 0;
}

/* ═══════════════════════════════════════════
   HIGHLIGHTS / MARKERS
   ═══════════════════════════════════════════ */
.ck-content mark {
    border-radius: 0.125rem;
    padding: 0 0.125rem;
}
.ck-content .marker-yellow { background-color: #fef08a; }
.ck-content .marker-green { background-color: #bbf7d0; }
.ck-content .marker-pink { background-color: #fecdd3; }
.ck-content .marker-blue { background-color: #bfdbfe; }
.ck-content .pen-red { color: #dc2626; background-color: transparent; }
.ck-content .pen-green { color: #16a34a; background-color: transparent; }

/* ═══════════════════════════════════════════
   FONT SIZES (CKEditor legacy)
   ═══════════════════════════════════════════ */
.ck-content .text-tiny { font-size: 0.7em; }
.ck-content .text-small { font-size: 0.85em; }
.ck-content .text-big { font-size: 1.4em; }
.ck-content .text-huge { font-size: 1.8em; }

/* ═══════════════════════════════════════════
   MISC LEGACY (CKEditor classes still in DB)
   ═══════════════════════════════════════════ */
.ck-content .image-inline { display: inline-flex; max-width: 100%; align-items: flex-start; }
.ck-content .image-inline img { flex-grow: 1; max-width: 100%; }
.ck-content .table .ck-table-resized { table-layout: fixed; }

td > img { display: inline-block; }

/* ═══════════════════════════════════════════
   TODO LISTS (CKEditor legacy)
   ═══════════════════════════════════════════ */
.ck-content .todo-list { list-style: none; }
.ck-content .todo-list li { margin-bottom: 5px; }

/* ═══════════════════════════════════════════
   MEDIA EMBED (CKEditor legacy)
   ═══════════════════════════════════════════ */
.ck-content .media { clear: both; margin: 0.9em 0; display: block; min-width: 15em; }

/* ═══════════════════════════════════════════
   PAGE BREAKS (CKEditor legacy)
   ═══════════════════════════════════════════ */
.ck-content .page-break { position: relative; clear: both; padding: 5px 0; display: flex; align-items: center; justify-content: center; }
.ck-content .page-break::after { content: ''; position: absolute; border-bottom: 2px dashed var(--color-border, #ccc); width: 100%; }

@media print {
    .ck-content .page-break { padding: 0; }
    .ck-content .page-break::after { display: none; }
}