/* ============================================================
   CLINICAL MEDICAL WIKI THEME SNIPPET (UpToDate/Radiopaedia)
   Synchronized with the PediaNotes website theme.
   Dynamic Accent-driven System: Works with any accent color!
   ============================================================ */

/* ============================================================
   1. CLINICAL LINKS (Clean text, no pill backgrounds)
   ============================================================ */
body {
    /* Override Obsidian defaults with theme-specific custom variables */
    --link-color: var(--link-custom-color, var(--accent)) !important;
    --link-external-color: var(--link-custom-color, var(--accent)) !important;
    --link-decoration: none !important;
    --link-external-decoration: none !important;
    --link-unresolved-color: var(--link-custom-color, var(--accent)) !important;
}

/* Base style for clean text links (scoped to note content, NEVER touches sidebar) */
div.cm-s-obsidian span.cm-link,
div.cm-s-obsidian span.cm-hmd-internal-link,
div.cm-s-obsidian span.cm-url,
a.internal-link,
a.external-link,
.markdown-preview-view a,
.markdown-rendered a,
.note-content a {
    color: var(--link-custom-color, var(--accent)) !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color 0.15s ease, text-decoration 0.15s ease;
    display: inline;
    margin: 0;
}

/* Hover: underline only */
div.cm-s-obsidian span.cm-link:hover,
div.cm-s-obsidian span.cm-hmd-internal-link:hover,
div.cm-s-obsidian span.cm-url:hover,
a.internal-link:hover,
a.external-link:hover,
.markdown-preview-view a:hover,
.markdown-rendered a:hover,
.note-content a:hover {
    text-decoration: underline !important;
    border-color: transparent !important;
}

/* ============================================================
   2. HEADING STRUCTURE (Clinical Scannable Hierarchy)
   ============================================================ */
.cm-header-1, h1 {
    font-size: 1.75em !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--accent) !important;
    padding-bottom: 0.25em;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em;
}

.cm-header-2, h2 {
    font-size: 1.4em !important;
    font-weight: 650 !important;
    border-bottom: 1px solid var(--border-subtle, rgba(150,150,150,0.2)) !important;
    padding-bottom: 0.25em;
    margin-top: 1.5em;
    margin-bottom: 0.4em;
    letter-spacing: -0.01em;
}

.cm-header-3, h3 {
    font-size: 1.2em !important;
    font-weight: 600 !important;
    margin-top: 1.4em;
    margin-bottom: 0.35em;
    letter-spacing: 0;
}

.cm-header-4, h4 {
    font-size: 1.0em !important;
    font-weight: 600 !important;
    margin-top: 1.3em;
    margin-bottom: 0.3em;
    letter-spacing: 0;
}

.cm-header-5, h5 {
    font-size: 0.88em !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1.2em;
    margin-bottom: 0.25em;
}

.cm-header-6, h6 {
    font-size: 0.78em !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted) !important;
    margin-top: 1em;
    margin-bottom: 0.2em;
}

/* Ensure bold/italic elements in headings inherit color */
.markdown-rendered h1 *, .markdown-rendered h2 *, .markdown-rendered h3 *,
.markdown-rendered h4 *, .markdown-rendered h5 *, .markdown-rendered h6 *,
.cm-header-1 *, .cm-header-2 *, .cm-header-3 *,
.cm-header-4 *, .cm-header-5 *, .cm-header-6 *,
.note-content h1 *, .note-content h2 *, .note-content h3 *,
.note-content h4 *, .note-content h5 *, .note-content h6 * {
    color: inherit !important;
}

/* ============================================================
   3. DARK THEME COLORS (Accent-Derived)
   ============================================================ */
body.theme-dark,
.theme-dark {
    --text-normal: #B5BAC2 !important;
    --text-muted: #8891A0 !important;
    --border-subtle: rgba(255,255,255,0.06);

    /* Links — driven by accent */
    --link-custom-color: var(--accent) !important;

    /* Headings — dynamically stepped down from accent color */
    --h1-color: var(--accent) !important;
    --h2-color: color-mix(in srgb, var(--accent) 82%, #ffffff 18%) !important;
    --h3-color: color-mix(in srgb, var(--accent) 68%, #ffffff 32%) !important;
    --h4-color: #D4D7DD !important;
    --h5-color: #A0ADB8 !important;
    --h6-color: #8891A0 !important;

    /* Selection highlight */
    --text-selection: color-mix(in srgb, var(--accent) 25%, transparent 75%) !important;
}

.theme-dark .cm-header-1, .theme-dark h1, body.theme-dark .note-content h1 { color: var(--h1-color) !important; }
.theme-dark .cm-header-2, .theme-dark h2, body.theme-dark .note-content h2 { color: var(--h2-color) !important; }
.theme-dark .cm-header-3, .theme-dark h3, body.theme-dark .note-content h3 { color: var(--h3-color) !important; }
.theme-dark .cm-header-4, .theme-dark h4, body.theme-dark .note-content h4 { color: var(--h4-color) !important; }
.theme-dark .cm-header-5, .theme-dark h5, body.theme-dark .note-content h5 { color: var(--h5-color) !important; }
.theme-dark .cm-header-6, .theme-dark h6, body.theme-dark .note-content h6 { color: var(--h6-color) !important; }

/* Pure white for bold/italic contrast in dark mode */
.theme-dark strong:not(h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong),
.theme-dark b:not(h1 b, h2 b, h3 b, h4 b, h5 b, h6 b),
.theme-dark .cm-strong,
.theme-dark em:not(h1 em, h2 em, h3 em, h4 em, h5 em, h6 em),
.theme-dark i:not(h1 i, h2 i, h3 i, h4 i, h5 i, h6 i),
.theme-dark .cm-em {
    color: #FFFFFF !important;
}

/* ============================================================
   4. LIGHT THEME COLORS (Accent-Derived for High Contrast)
   ============================================================ */
body.theme-light,
.theme-light {
    --text-normal: #333333 !important;
    --text-muted: #5A6377 !important;
    --border-subtle: rgba(0,0,0,0.08);

    /* Links — rich accent tone with high contrast on white */
    --link-custom-color: color-mix(in srgb, var(--accent) 85%, #000000 15%) !important;

    /* Headings — dark, rich tones with accent hue for optimal white background contrast */
    --h1-color: color-mix(in srgb, var(--accent) 70%, #000000 30%) !important;
    --h2-color: color-mix(in srgb, var(--accent) 60%, #000000 40%) !important;
    --h3-color: color-mix(in srgb, var(--accent) 50%, #000000 50%) !important;
    --h4-color: #1A1A2E !important;
    --h5-color: #5A6377 !important;
    --h6-color: #6B7280 !important;

    /* Selection highlight */
    --text-selection: color-mix(in srgb, var(--accent) 20%, transparent 80%) !important;
}

.theme-light .cm-header-1, .theme-light h1, body.theme-light .note-content h1 { color: var(--h1-color) !important; }
.theme-light .cm-header-2, .theme-light h2, body.theme-light .note-content h2 { color: var(--h2-color) !important; }
.theme-light .cm-header-3, .theme-light h3, body.theme-light .note-content h3 { color: var(--h3-color) !important; }
.theme-light .cm-header-4, .theme-light h4, body.theme-light .note-content h4 { color: var(--h4-color) !important; }
.theme-light .cm-header-5, .theme-light h5, body.theme-light .note-content h5 { color: var(--h5-color) !important; }
.theme-light .cm-header-6, .theme-light h6, body.theme-light .note-content h6 { color: var(--h6-color) !important; }

/* Pure black for bold/italic contrast in light mode */
.theme-light strong:not(h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong),
.theme-light b:not(h1 b, h2 b, h3 b, h4 b, h5 b, h6 b),
.theme-light .cm-strong,
.theme-light em:not(h1 em, h2 em, h3 em, h4 em, h5 em, h6 em),
.theme-light i:not(h1 i, h2 i, h3 i, h4 i, h5 i, h6 i),
.theme-light .cm-em {
    color: #000000 !important;
}

/* ============================================================
   5. TABLE STYLING (Accent-Themed)
   ============================================================ */
.markdown-preview-view table,
.markdown-rendered table,
.note-content table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 1.5em 0 !important;
    font-size: 0.95em !important;
}

.markdown-preview-view th,
.markdown-rendered th,
.note-content th,
.markdown-preview-view td,
.markdown-rendered td,
.note-content td {
    padding: 8px 12px !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ---- LIGHT MODE TABLES ---- */
body.theme-light,
.theme-light {
    --col-sep: color-mix(in srgb, var(--accent) 25%, transparent 75%);
}

.theme-light th,
body.theme-light .note-content th {
    background-color: color-mix(in srgb, var(--accent) 80%, #000000 20%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.theme-light tbody tr:nth-child(odd),
body.theme-light .note-content tbody tr:nth-child(odd) {
    background-color: #FFFFFF !important;
}

.theme-light tbody tr:nth-child(even),
body.theme-light .note-content tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--accent) 6%, #FFFFFF 94%) !important;
}

.theme-light tbody tr:hover,
body.theme-light .note-content tbody tr:hover {
    background-color: color-mix(in srgb, var(--accent) 12%, #FFFFFF 88%) !important;
}

/* ---- DARK MODE TABLES ---- */
body.theme-dark,
.theme-dark {
    --col-sep: color-mix(in srgb, var(--accent) 25%, transparent 75%);
}

.theme-dark th,
body.theme-dark .note-content th {
    background-color: color-mix(in srgb, var(--accent) 28%, #0f172a 72%) !important;
    color: color-mix(in srgb, var(--accent) 85%, #ffffff 15%) !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.theme-dark tbody tr:nth-child(odd),
body.theme-dark .note-content tbody tr:nth-child(odd) {
    background-color: transparent !important;
}

.theme-dark tbody tr:nth-child(even),
body.theme-dark .note-content tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--accent) 5%, transparent 95%) !important;
}

.theme-dark tbody tr:hover,
body.theme-dark .note-content tbody tr:hover {
    background-color: color-mix(in srgb, var(--accent) 10%, transparent 90%) !important;
}

/* ============================================================
   6. SELECTION HIGHLIGHT
   ============================================================ */
body.theme-dark ::selection,
.theme-dark ::selection {
    background-color: color-mix(in srgb, var(--accent) 30%, transparent 70%) !important;
}

body.theme-light ::selection,
.theme-light ::selection {
    background-color: color-mix(in srgb, var(--accent) 22%, transparent 78%) !important;
}

/* ============================================================
   7. TAG COLORS (#hashtag)
   ============================================================ */
.theme-dark .cm-hashtag-begin,
.theme-dark .cm-hashtag-end,
.theme-dark .cm-hashtag,
.theme-dark a.tag,
.theme-dark .tag {
    color: color-mix(in srgb, var(--accent) 80%, #ffffff 20%) !important;
    background-color: color-mix(in srgb, var(--accent) 15%, transparent 85%) !important;
    border-radius: 4px !important;
    padding: 1px 4px !important;
    border: none !important;
    text-decoration: none !important;
}

.theme-dark a.tag:hover,
.theme-dark .tag:hover {
    background-color: color-mix(in srgb, var(--accent) 25%, transparent 75%) !important;
}

.theme-light .cm-hashtag-begin,
.theme-light .cm-hashtag-end,
.theme-light .cm-hashtag,
.theme-light a.tag,
.theme-light .tag {
    color: color-mix(in srgb, var(--accent) 80%, #000000 20%) !important;
    background-color: color-mix(in srgb, var(--accent) 10%, transparent 90%) !important;
    border-radius: 4px !important;
    padding: 1px 4px !important;
    border: none !important;
    text-decoration: none !important;
}

.theme-light a.tag:hover,
.theme-light .tag:hover {
    background-color: color-mix(in srgb, var(--accent) 18%, transparent 82%) !important;
}

/* ============================================================
   8. INLINE COLOR SPANS (Light Mode Readability)
   ============================================================ */
.theme-light span[style*="color"] {
    filter: invert(1) hue-rotate(180deg);
}