/**
 * Aviator Code Blocks - Wrapper and UI Styles
 *
 * CodeMirror base and theme styles are loaded from the builder vendor files.
 * This file contains only the code block wrapper, header, and copy button styles.
 */

/* =================================================================
   CODESANDBOX-DARK THEME FALLBACK
   The builder theme file uses compound selectors requiring specific mode classes.
   This provides a fallback for modes without specific theme rules (e.g., PHP, XML).
   ================================================================= */

.CodeMirror.cm-s-codesandbox-dark {
    --cm-activeLineBackgroundColor: rgba(255, 255, 255, 0.05);
    --cm-angleBracketColor: #7b7d6f;
    --cm-attributeColor: #cbbefc;
    --cm-atomColor: #f78c6c;
    --cm-backgroundColor: #151515;
    --cm-builtinColor: #ffcb6b;
    --cm-commentColor: #676e95;
    --cm-cursorColor: #fc0;
    --cm-defColor: #82aaff;
    --cm-equalsColor: #89ddff;
    --cm-errorBackgroundColor: #ff5370;
    --cm-errorTextColor: #fff;
    --cm-gutterBackgroundColor: #151515;
    --cm-gutterTextColor: #4d526f;
    --cm-keywordColor: #c792ea;
    --cm-lineSelectionBackgroundColor: rgba(128, 203, 196, 0.2);
    --cm-metaColor: #ffcb6b;
    --cm-numberColor: #ff5370;
    --cm-operatorColor: #89ddff;
    --cm-propertyColor: #c792ea;
    --cm-qualifierColor: #decb6b;
    --cm-selectionBackgroundColor: #1f476b;
    --cm-selectedTextBackgroundColor: #234f76;
    --cm-stringColor: #bfd18a;
    --cm-string2Color: #f07178;
    --cm-tagColor: #a48ffb;
    --cm-textColor: #f0f0f0;
    --cm-typeColor: #f07178;
    --cm-variableColor: #f07178;
    --cm-variable2Color: #eff;
    --cm-variable3Color: #cbbefc;
    --cm-calleeColor: #ffcb6b;

    background-color: var(--cm-backgroundColor);
    color: var(--cm-textColor);
}

.CodeMirror.cm-s-codesandbox-dark .CodeMirror-gutters {
    background: var(--cm-gutterBackgroundColor);
    color: var(--cm-gutterTextColor);
}

.CodeMirror.cm-s-codesandbox-dark .CodeMirror-linenumber {
    color: var(--cm-gutterTextColor);
}

.CodeMirror.cm-s-codesandbox-dark .cm-keyword { color: var(--cm-keywordColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-operator { color: var(--cm-operatorColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-variable { color: var(--cm-variableColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-variable-2 { color: var(--cm-variable2Color); }
.CodeMirror.cm-s-codesandbox-dark .cm-variable-3 { color: var(--cm-variable3Color); }
.CodeMirror.cm-s-codesandbox-dark .cm-type { color: var(--cm-typeColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-builtin { color: var(--cm-builtinColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-atom { color: var(--cm-atomColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-number { color: var(--cm-numberColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-def { color: var(--cm-defColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-string { color: var(--cm-stringColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-string-2 { color: var(--cm-string2Color); }
.CodeMirror.cm-s-codesandbox-dark .cm-comment { color: var(--cm-commentColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-tag { color: var(--cm-tagColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-meta { color: var(--cm-metaColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-attribute { color: var(--cm-attributeColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-property { color: var(--cm-propertyColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-qualifier { color: var(--cm-qualifierColor); }
.CodeMirror.cm-s-codesandbox-dark .cm-error {
    color: var(--cm-errorTextColor);
    background-color: var(--cm-errorBackgroundColor);
}

/* =================================================================
   UTILITY CLASS OVERLAY STYLES
   Matches the builder's highlighting for property:value syntax
   ================================================================= */

/* Value part of utility classes (after colon) - slightly dimmed */
.cm-s-codesandbox-dark .cm-av-value {
    opacity: 0.6;
}

/* Angle brackets */
.cm-s-codesandbox-dark .cm-av-angle-bracket:not(.cm-comment) {
    color: var(--cm-angleBracketColor);
}

/* Equals signs */
.cm-s-codesandbox-dark .cm-av-equals:not(.cm-comment) {
    color: var(--cm-equalsColor);
}

/* Special color tokens */
.cm-s-codesandbox-dark .cm-av-rr { background: rgba(255, 0, 0, 0.3); }
.cm-s-codesandbox-dark .cm-av-oo { background: rgba(255, 165, 0, 0.3); }
.cm-s-codesandbox-dark .cm-av-yy { background: rgba(255, 255, 0, 0.3); }
.cm-s-codesandbox-dark .cm-av-gg { background: rgba(0, 128, 0, 0.3); }
.cm-s-codesandbox-dark .cm-av-bb { background: rgba(0, 0, 255, 0.3); }
.cm-s-codesandbox-dark .cm-av-ii { background: rgba(75, 0, 130, 0.3); }
.cm-s-codesandbox-dark .cm-av-vv { background: rgba(238, 130, 238, 0.3); }
.cm-s-codesandbox-dark .cm-av-bc { background: rgba(255, 0, 0, 0.3); }
.cm-s-codesandbox-dark .cm-av-bd { background: rgba(255, 0, 0, 0.3); }

/* =================================================================
   CODEMIRROR OVERRIDES FOR READ-ONLY CODE BLOCKS
   ================================================================= */

.aviator-code-block .CodeMirror {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    height: auto;
    background: transparent;
}

/* Hide the blinking cursor in read-only mode */
.aviator-code-block .CodeMirror-cursors {
    visibility: hidden !important;
}

/* Prevent scroll/shift when focusing the editor */
.aviator-code-block .CodeMirror-focused {
    outline: none;
}

/* Ensure text cursor on hover */
.aviator-code-block .CodeMirror-code {
    cursor: text;
}

/* Add left padding since no line numbers */
.aviator-code-block .CodeMirror pre.CodeMirror-line,
.aviator-code-block .CodeMirror pre.CodeMirror-line-like {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* =================================================================
   AVIATOR CODE BLOCK WRAPPER STYLES
   ================================================================= */

.aviator-code-block {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0a0a0a;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 4px;
}

/* Header bar - contains language label and copy button */
.aviator-code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 12px 6px;
    min-height: 32px;
}

/* Language label */
.aviator-code-block-lang {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 12px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.4);
}

/* Copy button */
.aviator-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    font-size: 0;
    color: rgba(255, 255, 255, 0.35);
    background-color: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.aviator-code-copy:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.1);
}

.aviator-code-copy:active {
    transform: scale(0.95);
}

.aviator-code-copy.copied {
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.15);
}

.aviator-code-copy.error {
    color: #f87171;
    background-color: rgba(248, 113, 113, 0.15);
}

.aviator-code-copy svg {
    width: 16px;
    height: 16px;
}

/* Code content container - lighter background with rounded corners */
.aviator-code-block-content {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.aviator-code-block-content .CodeMirror {
    height: auto !important;
    background: transparent;
}

/* Balance vertical padding */
.aviator-code-block-content .CodeMirror-lines {
    padding: 1rem 0;
}

/* Disable scrolling - show all code */
.aviator-code-block-content .CodeMirror-scroll {
    height: auto !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}

.aviator-code-block-content .CodeMirror-sizer {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    border-right-width: 0 !important;
    min-width: 100% !important;
    width: 100% !important;
}

/* Ensure lines wrap within container */
.aviator-code-block-content .CodeMirror-lines {
    width: 100% !important;
}

.aviator-code-block-content .CodeMirror pre.CodeMirror-line,
.aviator-code-block-content .CodeMirror pre.CodeMirror-line-like {
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* Hide scrollbars and spacer elements */
.aviator-code-block-content .CodeMirror-vscrollbar,
.aviator-code-block-content .CodeMirror-hscrollbar,
.aviator-code-block-content .CodeMirror-scrollbar-filler {
    display: none !important;
}

/* Hide CodeMirror's scroll spacer element (the 50px height div used for scroll calc) */
.aviator-code-block-content .CodeMirror-scroll > div:not([class]):not(.CodeMirror-sizer):not(.CodeMirror-gutters) {
    display: none !important;
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

@media (max-width: 640px) {
    .aviator-code-block {
        margin: 1rem -1rem;
        border-radius: 0;
        padding: 2px;
    }

    .aviator-code-block .CodeMirror {
        font-size: 13px;
    }

    .aviator-code-block-header {
        padding: 2px 8px 4px;
    }

    .aviator-code-block-lang {
        font-size: 11px;
    }

    .aviator-code-block-content {
        border-radius: 6px;
    }

    .aviator-code-copy {
        width: 26px;
        height: 26px;
    }

    .aviator-code-copy svg {
        width: 14px;
        height: 14px;
    }
}