/* =======================================================================
   Window layer & Window chrome
   ======================================================================= */

:root {
  --win-min-z: 120;
  --win-max-z: 899;
  --win-titlebar-h: 36px;
  /* accent i HSL – bruk hva du vil */
  --win-accent: 210 90% 56%;
  /* bakgrunn for titlebar (inaktiv/aktiv) */
  --win-titlebar-bg:          color-mix(in oklab, var(--surface) 88%, #0a0d14);
  --win-titlebar-bg-inactive: color-mix(in oklab, var(--surface) 94%, #0a0d14);
}

/* Laget som alle vinduer monteres i */
#window-layer {
  position: absolute;
  inset: 0;
  z-index: 400;            /* over desktop, under context (880) og modal (1000) */
  pointer-events: none;    /* vinduene selv får klikk */
}

/* Selve vinduet */
.window {
  position: absolute;
  inset: auto;             /* vi setter left/top/width/height fra JS */
  pointer-events: auto;
  user-select: none;

  border-radius: var(--r-2);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  box-shadow: var(--shadow-lg);

  /* z-index settes i JS. Om ikke, faller den tilbake til min. */
  z-index: var(--win-min-z);
  overflow: hidden;        /* klipp innhold mot radius */
  contain: layout paint;   /* litt perf */
}

/* Aktivt vindu */
.window.is-front {
  outline: 2px solid color-mix(in oklab, var(--text) 35%, transparent);
  outline-offset: 0;
}
.window.is-front .win-titlebar{
  background:
    linear-gradient(
      to right,
      hsl(var(--win-accent) / .20) 0%,
      hsl(var(--win-accent) / .06) 45%,
      transparent 75%
    ),
    var(--win-titlebar-bg);
  box-shadow:
    inset 0 -1px 0 hsl(var(--win-accent) / .25),
    0 8px 24px -16px hsl(var(--win-accent) / .28);
}

.window.is-front .win-titlebar::after{ opacity: 1; }
.window.is-front .win-title { color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.window.is-front .win-btn   { color: var(--text); }


.win-titlebar {
  /* eksisterende … */
  height: var(--win-titlebar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  cursor: move;
  -webkit-user-drag: none;

  /* nytt: subtil glass-bakgrunn og smooth fade */
  position: relative;
  background: var(--win-titlebar-bg-inactive);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  transition: background .22s ease, box-shadow .22s ease, color .22s ease;
}

/* lett aksent som fader inn når vinduet er front */
.win-titlebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
              hsl(var(--win-accent) / .12),
              transparent 35%,
              transparent 65%,
              hsl(var(--win-accent) / .12));
  transition: opacity .22s ease;
}


.win-title {
  flex: 1 1 auto;          /* får lov å krympe */
  min-width: 0;            /* kritisk for ellipsis i flex-layout */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.win-actions {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  flex: 0 0 auto;          /* knappesiden skal ikke krympe */
}

/* Knappene */
.win-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; /* gir bedre kontroll enn grid her */
  align-items: center;
  justify-content: center;
  font-size: 0; /* tilpass for ønsket tykkelse */
  line-height: 1;  /* unngå ekstra vertikal spacing */
  padding-bottom: 1px; /* optisk korrigering for "–"-symbolet */
  cursor: pointer;
}
.win-btn svg { display:block; }
.win-btn:hover { background: color-mix(in oklab, var(--surface) 80%, var(--text) 8%); }

/* Innholdet i vinduet */
.win-content {
  position: relative;
  width: 100%;
  height: calc(100% - var(--win-titlebar-h));
  overflow: hidden;                  /* la inner scrolle */
  padding: 10px;
}

.win-content-inner {
  position: relative;
  height: 100%;
}
/*.win-content-inner {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: var(--sp-3);
}
*/

/* Resize-handle nede til høyre */
.win-resize {
  position: absolute;
  width: 14px;
  height: 14px;
  right: 2px;
  bottom: 2px;
  cursor: nwse-resize;
  opacity: .85;
}

/* Når du drar/resize: litt snappier */
.window.dragging,
.window.resizing {
  will-change: left, top, width, height;
}

.window.is-minimized .win-title {
  max-width: 12ch;         /* justér etter smak */
}

/* 4) (Valgfritt, belt-and-suspenders):
   Skjul innhold når minimert i tilfelle JS ikke rakk å gjøre det */
.window.is-minimized .win-content {
  display: none;
}

/* =======================================================================
   Lag-ordenen i appen (for referanse)
   -----------------------------------------------------------------------
   .infobar           z:60
   #desktop-layer     z:100 (ikon-canvas)
   #window-layer      z:400 (transparent teppe)
   .window            z:120..899 (kontrolleres av JS innenfor range)
   .context-menu      z:880
   .modal             z:1000
   ======================================================================= */

/* Bruk vinduets standardinnmat */
.window.is-loading .tpl-processing { display: grid; }
.window.is-loading .tpl-content    { display: none; }

.window.is-ready .tpl-processing   { display: none; }
.window.is-ready .tpl-content      { display: block; }

.window.is-error .tpl-processing   { display: grid; }
.window.is-error .tpl-content      { display: none; }

/* Spinner + layout i processing-området */
.tpl-processing {
 min-height: 160px;
 display: grid;
 place-items: center;
 gap: 8px;
 padding: 16px;
}
.tpl-processing .spinner {
 width: 28px; height: 28px; border-radius: 50%;
 border: 3px solid currentColor; border-right-color: transparent;
 animation: tplspin .8s linear infinite;
}
@keyframes tplspin { to { transform: rotate(360deg); } }

/* Scrollbar i selve vinduet (flex + rulling på inner) */
.win-content {
  display: flex;
  flex-direction: column;
  /* du har allerede height: calc(100% - var(--win-titlebar-h)); over, det er fint */
}
.win-content-inner {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;                 /* viktig for at flex-barn skal kunne krympe og rulle */
  -webkit-overflow-scrolling: touch; /* smooth scroll på iOS */
  user-select: text;             /* overstyrer .window { user-select: none } for innhold */
}