/* OS 2000 — desktop, taskbar, icons */

/* ===== DESKTOP ===== */
#desktop {
  position: absolute;
  inset: 0 0 28px 0;
  background: var(--c-desktop);
  overflow: hidden;
}

#desktop-icons {
  position: absolute;
  inset: 6px;
}

.desk-icon {
  position: absolute;
  width: 75px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  cursor: default;
  gap: 4px;
  touch-action: none;
}
.desk-icon.dragging { opacity: 0.7; }
.desk-icon .icon-img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.desk-icon .icon-label {
  font-size: 11px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px #000, 0 0 2px #000;
  padding: 1px 2px;
  line-height: 1.15;
  max-width: 73px;
  word-wrap: break-word;
}
.desk-icon.selected .icon-img {
  filter: brightness(0.7) saturate(1.2);
}
.desk-icon.selected .icon-label {
  background: var(--c-select);
  outline: 1px dotted #fff;
  outline-offset: -1px;
}

/* ===== TASKBAR ===== */
#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: var(--c-taskbar);
  box-shadow:
    inset 0 1px 0 0 var(--c-hilite),
    inset 0 2px 0 0 var(--c-bg-light);
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 3px;
  /* Above floating Webamp (z 100/999) but below the login overlay (z 4000),
     so the empty taskbar stays hidden until the user logs on. */
  z-index: 1000;
}

#start-btn {
  height: 22px;
  padding: 2px 5px 2px 4px;
  font-weight: bold;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--c-bg);
  box-shadow: var(--bevel-raised);
  cursor: default;
  min-width: 54px;
}
#start-btn.pressed {
  box-shadow: var(--bevel-pressed);
}
#start-btn .flag {
  width: 18px; height: 16px;
  display: inline-block;
}

#quick-launch {
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 1px;
  box-shadow:
    inset 1px 0 0 0 var(--c-shadow),
    inset -1px 0 0 0 var(--c-hilite);
  height: 22px;
}
#quick-launch .ql-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
#quick-launch .ql-btn:hover {
  box-shadow:
    inset 1px 1px 0 0 var(--c-hilite),
    inset -1px -1px 0 0 var(--c-shadow-dark);
}
#quick-launch .ql-btn:active {
  box-shadow:
    inset 1px 1px 0 0 var(--c-shadow-dark),
    inset -1px -1px 0 0 var(--c-hilite);
}

#tasks {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  height: 22px;
  overflow: hidden;
  padding: 0 4px;
}
.task-btn {
  height: 22px;
  flex: 1 1 160px;
  max-width: 160px;
  min-width: 30px;
  background: var(--c-bg);
  box-shadow: var(--bevel-raised);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  cursor: default;
  font-size: 11px;
  overflow: hidden;
}
.task-btn .ti {
  width: 16px; height: 16px;
  flex: 0 0 16px;
}
.task-btn .tlbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-btn.active {
  box-shadow: var(--bevel-pressed);
  background:
    repeating-conic-gradient(var(--c-bg-light) 0% 25%, var(--c-bg) 0% 50%) 50%/2px 2px;
}

#tray {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 4px;
  gap: 5px;
  box-shadow:
    inset 1px 0 0 0 var(--c-shadow),
    inset -1px 0 0 0 var(--c-hilite);
}
#tray .tray-icon {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
#clock {
  font-size: 11px;
  min-width: 50px;
  text-align: center;
  padding: 2px 4px;
  cursor: default;
}

/* ===== START MENU ===== */
#start-menu {
  position: absolute;
  bottom: 28px;
  left: 2px;
  width: 200px;
  background: var(--c-bg);
  box-shadow: var(--bevel-raised);
  z-index: 1500;
  display: flex;
  padding: 3px;
  user-select: none;
}
#start-menu.hidden { display: none; }
#start-menu .side-banner {
  width: 22px;
  background: linear-gradient(180deg, #0a246a 0%, #4a78b8 100%);
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  padding: 8px 4px;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 18px;
  flex: 0 0 22px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
#start-menu .side-banner b { color: #fff; font-weight: 900; }
#start-menu .side-banner em { color: #ffd700; font-style: normal; }
#start-menu .items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 2px 0 2px 4px;
}

.sm-item {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 16px 0 4px;
  gap: 8px;
  cursor: default;
  position: relative;
  font-size: 11px;
}
.sm-item .si-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.sm-item .si-lbl { flex: 1 1 auto; }
.sm-item .si-lbl b { font-weight: bold; }
.sm-item .si-arrow { width: 8px; text-align: right; }
.sm-item:hover {
  background: var(--c-select);
  color: var(--c-select-text);
}
.sm-item.big {
  height: 32px;
}
.sm-item.big .si-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.sm-sep {
  height: 0;
  border-top: 1px solid var(--c-shadow);
  border-bottom: 1px solid var(--c-hilite);
  margin: 3px 2px;
}

/* Submenu (Programs ▶ ...) */
.submenu {
  position: absolute;
  background: var(--c-bg);
  box-shadow: var(--bevel-raised);
  padding: 3px;
  min-width: 160px;
  z-index: 1600;
}

/* ===== TOOLTIPS ===== */
.tooltip {
  position: absolute;
  background: #ffffe1;
  color: #000;
  border: 1px solid #000;
  padding: 2px 4px;
  font-size: 11px;
  z-index: 9999;
  pointer-events: none;
}