/* Windows 98 Window Styles */

/* ===== WINDOW CONTAINER ===== */
.window {
    position: absolute;
    background: var(--win98-window-bg);
    border: var(--window-border-width) solid;
    border-color: var(--win98-border-lightest) var(--win98-border-darkest) var(--win98-border-darkest) var(--win98-border-lightest);
    box-shadow: inset 1px 1px 0 var(--win98-border-light),
        inset -1px -1px 0 var(--win98-border-dark);
    display: flex;
    flex-direction: column;
    min-width: var(--window-min-width);
    min-height: var(--window-min-height);
}

.window.active {
    z-index: calc(var(--z-windows-base) + 1);
}

.window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - var(--win98-taskbar-height)) !important;
    border-width: 0;
}

.window.minimized {
    display: none;
}

/* ===== TITLE BAR ===== */
.window-titlebar {
    height: var(--window-titlebar-height);
    background: var(--win98-titlebar-inactive-gradient);
    padding: 0 var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: move;
    flex-shrink: 0;
}

.window.active .window-titlebar {
    background: var(--win98-titlebar-active-gradient);
}

.window-icon {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    flex-shrink: 0;
    image-rendering: pixelated;
}

.window-title {
    flex: 1;
    color: var(--win98-titlebar-text-inactive);
    font-size: var(--font-size-title);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
    padding-left: var(--spacing-xs);
}

.window.active .window-title {
    color: var(--win98-titlebar-text-active);
}

/* ===== WINDOW CONTROL BUTTONS ===== */
.window-controls {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.window-btn {
    width: var(--window-button-size);
    height: 14px;
    background: var(--win98-button-face);
    border: 2px solid;
    border-color: var(--win98-border-lightest) var(--win98-border-darkest) var(--win98-border-darkest) var(--win98-border-lightest);
    box-shadow: inset -1px -1px 0 var(--win98-border-dark),
        inset 1px 1px 0 var(--win98-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    color: var(--win98-text);
    line-height: 1;
    cursor: pointer;
}

.window-btn:active {
    border-color: var(--win98-border-darkest) var(--win98-border-lightest) var(--win98-border-lightest) var(--win98-border-darkest);
    box-shadow: inset 1px 1px 0 var(--win98-border-dark);
    padding-top: 1px;
    padding-left: 1px;
}

.window-btn.disabled {
    color: var(--win98-text-disabled);
    cursor: default;
}

.window-btn.disabled:active {
    border-color: var(--win98-border-lightest) var(--win98-border-darkest) var(--win98-border-darkest) var(--win98-border-lightest);
    box-shadow: inset -1px -1px 0 var(--win98-border-dark),
        inset 1px 1px 0 var(--win98-border-light);
    padding-top: 0;
    padding-left: 0;
}

/* Button icons using Unicode/CSS */
.window-btn-minimize::before {
    content: "";
    width: 8px;
    height: 2px;
    background: var(--win98-text);
    margin-top: 4px;
}

.window-btn-maximize::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 1px solid var(--win98-text);
    border-top-width: 2px;
}

.window-btn-restore::before {
    content: "";
    position: relative;
    width: 8px;
    height: 8px;
}

.window-btn-restore::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid var(--win98-text);
    border-top-width: 2px;
    bottom: 3px;
    left: 3px;
    background: var(--win98-button-face);
}

.window-btn-restore::before {
    width: 7px;
    height: 7px;
    border: 1px solid var(--win98-text);
    border-top-width: 2px;
    position: absolute;
    top: 1px;
    right: 1px;
}

.window-btn-close::before {
    content: "✕";
    font-size: 10px;
    font-weight: bold;
}

/* ===== MENU BAR ===== */
.window-menubar {
    height: 20px;
    background: var(--win98-window-bg);
    border-bottom: 1px solid var(--win98-border-dark);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    flex-shrink: 0;
}

.menu-item {
    padding: 2px 6px;
    font-size: var(--font-size-menu);
    cursor: pointer;
}

.menu-item:hover,
.menu-item.active {
    background: var(--win98-menu-highlight);
    color: var(--win98-selection-text);
}

.menu-item.disabled {
    color: var(--win98-text-disabled);
}

/* ===== WINDOW CONTENT ===== */
.window-content {
    flex: 1;
    overflow: auto;
    background: var(--win98-window-bg);
}

.window-content.inset {
    margin: var(--spacing-sm);
    border: 2px solid;
    border-color: var(--win98-border-dark) var(--win98-border-lightest) var(--win98-border-lightest) var(--win98-border-dark);
    background: var(--win98-input-bg);
}

/* ===== STATUS BAR ===== */
.window-statusbar {
    height: 20px;
    background: var(--win98-window-bg);
    border-top: 1px solid var(--win98-border-light);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-small);
    flex-shrink: 0;
}

.statusbar-section {
    padding: 0 var(--spacing-sm);
    border: 1px solid;
    border-color: var(--win98-border-dark) var(--win98-border-light) var(--win98-border-light) var(--win98-border-dark);
    height: 16px;
    display: flex;
    align-items: center;
}

/* ===== RESIZE HANDLES ===== */
.window-resize {
    position: absolute;
}

.window-resize-n {
    top: -3px;
    left: 3px;
    right: 3px;
    height: 6px;
    cursor: n-resize;
}

.window-resize-s {
    bottom: -3px;
    left: 3px;
    right: 3px;
    height: 6px;
    cursor: s-resize;
}

.window-resize-e {
    right: -3px;
    top: 3px;
    bottom: 3px;
    width: 6px;
    cursor: e-resize;
}

.window-resize-w {
    left: -3px;
    top: 3px;
    bottom: 3px;
    width: 6px;
    cursor: w-resize;
}

.window-resize-nw {
    top: -3px;
    left: -3px;
    width: 10px;
    height: 10px;
    cursor: nw-resize;
}

.window-resize-ne {
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    cursor: ne-resize;
}

.window-resize-sw {
    bottom: -3px;
    left: -3px;
    width: 10px;
    height: 10px;
    cursor: sw-resize;
}

.window-resize-se {
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    cursor: se-resize;
}

/* Corner grip graphic */
.window-resize-se::after {
    content: "";
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(135deg,
            transparent 0%, transparent 30%,
            var(--win98-border-light) 30%, var(--win98-border-light) 40%,
            var(--win98-border-dark) 40%, var(--win98-border-dark) 50%,
            transparent 50%, transparent 60%,
            var(--win98-border-light) 60%, var(--win98-border-light) 70%,
            var(--win98-border-dark) 70%, var(--win98-border-dark) 80%,
            transparent 80%);
}

/* ===== WINDOWS 98 BUTTONS ===== */
.win98-btn {
    background: var(--win98-button-face);
    border: 2px solid;
    border-color: var(--win98-border-lightest) var(--win98-border-darkest) var(--win98-border-darkest) var(--win98-border-lightest);
    box-shadow: inset -1px -1px 0 var(--win98-border-dark),
        inset 1px 1px 0 var(--win98-border-light);
    padding: 4px 12px;
    font-size: var(--font-size-normal);
    cursor: pointer;
    min-width: 75px;
}

.win98-btn:active {
    border-color: var(--win98-border-darkest) var(--win98-border-lightest) var(--win98-border-lightest) var(--win98-border-darkest);
    box-shadow: inset 1px 1px 0 var(--win98-border-dark);
    padding: 5px 11px 3px 13px;
}

.win98-btn:focus {
    outline: 1px dotted var(--win98-text);
    outline-offset: -4px;
}

.win98-btn.primary {
    border: 3px solid var(--win98-border-darkest);
    border-color: var(--win98-border-darkest);
    box-shadow: inset 2px 2px 0 var(--win98-border-lightest),
        inset -2px -2px 0 var(--win98-border-dark);
}

.win98-btn:disabled {
    color: var(--win98-text-disabled);
    cursor: default;
}

/* ===== WINDOWS 98 INPUTS ===== */
.win98-input {
    background: var(--win98-input-bg);
    border: 2px solid;
    border-color: var(--win98-border-dark) var(--win98-border-light) var(--win98-border-light) var(--win98-border-dark);
    box-shadow: inset 1px 1px 0 var(--win98-border-darkest);
    padding: 2px 4px;
    font-size: var(--font-size-normal);
    font-family: var(--font-system);
}

.win98-input:focus {
    outline: none;
}

.win98-textarea {
    background: var(--win98-input-bg);
    border: 2px solid;
    border-color: var(--win98-border-dark) var(--win98-border-light) var(--win98-border-light) var(--win98-border-dark);
    box-shadow: inset 1px 1px 0 var(--win98-border-darkest);
    padding: 4px;
    font-family: var(--font-mono);
    font-size: var(--font-size-normal);
    resize: none;
}

/* ===== SCROLLBARS (Windows 98 style) ===== */
.window-content::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.window-content::-webkit-scrollbar-track {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><rect x="0" y="0" width="1" height="1" fill="%23c0c0c0"/><rect x="1" y="1" width="1" height="1" fill="%23c0c0c0"/><rect x="0" y="1" width="1" height="1" fill="%23ffffff"/><rect x="1" y="0" width="1" height="1" fill="%23ffffff"/></svg>');
}

.window-content::-webkit-scrollbar-thumb {
    background: var(--win98-button-face);
    border: 2px solid;
    border-color: var(--win98-border-lightest) var(--win98-border-darkest) var(--win98-border-darkest) var(--win98-border-lightest);
    box-shadow: inset -1px -1px 0 var(--win98-border-dark),
        inset 1px 1px 0 var(--win98-border-light);
}

.window-content::-webkit-scrollbar-button {
    background: var(--win98-button-face);
    border: 2px solid;
    border-color: var(--win98-border-lightest) var(--win98-border-darkest) var(--win98-border-darkest) var(--win98-border-lightest);
    display: block;
    height: 16px;
    width: 16px;
}

.window-content::-webkit-scrollbar-corner {
    background: var(--win98-window-bg);
}