/* Window Manager Styles */

.window {
    position: absolute;
    min-width: 300px;
    min-height: 150px;
    background: var(--cde-bg-light);
    display: flex;
    flex-direction: column;
    
    /* Window outer border */
    border: var(--cde-border-width) solid;
    border-color: var(--cde-highlight) var(--cde-shadow-dark) var(--cde-shadow-dark) var(--cde-highlight);
    box-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.25);
}

.window.focused {
    z-index: 1000;
    border-color: #daacc0 #58293d #58293d #daacc0;
}

.window-titlebar {
    height: 26px;
    background: var(--cde-titlebar-active);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    cursor: move;
    user-select: none;
    position: relative;
    
    /* Titlebar raised border */
    border-bottom: var(--cde-border-width) solid var(--cde-shadow-dark);
    box-shadow: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.3),
        inset -1px -1px 0 rgba(0, 0, 0, 0.3);
}

.window.inactive .window-titlebar {
    background: var(--cde-titlebar-inactive);
}

.window.inactive .window-title {
    color: black;
    text-shadow: none;
}

.window-title {
    color: white;
    font-weight: normal;
    font-size: 12px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    flex: 1;
    text-align: center;
}

.window-controls {
    display: flex;
    gap: 2px;
    position: absolute;
    left: 4px;
}

.window-controls-right {
    display: flex;
    gap: 2px;
    position: absolute;
    right: 4px;
}

.window-btn {
    width: 22px;
    height: 18px;
    background: var(--cde-bg-light);
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--cde-text);
    font-family: monospace;
    padding: 0; /* Ensure no padding affects centering */
    
    /* Raised button effect */
    box-shadow: 
        inset 1px 1px 0 var(--cde-highlight),
        inset -1px -1px 0 var(--cde-shadow-dark);
}

.window-btn:hover {
    background: #c4c4c4;
}

.window-btn:active {
    box-shadow: 
        inset -1px -1px 0 var(--cde-highlight),
        inset 1px 1px 0 var(--cde-shadow-dark);
}

/* Icon Shapes */
.icon-dash {
    width: 8px;
    height: 2px;
    background: currentColor;
    display: block;
    box-shadow: -1px -1px 0 var(--cde-highlight), 1px 1px 0 var(--cde-shadow-dark);
}

.icon-small-square {
    width: 4px;
    height: 4px;
    background: currentColor;
    display: block;
    box-shadow: -1px -1px 0 var(--cde-highlight), 1px 1px 0 var(--cde-shadow-dark);
}

.icon-large-square {
    width: 10px;
    height: 10px;
    background: currentColor;
    display: block;
    box-shadow: -1px -1px 0 var(--cde-highlight), 1px 1px 0 var(--cde-shadow-dark);
}

/* Make action buttons match the titlebar color */
.window.focused .window-btn {
    background: var(--cde-titlebar-active);
    color: var(--cde-titlebar-active); /* Icon matches bg */
    box-shadow:
        inset 1px 1px 0 #daacc0,
        inset -1px -1px 0 #58293d;
}

/* Custom shading for active window icons */
.window.focused .icon-dash,
.window.focused .icon-small-square,
.window.focused .icon-large-square {
    box-shadow: -1px -1px 0 #daacc0, 1px 1px 0 #58293d;
}


.window.focused .window-btn:hover {
    filter: brightness(0.92);
}

.window.inactive .window-btn {
    background: var(--cde-titlebar-inactive);
    color: var(--cde-titlebar-inactive); /* Icon matches bg */
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.7),
        inset -1px -1px 0 rgba(0,0,0,0.25);
}

/* Standard shading for inactive window icons */
.window.inactive .icon-dash,
.window.inactive .icon-small-square,
.window.inactive .icon-large-square {
    box-shadow: -1px -1px 0 var(--cde-highlight), 1px 1px 0 var(--cde-shadow-dark);
}

.window.inactive .window-btn:hover {
    filter: brightness(0.98);
}

.window-menubar {
    height: 24px;
    background: var(--cde-menu-bg);
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 4px;
    
    /* Menu bar border */
    border-bottom: var(--cde-border-width) solid;
    border-color: var(--cde-shadow-light) var(--cde-shadow-dark);
    box-shadow: inset 0 1px 0 var(--cde-highlight);
}

.menu-help {
    margin-left: auto;
}

.window-content {
    flex: 1;
    background: var(--cde-bg-medium);
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    
    /* Content area sunken border */
    border: var(--cde-border-width) solid;
    border-color: var(--cde-shadow-dark) var(--cde-highlight) var(--cde-highlight) var(--cde-shadow-dark);
    margin: 1px;
}

.window-statusbar {
    height: 22px;
    background: var(--cde-bg-light);
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 11px;
    
    /* Status bar border */
    border-top: var(--cde-border-width) solid;
    border-color: var(--cde-shadow-dark) var(--cde-highlight);
}