/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
    image-rendering: pixelated;
}

body, html {
    height: 100%;
    overflow: hidden;
    background-color: black; /* Change to black for authentic CRT monitor look */
}

/* Resolution container - Classic 800x600 with scaling */
.resolution-container {
    width: 800px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale-factor, 1)); 
    transform-origin: center;
    box-shadow: 0 0 40px rgba(0,0,0,0.8); /* Add shadow for CRT effect */
}

/* Windows 98 Desktop */
.desktop {
    width: 100%;
    height: 100%;
    background-color: #008080; /* Classic Windows 98 teal background */
    position: relative;
    overflow: hidden;
}

/* Desktop Icons */
.desktop-icons {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap; /* Allow wrapping into columns */
    max-height: 525px; /* Limit height to ~5 icons (5 * (85+15) + padding) */
    align-content: flex-start; /* Align wrapped columns to the top */
    column-gap: 10px;
}

.icon-button {
    width: 75px;
    height: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
    text-align: center;
    background: none;
    border: none;
    outline: none;
    padding: 0;
}

/* Windows 98 icons styling - using actual icons */
.win98-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
    image-rendering: pixelated;
}

.menu-icon-img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    image-rendering: pixelated;
}

.key-icon-img {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    image-rendering: pixelated;
}

.icon-button span {
    color: white;
    text-align: center;
    font-size: 12px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
    max-width: 100%;
    word-wrap: break-word;
    padding: 1px;
}

.icon-button:hover span {
    background-color: #000080;
}

.icon-button:focus span {
    background-color: #000080;
}

.icon-button.selected span {
    background-color: #000080;
}

.icon-button.selected img {
    filter: brightness(0.7) sepia(1) hue-rotate(200deg) saturate(3);
}

/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background: silver;
    display: flex;
    align-items: center;
    border-top: 1px solid #fff;
    box-shadow: 0 -1px 0 #848484;
}

/* Start Button */
.start-button {
    display: flex;
    align-items: center;
    height: 22px;
    margin-left: 2px;
    padding: 0 4px;
    border: 1px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #7f7f7f inset;
    background-color: silver;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}

.start-button:active, .start-button.active {
    border: 1px solid #000;
    border-right-color: #fff;
    border-bottom-color: #fff;
    box-shadow: 1px 1px 0 #7f7f7f inset, -1px -1px 0 #dfdfdf inset;
}

.start-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    image-rendering: pixelated;
}

/* Taskbar Divider */
.taskbar-divider {
    width: 2px; /* Increased width for two borders */
    height: 22px; /* Match tray-area height */
    /* background: #7f7f7f; Removed */
    /* border-right: 1px solid #fff; Removed */
    border-left: 1px solid #808080; /* Dark edge */
    border-right: 1px solid #ffffff; /* Light edge */
    /* align-self: center; Removed, height matches */
    margin: 0 2px; /* Add minimal horizontal margin */
}

/* Bulky raised divider */
.taskbar-divider-bulky {
    width: 2px; /* Width defined by borders */
    height: 18px; /* Shorter */
    border-top: 1px solid #ffffff;    /* White top edge */
    border-left: 1px solid #ffffff;   /* White left edge */
    border-bottom: 1px solid #808080; /* Dark bottom edge */
    border-right: 1px solid #808080;  /* Dark right edge */
    margin: 2px 1px; /* Vertical margin to shorten, keep horizontal */
    background-color: #c0c0c0; /* Match taskbar background */
    /* box-shadow: inset 1px 0 0 #ffffff, inset -1px 0 0 #808080; Removed */
}

/* First divider (after start button) specific style if needed */
/* .taskbar-divider:first-of-type { ... } */

/* Quick Launch */
.quick-launch {
    display: flex;
    align-items: center;
    margin: 0; /* Ensure no extra margins */
    padding: 0 2px; /* Add slight padding around icons */
}

/* Remove specific nth-of-type rule for divider */
/* .taskbar-divider:nth-of-type(2) { */
    /* margin-left: 15px; This might conflict, let spacer handle push */
/* } */

.quick-launch-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Removed margin between icons */
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.quick-launch-icon:hover {
    border: 1px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #7f7f7f inset;
}

.quick-launch-icon:active {
    border: 1px solid #000;
    border-right-color: #fff;
    border-bottom-color: #fff;
    box-shadow: 1px 1px 0 #7f7f7f inset, -1px -1px 0 #dfdfdf inset;
}

.quick-launch-icon img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

/* Improved Windows logo */
.windows-logo {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-color: #008080;
    border: 1px solid #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.windows-logo:before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(
        135deg, 
        transparent 25%, 
        red 25%, 
        red 50%, 
        blue 50%, 
        blue 75%,
        green 75%
    );
    transform: rotate(45deg) scale(1.2);
}

/* Spacer to push tray to the right */
.taskbar-spacer {
    flex-grow: 1; /* Take up remaining space */
}

/* System Tray Area Container */
.tray-area {
    display: flex;
    align-items: center;
    height: 22px; /* Slightly taller for border */
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080; /* Sunken border */
    margin-right: 4px; /* Space from edge */
    padding: 0 2px; /* Horizontal padding inside the sunken area */
}

/* Style for tray icons like volume */
.tray-icon {
    height: 20px; /* Match clock height */
    margin-left: 2px; /* Space between icons */
    margin-right: 2px; /* Space between icons */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Indicate it's clickable */
}

.tray-icon img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated; /* Maintain pixelated look */
}

/* Remove border/margins from time, now handled by tray-area */
.time {
    font-size: 11px;
    font-weight: 300; /* Try numerical light weight */
    padding: 0 3px; /* Adjust padding inside tray */
    margin-left: 2px; /* Space from last icon */
    display: flex; /* Align text vertically */
    align-items: center; /* Align text vertically */
    position: relative;
}

/* Win98-style date tooltip on clock hover */
.time .clock-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    background-color: #ffffe1;
    border: 1px solid #000000;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}
.time:hover .clock-tooltip {
    opacity: 1;
}

/* Screensaver */
#screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: #000;
    cursor: none;
}
#screensaver canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Start Menu */
.start-menu {
    position: absolute;
    bottom: 28px;
    left: 0;
    width: 210px;
    height: auto;
    max-height: 380px;
    background-color: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    display: none;
    z-index: 500;
    overflow: auto;
}

.start-menu.active {
    display: block;
}

/* Windows 98 vertical logo on the left side of start menu */
.win98-vertical-logo {
    position: absolute;
    left: 0;
    top: 0; /* Changed to start from top */
    bottom: 0;
    width: 24px; /* Increased width */
    height: 100%; /* Full height */
    object-fit: contain;
    object-position: left bottom;
    z-index: 2;
    background: #000080;
}

.start-menu-items {
    padding: 4px 0 6px 0;
    margin-left: 24px; /* Adjusted to match new logo width */
}

/* Menu items padding and spacing */
.menu-item {
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 5px;
    cursor: pointer;
    position: relative;
    height: 30px;
    font-size: 11px; /* Reduced from 13px */
    font-weight: normal; /* Making font thinner */
}

/* Special styling for Windows Update item */
.menu-item:first-child {
    background-color: transparent;
    border-bottom: none;
    margin-bottom: 1px;
    height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Special styling for Program and Documents sections */
.menu-item:nth-child(3),
.menu-item:nth-child(4),
.menu-item:nth-child(5) {
    font-weight: normal; /* Ensure normal weight for these items */
    letter-spacing: 0.2px; /* Slight letter spacing for better readability */
}

.menu-item:hover {
    background-color: #000080;
    color: white;
}

.menu-item:hover .submenu-arrow {
    color: white;
}

.menu-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* First item after menu-divider gets a top border */
.menu-divider + .menu-item {
    border-top: none;
    margin-top: 0;
}

/* Last section (Log Off and Shut Down) gets top border */
.menu-item:nth-last-child(3) {
    border-bottom: 1px solid #adadad;
    margin-bottom: 1px;
}

.menu-item:nth-last-child(2) {
    margin-top: 1px;
    border-top: none;
}

/* Fix for Shut Down menu item */
.menu-item:last-child {
    margin-top: 0; /* No additional top margin needed */
    border-top: none; /* No border at top */
}

/* Fix for Log Off text */
.menu-item:nth-last-child(2) span {
    content: "Log Off";
}

/* Make menu dividers more authentic */
.menu-divider {
    height: 2px;
    margin: 1px 4px;
    position: relative;
    background: none;
    border: none;
}

.menu-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #808080;
}

.menu-divider::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #ffffff;
}

/* Menu icons sizing - all consistent size */
.menu-item .menu-icon-img {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    margin-left: 2px;
    image-rendering: pixelated;
}

/* Specific icons that need to be bigger */
.menu-item:nth-child(8) .menu-icon-img, /* Run */
.menu-item:nth-last-child(2) .menu-icon-img, /* Log Off */
.menu-item:last-child .menu-icon-img, /* Shut Down */
.menu-item:nth-child(6) .menu-icon-img /* Find */ {
    width: 24px;
    height: 24px;
    margin-right: 6px; /* Slightly reduced to compensate for bigger size */
}

/* Submenu arrows */
.submenu-arrow {
    position: absolute;
    right: 10px;
    font-size: 9px;
    color: #000;
    margin-top: 2px; /* Adjusted to center with taller items */
}

/* Window styles */
.window {
    position: absolute;
    background-color: #c0c0c0;
    border: 3px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 1px 1px 0 0 #000000;
    min-width: 200px;
    min-height: 100px;
    z-index: 100;
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 12px;
}

/* Window title bar - horizontal blue gradient */
.window-title {
    background: linear-gradient(to right, #000080 0%, #1084d0 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 3px 2px;
    cursor: default;
    user-select: none;
}

.window-title img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.window-title span {
    flex: 1;
    font-weight: bold;
}

.window-controls {
    display: flex;
}

/* Default window controls - 3 buttons style (minimize, maximize, close) */
.window-controls button {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    margin-left: 2px;
    font-family: "MS Sans Serif", Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 0;
}

/* Thicker button symbols - improved for clarity */
.minimize-button::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 1px;
    background-color: black;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.maximize-button::before {
    content: "□";
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-button::before {
    content: "×";
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.window-controls button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

/* Login window specific controls - help and close buttons */
#login-window .window-controls {
    display: flex;
}

#login-window .window-controls .help-button,
#login-window .window-controls .close-button {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    margin-left: 2px;
    font-family: "MS Sans Serif", Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 0;
}

#login-window .window-controls .help-button::before {
    content: "?";
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#login-window.active-window .window-title {
    background: linear-gradient(to right, #000080 0%, #1084d0 100%);
}

.window:not(.active-window) .window-title {
    background: linear-gradient(to right, #808080 0%, #b5b5b5 100%);
    color: #c0c0c0;
}

.window-content {
    flex-grow: 1; /* Allows content to fill available space */
    padding: 10px;
    overflow: auto; /* Allow scrolling within the content area */
    /* Maybe add min-height to ensure it doesn't collapse */
    min-height: 50px;
}

/* Login Form */
.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.key-icon {
    font-size: 24px;
    margin-bottom: 10px;
    background-color: #ffcc00;
    border: 1px solid #000;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form p {
    margin-bottom: 15px;
    text-align: center;
}

.form-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.win98-input {
    border: 1px solid;
    border-color: #848484 #fff #fff #848484;
    background-color: white;
    padding: 3px;
    width: 200px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 15px;
}

.win98-button {
    background-color: silver;
    border: 1px solid;
    border-color: #fff #848484 #848484 #fff;
    padding: 4px 10px;
    margin-left: 5px;
    cursor: pointer;
    min-width: 75px;
}

.win98-button:active {
    border-color: #848484 #fff #fff #848484;
}

/* Active window styling */
.window.active-window {
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

.window.active-window .window-title {
    background-color: #000080; /* Dark blue active title bar */
    color: white;
}

.window:not(.active-window) .window-title {
    background-color: #808080; /* Gray inactive title bar */
    color: #c0c0c0;
}

/* Taskbar window buttons */
.taskbar-windows {
    display: flex;
    height: 22px;
    overflow: hidden;
    margin-left: 5px;
    flex: 1;
}

.taskbar-window-button {
    display: flex;
    align-items: center;
    height: 22px;
    min-width: 120px;
    max-width: 160px;
    padding: 2px 5px;
    margin-right: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: 1px 1px 0 #dfdfdf inset, -1px -1px 0 #7f7f7f inset;
    font-size: 11px;
    cursor: pointer;
    background-color: silver;
}

.taskbar-window-button.active {
    border-color: #000 #fff #fff #000;
    box-shadow: 1px 1px 0 #7f7f7f inset, -1px -1px 0 #dfdfdf inset;
    background-color: #ccc;
}

.taskbar-window-button img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    image-rendering: pixelated;
}

.taskbar-window-button span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Window dragging style */
.window.dragging {
    cursor: grabbing !important;
}

.window-title {
    cursor: grab;
}

.window-title:active {
    cursor: grabbing;
}

/* Login Window specific styling */
#login-window {
    width: 410px;
    height: 190px;
    position: absolute;
    z-index: 1000;
}

.login-window-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
}

.login-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.login-content {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.login-icon-container {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.key-icon-img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.login-text-container {
    flex: 1;
}

.login-form p {
    margin-bottom: 15px;
    font-size: 11px;
}

.form-group {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    margin-top: 8px;
}

/* Make the first form group (username) have a larger top margin */
#login-window .form-group:first-of-type {
    margin-top: 16px;
}

.form-group label {
    width: 80px;
    font-size: 11px;
}

.win98-input {
    border: 2px solid;
    border-color: #848484 #fff #fff #848484;
    background-color: white;
    padding: 3px;
    flex: 1;
    height: 21px;
    font-size: 11px;
}

.login-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.win98-button {
    background-color: #c0c0c0;
    border: 2px solid;
    border-color: #fff #848484 #848484 #fff;
    padding: 4px 10px;
    margin-left: 5px;
    cursor: pointer;
    min-width: 75px;
    font-size: 11px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.win98-button:active {
    border-color: #848484 #fff #fff #848484;
}

#login-window .window-title span {
    padding-left: 2px;
}

/* Desktop Overlay for Shutdown/Modals */
#desktop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Slightly darker overlay */
    /* background-image: url('../assets/backgrounds/teal-dots-grid-bg.png'); Removed */
    /* background-repeat: repeat; Removed */
    z-index: 1000; /* Below dialog, above desktop */
}

/* Shutdown Dialog Specific Styles */
#shutdown-dialog {
    position: fixed; /* Center on screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.shutdown-content {
    display: flex;
    padding: 15px 20px;
}

.shutdown-icon-area {
    margin-right: 20px;
    display: flex;
    align-items: flex-start; /* Align icon to the top */
    padding-top: 5px; /* Add some space from the top */
}

.shutdown-icon-area img {
    width: 32px;
    height: 32px;
}

.shutdown-options-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.shutdown-options-area p {
    margin-bottom: 10px;
}

.shutdown-radio-group label {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center radio and text */
    margin-bottom: 5px;
    cursor: pointer;
}

.shutdown-radio-group input[type="radio"] {
    /* Reset default appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-right: 5px;
    /* Dimensions */
    width: 13px;
    height: 13px;
    /* Sunken border */
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background-color: #ffffff; /* White background */
    /* Make it round */
    border-radius: 50%;
    /* Align vertically with text */
    vertical-align: middle;
    position: relative; /* For positioning the dot */
    cursor: pointer;
}

/* Style for the black dot when checked */
.shutdown-radio-group input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background-color: #000000; /* Black dot */
    border-radius: 50%;
}

.shutdown-buttons-area {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
}

/* Override button margin for shutdown dialog */
#shutdown-dialog .win98-button {
    margin-left: 5px;
}