/* ============================================================
   Disky Fun — Window System
   진짜 Win98 windows: titlebar, controls, drag, resize.
   All sizes/colors via CSS variables → theming-ready.
   ============================================================ */


/* ─── Window container ─────────────────────────────── */

.window {
  position: absolute;
  left: var(--win-x, 0);
  top: var(--win-y, 0);
  width: var(--win-w, 400px);
  height: var(--win-h, 300px);
  
  background: var(--c-bg);
  border-top: 2px solid var(--c-white);
  border-left: 2px solid var(--c-white);
  border-right: 2px solid var(--c-black);
  border-bottom: 2px solid var(--c-black);
  box-shadow: 
    inset 1px 1px 0 var(--c-bg-light),
    inset -1px -1px 0 var(--c-bg-dark),
    2px 2px 0 var(--c-black);
  
  display: flex;
  flex-direction: column;
  
  font-family: var(--font-system);
  font-size: var(--fs-sm);
  
  z-index: 100;
  
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.12s var(--ease-out), transform 0.12s var(--ease-out);
}

.window.is-open {
  opacity: 1;
  transform: scale(1);
}

.window.is-closing {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

.window.is-minimized {
  display: none;
}

/* Dragging / resizing = no transitions for snappy feel */
.window.is-dragging,
.window.is-resizing {
  transition: none;
  user-select: none;
}

.window.is-dragging * {
  pointer-events: none;
}
.window.is-dragging .window__titlebar {
  pointer-events: auto;
}


/* ─── Maximized = full screen above taskbar ───────── */

.window.is-maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: calc(100% - var(--size-taskbar)) !important;
  border: 0;
  box-shadow: none;
}

.window.is-maximized .window__grip {
  display: none;
}

.window.is-maximized .window__control--maximize .window__control-icon::before {
  content: '❐';  /* "restore" icon */
}


/* ─── Titlebar ────────────────────────────────────── */

.window__titlebar {
  height: var(--size-titlebar);
  flex-shrink: 0;
  
  background: linear-gradient(
    90deg,
    var(--c-title-inactive-from, #7f7f7f),
    var(--c-title-inactive-to, #b5b5b5)
  );
  color: var(--c-title-inactive-text, #d0d0d0);
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-2) 0 var(--pad-3);
  
  font-family: var(--font-bold);
  font-weight: bold;
  font-size: var(--fs-sm);
  
  user-select: none;
  cursor: default;
}

.window.is-focused .window__titlebar {
  background: linear-gradient(
    90deg,
    var(--c-title-active-from),
    var(--c-title-active-to)
  );
  color: var(--c-title-active-text);
}


.window__titlebar-left {
  display: flex;
  align-items: center;
  gap: var(--pad-2);
  flex: 1;
  min-width: 0;
}

.window__icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}

.window__icon svg {
  width: 16px;
  height: 16px;
}

.window__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  letter-spacing: 0.3px;
}


/* ─── Window controls (min/max/close) ─────────────── */

.window__controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.window__control {
  width: 16px;
  height: 14px;
  
  background: var(--c-bg);
  border-top: 1px solid var(--c-white);
  border-left: 1px solid var(--c-white);
  border-right: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  box-shadow: 
    inset 1px 1px 0 var(--c-bg-light),
    inset -1px -1px 0 var(--c-bg-dark);
  
  color: var(--c-content-text);
  font-family: var(--font-system);
  font-size: 10px;
  line-height: 1;
  
  padding: 0;
  cursor: default;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.window__control:active {
  border-top: 1px solid var(--c-black);
  border-left: 1px solid var(--c-black);
  border-right: 1px solid var(--c-white);
  border-bottom: 1px solid var(--c-white);
  box-shadow: 
    inset 1px 1px 0 var(--c-bg-dark),
    inset -1px -1px 0 var(--c-bg-light);
}

.window__control-icon {
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: bold;
  pointer-events: none;
}

.window__control--minimize .window__control-icon {
  position: relative;
  top: 3px;
}


/* ─── Window body ─────────────────────────────────── */

.window__body {
  flex: 1;
  overflow: auto;
  background: var(--c-content-bg, var(--c-white));
  position: relative;
  min-height: 0;
}


/* ─── Resize grips ─────────────────────────────────── */

.window__grip {
  position: absolute;
  z-index: 1;
  user-select: none;
}

/* Edge grips */
.window__grip--n {
  top: -2px; left: 8px; right: 8px;
  height: 4px;
  cursor: ns-resize;
}
.window__grip--s {
  bottom: -2px; left: 8px; right: 8px;
  height: 4px;
  cursor: ns-resize;
}
.window__grip--e {
  right: -2px; top: 8px; bottom: 8px;
  width: 4px;
  cursor: ew-resize;
}
.window__grip--w {
  left: -2px; top: 8px; bottom: 8px;
  width: 4px;
  cursor: ew-resize;
}

/* Corner grips */
.window__grip--ne {
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  cursor: nesw-resize;
}
.window__grip--nw {
  top: -2px; left: -2px;
  width: 10px; height: 10px;
  cursor: nwse-resize;
}
.window__grip--se {
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  cursor: nwse-resize;
}
.window__grip--sw {
  bottom: -2px; left: -2px;
  width: 10px; height: 10px;
  cursor: nesw-resize;
}


/* ─── Common menubar (used by apps) ─────────────── */

.app-menubar {
  display: flex;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-bg-dark);
  padding: 2px;
  user-select: none;
  flex-shrink: 0;
}

.app-menu {
  position: relative;
}

.app-menu__label {
  padding: 2px 8px;
  font-size: var(--fs-sm);
  cursor: default;
  display: block;
}

.app-menu.is-open > .app-menu__label,
.app-menu:hover > .app-menu__label {
  background: var(--c-accent);
  color: var(--c-accent-text);
}

.app-menu__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--c-bg);
  border-top: 2px solid var(--c-white);
  border-left: 2px solid var(--c-white);
  border-right: 2px solid var(--c-black);
  border-bottom: 2px solid var(--c-black);
  box-shadow: 
    inset 1px 1px 0 var(--c-bg-light),
    inset -1px -1px 0 var(--c-bg-dark),
    2px 2px 0 var(--c-black);
  z-index: 10;
  padding: 2px;
}

.app-menu.is-open .app-menu__dropdown {
  display: block;
}

.app-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 16px 3px 8px;
  font-size: var(--fs-sm);
  cursor: default;
  white-space: nowrap;
}

.app-menu-item:hover {
  background: var(--c-accent);
  color: var(--c-accent-text);
}

.app-menu-item__shortcut {
  margin-left: 16px;
  opacity: 0.7;
  font-size: var(--fs-xs);
}

.app-menu-divider {
  height: 0;
  margin: 2px 4px;
  border-top: 1px solid var(--c-bg-dark);
  border-bottom: 1px solid var(--c-white);
}


/* ─── Status bar (used by apps) ─────────────────── */

.app-statusbar {
  flex-shrink: 0;
  display: flex;
  background: var(--c-bg);
  border-top: 1px solid var(--c-bg-dark);
  padding: 2px;
  font-size: var(--fs-xs);
  color: var(--c-content-text);
  user-select: none;
}

.app-statusbar__segment {
  border-top: 1px solid var(--c-bg-dark);
  border-left: 1px solid var(--c-bg-dark);
  border-right: 1px solid var(--c-white);
  border-bottom: 1px solid var(--c-white);
  padding: 2px 8px;
  min-width: 80px;
}

.app-statusbar__segment + .app-statusbar__segment {
  margin-left: 2px;
}