* {
  box-sizing: border-box;
}

body {
  background-color: #008080;
  margin: 0;
  padding-bottom: 34px; 
}

.desktop-icons-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.desktop-icon {
  display: inline-block;
  text-align: center;
  width: 85px;
  margin: 20px;
  color: white;
  cursor: pointer;
  user-select: none;
}

.desktop-icon img {
  width: 40px;
  height: 40px;
}

.desktop-icon p {
  margin: 5px 0 0 0;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 12px;
}

.desktop-icon:active p {
  background-color: var(--dialog-blue);
}

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  
  /* Styling to look like the Windows taskbar */
  background: var(--surface); /* Uses the gray from 98.css variables */
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  padding: 2px;
  height: 32px; /* Set a fixed height */
  
  /* Use Flexbox to arrange items inside */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Pushes items to opposite ends */
  z-index: 100;
}

.taskbar-items {
  display: flex;
  flex-grow: 1; /* Makes the items container take up available space */
  gap: 2px;
  overflow: hidden;
  margin-left: 4px;
}

.taskbar-item {
  min-width: 0; /* Prevents overflow */
  padding: 0 4px;
  font-size: 11px;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  border-radius: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 150px;
}

.taskbar-item.active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  padding: 1px 3px 0 5px;
}

.taskbar-item img {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}

/* --- Start Button Styles --- */
.start-button {
  /* Use flex to align the icon and text */
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 2px 6px;
  min-width: 0; /* Override default button min-width */
  margin-left: 2px;
}

.start-button img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

.start-menu {
  position: absolute;
  bottom: 32px; /* Positions it just above the taskbar */
  left: 0;
  width: 250px;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  z-index: 99;
  display: flex;
}

.start-menu.hidden {
  display: none;
}

.start-menu-left-bar {
  display: flex;
  align-items: flex-end;
  background: var(--dialog-gray);
  box-shadow: var(--border-sunken-inner);
  width: 20px;
  background: linear-gradient(
    360deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  padding: 3px 2px 10px 3px;
}

.start-menu-left-bar span {
  font-family: "Pixelated MS Sans Serif", Arial;
  text-shadow: 1px 1px var(--window-frame);
  writing-mode: vertical-lr; /* Rotates the text */
  text-orientation: sideways-right;
  transform: rotate(180deg);
  white-space: nowrap;
  color: white;
  letter-spacing: 0;
}

.start-menu-links {
  flex-grow: 1;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.start-menu-item {
  display: flex;
  align-items: center;
  padding: 4px;
  text-decoration: none;
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
  color: var(--text-color);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.start-menu-item:hover,
.start-menu-item:focus {
  background: var(--dialog-blue);
  color: white;
}

.start-menu-item img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.start-menu-separator {
  height: 1px;
  background-color: var(--button-shadow);
  border-top: 1px solid var(--button-highlight);
  margin: 6px 0;
}

/* --- System Tray (Clock) Styles --- */
.system-tray {
  /* This mimics the sunken look of the system tray */
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  padding: 0 8px;
  margin-right: 2px;
  min-height: 22px;
  display: flex;
  align-items: center;
}

/* --- Window and Content Styles --- */
.window {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 10%;
  left: 15%;
  display: flex;
  flex-direction: column;
}

menu[role="menubar"] {
  display: flex;
  padding-left: 4px;
  margin: 0;
  border-bottom: 1px solid var(--surface);
}
menu[role="menubar"] li {
  list-style-type: none;
  padding: 2px 6px;
}
menu[role="menubar"] li a {
  text-decoration: none;
  color: var(--text-color);
}

.content-area {
  /* Let this element grow to fill available space */
  flex-grow: 1; 
  /* The white background for your folder content */
  background-color: var(--button-highlight);
  /* The sunken border for the content area */
  box-shadow: var(--border-field); 
  padding: 8px; /* Adds some space inside the content area */
  /* This is crucial for the content to scroll within the box */
  overflow: auto; 
  font-size: 14px;
}

.window-body {
  /* Let this element grow to fill the remaining space in the window */
  flex-grow: 1;
  /* Make it a flex container to manage its own children */
  display: flex;
  flex-direction: column;
  margin: var(--element-spacing);
  overflow: hidden; /* Prevents scrollbars from appearing */
}

.window.maximized {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 32px) !important;
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

/* Styles to handle the minimized state, which simply hides the window */
.window.minimized {
  display: none;
}

/* This CSS will change the icon of the maximize button to a restore icon when the window is in the maximized state */
.window.maximized .title-bar-controls button[aria-label="Restore"] {
  background-image: url("./../img/icons/restore.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

/* --- Responsive Folder Grid --- */
.folder-grid {
  display: grid;
  /* Create as many 100px columns as can fit, then distribute space */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px; /* Spacing between folders */
  margin-top: 10px;
}

/* --- Individual Folder Styles --- */
.folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.folder img {
  width: 50px;
  height: 50px;
}
.folder p {
  font-family: "Pixelated MS Sans Serif", Arial;
  font-size: 11px;
  margin-top: 5px;
  padding: 1px 2px;
}
.folder:active p {
  background: var(--dialog-blue);
  color: white;
}

@media (max-width: 600px) {
  /* On screens 600px or less, force the grid into 2 columns */
  .folder-grid {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
  }

  /* Adjusts the window for mobile screens */
  .window {
    width: 70% !important; /* Made the window narrower (was 90%) */
    left: 64% !important; /* Horizontally centers the window */
    transform: translateX(-50%);
    top: 150px !important; /* Adjusted top position if needed */
  }
}