/* === [ WINDOW FRAME CHROME DAN TITLEBAR RETRO OS ] === */

.win-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: var(--win-gray);
  border-top: 1px solid var(--win-white);
  border-left: 1px solid var(--win-white);
  border-right: 1px solid var(--win-frame);
  border-bottom: 1px solid var(--win-frame);
  box-shadow: inset 1px 1px 0px var(--win-gray-light),
              inset -1px -1px 0px var(--win-gray-dark),
              2px 2px 6px rgba(0, 0, 0, 0.35);
  padding: 3px;
  z-index: 100;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - var(--taskbar-height) - 10px);
  animation: win-open 0.12s cubic-bezier(0.1, 0.9, 0.2, 1);
}

@keyframes win-open {
  from {
    transform: scale(0.97);
    opacity: 0.85;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* maximized fullscreen layout state */
.win-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--taskbar-height)) !important;
  max-width: 100vw !important;
  max-height: calc(100vh - var(--taskbar-height)) !important;
  box-shadow: none;
}

/* window edge and corner resize handles 8 directions */
.win-resize-handle {
  position: absolute;
  z-index: 50;
  touch-action: none;
  user-select: none;
}

.win-resize-n {
  top: -4px;
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: n-resize;
}

.win-resize-s {
  bottom: -4px;
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: s-resize;
}

.win-resize-w {
  top: 10px;
  bottom: 10px;
  left: -4px;
  width: 8px;
  cursor: w-resize;
}

.win-resize-e {
  top: 10px;
  bottom: 10px;
  right: -4px;
  width: 8px;
  cursor: e-resize;
}

.win-resize-nw {
  top: -4px;
  left: -4px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}

.win-resize-ne {
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}

.win-resize-sw {
  bottom: -4px;
  left: -4px;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}

.win-resize-se {
  bottom: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}

/* non resizable states */
.win-window.maximized .win-resize-handle,
.win-dialog .win-resize-handle,
[data-resizable="false"] .win-resize-handle {
  display: none !important;
}

/* draggable titlebar header container 20px */
.win-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--titlebar-height);
  padding: 0 3px 0 4px;
  background: var(--win-title-inactive);
  color: var(--win-gray-light);
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: bold;
  cursor: default;
  flex-shrink: 0;
  box-sizing: border-box;
}

.win-window.active .win-titlebar {
  background: var(--win-navy-gradient);
  color: var(--win-white);
}

.win-title {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.win-title img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 14px;
  height: 14px;
}

/* titlebar window controls buttons 16x14 */
.win-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.win-controls .win-btn {
  width: 16px;
  height: 14px;
  padding: 0;
  min-width: 16px;
  border-top: 1px solid var(--win-white);
  border-left: 1px solid var(--win-white);
  border-right: 1px solid var(--win-frame);
  border-bottom: 1px solid var(--win-frame);
  box-shadow: inset 1px 1px 0px var(--win-gray-light),
              inset -1px -1px 0px var(--win-gray-dark);
  background-color: var(--win-gray);
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
}

.win-controls .win-btn:active {
  border-top: 1px solid var(--win-frame);
  border-left: 1px solid var(--win-frame);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-gray-dark),
              inset -1px -1px 0px var(--win-gray-light);
  padding: 0;
}

.win-btn-min {
  background-image: url('../assets/icons/minimize.png');
}

.win-btn-max {
  background-image: url('../assets/icons/maximize.png');
}

.win-btn-close {
  background-image: url('../assets/icons/close.png');
  margin-left: 2px;
}

/* window menubar navigation items */
.win-menu-bar {
  display: flex;
  align-items: center;
  padding: 2px 2px;
  border-bottom: 1px solid var(--win-gray-dark);
  font-size: 11px;
  background-color: var(--win-gray);
  user-select: none;
}

.win-menu-bar > span {
  padding: 2px 6px;
  cursor: default;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: normal;
}

.win-menu-bar > span:hover {
  background-color: var(--win-navy);
  color: var(--win-white);
}

.win-menu-bar .access-key {
  text-decoration: underline;
  display: inline;
  padding: 0;
  margin: 0;
}

/* window body container wrapper */
.win-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 6px;
  background-color: var(--win-gray);
}

/* double inset canvas wrapper ala retro os */
.win-content-outer {
  border-top: 1px solid var(--win-gray-dark);
  border-left: 1px solid var(--win-gray-dark);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
  box-shadow: inset 1px 1px 0px var(--win-frame),
              inset -1px -1px 0px var(--win-gray-light);
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--win-white);
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 4px;
}

.win-content-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--win-white);
  padding: 18px 24px;
}

/* window statusbar footer panels */
.win-statusbar {
  display: flex;
  gap: 3px;
  padding: 2px 0 0 0;
  margin-top: 2px;
  font-size: 11px;
}

.win-statusbar .status-panel {
  flex: 1;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--win-gray-dark);
  border-left: 1px solid var(--win-gray-dark);
  border-right: 1px solid var(--win-white);
  border-bottom: 1px solid var(--win-white);
  font-size: 11px;
  color: var(--win-black);
}

/* mobile viewport responsive query */
@media (max-width: 768px) {
  .win-window {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--taskbar-height)) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - var(--taskbar-height)) !important;
  }
}