/* --- Basic IDE Simulation Styles --- */

body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #1e1e1e; /* Very dark grey (VS Code dark theme) */
    color: #d4d4d4; /* Light grey text */
    margin: 0;
    overflow: hidden; /* Prevent body scroll */
    font-size: 14px;
}

.ide-container {
    display: flex;
    height: 100vh;
}

/* --- Sidebar --- */
.ide-sidebar {
    width: 250px;
    min-width: 200px;
    background-color: #252526; /* Slightly lighter dark grey */
    border-right: 1px solid #333333;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.file-list-header {
    padding: 10px 15px;
    font-size: 11px;
    font-weight: bold;
    color: #cccccc;
    text-transform: uppercase;
    border-bottom: 1px solid #333333;
}

.file-list {
    list-style: none;
    padding: 5px 0;
    margin: 0;
    font-size: 13px;
}

.file-item {
    padding: 5px 15px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-item:hover {
    background-color: #2a2d2e;
}

.file-item.folder::before {
    content: '▶ '; /* Closed folder */
    display: inline-block;
    width: 1em;
    color: #c5c5c5;
}

.file-item.folder.open::before {
    content: '▼ '; /* Open folder */
}

.file-item.file::before {
    content: '\f15c '; /* Placeholder icon (requires font like FontAwesome or unicode) */
    /* For basic: content: '\00a0\00a0 '; /* Non-breaking spaces */
    display: inline-block;
    width: 1em;
    color: #c5c5c5;
}

.file-item.sub-item {
    padding-left: 30px;
}

.file-item.sub-item.sub-item {
    padding-left: 45px;
}

.file-item.active {
    background-color: #37373d;
    color: #ffffff;
}

/* --- Main Area --- */
.ide-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Tabs --- */
.ide-tabs {
    display: flex;
    background-color: #2d2d2d;
    border-bottom: 1px solid #3f3f46; /* Separator line */
}

.tab {
    padding: 8px 15px;
    font-size: 13px;
    cursor: default;
    border-right: 1px solid #3f3f46;
    color: #9e9e9e;
    white-space: nowrap;
}

.tab.active {
    background-color: #1e1e1e; /* Match editor background */
    color: #d4d4d4;
    border-bottom: 1px solid #1e1e1e; /* Hide bottom border for active tab */
    position: relative;
    top: 1px;
}

.tab:hover:not(.active) {
    background-color: #37373d;
}

/* --- Editor --- */
.ide-editor {
    flex-grow: 1;
    overflow: auto;
    background-color: #1e1e1e;
    padding: 10px;
}

/* Basic Syntax Highlighting (Assembly) */
pre {
    margin: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
}

code[class*="language-"] {
    color: #d4d4d4; /* Default text */
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6a9955; /* Green comments */
}

.token.punctuation {
    color: #d4d4d4;
}

.token.directive,
.token.keyword {
    color: #569cd6; /* Blue keywords/directives */
}

.token.operator {
    color: #d4d4d4;
}

.token.function {
    color: #dcdcaa; /* Yellow functions */
}

.token.register {
    color: #9cdcfe; /* Light blue registers */
}

.token.string {
    color: #ce9178; /* Orange strings */
}

.token.number {
    color: #b5cea8; /* Light green numbers */
}

.token.label {
    color: #dcdcaa; /* Yellow labels */
}

/* Simulate more specific ASM tokens (adjust based on actual highlighter) */
/* These might need a real JS highlighter library to work properly */
.language-assembly .token.instruction {
     color: #c586c0; /* Purple instructions */
}

.language-assembly .token.section-directive { /* e.g., section .text */
    color: #4ec9b0; /* Teal */
    font-weight: bold;
}

.language-assembly .token.macro-directive { /* e.g., %include, %macro */
    color: #d7ba7d; /* Gold */
}

/* Manual override for specific red text */
.manual-red {
    color: #f97583 !important;
    background-color: yellow !important; /* Make it very obvious */
    font-weight: bold !important;
}

/* --- Media Queries --- */

@media (max-width: 768px) {
    .ide-sidebar {
        width: 60px; /* Significantly reduce sidebar width */
        min-width: 60px;
        /* Hide text, show only icons? Requires more complex HTML/CSS */
        overflow: hidden; /* Hide overflowing text */
    }
    .file-list-header,
    .file-list {
        /* Optionally hide text or simplify display */
        font-size: 10px; /* Reduce font size if still visible */
    }
    .file-item {
        padding: 5px 8px; /* Reduce padding */
    }
    .file-item.sub-item { padding-left: 8px; }
    .file-item.sub-item.sub-item { padding-left: 8px; }

    .ide-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }

}

@media (max-width: 480px) {
     .ide-sidebar {
         display: none; /* Hide sidebar completely */
     }
     .tab {
        padding: 6px 10px;
        font-size: 12px;
     }
     .ide-editor {
        padding: 5px;
     }
     pre, code[class*="language-"] {
        font-size: 11px; /* Slightly smaller code font */
     }
}

#ezPrivacyCenter {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    background-color: #5fa624 !important;
    color: white !important;
    border-radius: 5px !important;
    z-index: 2147483647 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
}