/* ==========================================================================
   xp.css — Windows XP "Luna" (blue) theme primitives
   Desktop, taskbar, start menu, window chrome and common controls.
   ========================================================================== */

/* Defaults are the Luna Blue scheme; themes.css overrides them per .theme-*.
   The .theme-luna half lets a probe element read these back for previews. */
:root,
.theme-luna {
  --xp-face: #ece9d8;
  --xp-face-dark: #d4d0c8;
  --xp-blue: #0054e3;
  --xp-blue-light: #3a93ff;
  --xp-field-border: #7f9db9;
  --xp-btn-border: #003c74;
  --xp-selection: #316ac5;
  --xp-font: Tahoma, "Segoe UI", "Trebuchet MS", Verdana, sans-serif;

  --win-border: #0831d9;
  --win-border-inactive: #7ba2e7;
  --title-grad: linear-gradient(180deg,
      #0058ee 0%, #3a93ff 6%, #288eff 12%, #0d7bff 20%, #0f6fe8 45%,
      #0854dd 76%, #0344cf 88%, #0132c0 96%, #0d43cd 100%);
  --title-grad-inactive: linear-gradient(180deg,
      #7CA5EC 0%, #9DBEF3 8%, #86AEEE 40%, #6E99E4 88%, #6390E0 100%);
  --title-fg: #fff;
  --tbtn-grad: linear-gradient(180deg, #4b9bfb 0%, #2d7cf0 45%, #1560d8 55%, #2a6fe0 100%);

  --taskbar-grad: linear-gradient(180deg,
      #245edb 0%, #3f8cf3 8%, #2a6fe4 14%, #235ddb 22%,
      #1f56d6 88%, #1941a5 95%, #17399b 100%);
  --taskbar-border: #1041a5;
  --taskbar-hi: #4d8ef0;
  --taskbar-fg: #fff;
  --taskbar-shadow: rgba(0, 0, 0, .4);
  --taskbtn-grad: linear-gradient(180deg, #3f8cf3 0%, #2a6fe4 12%, #1f5fd8 55%, #1c53c9 100%);
  --taskbtn-active-grad: linear-gradient(180deg, #1e50b7 0%, #1b4dae 40%, #2a63cc 100%);
  --start-grad: linear-gradient(180deg,
      #5eb75e 0%, #43a343 10%, #369536 40%, #2e8a2e 55%, #1f7a1f 88%, #379437 100%);
  --start-fg: #fff;
  --tray-grad: linear-gradient(180deg, #16adf0 0%, #12a1e8 8%, #0f8fd8 45%, #1195dd 88%, #0d80c8 100%);
  --tray-edge-dark: #0e79b8;
  --tray-edge-light: #3fc0f5;

  --sm-header-grad: linear-gradient(180deg, #1b62dc 0%, #3f8cf3 40%, #1b62dc 100%);
  --sm-header-rule: #e8a20c;
  --sm-right-bg: #d3e5fa;
  --sm-footer-grad: linear-gradient(180deg, #3f8cf3 0%, #1b62dc 50%, #1049b8 100%);
  --sm-border: #0d3faf;
  --legend-color: #0046d5;
}

/* This app paints its own complete desktop chrome, so opt out of the
   browser's automatic dark-mode transform — it darkens the light Luna and
   Silver gradients and breaks the themes. */
html {
  color-scheme: only light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--xp-font);
  font-size: 11px;
  color: #000;
  -webkit-font-smoothing: antialiased;
}

body {
  user-select: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Desktop — a Bliss-flavoured sky over green hills
   -------------------------------------------------------------------------- */

#desktop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--wallpaper, #3a6ea5);
  background-size: cover;
  background-position: center;
}

/* Bliss's clouds and hills live on .wall-bliss in themes.css, so the
   Display Properties preview gets them for free. */
.hill-back {
  position: absolute;
  left: -20%;
  right: 40%;
  bottom: 0;
  height: 26%;
  display: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #8cc74a 0%, #6aad33 60%, #59991f 100%);
  opacity: .85;
  pointer-events: none;
}

.wall-bliss .hill-back {
  display: block;
}

#windows {
  position: absolute;
  inset: 0 0 30px 0;
}

/* --------------------------------------------------------------------------
   Desktop icons
   -------------------------------------------------------------------------- */

.desk-icons {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 84px;
  z-index: 1;
}

.desk-icon {
  width: 76px;
  padding: 4px 2px 5px;
  margin-bottom: 6px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .9);
  border: 1px dotted transparent;
  cursor: default;
}

.desk-icon img,
.desk-icon svg {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto 3px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
}

.desk-icon.selected {
  background: rgba(49, 106, 197, .55);
  border-color: #cfe0f7;
}

/* --------------------------------------------------------------------------
   Window chrome
   -------------------------------------------------------------------------- */

.window {
  position: absolute;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  background: var(--xp-face);
  border: 3px solid var(--win-border);
  border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 3px 12px rgba(0, 0, 0, .45);
  padding-bottom: 3px;
}

.window.inactive {
  border-color: var(--win-border-inactive);
}

.title-bar {
  height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  padding: 0 3px 0 5px;
  border-radius: 7px 7px 0 0;
  background: var(--title-grad);
  cursor: move;
  overflow: hidden;
}

.title-bar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.window.inactive .title-bar {
  background: var(--title-grad-inactive);
}

.title-bar .t-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex: 0 0 16px;
}

.title-bar .t-text {
  flex: 1;
  color: var(--title-fg);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: .2px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window.inactive .title-bar .t-text {
  color: #e5eefc;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

.title-buttons {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.t-btn {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 3px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: default;
  color: #fff;
  font: 700 11px/1 var(--xp-font);
  background: var(--tbtn-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 2px rgba(0, 0, 0, .25);
}

.t-btn:hover {
  filter: brightness(1.18);
}

.t-btn:active {
  filter: brightness(.85);
}

.t-btn.close {
  background: linear-gradient(180deg, #f08363 0%, #e5522c 45%, #cf3813 55%, #e0552c 100%);
}

.t-btn svg {
  display: block;
}

.window-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--xp-face);
  overflow: hidden;
}

.resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  z-index: 5;
}

.window.maximized {
  border-radius: 0;
  box-shadow: none;
}

.window.maximized .title-bar {
  border-radius: 0;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Menu bar
   -------------------------------------------------------------------------- */

.menu-bar {
  display: flex;
  padding: 1px 2px;
  background: var(--xp-face);
  border-bottom: 1px solid #aca899;
  flex: 0 0 auto;
}

.menu-bar span {
  padding: 2px 7px;
  border-radius: 2px;
}

.menu-bar span:hover {
  background: var(--xp-selection);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

button.xp,
.xp-btn {
  min-width: 70px;
  min-height: 22px;
  padding: 2px 11px;
  font: 11px var(--xp-font);
  color: #000;
  border: 1px solid var(--xp-btn-border);
  border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #f4f3ec 46%, #e6e3d7 52%, #ded9c8 88%, #f2f1eb 100%);
  box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, .08);
  cursor: default;
}

button.xp:hover:not(:disabled),
.xp-btn:hover {
  border-color: #e2a038;
  box-shadow: inset 0 0 0 1px #fee9a4, 0 1px 1px rgba(0, 0, 0, .08);
}

button.xp:active:not(:disabled),
.xp-btn:active {
  background: linear-gradient(180deg, #e0dcc9 0%, #ebe8dc 60%, #f6f5ef 100%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .18);
}

button.xp:disabled {
  color: #9a9689;
  text-shadow: 1px 1px 0 #fff;
}

button.xp:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

input.xp,
textarea.xp,
select.xp {
  font: 11px var(--xp-font);
  padding: 2px 3px;
  border: 1px solid var(--xp-field-border);
  background: #fff;
  color: #000;
  border-radius: 0;
}

input.xp:focus,
textarea.xp:focus,
select.xp:focus {
  outline: none;
  border-color: #3c7fb1;
}

textarea.xp {
  resize: none;
  font-size: 12px;
}

select.xp {
  height: 20px;
}

fieldset.xp {
  border: 1px solid #d8d4c8;
  border-radius: 3px;
  padding: 8px 10px 10px;
  margin: 0 0 8px;
  box-shadow: inset 1px 1px 0 #fff;
}

fieldset.xp legend {
  padding: 0 4px;
  color: var(--legend-color);
  font-weight: bold;
}

label.xp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.field-row > label:not(.xp) {
  width: 74px;
  flex: 0 0 74px;
  text-align: right;
}

.field-row > label.xp {
  flex: 1;
  white-space: nowrap;
}

.field-row > input,
.field-row > select {
  flex: 1;
  min-width: 0;
}

.sunken {
  border: 1px solid #7f9db9;
  background: #fff;
  overflow: auto;
}

.status-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--xp-face);
  border-top: 1px solid #fff;
}

.status-bar .cell {
  padding: 2px 6px;
  border: 1px solid #d4d0c8;
  box-shadow: inset -1px -1px 0 #fff;
  color: #3a3a3a;
}

.status-bar .cell.grow {
  flex: 1;
}

/* Scrollbars — XP flavoured */

.xp-scroll::-webkit-scrollbar,
.sunken::-webkit-scrollbar,
textarea.xp::-webkit-scrollbar,
.list::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.xp-scroll::-webkit-scrollbar-track,
.sunken::-webkit-scrollbar-track,
textarea.xp::-webkit-scrollbar-track,
.list::-webkit-scrollbar-track {
  background: #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23f7f7f4'/%3E%3Crect width='2' height='2' fill='%23eceae0'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23eceae0'/%3E%3C/svg%3E");
}

.xp-scroll::-webkit-scrollbar-thumb,
.sunken::-webkit-scrollbar-thumb,
textarea.xp::-webkit-scrollbar-thumb,
.list::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #fdfdfd 0%, #eeece1 40%, #dcd8c8 100%);
  border: 1px solid #a0a0a0;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 #fff;
}

.xp-scroll::-webkit-scrollbar-thumb:hover,
.sunken::-webkit-scrollbar-thumb:hover,
.list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #fff 0%, #f4f2e9 40%, #e6e2d2 100%);
}

/* --------------------------------------------------------------------------
   Taskbar
   -------------------------------------------------------------------------- */

#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: stretch;
  z-index: 9000;
  background: var(--taskbar-grad);
  border-top: 1px solid var(--taskbar-border);
  box-shadow: inset 0 1px 0 var(--taskbar-hi);
}

#start-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px 2px 8px;
  margin-right: 6px;
  border: 0;
  border-radius: 0 9px 9px 0;
  font: italic 700 14px/1 var(--xp-font);
  color: var(--start-fg);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
  cursor: default;
  background: var(--start-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 2px 0 4px rgba(0, 0, 0, .3);
}

#start-button:hover {
  filter: brightness(1.12);
}

#start-button.open {
  filter: brightness(.86);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .4);
}

#start-button .flag {
  width: 20px;
  height: 20px;
}

#task-buttons {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
  min-width: 0;
  overflow: hidden;
}

.task-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 170px;
  flex: 0 1 170px;
  height: 22px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  font: 11px var(--xp-font);
  color: var(--taskbar-fg);
  text-shadow: 1px 1px 1px var(--taskbar-shadow);
  background: var(--taskbtn-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  cursor: default;
}

.task-btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-btn svg {
  flex: 0 0 16px;
}

.task-btn:hover {
  filter: brightness(1.15);
}

.task-btn.active {
  background: var(--taskbtn-active-grad);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .45);
}

.task-btn.flashing {
  animation: task-flash 1s steps(1) infinite;
}

@keyframes task-flash {
  0%, 49% {
    background: linear-gradient(180deg, #ff9c3f 0%, #f47b1b 55%, #e06a10 100%);
    color: #fff;
  }
  50%, 100% {
    background: var(--taskbtn-grad);
  }
}

#tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  color: var(--taskbar-fg);
  text-shadow: 1px 1px 1px var(--taskbar-shadow);
  background: var(--tray-grad);
  box-shadow: inset 1px 0 0 var(--tray-edge-dark), inset 2px 0 0 var(--tray-edge-light);
}

#tray .tray-icon {
  width: 16px;
  height: 16px;
  cursor: default;
}

#tray-clock {
  min-width: 52px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Start menu
   -------------------------------------------------------------------------- */

#start-menu {
  position: absolute;
  left: 2px;
  bottom: 30px;
  width: 330px;
  display: none;
  flex-direction: column;
  z-index: 9500;
  border: 1px solid var(--sm-border);
  border-radius: 6px 6px 0 0;
  box-shadow: 3px -2px 14px rgba(0, 0, 0, .45);
  overflow: hidden;
}

#start-menu.open {
  display: flex;
}

.sm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .55);
  background: var(--sm-header-grad);
  border-bottom: 2px solid var(--sm-header-rule);
}

.sm-header .avatar {
  width: 38px;
  height: 38px;
  border: 2px solid #b7cdf0;
  border-radius: 4px;
  background: #dbe8fb;
  display: grid;
  place-items: center;
}

.sm-header .sub {
  font-size: 10px;
  font-weight: normal;
  opacity: .85;
}

.sm-body {
  display: flex;
  background: #fff;
}

.sm-col {
  padding: 5px 0;
}

.sm-col.left {
  flex: 1;
  background: #fff;
  border-right: 1px solid #cdd8ec;
}

.sm-col.right {
  width: 132px;
  background: var(--sm-right-bg);
}

.sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: default;
}

.sm-item b {
  font-weight: bold;
}

.sm-item .ico {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
}

.sm-item:hover {
  background: var(--xp-selection);
  color: #fff;
}

.sm-sep {
  height: 1px;
  margin: 4px 8px;
  background: #cdd8ec;
}

.sm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 6px 12px;
  color: #fff;
  background: var(--sm-footer-grad);
}

.sm-footer .sm-foot-item {
  display: flex;
  align-items: center;
  gap: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  cursor: default;
}

.sm-footer .sm-foot-item:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Balloon tip (tray notification)
   -------------------------------------------------------------------------- */

.balloon {
  position: absolute;
  right: 12px;
  bottom: 38px;
  width: 250px;
  padding: 9px 11px;
  z-index: 9600;
  background: #ffffe1;
  border: 1px solid #8d8d6d;
  border-radius: 6px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, .35);
  animation: balloon-in .18s ease-out;
}

.balloon::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -9px;
  border: 9px solid transparent;
  border-top-color: #ffffe1;
  border-bottom: 0;
}

.balloon .b-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
  margin-bottom: 4px;
}

.balloon .b-close {
  margin-left: auto;
  font-weight: bold;
  cursor: default;
  padding: 0 3px;
}

.balloon .b-close:hover {
  color: #c00;
}

@keyframes balloon-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Modal dialog shade
   -------------------------------------------------------------------------- */

.dialog-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px 10px;
}

.hint {
  color: #4a4a4a;
}

a.xp-link {
  color: #0046d5;
  text-decoration: underline;
  cursor: default;
}