/*
 * Vinduer. Position, størrelse og mindstemål sættes af JavaScript; maksimeret og mobil styres her.
 */

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  animation: window-in 0.16s ease-out;
}

@keyframes window-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}

/* !important, fordi JavaScript sætter position og størrelse direkte på elementet. */
.window--maximized {
  top: calc(12px + var(--safe-top)) !important;
  left: calc(var(--rail-width) + 24px + var(--safe-left)) !important;
  width: calc(100% - var(--rail-width) - 36px - var(--safe-left) - var(--safe-right)) !important;
  height: calc(100% - 24px - var(--safe-top) - var(--safe-bottom)) !important;
}

.window__titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-2);
  cursor: grab;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  user-select: none;
  touch-action: none;
}

.window__titlebar:active {
  cursor: grabbing;
}

/* Den aktive app har en farvet titellinje, så man kan se, hvilken app man arbejder i. */
.window:not(.window--inactive) .window__titlebar {
  background: var(--color-titlebar-active);
  color: var(--color-titlebar-active-ink);
}

.window--inactive .window__titlebar {
  color: var(--color-titlebar-inactive-ink);
}

.window--inactive .window__titlebar .app-icon {
  opacity: 0.6;
}

/*
 * En iframe sluger klik, så siden aldrig hører dem. I et inaktivt vindue går klikket derfor igennem
 * til vinduet, der bliver aktivt et vilkårligt sted, man trykker. Derefter virker appen som normalt.
 */
.window--inactive .app-frame {
  pointer-events: none;
}

.window__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rail: knapperne samlet i en pille. */
.window__controls {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.window__control {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
}

.window__control:hover {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.window__control--close:hover {
  background: var(--color-danger);
  color: var(--color-on-danger);
}

.window__control svg {
  width: 12px;
  height: 12px;
}

.window__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Til indlejrede apps, der selv fylder hele vinduet. */
.window__body--flush {
  overflow: hidden;
}

/*
 * Håndtag til at ændre størrelse: usynlige striber langs kanterne og lidt større felter i hjørnerne.
 * De ligger inde i vinduet, fordi vinduet klipper alt udenfor (runde hjørner).
 */
.window__resize {
  position: absolute;
  z-index: 1;
  touch-action: none;
}

.window__resize--n,
.window__resize--s {
  right: 12px;
  left: 12px;
  height: 6px;
  cursor: ns-resize;
}

.window__resize--w,
.window__resize--e {
  top: 12px;
  bottom: 12px;
  width: 6px;
  cursor: ew-resize;
}

.window__resize--n {
  top: 0;
}

.window__resize--s {
  bottom: 0;
}

.window__resize--w {
  left: 0;
}

.window__resize--e {
  right: 0;
}

.window__resize--nw,
.window__resize--ne,
.window__resize--sw,
.window__resize--se {
  width: 14px;
  height: 14px;
}

.window__resize--nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.window__resize--ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.window__resize--sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

/* Hjørnet nederst til højre har en synlig rille, så man kan se, at vinduet kan ændres. */
.window__resize--se {
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(
    135deg,
    transparent 55%,
    var(--color-line) 55% 62%,
    transparent 62% 72%,
    var(--color-line) 72% 79%,
    transparent 79%
  );
  cursor: nwse-resize;
}

.window--maximized .window__resize {
  display: none;
}

/* ---------- Proceslinje: titellinje i ét med vinduet og firkantede knapper ---------- */

:root[data-layout='bar'] .window {
  border-radius: 10px;
}

:root[data-layout='bar'] .window__titlebar {
  gap: 10px;
  height: 40px;
  padding: 0 0 0 14px;
}

/* Inaktive apps har en titellinje i ét med vinduet. */
:root[data-layout='bar'] .window--inactive .window__titlebar {
  background: var(--color-surface);
}

:root[data-layout='bar'] .window__controls {
  align-self: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:root[data-layout='bar'] .window__control {
  width: 46px;
  height: 100%;
  border-radius: 0;
}

:root[data-layout='bar'] .window--maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - var(--taskbar-height) - var(--safe-bottom)) !important;
  border: 0;
  border-radius: 0;
}

/* ---------- Mobil: vinduer fylder skærmen ---------- */

@media (width <= 640px) {
  .window,
  .window--maximized {
    top: calc(8px + var(--safe-top)) !important;
    left: calc(8px + var(--safe-left)) !important;
    width: calc(100% - 16px - var(--safe-left) - var(--safe-right)) !important;
    height: calc(100% - 96px - var(--safe-top) - var(--safe-bottom)) !important;
  }

  :root[data-layout='bar'] .window,
  :root[data-layout='bar'] .window--maximized {
    height: calc(100% - 68px - var(--safe-top) - var(--safe-bottom)) !important;
  }

  .window__resize,
  .window__control--maximize {
    display: none;
  }
}