/* ═══════════════════════════════════════════════════════════════════════════
   MARKDOWN EDITOR — Syntax Highlighting Approach
   
   Key principle: .md-editor-highlight and .md-editor-textarea share IDENTICAL
   font, size, padding, line-height. The highlight div sits behind the textarea.
   Textarea text is transparent (caret is visible). Highlights show through.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared font metrics — used by both layers */
:root {
    --md-font: 'Courier New', Courier, 'Lucida Console', Monaco, Consolas, monospace;
    --md-font-size: 14px;
    --md-line-height: 1.6;
    --md-padding: 12px;
    --md-accent: var(--mcnr-color-purple, #a73bff);
}

.md-editor-wrap {
    position: relative;
    background: var(--mcnr-bg-surface);
    border: 1px solid var(--mcnr-border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.md-editor-wrap:focus-within {
    border-color: var(--md-accent);
}

/* Error state — applied by MCNRUIKit.showFieldError() */
.md-editor-wrap.mcnr-input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

/* Keep red border even when the inner textarea is focused */
.md-editor-wrap.mcnr-input-error:focus-within {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

/* ── Toolbar ── */

.md-editor-toolbar {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--mcnr-border);
    background: #141414;
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
}

.md-editor-toolbar button {
    background: var(--mcnr-bg-raised);
    border: 1px solid var(--mcnr-border);
    color: var(--mcnr-text-secondary);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 32px;
    justify-content: center;
}

.md-editor-toolbar button:hover {
    background: var(--mcnr-bg-chip);
    border-color: var(--mcnr-border-strong);
    color: #fff;
}

.md-editor-toolbar button:active { background: var(--mcnr-bg-surface); }

.md-editor-toolbar .separator {
    width: 1px;
    background: var(--mcnr-border);
    margin: 0 4px;
    align-self: stretch;
}

/* ── Editor container ── */

.md-editor-container {
    position: relative;
    min-height: 120px;
}

/* ── The two layers — MUST share identical metrics ── */

.md-editor-highlight,
.md-editor-textarea {
    /* Identical font */
    font-family: var(--md-font);
    font-size: var(--md-font-size);
    line-height: var(--md-line-height);

    /* Identical geometry */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    padding: var(--md-padding);
    margin: 0;

    /* Identical text wrapping */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    tab-size: 4;
    -moz-tab-size: 4;

    /* Identical scroll behaviour */
    overflow-y: auto;
    overflow-x: hidden;

    /* Reset box model */
    border: none;
    box-sizing: border-box;
}

/* Highlight layer — behind, not interactive */
.md-editor-highlight {
    z-index: 1;
    color: transparent;       /* base text invisible; spans provide colour */
    pointer-events: none;
    user-select: none;
    background: transparent;
}

/* Textarea — on top, with transparent text so highlight shows through */
.md-editor-textarea {
    z-index: 2;
    color: transparent;
    caret-color: #e0e0e0;
    background: transparent;
    resize: vertical;
    -webkit-text-fill-color: transparent; /* Safari */
}

.md-editor-textarea:focus {
    outline: none;
}

.md-editor-textarea::selection {
    background: rgba(var(--mcnr-color-purple-rgb, 167, 59, 255), 0.35);
    -webkit-text-fill-color: transparent;
}

/* Placeholder styling */
.md-editor-textarea::placeholder {
    color: #444;
    -webkit-text-fill-color: #444;
}

/* ── Syntax highlight token colours ── */

/* Default text colour (lines with no special tokens) */
.md-editor-highlight {
    color: #e0e0e0;
}

/* Heading markers (# ## ###) */
.md-h-marker {
    color: var(--mcnr-text-muted);
    font-weight: normal;
}

/* Heading text */
.md-heading {
    color: var(--mcnr-text-primary);
    font-weight: 900;  /* Use bolder weight */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);  /* Subtle glow for emphasis */
    /* REMOVED: font-size: 1.05em; — this breaks cursor alignment */
}

/* --- */
.md-hr {
    color: #444;
}

/* Blockquote marker */
.md-quote-marker {
    color: var(--md-accent);
}

/* Blockquote text */
.md-quote {
    color: var(--mcnr-text-muted);
}

/* List marker - or 1. */
.md-list-marker {
    color: var(--md-accent);
}

/* Task list checkbox tokens [ ] and [x] */
.md-task-unchecked {
    color: var(--mcnr-text-muted);
}

.md-task-checked {
    color: var(--md-accent);
}

/* Bold markers ** */
.md-bold-marker {
    color: var(--mcnr-text-muted);
}

/* Bold text */
.md-bold {
    color: #fff;  /* Brighter white */
    font-weight: 900;  /* Bolder */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Italic markers * */
.md-italic-marker {
    color: var(--mcnr-text-muted);
}

/* Italic text */
.md-italic {
    color: #d0d0d0;
}

/* Backtick markers */
.md-code-marker {
    color: var(--mcnr-text-muted);
}

/* Inline code content */
.md-code {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    font-family: var(--md-font) !important;
}

/* Code block content */
.md-code-block {
    color: #e0e0e0;
    font-family: var(--md-font) !important;
}

/* Basic syntax highlighting tokens (language-agnostic) */
.md-syntax-keyword {
    color: #ff79c6;
    font-weight: 600;
}

.md-syntax-string {
    color: #50fa7b;
}

.md-syntax-number {
    color: #bd93f9;
}

.md-syntax-comment {
    color: #6272a4;
}

.md-syntax-function {
    color: #8be9fd;
}

/* Link brackets [](  ) */
.md-link-bracket {
    color: var(--mcnr-text-muted);
}

/* Link label text */
.md-link-label {
    color: var(--md-accent);
}

/* Link URL */
.md-link-url {
    color: #7a7aff;
    text-decoration: underline;
    text-decoration-color: rgba(122, 122, 255, 0.4);
}

/* Spoiler markers || */
.md-spoiler-marker {
    color: var(--mcnr-text-muted);
}

/* Spoiler text in editor — visible but visually distinct */
.md-spoiler {
    background: var(--mcnr-bg-chip);
    color: var(--mcnr-text-muted);
    border-radius: 2px;
}

/* Strikethrough markers ~~ */
.md-strike-marker {
    color: var(--mcnr-text-muted);
}

/* Strikethrough text */
.md-strike {
    color: var(--mcnr-text-muted);
    text-decoration: line-through;
}

/* Underline markers _ */
.md-underline-marker {
    color: var(--mcnr-text-muted);
}

/* Underline text */
.md-underline {
    color: #e0e0e0;
    text-decoration: underline;
    text-decoration-color: rgba(224, 224, 224, 0.5);
}

/* Table syntax */
.md-table-pipe {
    color: var(--mcnr-text-muted);
}

.md-table-separator {
    color: #444;
}

.md-table-cell {
    color: #e0e0e0;
}

/* ── Footer ── */

.md-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid var(--mcnr-border);
    background: #141414;
    font-size: 11px;
    color: var(--mcnr-text-muted);
    border-radius: 0 0 6px 6px;
}

.md-editor-char-count {
    font-family: var(--md-font);
    font-variant-numeric: tabular-nums;
    color: var(--mcnr-text-muted);
    transition: color 0.2s;
}

.md-editor-char-count.warning { color: #f59e0b; }
.md-editor-char-count.error   { color: #e74c3c; }

/* ══════════════════════════════════════════════════════════════════════════
   RENDERED MARKDOWN OUTPUT (from renderMarkdown() method)
   
   These styles apply to HTML generated by the renderMarkdown() method,
   used for displaying parsed markdown outside the editor (e.g., in tickets,
   comments, previews). All code elements use monospace font and white color.
   
   IMPORTANT: Uses !important to override any page-specific styles like
   .reply-body code { color: #f59e0b } that might be defined elsewhere.
   ══════════════════════════════════════════════════════════════════════════ */

/* Inline code in rendered output */
code.md-rendered-code {
    background: var(--mcnr-bg-chip) !important;
    font-family: 'Courier New', Courier, 'Lucida Console', Monaco, Consolas, monospace !important;
    font-size: 13px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

/* Code block container in rendered output */
pre.md-rendered-code-block {
    background: #0d0d0d !important;
    border: 1px solid var(--mcnr-border) !important;
    border-radius: 4px !important;
    padding: 10px !important;
    overflow-x: auto !important;
    margin: 6px 0 !important;
    font-family: 'Courier New', Courier, 'Lucida Console', Monaco, Consolas, monospace !important;
}

/* Code inside pre blocks in rendered output */
pre.md-rendered-code-block code.md-rendered-code {
    background: none !important;
    padding: 0 !important;
    font-family: 'Courier New', Courier, 'Lucida Console', Monaco, Consolas, monospace !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   .md-display — container for rendered markdown output
   
   Applied automatically by MarkdownDisplay or applyMarkdown().
   Styles all standard markdown elements produced by renderMarkdown().
   ══════════════════════════════════════════════════════════════════════════ */

.md-display {
    color: #e0e0e0;
    line-height: 1.6;
    font-size: 14px;
    tab-size: 4;
    -moz-tab-size: 4;
}

.md-display h1,
.md-display h2,
.md-display h3 {
    color: var(--mcnr-text-primary);
    font-weight: 600;
    margin: 8px 0 4px;
}
.md-display h1 { font-size: 1.4em; }
.md-display h2 { font-size: 1.2em; }
.md-display h3 { font-size: 1.05em; }

.md-rendered-spoiler {
    background: var(--mcnr-bg-chip);
    color: transparent;
    border-radius: 3px;
    padding: 0 3px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, background 0.15s;
}
.md-rendered-spoiler.md-revealed {
    background: var(--mcnr-bg-chip);
    color: inherit;
    user-select: text;
}

.md-display strong { color: var(--mcnr-text-primary); font-weight: 700; }
.md-display em     { font-style: italic; color: #d0d0d0; }
.md-display u      { text-decoration: underline; text-decoration-color: rgba(224,224,224,0.5); }

.md-display a {
    color: var(--md-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--mcnr-color-purple-rgb, 167, 59, 255), 0.3);
}
.md-display a:hover { border-bottom-color: var(--md-accent); }

.md-display blockquote {
    border-left: 3px solid var(--md-accent);
    padding-left: 12px;
    margin: 6px 0;
    color: var(--mcnr-text-secondary);
    font-style: italic;
}

.md-display ul,
.md-display ol {
    padding-left: 20px;
    margin: 4px 0;
}
.md-display li { margin: 2px 0; }

.md-display .md-task-list {
    margin: 4px 0;
}

.md-display .md-task-item {
    display: flex;
    align-items: center;
    margin: 2px 0;
}

.md-display hr {
    border: none;
    border-top: 1px solid var(--mcnr-border);
    margin: 10px 0;
}

/* Inline code in .md-display */
.md-display code.md-rendered-code {
    background: var(--mcnr-bg-chip);
    font-family: var(--md-font);
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Code block in .md-display */
.md-display pre.md-rendered-code-block {
    background: #0d0d0d;
    border: 1px solid var(--mcnr-border);
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto;
    margin: 6px 0;
    font-family: var(--md-font);
}
.md-display pre.md-rendered-code-block code.md-rendered-code {
    background: none;
    padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RENDERED MARKDOWN TABLES
   
   Tables rendered from markdown use MCNRUIKit table styles but need some
   additional spacing and container styles for proper markdown flow.
   ══════════════════════════════════════════════════════════════════════════ */

.md-display .md-rendered-table-container {
    margin: 12px 0;
    overflow-x: auto;
}

.md-display .md-rendered-table {
    width: 100%;
    font-size: 14px;
}

/* Ensure table cells in markdown tables aren't too cramped */
.md-display .md-rendered-table td,
.md-display .md-rendered-table th {
    min-width: 80px;
}