/*
 * xp-desktop.css
 * Windows XP "Luna" skrivebord for lovedata.
 * Alle regler er scopet under :root[data-skin="xp"] slik at ingenting
 * påvirker andre temaer. Filen er selvstendig og har ingen avhengigheter.
 */

/* Bliss-blå bakgrunn bak skrivebordet. */
:root[data-skin="xp"] .xp-desktop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  font-family: Tahoma, "Trebuchet MS", Verdana, sans-serif;
}

/* Ikon-laget øverst til venstre. Det starter under sidens topplinje slik at
   ikonene ligger på selve skrivebordet og ikke oppå søkefeltet. */
:root[data-skin="xp"] .xp-icons {
  position: absolute;
  top: 118px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}

:root[data-skin="xp"] .xp-icon {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 74px;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
}

:root[data-skin="xp"] .xp-icon:hover .xp-icon-label,
:root[data-skin="xp"] .xp-icon:focus-visible .xp-icon-label {
  background: rgba(11, 97, 206, 0.55);
  outline: 1px dotted rgba(255, 255, 255, 0.7);
}

:root[data-skin="xp"] .xp-icon-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(160deg, #4a90e2 0%, #1c5fb8 100%);
  border: 1px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

:root[data-skin="xp"] .xp-icon-label {
  font-size: 12px;
  color: #ffffff;
  padding: 1px 3px;
  border-radius: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.7);
  word-break: break-word;
  line-height: 1.15;
}

/* ---- Oppgavelinje ------------------------------------------------------ */

:root[data-skin="xp"] .xp-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: stretch;
  pointer-events: auto;
  background: linear-gradient(to bottom,
      #3f8cf3 0%,
      #245edc 9%,
      #245edc 88%,
      #1941a5 100%);
  border-top: 1px solid #4b9bff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Grønn start-knapp nederst til venstre. */
:root[data-skin="xp"] .xp-start-button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 22px 3px 12px;
  cursor: pointer;
  font-family: Tahoma, "Trebuchet MS", Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 17px;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
  background: linear-gradient(to bottom,
      #5cb85c 0%,
      #4aa34a 45%,
      #2f8b2f 55%,
      #1e7b1e 100%);
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset -2px 0 4px rgba(0, 0, 0, 0.25);
}

:root[data-skin="xp"] .xp-start-button:hover {
  background: linear-gradient(to bottom,
      #6ec96e 0%,
      #56b356 45%,
      #359535 55%,
      #248524 100%);
}

:root[data-skin="xp"] .xp-start-button.xp-start-open {
  background: linear-gradient(to bottom,
      #1e7b1e 0%,
      #2f8b2f 45%,
      #4aa34a 55%,
      #5cb85c 100%);
}

:root[data-skin="xp"] .xp-start-orb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d6f0d6 25%, #6bd06b 55%, #2f8b2f 100%);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

:root[data-skin="xp"] .xp-start-text {
  display: inline-block;
}

:root[data-skin="xp"] .xp-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: linear-gradient(to bottom, #1c8adb 0%, #1577c9 50%, #0f5aa8 100%);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25), inset 2px 0 3px rgba(0, 0, 0, 0.2);
}

:root[data-skin="xp"] .xp-clock {
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* ---- Start-meny -------------------------------------------------------- */

:root[data-skin="xp"] .xp-startmenu {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 380px;
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid #0831d9;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

:root[data-skin="xp"] .xp-startmenu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 14px;
  color: #ffffff;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to bottom, #2f7bea 0%, #1c50c9 55%, #163fb0 100%);
  border-bottom: 2px solid #f5a623;
}

:root[data-skin="xp"] .xp-startmenu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #f5c877;
  border-radius: 4px;
}

:root[data-skin="xp"] .xp-startmenu-body {
  display: flex;
  min-height: 200px;
}

:root[data-skin="xp"] .xp-startmenu-col {
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
}

:root[data-skin="xp"] .xp-startmenu-left {
  flex: 1 1 55%;
  background: #ffffff;
}

:root[data-skin="xp"] .xp-startmenu-right {
  flex: 1 1 45%;
  background: #d3e5fa;
  border-left: 1px solid #aac6e8;
}

:root[data-skin="xp"] .xp-startmenu-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #0a0a0a;
  border-radius: 2px;
}

:root[data-skin="xp"] .xp-startmenu-item:hover,
:root[data-skin="xp"] .xp-startmenu-item:focus-visible {
  background: #2f71d9;
  color: #ffffff;
}

:root[data-skin="xp"] .xp-startmenu-item-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 15px;
  color: #ffffff;
  background: linear-gradient(160deg, #4a90e2 0%, #1c5fb8 100%);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root[data-skin="xp"] .xp-startmenu-item-label {
  flex: 1 1 auto;
}

:root[data-skin="xp"] .xp-startmenu-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: linear-gradient(to bottom, #2f7bea 0%, #1c50c9 55%, #163fb0 100%);
  border-top: 1px solid #6a9be8;
}

:root[data-skin="xp"] .xp-startmenu-allprograms {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

:root[data-skin="xp"] .xp-startmenu-allprograms-arrow {
  font-size: 10px;
}

/* Skjul-hjelper i tilfelle [hidden] blir overstyrt av annen CSS. */
:root[data-skin="xp"] .xp-startmenu[hidden] {
  display: none !important;
}

/* ======================================================================
   Bliss-tapet og ekte Luna-programvindu
   Alt er scopet under :root[data-skin="xp"]. Fargene og gradientene følger
   XP.css sine Luna-verdier tett, men er skrevet på nytt her.
   ====================================================================== */

/* Bliss-tapetet males på selve siden, så vinduet og ikonene ligger oppå det.
   Ren CSS, ingen bilder. Grønn kolle nederst, blå himmel med lyst horisontlys. */
:root[data-skin="xp"] body {
  background:
    radial-gradient(150% 92% at 50% 138%, #a4d06a 0%, #7cb04a 26%, #5c9a34 46%, #3f7d22 62%, rgba(63,125,34,0) 72%),
    radial-gradient(90% 46% at 50% 63%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      #3f7fd6 0%, #4c8bda 15%, #6aa6e6 32%, #93c3ef 48%, #cfe6f7 60%,
      #7bb04a 60%, #5f9a33 78%, #4a8526 100%) !important;
  background-color: #6aa6e6 !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Skru av de svevende hjertepropene, et skrivebord skal se rent ut. */
:root[data-skin="xp"] #scenery { display: none !important; }

/* ---- Programvindu bygget rundt main.shell ------------------------------ */

/* Selve vindusrammen får den blå Luna-kanten. Bakgrunnsfargen er den blå
   rammen, og de indre feltene dekker den slik at bare en tynn kant vises. */
:root[data-skin="xp"] main.shell.xp-window {
  max-width: 1000px;
  margin: 22px auto 46px;
  padding: 0 3px 3px;
  background: #0a53d6;
  border-radius: 8px 8px 3px 3px;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .5),
    inset 1px 1px #2f7bf0,
    inset -1px -1px #001ea0;
  font-family: Tahoma, "Trebuchet MS", Verdana, sans-serif;
}

/* Maksimert brer vinduet nesten ut til kantene. */
:root[data-skin="xp"] main.shell.xp-window.xp-max {
  max-width: none;
  margin: 8px 8px 44px;
}

/* Minimert viser bare tittellinja, ingenting slettes. */
:root[data-skin="xp"] main.shell.xp-window.xp-min > .xp-wintoolbar,
:root[data-skin="xp"] main.shell.xp-window.xp-min > .sheet,
:root[data-skin="xp"] main.shell.xp-window.xp-min > .foot {
  display: none !important;
}
:root[data-skin="xp"] main.shell.xp-window.xp-min { padding-bottom: 0; }

/* Blå Luna-tittellinje med glansstriper. */
:root[data-skin="xp"] .xp-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 3px 0 6px;
  color: #ffffff;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px 1px #0f1089;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg,
      #0997ff 0%, #0053ee 8%, #0050ee 40%, #0060ff 88%,
      #0060ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  border-top: 1px solid #0831d9;
}

:root[data-skin="xp"] .xp-titlebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 12px;
  font-weight: bold;
  color: #1c3fae;
  text-shadow: none;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #d7e6ff 45%, #8fb3f2 100%);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

:root[data-skin="xp"] .xp-titlebar-text {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-skin="xp"] .xp-titlebar-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Tittellinjeknappene. Minimer og maksimer er blå, lukk er rød, alle glossy. */
:root[data-skin="xp"] .xp-winbtn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 21px;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  border: 1px solid #ffffff;
  border-radius: 3px;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, .6), 0 1px 1px rgba(0, 0, 0, .4);
}

:root[data-skin="xp"] .xp-winbtn-min,
:root[data-skin="xp"] .xp-winbtn-max {
  background: linear-gradient(180deg, #6aacff 0%, #2e79f0 45%, #0d54dc 55%, #4a94ff 100%);
}
:root[data-skin="xp"] .xp-winbtn-min:hover,
:root[data-skin="xp"] .xp-winbtn-max:hover {
  background: linear-gradient(180deg, #8dc2ff 0%, #4a90f6 45%, #1f6ae6 55%, #6aabff 100%);
}

:root[data-skin="xp"] .xp-winbtn-close {
  background: linear-gradient(180deg, #f7b49b 0%, #e5502f 32%, #c0290f 62%, #f28a6d 100%);
}
:root[data-skin="xp"] .xp-winbtn-close:hover {
  background: linear-gradient(180deg, #ffc9b3 0%, #f0674a 32%, #d5391d 62%, #ff9e83 100%);
}

:root[data-skin="xp"] .xp-winbtn-glyph { transform: translateY(-1px); }
:root[data-skin="xp"] .xp-winbtn-min .xp-winbtn-glyph { transform: translateY(3px); }

/* Tynn WordPad-verktøylinje under tittellinja. */
:root[data-skin="xp"] .xp-wintoolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 4px;
  background: #ece9d8;
  border-bottom: 1px solid #aca998;
  box-shadow: inset 0 1px 0 #ffffff;
}
:root[data-skin="xp"] .xp-wintoolbar-menu {
  padding: 2px 7px;
  font-size: 12px;
  color: #1a1a1a;
  border-radius: 2px;
  cursor: default;
}
:root[data-skin="xp"] .xp-wintoolbar-menu:hover {
  background: #316ac5;
  color: #ffffff;
}

/* Innholdsboksen blir et hvitt dokument som ruller inni vinduet. */
:root[data-skin="xp"] main.shell.xp-window > .sheet {
  margin: 0;
  padding: 22px 30px 30px;
  background: #ffffff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  color: #16130f;
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  max-height: calc(100vh - 300px);
  min-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* Fjern det rosa silkebåndet på toppen av arket i dette temaet. */
:root[data-skin="xp"] main.shell.xp-window > .sheet::before { display: none; }

/* Overskrifter i dokumentet får også serif, som i en tekstbehandler. */
:root[data-skin="xp"] main.shell.xp-window > .sheet :is(h1, h2, h3, h4, h5) {
  font-family: Georgia, "Times New Roman", serif;
}

/* Klassisk XP-rullefelt i dokumentkroppen. */
:root[data-skin="xp"] main.shell.xp-window > .sheet::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}
:root[data-skin="xp"] main.shell.xp-window > .sheet::-webkit-scrollbar-track {
  background: #f1efe2;
  box-shadow: inset 1px 0 0 #d7d3c3;
}
:root[data-skin="xp"] main.shell.xp-window > .sheet::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #d7e7fb 0%, #9fc0f0 50%, #6f9de6 100%);
  border: 1px solid #3a6ea5;
  border-radius: 2px;
}
:root[data-skin="xp"] main.shell.xp-window > .sheet::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #e7f0fe 0%, #b6d0f6 50%, #8fb4ee 100%);
}

/* Bunnlinja blir et statusfelt à la Luna. */
:root[data-skin="xp"] main.shell.xp-window > .foot {
  margin: 0;
  padding: 3px 8px;
  background: #ece9d8;
  border-top: 1px solid #ffffff;
  box-shadow: inset 0 1px 0 #aca998;
  font-size: 11px;
  color: #3a3a34;
}

/* ---- Kjørende program i oppgavelinja ----------------------------------- */

:root[data-skin="xp"] .xp-tasks {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
}

:root[data-skin="xp"] .xp-task {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 150px;
  max-width: 180px;
  height: 22px;
  padding: 0 8px;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3f8cf3 0%, #2569dc 50%, #1c50c9 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), inset -1px -1px 0 rgba(0, 0, 0, .3);
}

/* Aktivt vindu vises som nedtrykt knapp, som i XP. */
:root[data-skin="xp"] .xp-task.xp-task-active {
  background: linear-gradient(180deg, #14379c 0%, #1c4bb0 50%, #2f66d6 100%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .45);
  font-weight: bold;
}

:root[data-skin="xp"] .xp-task-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(160deg, #4a90e2 0%, #1c5fb8 100%);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

:root[data-skin="xp"] .xp-task-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}