/* =================================================================
   EDITOR.CSS - FIX LỖI MẤT KHUNG & TĂNG ĐỘ SÁNG CHỮ
   ================================================================= */

/* 1. KHUNG CHÍNH (WORKBENCH) */
.workbench {
    grid-area: workbench;
    display: flex; flex-direction: column;
    min-height: 0; height: 100%; 
    background-color: #1e1e1e !important; /* Nền xám đen */
    overflow: hidden; position: relative;
}

/* 2. THANH TAB (FILE TABBAR) */
.file-tabbar {
    height: 35px;
    background-color: #252526 !important; 
    border-bottom: 1px solid #2b2b2b;
    display: flex; align-items: center; padding: 0 10px; gap: 2px;
    flex-shrink: 0;
}

/* Style Tab - Đã tăng độ sáng chữ */
.file-tab {
    height: 28px; padding: 0 12px; margin-right: 1px;
    background-color: #2d2d2d; 
    color: #cccccc; /* Sáng hơn (cũ là #969696) */
    border-radius: 3px 3px 0 0; 
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: 13px; user-select: none;
}
.file-tab:hover { background-color: #3a3a3a; color: #fff; }

/* Tab Active - Sáng rõ */
.file-tab.active {
    background-color: #1e1e1e !important; 
    color: #ffffff !important; /* Trắng tinh */
    font-weight: 600; /* Chữ đậm hơn chút */
    border-top: 2px solid #008c8c; 
}

/* 3. KHUNG CHỨA EDITOR (FULL MÀN HÌNH) */
.editor-area {
    position: relative; flex: 1; width: 100%; height: 100%;
    background-color: #1e1e1e !important;
    overflow: hidden;
}

/* Instance Ace Editor - Fix lỗi hiển thị */
.editor-instance, #ace-editor-container {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important; height: 100% !important;
}

/* 4. MÀN HÌNH CHỜ */
.welcome-screen, .empty-state {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1e1e1e !important;
    color: #888888; /* Sáng hơn (cũ là #666) */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 10;
}
.logo-dim { width: 100px; opacity: 0.5; filter: grayscale(100%); margin-bottom: 20px; }

/* 5. OVERRIDE ACE EDITOR (MÀU CHỮ SÁNG & RÕ) */
/* Đoạn này quan trọng nhất để code không bị nhợt nhạt */

.ace_editor, 
.ace-monokai, 
.ace-monokai .ace_gutter, 
.ace-monokai .ace_scroller, 
.ace-monokai .ace_content, 
.ace-monokai .ace_gutter-layer {
    background-color: #1e1e1e !important; 
    /* Đổi màu chữ từ xám (#d4d4d4) sang TRẮNG SÁNG (#f8f8f2) */
    color: #f8f8f2 !important; 
}

/* Fix màu các thành phần code cho tươi hơn (Optional) */
.ace_keyword { color: #f92672 !important; } /* Hồng đậm */
.ace_string { color: #e6db74 !important; }  /* Vàng chanh */
.ace_variable { color: #fd971f !important; } /* Cam */
.ace_function { color: #a6e22e !important; } /* Xanh lá */

/* Dòng đang chọn */
.ace-monokai .ace_marker-layer .ace_active-line {
    background-color: #282828 !important;
}

/* Ẩn viền cột số dòng */
.ace-monokai .ace_gutter-active-line {
    background-color: transparent !important;
}

/* Màu con trỏ chuột */
.ace-monokai .ace_cursor {
    color: #f8f8f0 !important; /* Trắng sáng */
    border-left: 2px solid #f8f8f0 !important;
}

/* Số dòng (Gutter text) */
.ace-monokai .ace_gutter {
    background-color: #1e1e1e !important;
    border-right: 1px solid #333; 
    color: #606060 !important; /* Số dòng xám vừa phải */
}
.ace-monokai .ace_gutter-active-line {
    color: #ffffff !important; /* Số dòng đang chọn màu trắng */
}

/* Utility */
.hidden { display: none !important; }