/* --- CORE LAYOUT --- */
body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

#desktop {
    width: 100%; height: calc(100% - 30px);
    position: relative;
    padding: 10px; box-sizing: border-box;
    display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start;
}

/* --- ICONS --- */
.desktop-icon {
    width: 75px; margin: 5px; text-align: center;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
.desktop-icon img { width: 32px; height: 32px; margin-bottom: 4px; }

/* --- TASKBAR --- */
#taskbar {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 30px;
    display: flex; align-items: center; z-index: 9999;
}
#taskbar-apps { flex: 1; display: flex; padding: 0 5px; overflow-x: hidden; }
#system-tray { padding: 0 15px; display: flex; align-items: center; height: 100%; }

/* --- WINDOWS --- */
.os-window {
    position: absolute; display: flex; flex-direction: column;
}
.window-titlebar {
    display: flex; justify-content: space-between; align-items: center;
    cursor: default; user-select: none;
}
.window-title { display: flex; align-items: center; }
.window-icon { width: 16px; height: 16px; margin-right: 5px; }
.window-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* --- START MENU --- */
#start-menu {
    position: absolute; bottom: 30px; left: 0; width: 360px;
    z-index: 10000; display: flex; flex-direction: column;
}
.hidden { display: none !important; }
.start-header { display: flex; align-items: center; }
.start-body { display: flex; height: 380px; }
.start-left { width: 50%; display: flex; flex-direction: column; gap: 2px; }
.start-right { width: 50%; }

/* --- UTILITY SCREENS --- */
#boot-screen, #shutdown-screen, #mobile-warning {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999; display: flex;
}
@media (min-width: 768px) { #mobile-warning { display: none !important; } }