/* v2.1 - Codebase Obscura */

/* --- ROOT VARIABLES & BODY DEFAULTS --- */
:root {
    --main-bg-color: #008080;
    --window-bg-color: #c0c0c0;
    --highlight-bg-color: #000080;
    --highlight-text-color: #ffffff;
    --disabled-text-color: #878787;
}
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* FIXED: Prevents horizontal scrolling on mobile */
}
body {
    background-color: var(--main-bg-color);
    font-family: "Pixelated MS Sans Serif", Arial;
    -webkit-font-smoothing: none;
    font-smooth: never;
    padding: 1rem;
}

/* --- MAIN APPLICATION LAYOUT --- */
.main-window {
    width: 100%;
    max-width: 1280px;
    min-height: 500px;
    margin: 2vh auto;
    display: flex;
    flex-direction: column;
    /*box-shadow: 2px 2px 8px rgba(0,0,0,0.4);*/
}
.main-window > .window-body { flex-grow: 1; display: flex; flex-direction: column; padding: 0; margin: 3px; min-height: 0; }
.title-bar-text { display: flex; align-items: center; gap: 5px; }

/* --- MENU STYLING --- */
ul.menu-bar { display: flex; list-style: none; margin: 0; padding: 2px 3px; height: auto; align-items: center; flex-shrink: 0; }
li.menu-item { position: relative; padding: 4px 10px; cursor: default; user-select: none; }
li.menu-item.active { background-color: var(--highlight-bg-color); color: var(--highlight-text-color); }
.menu-item .menu { display: none; position: absolute; top: 100%; left: 0; background: var(--window-bg-color); border: 1px solid; border-color: #fff #878787 #878787 #fff; box-shadow: 1.5px 1.5px 0 black; list-style: none; padding: 2px; min-width: 180px; z-index: 100; }
.menu-item.active > .menu { display: block; }
.menu li { display: flex; align-items: center; position: relative; padding: 2px 4px 2px 20px; white-space: nowrap; }
.menu li span { color: black; } /* FIXED: Default menu item text is black */
.menu li[role="separator"] { height: 1px; background-color: #878787; border-bottom: 1px solid #fff; margin: 4px 1px; padding: 0; }
.menu li[role="menuitem"]:not(.disabled):hover > span { color: var(--highlight-text-color); }
.menu li[role="menuitem"]:not(.disabled):hover { background-color: var(--highlight-bg-color); }
.menu li[role="menuitem"].disabled span { color: var(--disabled-text-color); text-shadow: 1px 1px #fff; }
.menu li.checked::before { content: '✓'; position: absolute; left: 6px; }

/* --- TOOLBAR & TASKBAR --- */
.toolbar {
    padding: 2px;
    background-color: var(--window-bg-color); /* FIXED: Enforce gray background */
    border-top: 1px solid #fff;
    border-bottom: 1px solid #878787;
    flex-shrink: 0;
}
.taskbar-container { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px; background-color: #c0c0c0;}
.task-button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    min-height: 23px;
    box-sizing: border-box;
}
.task-button:active, .task-button.active { border-style: inset; font-weight: bold; }
.task-button img { width: 16px; height: 16px; }

/* --- ADDRESS BAR --- */
.address-bar { display: flex; align-items: center; padding: 3px 4px; gap: 4px; flex-shrink: 0; }
#address-bar-content { flex-grow: 1; display: flex; align-items: center; padding: 2px 4px; gap: 5px; background-color: white; }

/* --- TWO-COLUMN CONTENT LAYOUT --- */
.window-content-layout { flex-grow: 1; display: flex; border-top: 1px solid #878787; min-height: 0; }
.left-pane { width: 200px; flex-shrink: 0; background-color: #c0c0c0; border-right: 2px outset var(--window-bg-color); padding: 10px; overflow-y: auto; }
.left-pane h2 { font-size: 1.1em; margin-top: 0; }
.main-content { flex-grow: 1; padding: 15px; background-color: #d8d8d8; border: 2px inset var(--window-bg-color); overflow-y: auto; }

/* --- STATUS BAR --- */
.status-bar { margin-top: auto; flex-shrink: 0; }

/* --- RESPONSIVE DESIGN (MOBILE) --- */
@media (max-width: 960px) {
    body { padding: 0; }
    .main-window { height: 100vh; width: 100%; max-width: 100vw; margin: 0; box-shadow: none; box-sizing: border-box; }
    .main-window > .window-body { height: 100%; overflow: hidden; }
    .window-content-layout { flex-grow: 1; flex-direction: column; overflow-y: auto; min-height: 0; }
    .left-pane { width: auto; border-right: none; border-bottom: 2px outset var(--window-bg-color); max-height: 150px; flex-shrink: 0; }
    .main-content { flex-grow: 1; }
}