/*
 * XP.css compatibility layer for Millennium XP Desktop
 * Visual values and control artwork are adapted from botoxparty/XP.css (MIT).
 * https://github.com/botoxparty/XP.css
 */

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("xp-css/fonts/ms_sans_serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("xp-css/fonts/ms_sans_serif_bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html[data-theme="xp"] {
  --xp-surface: #ece9d8;
  --xp-highlight: #fff;
  --xp-button-face: #dfdfdf;
  --xp-button-shadow: #808080;
  --xp-input-border: #7f9db9;
  --xp-dialog-blue: #2267cb;
  --xp-font: "Pixelated MS Sans Serif", Tahoma, "Microsoft YaHei", Arial, sans-serif;
}

html[data-theme="xp"] body {
  color: #222;
  font-family: var(--xp-font);
  font-size: 12px;
  -webkit-font-smoothing: none;
}

/* Faithful XP window frame and Luna title bar from XP.css. */
html[data-theme="xp"] .window {
  border: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 3px 3px;
  background: #0831d9;
  box-shadow:
    inset -1px -1px #00138c,
    inset 1px 1px #0831d9,
    inset -2px -2px #001ea0,
    inset 2px 2px #166aee,
    inset -3px -3px #003bda,
    inset 3px 3px #0855dd,
    4px 7px 22px rgba(0, 22, 72, .32);
  -webkit-font-smoothing: antialiased;
}

html[data-theme="xp"] .window.open,
html[data-theme="xp"] .window.active {
  display: flex;
  flex-direction: column;
}

html[data-theme="xp"] .window > .titlebar,
html[data-theme="xp"] .window > .menu-row,
html[data-theme="xp"] .window > .browser-toolbar,
html[data-theme="xp"] .window > .viewer-toolbar {
  flex: 0 0 auto;
}

html[data-theme="xp"] .titlebar {
  height: 28px;
  gap: 4px;
  margin: 0 -3px;
  padding: 3px 5px 3px 3px;
  border-top: 1px solid #0831d9;
  border-right: 1px solid #001ea0;
  border-left: 1px solid #0831d9;
  border-radius: 8px 7px 0 0;
  color: #fff;
  background: linear-gradient(
    180deg,
    #0997ff 0%,
    #0053ee 8%,
    #0050ee 40%,
    #0066ff 88%,
    #0066ff 93%,
    #005bff 95%,
    #003dd7 96%,
    #003dd7 100%
  );
  font-family: "Trebuchet MS", Tahoma, "Microsoft YaHei", sans-serif;
  font-size: 13px;
  text-shadow: 1px 1px #0f1089;
}

html[data-theme="xp"] .titlebar > .icon-img {
  width: 20px;
  height: 20px;
  margin-left: 1px;
}

html[data-theme="xp"] .titlebar strong {
  min-width: 0;
  padding-left: 1px;
  overflow: hidden;
  font-weight: 700;
  line-height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="xp"] .window.open:not(.active) .titlebar {
  background: linear-gradient(180deg, #7697e7 0%, #6584d4 10%, #7a96df 88%, #5f79c8 100%);
  text-shadow: 1px 1px #5d6591;
}

html[data-theme="xp"] .window-controls {
  gap: 0;
  margin-left: auto;
}

html[data-theme="xp"] .window-controls button {
  display: block;
  width: 21px;
  min-width: 21px;
  height: 21px;
  min-height: 21px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background-color: #0050ee;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  font-size: 0;
  text-shadow: none;
  transition: background-image 100ms;
}

html[data-theme="xp"] .window-controls button:hover,
html[data-theme="xp"] .window-controls button:focus,
html[data-theme="xp"] .window-controls button:active {
  border: 0;
  outline: 0;
  box-shadow: none;
}

html[data-theme="xp"] .window-controls [data-minimize] {
  background-image: url("xp-css/icon/minimize.svg");
}

html[data-theme="xp"] .window-controls [data-minimize]:hover {
  background-image: url("xp-css/icon/minimize-hover.svg");
}

html[data-theme="xp"] .window-controls [data-minimize]:active {
  background-image: url("xp-css/icon/minimize-active.svg");
}

html[data-theme="xp"] .window-controls [data-maximize] {
  background-image: url("xp-css/icon/maximize.svg");
}

html[data-theme="xp"] .window.maximized .window-controls [data-maximize] {
  background-image: url("xp-css/icon/restore.svg");
}

html[data-theme="xp"] .window-controls [data-maximize]:hover {
  background-image: url("xp-css/icon/maximize-hover.svg");
}

html[data-theme="xp"] .window.maximized .window-controls [data-maximize]:hover {
  background-image: url("xp-css/icon/restore-hover.svg");
}

html[data-theme="xp"] .window-controls [data-maximize]:active {
  background-image: url("xp-css/icon/maximize-active.svg");
}

html[data-theme="xp"] .window.maximized .window-controls [data-maximize]:active {
  background-image: url("xp-css/icon/restore-active.svg");
}

html[data-theme="xp"] .window-controls [data-close] {
  background-image: url("xp-css/icon/close.svg");
}

html[data-theme="xp"] .window-controls [data-close]:hover {
  background-image: url("xp-css/icon/close-hover.svg");
}

html[data-theme="xp"] .window-controls [data-close]:active {
  background-image: url("xp-css/icon/close-active.svg");
}

html[data-theme="xp"] #window-connections .window-controls [data-minimize],
html[data-theme="xp"] #window-connections .window-controls [data-maximize] {
  display: none;
}

html[data-theme="xp"] #window-connections .window-controls [data-window-help] {
  display: grid;
  place-items: center;
  color: #fff;
  background-image: none;
  background: linear-gradient(180deg, #5aa7ff 0%, #1b69df 45%, #0740aa 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 3px;
  font-family: Tahoma, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}

html[data-theme="xp"] #window-connections .window-controls [data-window-help]:hover {
  background: linear-gradient(180deg, #80bdff 0%, #2e7bea 45%, #0a4abd 100%);
}

html[data-theme="xp"] .window > .window-body {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  background-color: var(--xp-surface);
}

/*
 * Explorer opens at a practical desktop size instead of inheriting the
 * compact dialog dimensions used by the other windows.
 */
html[data-theme="xp"] #window-my-computer {
  width: min(680px, calc(100vw - 36px));
  height: min(360px, calc(100vh - 96px));
  min-height: 320px;
}

html[data-theme="xp"] #window-my-computer .explorer {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
}

html[data-theme="xp"] #window-my-computer .drive-grid {
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 16px 20px;
}

html[data-theme="xp"] .menu-row,
html[data-theme="xp"] .browser-toolbar,
html[data-theme="xp"] .viewer-toolbar {
  border-bottom-color: #aca899;
  background: var(--xp-surface);
  color: #222;
}

html[data-theme="xp"] .menu-row {
  min-height: 25px;
  padding: 5px 8px 4px;
}

/* XP.css command button states, scoped so desktop icons keep their behavior. */
html[data-theme="xp"] .xp-button,
html[data-theme="xp"] .guestbook-form > button,
html[data-theme="xp"] #conn-ok,
html[data-theme="xp"] .pinball-btn {
  box-sizing: border-box;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  border: 1px solid #003c74;
  border-radius: 3px;
  color: #222;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 86%, #d8d0c4 100%);
  box-shadow: none;
  font-family: var(--xp-font);
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="xp"] .xp-button:not(:disabled):hover,
html[data-theme="xp"] .guestbook-form > button:not(:disabled):hover,
html[data-theme="xp"] #conn-ok:not(:disabled):hover,
html[data-theme="xp"] .pinball-btn:not(:disabled):hover {
  box-shadow:
    inset -1px 1px #fff0cf,
    inset 1px 2px #fdd889,
    inset -2px 2px #fbc761,
    inset 2px -2px #e5a01a;
}

html[data-theme="xp"] .xp-button:not(:disabled):active,
html[data-theme="xp"] .xp-button.active,
html[data-theme="xp"] .guestbook-form > button:not(:disabled):active,
html[data-theme="xp"] #conn-ok:not(:disabled):active,
html[data-theme="xp"] .pinball-btn:not(:disabled):active {
  background: linear-gradient(180deg, #cdcac3 0%, #e3e3db 8%, #e5e5de 94%, #f2f2f1 100%);
  box-shadow: none;
}

html[data-theme="xp"] .xp-button:focus-visible,
html[data-theme="xp"] .guestbook-form > button:focus-visible,
html[data-theme="xp"] #conn-ok:focus-visible,
html[data-theme="xp"] .pinball-btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
  box-shadow:
    inset -1px 1px #cee7ff,
    inset 1px 2px #98b8ea,
    inset -2px 2px #bcd4f6,
    inset 1px -1px #89ade4,
    inset 2px -2px #89ade4;
}

html[data-theme="xp"] .xp-button:disabled,
html[data-theme="xp"] .guestbook-form > button:disabled {
  color: #8c8c82;
  text-shadow: 1px 1px #fff;
}

/* Text fields, text areas and selects use XP.css dimensions and borders. */
html[data-theme="xp"] .window label,
html[data-theme="xp"] .window input,
html[data-theme="xp"] .window textarea,
html[data-theme="xp"] .window select,
html[data-theme="xp"] .window option {
  font-family: var(--xp-font);
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="xp"] .window input[type="text"],
html[data-theme="xp"] .window input[type="password"],
html[data-theme="xp"] .window input[type="email"],
html[data-theme="xp"] .window textarea {
  padding: 3px 4px;
  border: 1px solid var(--xp-input-border);
  border-radius: 0;
  outline: 0;
  background: #fff;
  color: #000;
  box-shadow: none;
  appearance: none;
}

html[data-theme="xp"] .window input[type="text"],
html[data-theme="xp"] .window input[type="password"],
html[data-theme="xp"] .window input[type="email"] {
  height: 23px;
}

html[data-theme="xp"] .window input::selection,
html[data-theme="xp"] .window textarea::selection {
  color: #fff;
  background: var(--xp-dialog-blue);
}

html[data-theme="xp"] .window select {
  height: 23px;
  padding: 3px 32px 3px 4px;
  border: 1px solid var(--xp-input-border);
  border-radius: 0;
  outline: 0;
  color: #000;
  background-color: #fff;
  background-image: url("xp-css/icon/dropdown.svg");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  background-size: 17px;
  appearance: none;
}

html[data-theme="xp"] .window select:hover {
  background-image: url("xp-css/icon/dropdown-hover.svg");
}

html[data-theme="xp"] .window select:active {
  background-image: url("xp-css/icon/dropdown-active.svg");
}

html[data-theme="xp"] .window select:focus {
  color: #fff;
  background-color: var(--xp-dialog-blue);
  box-shadow: inset 2px 2px #fff, inset -2px -2px #fff;
}

html[data-theme="xp"] .window select:focus option {
  color: #000;
  background: #fff;
}

html[data-theme="xp"] .window input[type="radio"] {
  width: 13px;
  height: 13px;
  margin: 0;
  border: 1px solid #1d5281;
  border-radius: 50%;
  background: linear-gradient(135deg, #dcdcd7 0%, #fff 100%);
  box-shadow: none;
  appearance: none;
}

html[data-theme="xp"] .window input[type="radio"]:hover {
  box-shadow: inset -2px -2px #f8b636, inset 2px 2px #fedf9c;
}

html[data-theme="xp"] .window input[type="radio"]:active {
  background: linear-gradient(135deg, #b0b0a7 0%, #e3e1d2 100%);
}

html[data-theme="xp"] .window input[type="radio"]:checked {
  background:
    url("xp-css/icon/radio-dot.svg") center / 5px 5px no-repeat,
    linear-gradient(135deg, #dcdcd7 0%, #fff 100%);
}

html[data-theme="xp"] .window input[type="radio"]:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

html[data-theme="xp"] .window input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  border: 1px solid #1d5281;
  border-radius: 0;
  background: linear-gradient(135deg, #dcdcd7 0%, #fff 100%);
  box-shadow: none;
  appearance: none;
}

html[data-theme="xp"] .window input[type="checkbox"]:hover {
  box-shadow: inset -2px -2px #f8b636, inset 2px 2px #fedf9c;
}

html[data-theme="xp"] .window input[type="checkbox"]:checked {
  background:
    url("xp-css/icon/checkmark.svg") center / 11px 11px no-repeat,
    linear-gradient(135deg, #dcdcd7 0%, #fff 100%);
}

html[data-theme="xp"] .window input[type="checkbox"]:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 2px;
}

html[data-theme="xp"] .window input[type="range"] {
  height: 21px;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
}

html[data-theme="xp"] .window input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  border-right: 1px solid #f3f2ea;
  border-bottom: 1px solid #f3f2ea;
  border-radius: 2px;
  background: #ecebe4;
  box-shadow:
    1px 0 #fff,
    1px 1px #fff,
    0 1px #fff,
    -1px 0 #9d9c99,
    -1px -1px #9d9c99,
    0 -1px #9d9c99;
}

html[data-theme="xp"] .window input[type="range"]::-webkit-slider-thumb {
  width: 11px;
  height: 21px;
  margin-top: -9px;
  border: 0;
  border-radius: 0;
  background: url("xp-css/icon/indicator-horizontal.svg") center / contain no-repeat;
  appearance: none;
}

html[data-theme="xp"] .window input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: #ecebe4;
  box-shadow:
    1px 0 #fff,
    1px 1px #fff,
    0 1px #fff,
    -1px 0 #9d9c99,
    -1px -1px #9d9c99,
    0 -1px #9d9c99;
}

html[data-theme="xp"] .window input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 21px;
  border: 0;
  border-radius: 0;
  background: url("xp-css/icon/indicator-horizontal.svg") center / contain no-repeat;
}

html[data-theme="xp"] .conn-theme-progress {
  box-sizing: border-box;
  height: 14px;
  padding: 1px 2px 1px 0;
  border: 1px solid #686868;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 1px #686868;
}

html[data-theme="xp"] .conn-theme-progress > div {
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      to right,
      #fff 0,
      #fff 2px,
      transparent 2px,
      transparent 10px
    ),
    linear-gradient(
      to bottom,
      #acedad 0%,
      #7be47d 14%,
      #4cda50 28%,
      #2ed330 42%,
      #42d845 57%,
      #76e275 71%,
      #8fe791 85%,
      #fff 100%
    );
}

/* XP-era tab treatment for the System Properties dialog. */
html[data-theme="xp"] .sysinfo-body {
  grid-template-rows: 24px minmax(0, 1fr);
  align-content: stretch;
}

html[data-theme="xp"] .sysinfo-tabs {
  align-self: start;
  align-items: flex-end;
  height: 24px;
  min-height: 24px;
  gap: 2px;
  padding-left: 3px;
  border-bottom: 1px solid #919b9c;
}

html[data-theme="xp"] .sysinfo-tab {
  position: relative;
  align-self: flex-end;
  flex: 0 0 auto;
  height: 24px;
  min-height: 23px;
  margin-bottom: -1px;
  padding: 0 12px 3px;
  border: 1px solid #91a7b4;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fff 0%, #fafaf9 26%, #f0f0ea 95%, #ecebe5 100%);
  box-shadow: none;
}

html[data-theme="xp"] .sysinfo-tab:hover,
html[data-theme="xp"] .sysinfo-tab.active {
  border-top-color: #e68b2c;
  box-shadow: inset 0 2px #ffc73c;
}

html[data-theme="xp"] .sysinfo-tab.active {
  z-index: 1;
  border-color: #919b9c;
  border-top-color: #e68b2c;
  border-bottom-color: #fcfcfe;
  background: #fcfcfe;
}

html[data-theme="xp"] .sysinfo-panel {
  min-height: 0;
  align-content: start;
  overflow: auto;
  border-color: #919b9c;
  background: #fcfcfe;
  box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px rgba(208, 206, 191, .75);
}

/* Reference-style scrollbars. */
html[data-theme="xp"] ::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}

html[data-theme="xp"] ::-webkit-scrollbar-corner {
  background: var(--xp-button-face);
}

html[data-theme="xp"] ::-webkit-scrollbar-track:vertical {
  background: #e3e9f8 url("xp-css/icon/scroll-background.svg") repeat-y;
}

html[data-theme="xp"] ::-webkit-scrollbar-track:horizontal {
  background: #e3e9f8 url("xp-css/icon/scroll-background-horizontal.svg") repeat-x;
}

html[data-theme="xp"] ::-webkit-scrollbar-thumb {
  border: 1px solid #fff;
  border-radius: 2px;
  background-color: #c8d6fb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px;
  box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;
}

html[data-theme="xp"] ::-webkit-scrollbar-thumb:vertical {
  background-image: url("xp-css/icon/scroll-thumb.svg");
}

html[data-theme="xp"] ::-webkit-scrollbar-thumb:horizontal {
  background-image: url("xp-css/icon/scroll-thumb-horizontal.svg");
  background-size: 8px;
}

/* Sharpen the existing desktop shell to match the Luna windows. */
html[data-theme="xp"] .taskbar {
  height: 38px;
  border-top: 1px solid #0f43bd;
  background: linear-gradient(180deg, #3168d5 0%, #4993e6 5%, #245edb 12%, #245edb 88%, #1941a5 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .42);
}

html[data-theme="xp"] .start-button {
  border: 0;
  background: linear-gradient(180deg, #8cdd7a 0%, #5fc653 7%, #36a52f 47%, #2d9828 88%, #1d6f19 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .7), 2px 0 5px rgba(0, 0, 0, .28);
  font-family: Tahoma, "Microsoft YaHei", sans-serif;
}

html[data-theme="xp"] .task-buttons button {
  border-color: rgba(11, 53, 145, .78);
  background: linear-gradient(180deg, #3c8cf1, #1d5bc6);
  box-shadow: inset 1px 1px rgba(255, 255, 255, .24);
  font-family: Tahoma, "Microsoft YaHei", sans-serif;
}

html[data-theme="xp"] .task-buttons button.active {
  background: linear-gradient(180deg, #174aa7, #1d4eae);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .35);
}

html[data-theme="xp"] .tray {
  border-left-color: #1042a7;
  background: linear-gradient(180deg, #19b9f3 0%, #1291dc 12%, #0b80ce 100%);
}

@media (max-width: 720px) {
  html[data-theme="xp"] .window {
    border-radius: 7px 7px 0 0;
  }

  html[data-theme="xp"] .titlebar {
    border-radius: 7px 6px 0 0;
  }

  html[data-theme="xp"] #window-my-computer {
    width: calc(100vw - 16px);
    height: min(380px, calc(100vh - 128px));
    min-height: 280px;
  }

  html[data-theme="xp"] #window-my-computer .explorer {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html[data-theme="xp"] #window-my-computer .drive-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 10px;
  }
}