/**
 * Code Highlight Styles
 * Supports: Dracula (Default), GitHub, Dark, Light
 */

.fc-code-highlight {
/* Default Theme (Dracula) Variables */
--ch-bg: #282a36;
--ch-header-bg: #21222c;
--ch-border: #44475a;
--ch-text: #f8f8f2;
--ch-lang-text: #bd93f9;
--ch-copy-border: #6272a4;
--ch-copy-text: #f8f8f2;
--ch-copy-hover: #44475a;

/* Token Colors (Dracula) */
--tok-comment: #6272a4;
--tok-punctuation: #f8f8f2;
--tok-prop: #ff79c6;
--tok-bool: #bd93f9;
--tok-string: #f1fa8c;
--tok-oper: #ff79c6;
--tok-func: #50fa7b;
--tok-key: #ff79c6;
--tok-regex: #ffb86c;
--tok-keyword: #8be9fd;
--tok-entity: #bd93f9;

/* Line Numbers */
--ch-line-num-color: #6272a4;
--ch-line-num-border: #44475a;
--ch-line-num-bg: #282a36; /* Match main bg */

/* Metrics */
--ch-font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
--ch-font-size: 14px;
--ch-line-height: 24px; /* Fixed pixel value for perfect grid alignment */
--ch-padding-y: 20px;
}

/* Theme: GitHub (Light) */
.fc-code-highlight.theme-github {
--ch-bg: #ffffff;
--ch-header-bg: #f6f8fa;
--ch-border: #e1e4e8;
--ch-text: #24292e;
--ch-lang-text: #24292e;
--ch-copy-border: #d1d5da;
--ch-copy-text: #586069;
--ch-copy-hover: #f3f4f6;

--tok-comment: #6a737d;
--tok-punctuation: #24292e;
--tok-prop: #22863a; 
--tok-bool: #005cc5;
--tok-string: #032f62;
--tok-oper: #d73a49;
--tok-func: #6f42c1;
--tok-key: #d73a49;
--tok-regex: #032f62;
--tok-keyword: #d73a49;
--tok-entity: #6f42c1;

--ch-line-num-color: #bbb; 
--ch-line-num-border: #eaeaea; /* Slightly darker for visibility */
--ch-line-num-bg: #fff;

box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid var(--ch-border);
}

/* Theme: Generic Dark */
.fc-code-highlight.theme-dark {
--ch-bg: #1e1e1e;
--ch-header-bg: #252526;
--ch-border: #333;
--ch-text: #d4d4d4;
--ch-lang-text: #9cdcfe;

--tok-comment: #6a9955;
--tok-string: #ce9178;
--tok-key: #569cd6;
--tok-func: #dcdcaa;

--ch-copy-text: #d4d4d4;
--ch-copy-text: #d4d4d4;
--ch-copy-border: #444;
--ch-copy-hover: #333;

--ch-line-num-color: #858585;
--ch-line-num-border: #333;
--ch-line-num-bg: #1e1e1e;

box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Theme: Generic Light */
.fc-code-highlight.theme-light {
--ch-bg: #fafafa;
--ch-header-bg: #f0f0f0;
--ch-border: #ccc;
--ch-text: #333;
--ch-lang-text: #555;

--ch-copy-text: #555;
--ch-copy-text: #555;
--ch-copy-border: #ccc;
--ch-copy-hover: #e0e0e0;

--tok-comment: #7d8b99;
--tok-string: #a11;
--tok-key: #333;
--tok-func: #00f;

--ch-line-num-color: #999;
--ch-line-num-border: #eee;
--ch-line-num-bg: #fafafa;

--ch-line-num-bg: #fafafa;

border: 1px solid #ddd;
box-shadow: none;
}

/* Theme: Monokai (Dark) */
.fc-code-highlight.theme-monokai {
--ch-bg: #272822;
--ch-header-bg: #1e1f1c;
--ch-border: #3e3d32;
--ch-text: #f8f8f2;
--ch-lang-text: #f92672;

--ch-copy-text: #f8f8f2;
--ch-copy-border: #75715e;
--ch-copy-hover: #3e3d32;

--tok-comment: #75715e;
--tok-string: #e6db74;
--tok-key: #66d9ef;
--tok-keyword: #f92672;
--tok-func: #a6e22e;
--tok-prop: #f92672;
--tok-bool: #ae81ff;
--tok-oper: #f92672;
--tok-entity: #ae81ff;
--tok-punctuation: #f8f8f2;
--tok-regex: #e6db74;

--ch-line-num-color: #75715e;
--ch-line-num-border: #3e3d32;
--ch-line-num-bg: #272822;

box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Theme: Nord (Dark) */
.fc-code-highlight.theme-nord {
--ch-bg: #2e3440;
--ch-header-bg: #242933;
--ch-border: #3b4252;
--ch-text: #d8dee9;
--ch-lang-text: #88c0d0;

--ch-copy-text: #d8dee9;
--ch-copy-border: #4c566a;
--ch-copy-hover: #3b4252;

--tok-comment: #4c566a;
--tok-string: #a3be8c;
--tok-key: #81a1c1;
--tok-keyword: #81a1c1;
--tok-func: #88c0d0;
--tok-prop: #8fbcbb;
--tok-bool: #b48ead;
--tok-oper: #81a1c1;
--tok-entity: #b48ead;
--tok-punctuation: #eceff4;
--tok-regex: #ebcb8b;

--ch-line-num-color: #4c566a;
--ch-line-num-border: #3b4252;
--ch-line-num-bg: #2e3440;

box-shadow: 0 5px 15px rgba(0,0,0,0.25);
border: 1px solid var(--ch-border);
}

/* Theme: Solarized (Light) */
.fc-code-highlight.theme-solarized-light {
--ch-bg: #fdf6e3;
--ch-header-bg: #eee8d5;
--ch-border: #e4cb8f;
--ch-text: #657b83;
--ch-lang-text: #b58900;

--ch-copy-text: #586e75;
--ch-copy-border: #ccc;
--ch-copy-hover: #eee8d5;

--tok-comment: #93a1a1;
--tok-string: #2aa198;
--tok-key: #859900;
--tok-keyword: #859900;
--tok-func: #268bd2;
--tok-prop: #268bd2;
--tok-bool: #cb4b16;
--tok-oper: #859900;
--tok-entity: #dc322f;
--tok-punctuation: #586e75;
--tok-regex: #d33682;

--ch-line-num-color: #93a1a1;
--ch-line-num-border: #eee8d5;
--ch-line-num-bg: #fdf6e3;

border: 1px solid #e4cb8f;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}


/* Base Styles */
.fc-code-highlight {
background: var(--ch-bg);
border-radius: 12px;
margin-bottom: 30px;
overflow: hidden;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
color: var(--ch-text);
font-size: var(--ch-font-size);
}

.fc-code-highlight__header {
background: var(--ch-header-bg);
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--ch-border);
position: relative;
z-index: 2;
height: 44px;
}

/* Mac-style Window Controls */
.fc-code-highlight__controls {
display: flex;
gap: 8px;
margin-right: auto;
}

.fc-code-highlight__left-group {
display: flex;
align-items: center;
gap: 12px;
}

.fc-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}

.fc-dot.red { background: #ff5f56; }
.fc-dot.yellow { background: #ffbd2e; }
.fc-dot.green { background: #27c93f; }

.fc-code-highlight__lang {
color: var(--ch-lang-text);
font-size: 0.85em;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
letter-spacing: 0.5px;
/* Default is Center (lang-pos-center) */
position: absolute;
left: 50%;
transform: translateX(-50%);
}

/* Lang Position: Left (next to dots/title) */
.fc-code-highlight.lang-pos-left .fc-code-highlight__lang {
position: static;
transform: none;
margin-right: 0;
}

/* Lang Position Box Style (Left or Center) */
.fc-code-highlight.has-lang-box-style.lang-pos-left .fc-code-highlight__lang,
.fc-code-highlight.has-lang-box-style.lang-pos-center .fc-code-highlight__lang {
    background: var(--ch-header-bg);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--ch-border);
}

/* Lang Position: Bottom Right */
.fc-code-highlight.lang-pos-bottom-right .fc-code-highlight__header {
position: static;
}

.fc-code-highlight.lang-pos-bottom-right .fc-code-highlight__lang {
position: absolute;
top: auto;
left: auto;
bottom: 15px;
right: 15px;
transform: none;
z-index: 10;
background: var(--ch-header-bg);
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--ch-border);
opacity: 0.8;
transition: opacity 0.2s ease;
}

.fc-code-highlight.lang-pos-bottom-right:hover .fc-code-highlight__lang {
opacity: 1;
}

.fc-code-highlight__copy {
background: transparent;
border: 1px solid var(--ch-copy-border);
color: var(--ch-copy-text);
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75em;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 5px;
}

.fc-code-highlight__copy:hover {
background: var(--ch-copy-hover);
border-color: var(--ch-text);
}

.fc-copy-icon {
font-size: 1.1em;
}

/* Body and Alignment */
.fc-code-highlight__body {
position: relative;
overflow-x: auto;
overflow-y: auto;
position: relative;
overflow-x: auto;
overflow-y: auto;
display: grid;
grid-template-columns: min-content auto;
align-items: stretch;
max-height: 600px; 
}

/* Sticky Line Numbers */
.fc-line-numbers-rows {
position: sticky;
left: 0;
z-index: 10;
display: none; /* Hidden by default */
padding: var(--ch-padding-y) 0;
text-align: right;
background: var(--ch-line-num-bg);
border-right: 1px solid var(--ch-line-num-border);
color: var(--ch-line-num-color);
font-family: var(--ch-font-family);
font-size: var(--ch-font-size);
line-height: var(--ch-line-height);
user-select: none;
min-width: 40px; 
flex-shrink: 0;
margin: 0;
height: auto; 
min-height: 100%; /* Ensure it matches container minimum */
align-self: stretch; /* Force stretch */
}

.fc-line-numbers-rows span {
display: block;
height: var(--ch-line-height); /* Force height */
padding-right: 12px;
padding-left: 10px;
box-sizing: border-box;
/* Visual Guide lines */
border-bottom: 1px dashed var(--ch-line-num-border);
}

.fc-code-highlight.has-line-numbers .fc-line-numbers-rows {
display: block;
}

/* Code Content */
.fc-code-highlight pre {
margin: 0;
padding: var(--ch-padding-y) 20px;
background-color: transparent !important; 
overflow: visible;
text-align: left;
font-family: var(--ch-font-family);
font-size: var(--ch-font-size);
line-height: var(--ch-line-height);
white-space: pre; 
tab-size: 4;
min-height: 100%; /* Ensure full height */
width: 100%;
}

.fc-code-highlight code {
font-family: var(--ch-font-family);
font-size: var(--ch-font-size);
line-height: var(--ch-line-height);
color: var(--ch-text) !important;
display: block;

/* Reset Global Overrides */
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width: 100%;
}

/* Individual Lines for Alignment */
.fc-line {
display: block;
height: var(--ch-line-height);
min-height: var(--ch-line-height);
line-height: var(--ch-line-height); /* Vertically center in the block */
white-space: pre;
box-sizing: border-box;
width: 100%;

/* Dashed Grid Lines */
border-bottom: 1px dashed var(--ch-line-num-border);
}

/* Remove border from last line to look cleaner? Optional */
.fc-line:last-child {
border-bottom: none;
}

/* Custom Scrollbar */
.fc-code-highlight__body::-webkit-scrollbar {
width: 10px;
height: 10px;
}

.fc-code-highlight__body::-webkit-scrollbar-track {
background: var(--ch-header-bg);
}

.fc-code-highlight__body::-webkit-scrollbar-thumb {
background: var(--ch-border);
border-radius: 5px;
border: 2px solid var(--ch-header-bg);
}

.fc-code-highlight__body::-webkit-scrollbar-thumb:hover {
background: var(--ch-line-num-color);
}


/* Token Colors */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--tok-comment); font-style: italic; }
.token.punctuation { color: var(--tok-punctuation); }
.token.namespace { opacity: .7; }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--tok-prop); }
.token.boolean, .token.number { color: var(--tok-bool); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--tok-string); }
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { color: var(--tok-oper); }
.token.atrule, .token.attr-value, .token.function, .token.class-name { color: var(--tok-func); }
.token.keyword { color: var(--tok-key); }
.token.regex, .token.important { color: var(--tok-regex); }
.token.variable { color: #ffb86c; font-style: italic; }

/* Wrapper for Title Label and Preview */
.fc-code-highlight-wrapper {
    margin-bottom: 25px;
    position: relative;
    width: 100%;
}

.fc-code-highlight-wrapper .fc-code-highlight {
    margin-bottom: 0;
}

/* Custom Title Label (Tab Style) */
.fc-code-highlight__title-label {
    margin-bottom: 0;
}

.fc-code-highlight__title-label > span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 8px 8px 0 0;
    color: #fff;
    font-size: 14px;
    background: #4267b2;
    font-family: var(--ch-font-family, monospace);
    font-weight: 500;
}

.fc-code-highlight__title-label i.fa, 
.fc-code-highlight__title-label i.fas, 
.fc-code-highlight__title-label i.far {
    margin-right: 6px;
}

/* HTML Preview Box */
.fc-code-preview {
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    color: #333;
    overflow-x: auto;
}

.fc-code-highlight-wrapper .fc-code-preview + .fc-code-highlight {
    border-top-left-radius: 8px;
}

.fc-code-highlight__title-label + .fc-code-highlight {
    border-top-left-radius: 0;
}

.fc-code-highlight__title-label + .fc-code-preview {
    border-top-left-radius: 0;
    border-top-color: #4267b2;
}

/* Inside Title Label (Replaces Mac Dots) */
.fc-code-highlight__title-inside {
    color: var(--ch-copy-text);
    font-size: 0.9em;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}