:root {
    /* System Colors (Matching Projects) */
    --sys-bg: #ece9d8;
    --sys-text: #000000;
    --sys-highlight: #316ac5; /* Windows Blue Selection */
    --sys-highlight-text: #ffffff;

    /* Accents */
    --accent-orange: #eb7d00; 
    --accent-grey: #727272;
    
    /* Layout */
    --sidebar-width: 280px;
    
    /* Borders */
    --border-light: #ffffff;
    --border-shadow: #aca899;
    --border-dark: #404040;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--sys-bg);
    color: var(--sys-text);
    font-family: "Segoe UI", "Tahoma", sans-serif;
    height: 100vh;
    overflow: hidden;
    font-size: 12px;
    user-select: none;
}

/* --- GRID LAYOUT --- */
.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    height: 100%;
    padding: 4px;
    gap: 4px;
    box-sizing: border-box;
    transition: grid-template-columns 0.3s ease;
}

.app-container.collapsed {
    grid-template-columns: 0px 1fr;
    gap: 0;
}

/* --- PANELS --- */
.panel-3d {
    background: var(--sys-bg);
    border: 2px solid var(--sys-bg);
    display: flex;
    flex-direction: column;
    box-shadow: 
        inset 1px 1px 0 var(--border-light),
        1px 1px 0 var(--border-dark),
        2px 2px 0 var(--border-dark);
    overflow: hidden;
}

.sunked-panel {
    border: 2px solid;
    border-color: var(--border-shadow) var(--border-light) var(--border-light) var(--border-shadow);
    background: #ffffff;
}

/* --- SIDEBAR --- */
.sidebar { 
    padding: 2px; 
    min-width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-header {
    background: linear-gradient(to right, #808080, #b0b0b0);
    padding: 4px 6px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-header h3 { margin: 0; font-size: 11px; letter-spacing: 1px; }

.btn-tiny {
    width: 20px; height: 20px;
    background: var(--sys-bg);
    border: 1px outset #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.btn-tiny:active { border-style: inset; }

.toolbar { padding: 0 0 2px 0; }

.search-box {
    width: 100%;
    box-sizing: border-box;
    border: 2px inset var(--sys-bg);
    padding: 4px;
    font-family: "Segoe UI", sans-serif;
    font-size: 12px;
}

/* REPO LIST */
.repo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
    background-color: #fff;
}

.repo-list li {
    padding: 6px 8px;
    cursor: pointer;
    border-bottom: 1px dotted #eee;
    display: flex;
    flex-direction: column;
}

.repo-list li:hover { background-color: #f0f0f0; }
.repo-list li.active {
    background-color: var(--sys-highlight);
    color: var(--sys-highlight-text);
}
/* Adjust text colors when active */
.repo-list li.active .repo-lang, 
.repo-list li.active .repo-updated { 
    color: rgba(255,255,255,0.8) !important; 
}

.repo-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.repo-name { font-weight: bold; font-size: 13px; }
.repo-lang { font-size: 10px; opacity: 0.6; color: #000; }
.repo-updated { font-size: 9px; color: #888; margin-top: 2px; text-align: right;}

.status-bar-mini {
    font-size: 10px;
    color: #666;
    text-align: right;
    padding-right: 4px;
    margin-top: 2px;
}

/* --- VIEWPORT / MAIN CONTENT --- */
.viewport {
    background-color: var(--sys-bg);
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

.viewport-header {
    padding: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* Sidebar Toggle Button */
.btn-toggle-sidebar {
    background: var(--sys-bg);
    border: 1px outset var(--border-light);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.btn-toggle-sidebar:active { border-style: inset; }

.viewport-title-group {
    flex-grow: 1;
}
.viewport-title-group h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.copy-clone-btn {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid #999;
    background: #eee;
    cursor: pointer;
    color: #333;
    margin-left: 8px;
}
.copy-clone-btn:active { background: #ccc; }

/* TABS */
.tabs-bar {
    padding: 0 8px;
    display: flex;
    gap: 2px;
    margin-bottom: -2px; 
    z-index: 10;
    margin-top: 4px;
}

.tab-btn {
    background: var(--sys-bg);
    border: 1px solid var(--border-shadow);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    padding: 4px 12px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    top: 2px;
}

.tab-btn.active {
    background: #fff;
    font-weight: bold;
    border-color: var(--border-shadow) var(--border-shadow) #fff var(--border-shadow);
    border-top: 2px solid var(--accent-orange); /* Orange highlight */
    z-index: 100;
    top: 0;
    padding-bottom: 6px;
}

/* CONTENT AREA */
.content-wrapper {
    flex-grow: 1;
    background: #fff;
    border-top: 1px solid var(--border-shadow);
    position: relative;
    overflow: hidden; /* Container handles scroll */
    display: flex;
    flex-direction: column;
}

.scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

/* MARKDOWN STYLES */
.markdown-body {
    font-family: "Segoe UI", sans-serif;
    line-height: 1.6;
    color: #24292e;
    font-size: 13px;
    max-width: 800px;
    margin: 0 auto; /* Center document */
}

.markdown-body img {
    max-width: 100%;
    border: 1px solid #ddd;
    padding: 4px;
    background: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.markdown-body pre {
    background-color: #f0f0f0;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow-x: auto;
}

.markdown-body h1 { font-size: 2em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 0.3em; margin-top: 1.5em; }

/* STATS PAGE */
.stats-page {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.info-group {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 10px;
    background: #f9f9f9;
}
.info-group label {
    display: block;
    font-weight: bold;
    font-size: 10px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.stat-card {
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}
.stat-val { font-size: 16px; font-weight: bold; color: var(--accent-orange); display: block;}
.stat-lbl { font-size: 10px; color: #666; }

.action-bar {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.btn-action {
    background: var(--sys-bg);
    border: 2px outset #fff;
    padding: 6px 12px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    font-size: 11px;
}
.btn-action:active { border-style: inset; }
.btn-primary {
    background: var(--accent-orange);
    color: #fff;
    border-color: #ffae00;
}

/* FOOTER */
.viewport-footer {
    background: var(--sys-bg);
    border-top: 1px solid var(--border-shadow);
    padding: 2px 8px;
    font-size: 10px;
    color: #444;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 1fr; 
    }
    .app-container.collapsed {
        grid-template-columns: 1fr; 
    }

    /* Overlay Sidebar */
    .sidebar {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 85%;
        max-width: 300px;
        z-index: 500;
        box-shadow: 4px 0 15px rgba(0,0,0,0.5);
        transform: translateX(0);
        transition: transform 0.3s ease;
    }
    
    /* Hidden State */
    .app-container.collapsed .sidebar {
        transform: translateX(-100%);
    }

    .viewport-header h2 { font-size: 16px; }
    .btn-toggle-sidebar { width: 32px; height: 32px; font-size: 18px; }
    
    .scroll-container { padding: 10px; }
}