/* css/theme-win95.css — Win95 classic theme */
:root {
  --face: #c0c0c0;
  --highlight: #ffffff;
  --shadow: #808080;
  --dkshadow: #000000;
  --active-caption: #000080;
  --caption-text: #ffffff;
  --desktop: #808080;
  --window: #ffffff;
  --hot-track: #000080;
  --menu-text: #000000;
  --disabled-text: #808080;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; overflow: hidden; }
body {
  font: 11px "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif;
  background: var(--desktop);
  color: #000;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

#menubar {
  flex: 0 0 auto;
  background: var(--face);
  border-bottom: 1px solid var(--shadow);
  height: 20px;
  z-index: 1000;
}

#speedbar {
  flex: 0 0 auto;
  background: var(--face);
  border-bottom: 1px solid var(--shadow);
  height: 28px;
  z-index: 999;
}

#desktop {
  position: absolute;
  inset: 48px 0 28px 0;
  background: var(--desktop);
  overflow: hidden;
}

#taskstrip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: var(--face);
  border-top: 1px solid var(--highlight);
  display: flex;
  align-items: center;
  padding: 0 2px;
  z-index: 998;
  box-shadow: inset 0 1px 0 var(--highlight);
}

/* Bevel utilities */
.bevel-out {
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dkshadow);
  border-bottom: 1px solid var(--dkshadow);
  box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--face);
}

.bevel-in {
  border-top: 1px solid var(--shadow);
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
}

/* Classic button */
.win-btn {
  background: var(--face);
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dkshadow);
  border-bottom: 1px solid var(--dkshadow);
  box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 transparent;
  padding: 2px 8px;
  font: inherit;
  min-width: 75px;
  min-height: 23px;
  cursor: default;
  color: #000;
}

.win-btn:active {
  border-top: 1px solid var(--dkshadow);
  border-left: 1px solid var(--dkshadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
  box-shadow: inset 1px 1px 0 var(--shadow);
  padding: 3px 7px 1px 9px;
}

.win-btn:focus {
  outline: 1px dotted var(--dkshadow);
  outline-offset: -4px;
}

/* Menubar */
.menubar {
  display: flex;
  align-items: stretch;
  padding: 1px 2px;
  user-select: none;
  position: relative;
}

.menu-top {
  position: relative;
  padding: 2px 8px;
  cursor: default;
  color: var(--menu-text);
}

.menu-top:hover,
.menu-top.open {
  background: var(--hot-track);
  color: var(--caption-text);
}

.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--face);
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dkshadow);
  border-bottom: 1px solid var(--dkshadow);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  padding: 2px;
  z-index: 2000;
  max-height: 70vh;
  overflow-y: auto;
}

.menu-dropdown.open {
  display: block;
}

.menu-item {
  padding: 3px 20px 3px 18px;
  white-space: nowrap;
  cursor: default;
  color: var(--menu-text);
}

.menu-item:hover {
  background: var(--hot-track);
  color: var(--caption-text);
}

.menu-item.disabled {
  color: var(--disabled-text);
  text-shadow: 1px 1px 0 var(--highlight);
}

.menu-item.disabled:hover {
  background: transparent;
  color: var(--disabled-text);
}

.menu-sep {
  height: 0;
  margin: 3px 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--highlight);
}

/* Speedbar */
.speedbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  height: 100%;
}

.speedbar-btn {
  background: var(--face);
  border-top: 1px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--dkshadow);
  border-bottom: 1px solid var(--dkshadow);
  padding: 2px 8px;
  font: inherit;
  min-height: 22px;
  cursor: default;
  color: #000;
}

.speedbar-btn:active {
  border-top: 1px solid var(--dkshadow);
  border-left: 1px solid var(--dkshadow);
  border-right: 1px solid var(--highlight);
  border-bottom: 1px solid var(--highlight);
  padding: 3px 7px 1px 9px;
}

.speedbar-sep {
  width: 0;
  height: 18px;
  margin: 0 4px;
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--highlight);
}


/* Submenu support in menubar */
.menu-item.has-submenu {
  position: relative;
}
.menu-dropdown.submenu {
  position: absolute;
  left: 100%;
  top: -4px;
  display: none;
  min-width: 160px;
  background: var(--face);
  border: 1px solid var(--dkshadow);
  box-shadow: 2px 2px 0 var(--shadow);
  z-index: 3000;
}
.menu-dropdown.submenu.open {
  display: block;
}
.menu-item.checked {
  font-weight: bold;
}