@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --bg-color: #0d1117;
    --border-color: #30363d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent-green: #238636;
    --accent-blue: #58a6ff;
    --accent-red: #da3633;
    --accent-yellow: #d29922;
    --highlight-bg: #161b22;
    --selection-bg: #1f6feb;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Boot Overlay (Signature 37%) */
#boot-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
}

.boot-content {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.boot-logo {
    color: var(--accent-blue);
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.boot-progress-container {
    width: 100%;
    height: 20px;
    border: 1px solid #333;
    padding: 2px;
    background: #0d1117;
}

.boot-bar {
    height: 100%;
    width: 0.37%;
    background: var(--accent-green);
    transition: width 0.05s linear;
}

.boot-text {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: right;
}

.boot-log {
    height: 150px;
    overflow: hidden;
    font-size: 10px;
    color: #555;
    border-top: 1px dashed #333;
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column-reverse;
}

/* Layout Grid */
.tangle-container {
    display: grid;
    grid-template-areas: 
        "sidebar viewport"
        "sidebar telemetry";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 1fr 200px;
    gap: 0;
    flex-grow: 1;
    height: calc(100vh - 30px); /* Adjust for new status bar height */
    padding-bottom: 30px;
    opacity: 0; /* Hidden initially */
    transition: opacity 1s ease-in;
}

/* Pane Styles */
.pane {
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    margin: -1px 0 0 -1px; /* Collapse borders */
}

.sidebar { grid-area: sidebar; border-right: 1px solid var(--border-color); }
.viewport { grid-area: viewport; }
.telemetry { grid-area: telemetry; border-top: 1px solid var(--border-color); }

.pane-header {
    background-color: var(--highlight-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
}

.pane-title { font-weight: bold; color: var(--text-secondary); }
.pane-status { color: var(--accent-green); }

.pane-content {
    flex-grow: 1;
    overflow: auto;
    padding: 10px;
    position: relative;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--border-color); }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* Sidebar Navigation */
.nav-tree {
    list-style: none;
    margin-bottom: 20px;
}

.nav-item {
    padding: 5px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.1s;
}

.nav-item:hover { color: var(--text-primary); background: var(--highlight-bg); }
.nav-item.active { color: var(--accent-blue); background: rgba(88, 166, 255, 0.1); border-left: 2px solid var(--accent-blue); padding-left: 8px; }
.nav-item .icon { font-size: 10px; opacity: 0; }
.nav-item.active .icon { opacity: 1; }

.system-info {
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.info-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.info-row .value { color: var(--text-primary); }

/* Viewport Content Styles */
.man-page { 
    line-height: 1.6; 
    max-width: 100%; /* Allow full width */
    height: 100%; /* Take full height of viewport */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 10px; /* Space for scrollbar */
}
.man-header { margin-bottom: 20px; border-bottom: 1px dashed var(--border-color); padding-bottom: 10px; }
.man-title { font-size: 24px; color: var(--accent-blue); margin-bottom: 5px; }
.man-subtitle { color: var(--accent-green); font-size: 14px; margin-bottom: 10px; }
.man-section { margin-bottom: 25px; }
.section-title { color: var(--accent-yellow); font-weight: bold; margin-bottom: 10px; text-decoration: underline; }
.man-text { color: var(--text-primary); }

/* Data Table (Projects) */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; border-bottom: 1px solid var(--border-color); padding: 8px; color: var(--text-secondary); }
.data-table td { border-bottom: 1px solid var(--border-color); padding: 8px; color: var(--text-primary); cursor: pointer; }
.data-table tr:hover td { background: var(--highlight-bg); }
.tech-tag { color: var(--accent-blue); font-size: 11px; margin-right: 5px; }

/* Network Graph */
.network-container { width: 100%; height: 100%; overflow: hidden; background: #0a0e12; }
.node text { font-family: 'JetBrains Mono', monospace; font-size: 10px; pointer-events: none; text-shadow: 0 1px 2px #000; }
.node circle { stroke: #fff; stroke-width: 1.5px; transition: all 0.2s; }
.link { stroke-opacity: 0.6; }

/* Live Terminal */
.terminal-view { font-family: 'JetBrains Mono', monospace; font-size: 14px; display: flex; flex-direction: column; min-height: 100%; }
.terminal-output { flex-grow: 1; margin-bottom: 10px; }
.cmd-line { display: flex; margin-bottom: 5px; }
.cmd-prompt { color: var(--accent-green); margin-right: 10px; font-weight: bold; }
.cmd-input-container { display: flex; align-items: center; width: 100%; }
.cmd-input { background: transparent; border: none; color: var(--text-primary); font-family: inherit; font-size: inherit; flex-grow: 1; outline: none; }
.cmd-response { margin-bottom: 15px; white-space: pre-wrap; color: var(--text-primary); }
.cmd-error { color: var(--accent-red); }
.cmd-success { color: var(--accent-blue); }

/* Telemetry */
.stats-grid { display: flex; gap: 20px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.stat-box { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.stat-label { font-size: 10px; color: var(--text-secondary); }
.stat-value { font-weight: bold; }
.text-green { color: var(--accent-green); }
.text-yellow { color: var(--accent-yellow); }
.text-red { color: var(--accent-red); }

.progress-bar { width: 100%; height: 4px; background: var(--border-color); }
.progress-fill { height: 100%; background: var(--accent-blue); }

.log-feed { font-size: 12px; height: 100px; overflow-y: auto; font-family: 'JetBrains Mono', monospace; }
.log-entry { margin-bottom: 2px; }
.timestamp { color: var(--text-secondary); margin-right: 8px; }
.log-msg { color: var(--text-primary); }
.log-msg.error { color: var(--accent-red); }

/* Status Bar - FIXED POSITION FIX */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: var(--accent-blue);
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-weight: bold;
    font-size: 12px;
    z-index: 2147483647; /* Max Z-Index */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    opacity: 0; /* Hidden initially */
    transition: opacity 1s ease-in;
}
.left-status, .right-status { display: flex; gap: 15px; }

.mode-toggle {
    cursor: pointer;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: all 0.2s;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mode-toggle:hover {
    background-color: #fff;
    color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.mode-toggle:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .tangle-container {
        grid-template-areas: 
            "sidebar"
            "viewport"
            "telemetry";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 150px;
    }
    .sidebar { display: none; } /* Or collapse into a menu */
}

/* Cruel Theme Overrides */
.cruel-theme {
    --accent-blue: #ff6b6b; /* Shift blue to red */
    --accent-green: #e94560; /* Shift green to deep red */
    --border-color: #5a1e1e;
}
.cruel-theme .status-bar {
    background: #4a0d0d;
    color: #ff6b6b;
}

/* God Mode (Konami Code) */
body.god-mode {
    --bg-color: #000 !important;
    --border-color: #ff9800 !important;
    --text-primary: #ffb74d !important;
    --text-secondary: #f57c00 !important;
    --accent-green: #ff9800 !important;
    --accent-blue: #ff9800 !important;
    --accent-red: #d84315 !important;
    --accent-yellow: #ffeb3b !important;
    --highlight-bg: #1a1000 !important;
    --selection-bg: #e65100 !important;
}
body.god-mode .status-bar {
    background: #e65100 !important;
    color: #000 !important;
}
body.god-mode .node circle {
    stroke: #ff9800 !important;
    fill: #000 !important;
}
body.god-mode .link {
    stroke: #f57c00 !important;
    stroke-opacity: 0.8 !important;
}