
.code-editor {
    /* === Editor container === */
    .editor-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        position: relative;
        white-space: pre;
        tab-size: 2;
        padding-left: 0 !important;

        /* Initialize CSS counter for line numbers */
        counter-reset: line-number;

        font-family: Menlo, Consolas, Monaco, monospace;
        display: block;
        line-height: 1.53;
        font-size: 13px;
        margin: 0;
        margin-top: 8px;
        margin-bottom: 8px;

        tab-size: 2;
        padding: 0px;

        &:focus-visible {
            outline: none;
        }

        /* Light theme (default) */
        --editor-bg: #f8f9fb;
        --editor-text: #2d2d2d;
        --editor-line-number: #aaa;
        --editor-gutter-bg: #f0f0f0;
        --editor-gutter-border: #ddd;
        --editor-selection-bg: rgb(171, 205, 252);
        --editor-cursor: #000;
        --editor-error-bg: rgba(255, 0, 0, 0.05);
        --editor-error-border: #ff0000;

        /* Syntax highlighting - Light theme (GitHub-inspired) */
        --token-comment: #6a737d; /* muted gray */
        --token-string: #032f62; /* dark blue for strings */
        --token-keyword: #d73a49; /* red keywords */
        --token-number: #005cc5; /* bright blue numbers */
        --token-property: #6f42c1; /* purple mapping keys / properties */
        --token-operator: #d73a49; /* match keyword red */
        --token-punctuation: #24292e; /* near-black punctuation */
        --token-function: #005cc5; /* blue functions */
        --token-class-name: #e36209; /* orange classes */
        --token-variable: #116329; /* green variables */
        --token-plain: #2d2d2d;

        /* Apply light theme variables */
        background-color: var(--editor-bg);
        color: var(--editor-text);
    }

    /* use colors via css vars from this point on */

    /* Add selection styling */
    ::selection {
        background-color: var(--editor-selection-bg) !important;
        color: var(--editor-text) !important;
        text-shadow: none !important;
    }

    .editor-code-highlight {
        overflow-wrap: break-word;
        text-wrap-mode: wrap;
        display: inline !important;
        vertical-align: top;
    }
    .editor-code-highlight.selected,
    .editor-code-highlight::selection {
        background-color: var(--editor-selection-bg) !important;
        color: var(--editor-text) !important;
        text-shadow: none !important;
    }

    .editor-code-line {
        overflow-wrap: break-word;
        text-wrap-mode: wrap;
        text-indent: -64px;
        padding-left: 112px !important;

        &.diff-context,
        &.diff-removed,
        &.diff-added {
            padding-left: 132px !important;
            white-space: pre-wrap;
        }

        > span {
            text-indent: 0px !important;
        }

        &:first-child {
            &::before {
                /* padding-top: theme("spacing.2"); */
                /* margin-top: calc(-1 * theme("spacing.2")); */
            }
        }
        /* Regular line numbers using CSS counters */
        &:not(.diff-context):not(.diff-added):not(.diff-removed)::before {
            content: counter(line-number);
            counter-increment: line-number;
            z-index: 10;
            position: absolute;
            border-right: 1px solid var(--editor-gutter-border);
            top: 0;
            bottom: 0;
            background-color: var(--editor-bg);

            left: 0;
            padding: 0;
            padding-right: 4px;
            width: 2em;
            text-align: right;
            color: var(--editor-line-number);
            user-select: none;
            white-space: pre;
        }

        /* Diff line numbers using data attributes - use ::after to avoid conflict with diff symbols */
        &.diff-context::after,
        &.diff-added::after,
        &.diff-removed::after {
            content: attr(data-old-line-number) " " attr(data-new-line-number);
            z-index: 10;
            position: absolute;
            border-right: 1px solid var(--editor-gutter-border);
            top: 0;
            bottom: 0;
            background-color: var(--editor-bg);

            left: 0;
            padding: 0;
            padding-right: 4px;
            width: 4em; /* Wider for two numbers */
            text-align: right;
            color: var(--editor-line-number);
            user-select: none;
            white-space: pre;
            font-size: 11px; /* Smaller font for two numbers */
        }
        position: relative;

        z-index: 1;
        @apply scrollbar scrollbar-h-0 scrollbar-thumb-[#ddd] scrollbar-track-[#f0f0f0];

        &:hover {
            @apply scrollbar-h-[2px];
        }
        white-space: pre-wrap;

        &.flex {
            .editor-code-highlight {
                &:not(.token-property) {
                    white-space: pre-line;
                }
                &.token-plain {
                    white-space: break-spaces;
                }
            }
        }
    }

    .editor-code-line.folded {
        display: none;
    }

    /* GitHub-style dual line number gutter using both pseudo-elements */
    .editor-code.language-json .editor-code-line[data-old-line-number],
    .editor-code.language-json .editor-code-line[data-new-line-number],
    .editor-code.language-yaml .editor-code-line[data-old-line-number],
    .editor-code.language-yaml .editor-code-line[data-new-line-number] {
        padding-left: 64px;
    }

    .editor-code.language-json .editor-code-line[data-old-line-number]::before,
    .editor-code.language-yaml .editor-code-line[data-old-line-number]::before {
        content: attr(data-old-line-number) !important;
        padding-right: 4px;
        box-sizing: border-box;
        position: absolute !important;
        left: 0px !important;
        top: 0 !important;
        width: 30px !important;
        text-align: right !important;
        color: #6b7280 !important;
        font-size: 10px !important;
        line-height: inherit !important;
        font-family:
            "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
        user-select: none !important;
        pointer-events: none !important;
        text-indent: 0 !important;
        border-right: 1px solid var(--editor-gutter-border) !important;
    }

    .editor-code.language-json .editor-code-line[data-new-line-number]::after,
    .editor-code.language-yaml .editor-code-line[data-new-line-number]::after {
        content: attr(data-new-line-number) !important;
        padding-right: 0px;
        padding-left: 4px;
        box-sizing: border-box;
        position: absolute !important;
        left: 30px !important;
        top: 0 !important;
        width: 30px !important;
        text-align: left !important;
        color: #6b7280 !important;
        font-size: 10px !important;
        line-height: inherit !important;
        font-family:
            "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
        user-select: none !important;
        pointer-events: none !important;
        text-indent: 0 !important;
    }

    /* Validation error highlighting for individual tokens */
    .editor-code-highlight.validation-error {
        /* Subtle background with gradient */
        background: linear-gradient(
            135deg,
            rgba(220, 38, 38, 0.08) 0%,
            rgba(220, 38, 38, 0.12) 100%
        );

        /* Enhanced wavy underline */
        border-bottom: 2px wavy #dc2626;

        /* Subtle text color adjustment */
        color: #b91c1c;

        /* Positioning for pseudo-elements */
        position: relative;

        /* Smooth transitions */
        transition: all 0.2s ease;

        /* Subtle border radius for modern look */
        border-radius: 2px;

        /* Optional: subtle box shadow for depth */
        box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.1);
    }

    /* Enhanced hover state */
    .editor-code-highlight.validation-error:hover {
        background: linear-gradient(
            135deg,
            rgba(220, 38, 38, 0.15) 0%,
            rgba(220, 38, 38, 0.2) 100%
        );

        /* Stronger border on hover */
        box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2);

        /* Slightly darker text */
        color: #991b1b;
    }

    /* Focus state for accessibility */
    .editor-code-highlight.validation-error:focus {
        outline: 2px solid rgba(220, 38, 38, 0.5);
        outline-offset: 1px;
    }

    /* Subtle animation for newly added errors */
    .editor-code-highlight.validation-error.newly-added {
        animation: errorPulse 0.6s ease-out;
    }

    

    /* Ensure parent containers don't clip tooltips */
    /* Token-level tooltip styling */
    .editor-code-highlight.validation-error[title] {
        position: relative;
        cursor: help;
        z-index: 1;
        overflow: visible;
    }

    .editor-code-highlight.validation-error[title]:hover::after {
        content: attr(title);
        position: absolute;
        bottom: calc(100% + 12px);
        left: 50%;
        /* transform: translateX(-50%); */
        background: rgba(0, 0, 0, 0.95);
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 8px;
        font-weight: 500;
        white-space: nowrap;
        z-index: 2147483647;
        pointer-events: none;
    }

    .editor-code-highlight.validation-error[title]:hover::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        border: 6px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.95);
        z-index: 2147483646;
        pointer-events: none;
    }

    /* Separator pipe between line numbers */
    /* .editor-code.language-json .editor-code-line[data-old-line-number][data-new-line-number]::before {
        content: attr(data-old-line-number) "|" !important;
    } */

    /* Hide original line numbers when diff gutter is active */
    /* .editor-code-line[data-old-line-number] .editor-line-number,
    .editor-code-line[data-new-line-number] .editor-line-number {
        display: none;
    } */

    /* Diff line backgrounds */
    /* .editor-code-line[data-old-line-number]:not([data-new-line-number]) {
        background-color: rgba(239, 68, 68, 0.15);
        border-left: 4px solid rgb(239, 68, 68);
    } */

    /* .editor-code-line[data-new-line-number]:not([data-old-line-number]) {
        background-color: rgba(16, 185, 129, 0.15);
        border-left: 4px solid rgb(16, 185, 129);
    } */

    .fold-toggle {
        position: absolute;
        left: 2.5em;
        top: 0;
        width: theme(spacing.3);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--editor-line-number);
        font-size: 1em;
    }

    .fold-toggle:hover {
        color: var(--editor-text);
    }

    /* === Prism token styling === */

    .token-string,
    .token-attr-value {
        color: var(--token-string);
    }

    .token-comment {
        color: var(--token-comment);
        font-style: italic;
    }

    .token-punctuation {
        color: var(--token-punctuation);
    }

    .token-namespace {
        opacity: 0.7;
    }

    .token-key,
    .token-property,
    .token-tag,
    .token-constant,
    .token-symbol,
    .token-deleted {
        color: var(--token-property);
    }

    .token-boolean,
    .token-number {
        color: var(--token-number);
    }

    .token-selector,
    .token-attr-name,
    .token-char,
    .token-builtin,
    .token-inserted {
        color: var(--token-string);
    }

    .token-operator,
    .token-entity,
    .token-url,
    .token-variable {
        color: var(--token-operator);
    }

    .token-atrule,
    .token-attr-value,
    .token-function,
    .token-class-name {
        color: var(--token-function);
    }

    .token-keyword {
        color: var(--token-keyword);
    }

    .token-regex,
    .token-important {
        color: var(--token-string);
    }

    .token-important,
    .token-bold {
        font-weight: bold;
    }

    .token-italic {
        font-style: italic;
    }

    .token-plain {
        color: var(--token-plain);
    }

    /* Ensure empty tokens have a minimum width for caret visibility */
    .token-empty {
        min-width: 1px;
        display: inline-block;
        caret-color: var(--editor-cursor); /* Ensure caret is visible */
    }

    /* Styling for tokens that have validation errors */
    .token-error {
        position: relative;
        border-bottom: 1px dashed var(--editor-error-border);
        cursor: help;
    }
}


.commit-diff,
.compare-diff {
    background: #f9f9fa;
    aspect-ratio: 1.5;
    .editor-code {
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 10px;
    }
}