/* SandboxCafe コードエディタ・シンタックスハイライト機能スタイル */

/* コードエディタ専用スタイル */
.code-editor {
    width: 100% !important;
    padding: 1rem !important;
    border: 2px solid #E5D5C8 !important;
    border-radius: 8px !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    background: #ffffff !important;
    color: #000000 !important;
    resize: vertical !important;
    min-height: 400px !important;
    tab-size: 2 !important;
    -moz-tab-size: 2 !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    z-index: 2 !important;
    position: relative !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.code-editor:focus {
    outline: none !important;
    border-color: #007ACC !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2) !important;
}

.code-editor::placeholder {
    color: #6A6A6A !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
}

/* 文字数カウンター */
.char-count {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}

/* コード入力ヘルプ */
.code-help {
    margin-bottom: 0.5rem;
}

.code-help small {
    color: #666;
    font-style: italic;
}

/* VSCode風シンタックスハイライト */
.code-editor-container {
    position: relative;
}

/* CodeMirror 6 スタイル */
.codemirror-container {
    border: 2px solid #E5D5C8;
    border-radius: 8px;
    overflow: hidden;
    min-height: 400px;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}

.codemirror-container .cm-editor {
    height: 400px;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
    font-size: 0.9rem !important;
}

.codemirror-container .cm-content {
    padding: 1rem !important;
    min-height: 360px !important;
}

.codemirror-container .cm-focused {
    outline: none !important;
}

.codemirror-container .cm-editor.cm-focused {
    border: none !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2) !important;
}

/* CodeMirrorのライトテーマカスタマイズ */
.codemirror-container .cm-editor {
    background: #ffffff !important;
}

.codemirror-container .cm-content {
    color: #000000 !important;
}

.codemirror-container .cm-activeLine {
    background: rgba(0, 122, 204, 0.05) !important;
}

.codemirror-container .cm-selectionBackground {
    background: rgba(0, 122, 204, 0.2) !important;
}

.code-highlight {
    display: none !important;
}

/* CodeMirrorコンテナを非表示 */
.codemirror-container {
    display: none !important;
}

/* CSS変数による軽量シンタックスハイライト */
:root {
    --syntax-html-tag: #000080;
    --syntax-html-attr: #CC0000;
    --syntax-html-value: #800000;
    --syntax-html-doctype: #404040;
    --syntax-html-comment: #004000;
    --syntax-css-property: #CC0000;
    --syntax-css-value: #800000;
    --syntax-css-selector: #600000;
    --syntax-js-keyword: #000080;
    --syntax-js-string: #800000;
    --syntax-js-number: #004000;
    --syntax-js-comment: #004000;
    --syntax-js-function: #B8860B;
    --syntax-js-variable: #000040;
    --syntax-punctuation: #000000;
}

/* contenteditable コードエディター */
.contenteditable-editor {
    width: 100% !important;
    min-height: 400px !important;
    max-height: 600px !important;
    padding: 1rem !important;
    border: 2px solid #E5D5C8 !important;
    border-radius: 8px !important;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    background: #ffffff !important;
    color: #000000 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    outline: none !important;
}

.contenteditable-editor:focus {
    border-color: #007ACC !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2) !important;
}

/* プレースホルダー */
.contenteditable-editor:empty:before {
    content: attr(data-placeholder);
    color: #6A6A6A;
    font-style: italic;
    pointer-events: none;
}

/* シンタックスハイライト用スタイル */
.syntax-html-tag { 
    color: var(--syntax-html-tag) !important; 
    font-weight: 700 !important; 
}

.syntax-html-attr { 
    color: var(--syntax-html-attr) !important; 
    font-weight: 700 !important; 
}

.syntax-html-value { 
    color: var(--syntax-html-value) !important; 
    font-weight: 600 !important; 
}

.syntax-html-doctype { 
    color: var(--syntax-html-doctype) !important; 
    font-weight: 600 !important; 
}

.syntax-html-comment { 
    color: var(--syntax-html-comment) !important; 
    font-weight: 600 !important; 
    font-style: italic !important;
}

.syntax-css-property { 
    color: var(--syntax-css-property) !important; 
    font-weight: 700 !important; 
}

.syntax-css-value { 
    color: var(--syntax-css-value) !important; 
    font-weight: 600 !important; 
}

.syntax-css-selector { 
    color: var(--syntax-css-selector) !important; 
    font-weight: 700 !important; 
}

.syntax-js-keyword { 
    color: var(--syntax-js-keyword) !important; 
    font-weight: 700 !important; 
}

.syntax-js-string { 
    color: var(--syntax-js-string) !important; 
    font-weight: 600 !important; 
}

.syntax-js-number { 
    color: var(--syntax-js-number) !important; 
    font-weight: 700 !important; 
}

.syntax-js-comment { 
    color: var(--syntax-js-comment) !important; 
    font-weight: 600 !important; 
    font-style: italic !important;
}

.syntax-js-function { 
    color: var(--syntax-js-function) !important; 
    font-weight: 700 !important; 
}

.syntax-js-variable { 
    color: var(--syntax-js-variable) !important; 
    font-weight: 600 !important; 
}

.syntax-punctuation { 
    color: var(--syntax-punctuation) !important; 
    font-weight: 700 !important; 
}

/* HTML/CSS/JavaScript シンタックスカラー（最大コントラスト） */

/* HTMLシンタックス */
.syntax-html-tag { 
    color: #000080 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-html-attr { 
    color: #CC0000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-html-value { 
    color: #800000 !important; 
    font-weight: 600 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-html-doctype { 
    color: #404040 !important; 
    font-weight: 600 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-html-comment { 
    color: #004000 !important; 
    font-weight: 600 !important; 
    font-style: italic !important;
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

/* CSSシンタックス */
.syntax-css-property { 
    color: #CC0000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-css-value { 
    color: #800000 !important; 
    font-weight: 600 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-css-selector { 
    color: #600000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-css-important { 
    color: #800080 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

/* JavaScriptシンタックス */
.syntax-js-keyword { 
    color: #000080 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-string { 
    color: #800000 !important; 
    font-weight: 600 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-number { 
    color: #004000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-comment { 
    color: #004000 !important; 
    font-weight: 600 !important; 
    font-style: italic !important;
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-function { 
    color: #B8860B !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-variable { 
    color: #000040 !important; 
    font-weight: 600 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-operator { 
    color: #000000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-js-bracket { 
    color: #000000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

/* 汎用シンタックス */
.syntax-punctuation { 
    color: #000000 !important; 
    font-weight: 700 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

.syntax-default { 
    color: #000000 !important; 
    font-weight: 600 !important; 
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.3) !important;
}

/* コードエディタのエラー表示 */
.code-error {
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid #dc3545;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 4px;
}

.code-error-message {
    color: #dc3545;
    font-size: 0.9rem;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}

/* コードエディタのサクセス表示 */
.code-success {
    background: rgba(40, 167, 69, 0.1);
    border-left: 4px solid #28a745;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 4px;
}

.code-success-message {
    color: #28a745;
    font-size: 0.9rem;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
}

/* コード行番号（将来の機能拡張用） */
.code-line-numbers {
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 3rem;
    padding: 0 0.5rem;
    background: #252526;
    border-right: 1px solid #3e3e42;
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #858585;
    text-align: right;
    overflow: hidden;
    pointer-events: none;
}

/* コードフォールド（将来の機能拡張用） */
.code-fold {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    text-align: center;
    line-height: 1rem;
    background: #3c3c3c;
    color: #cccccc;
    border-radius: 2px;
    margin-right: 0.5rem;
}

.code-fold:hover {
    background: #4c4c4c;
}

/* ミニマップ（将来の機能拡張用） */
.code-minimap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5rem;
    background: #1e1e1e;
    border-left: 1px solid #3e3e42;
    opacity: 0.6;
    pointer-events: none;
}

/* 使用量統計表示エリア */
.usage-stats-container {
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.usage-stats h3 {
    margin: 0 0 1rem 0;
    color: #495057;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-item {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.stat-item.educational {
    border-left: 4px solid #17a2b8;
    background: #f0fdff;
}

.stat-item.production {
    border-left: 4px solid #28a745;
    background: #f8fff9;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #495057;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.2;
}

.educational-note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #856404;
}

.stats-updated {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: right;
    margin-top: 0.5rem;
    font-style: italic;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .code-editor {
        font-size: 0.8rem !important;
        padding: 0.8rem !important;
        min-height: 300px !important;
    }
    
    .code-highlight {
        font-size: 0.8rem;
        padding: 0.8rem;
    }
    
    .char-count {
        font-size: 0.7rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.8rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .educational-note {
        font-size: 0.85rem;
        padding: 0.6rem;
    }
}