/* Macintosh System 1.0 Desktop Interface - Version 2.0 */
/* Pixel-accurate implementation based on original System 1.0 design */
/* Design Philosophy: Simplicity, clarity, direct manipulation, consistency */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Chicago font for titlebar - original Mac OS System 1.0 font */
/* Note: Chicago is a proprietary Apple font. Using local() for systems that have it installed. */
@font-face {
    font-family: 'Chicago';
    src: local('Chicago'),
         local('ChicagoFLF');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-white: #FFFFFF;
    --color-black: #000000;
    --desktop-gray: #C0C0C0; /* Dithered gray for desktop background */
    --icon-size: 63px; /* Icon size (50px * 1.25) */
    --icon-label-size: 18px; /* 12px * 1.5 */
    
    /* System 1.0 Original Measurements (scaled 1.5x for modern displays) */
    --window-border: 2px; /* Original: 1px, scaled for visibility */
    --titlebar-height: 20px; /* Original: 20px */
    --titlebar-height-scaled: 30px; /* 20px * 1.5 */
    --striped-pattern-width: 20px; /* Original: ~20px for striped area */
    --striped-pattern-width-scaled: 30px; /* 20px * 1.5 */
    --button-size: 12px; /* Original: 12px */
    --button-size-scaled: 18px; /* 12px * 1.5 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

body {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: var(--font-size-desktop-icon);
    color: var(--color-black);
    background: var(--color-white);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

/* Desktop Container */
.desktop-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Classic Mac OS dither pattern: 2x2 pixel checkerboard */
    /* Creates the classic dithered gray background using alternating black/white pixels */
    /* Pattern: Top-left=white, Top-right=black, Bottom-left=black, Bottom-right=white */
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='0' width='2' height='2' fill='%23000'/%3E%3Crect x='0' y='2' width='2' height='2' fill='%23000'/%3E%3C/svg%3E");
    background-size: 4px 4px;
    background-color: var(--color-white);
}

/* Desktop Icons Column (Right Side) */
.desktop-icons {
    position: absolute;
    right: 20px;
    top: 30px;
    width: 150px; /* 100px * 1.5 */
    display: flex;
    flex-direction: column;
    gap: 30px; /* 20px * 1.5 */
    align-items: center;
    z-index: 1;
}

/* Mobile: Make icons scrollable and reduce gap */
@media (max-width: 768px) {
    .desktop-icons {
        right: 50%;
        transform: translateX(50%);
        left: auto;
        top: 50px;
        bottom: 10px;
        width: auto;
        max-height: calc(100vh - 50px);
        overflow-y: auto;
        overflow-x: hidden;
        gap: 10px 10px; /* row gap, column gap - reduced row gap */
        padding: 0 5px;
        -webkit-overflow-scrolling: touch;
        /* Three columns on mobile only */
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-auto-flow: row;
        align-items: start;
        justify-items: center;
        justify-content: center;
    }
    
    .desktop-icon {
        width: 96px !important; /* 80px * 1.2 */
        flex-shrink: 0;
    }
    
    .desktop-icon .desktop-icon-image {
        width: 60px !important; /* 50px * 1.2 */
        height: 60px !important; /* 50px * 1.2 */
    }
    
    .desktop-icon .desktop-icon-label {
        font-size: 24px !important; /* 20px * 1.2 */
        max-width: 96px !important; /* 80px * 1.2 */
    }
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 6px; /* 4px * 1.5 */
    text-decoration: none;
    color: var(--color-black);
    width: 120px; /* 80px * 1.5 */
    transition: transform 0.1s;
}

.desktop-icon:hover {
    transform: scale(0.95);
}

.desktop-icon-image {
    width: 63px; /* Icon size (50px * 1.25) */
    height: 63px; /* Icon size (50px * 1.25) */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    margin-bottom: 6px; /* 4px * 1.5 */
}

.desktop-icon-label {
    font-size: var(--font-size-desktop-icon);
    text-align: center;
    word-wrap: break-word;
    max-width: 120px; /* 80px * 1.5 */
    line-height: 1.2;
    -webkit-font-smoothing: none;
    /* Classic Mac OS label box: white background */
    background: var(--color-white);
    padding: 1px 4px;
    display: inline-block;
}

/* Window Area */
.desktop-window-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* System 1.0 Window Style - Pixel Accurate */
/* Design: Thick black border, white background, embossed effect */
.system-window {
    position: absolute;
    background: var(--color-white);
    border: var(--window-border) solid var(--color-black);
    /* Embossed effect: inset white on top-left, inset black on bottom-right */
    box-shadow: 
        inset -1px -1px 0 var(--color-white),
        inset 1px 1px 0 var(--color-black),
        2px 2px 0 var(--color-black);
    min-width: 400px;
    min-height: 300px;
    max-width: calc(100vw - 195px); /* 180px icons + 5px left + 2px border + 8px right padding */
    max-height: calc(100vh - 37px); /* 30px menu + 2px border + 5px top offset */
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
}

/* Resize handles - all edges and corners */
.window-resize-handle {
    position: absolute;
    z-index: 100;
    pointer-events: all;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background: transparent;
}

/* Corner handles */
.window-resize-handle.corner-se {
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: nwse-resize;
    background: var(--color-white);
    border-left: 2px solid var(--color-black);
    border-top: 2px solid var(--color-black);
}

.window-resize-handle.corner-se:hover {
    background: var(--color-black);
}

.window-resize-handle.corner-se::before {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-bottom: 12px solid var(--color-black);
    pointer-events: none;
}

.window-resize-handle.corner-se::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-bottom: 9px solid var(--color-white);
    pointer-events: none;
}

.window-resize-handle.corner-se:hover::after {
    border-bottom-color: var(--color-black);
}

.window-resize-handle.corner-sw {
    bottom: 0;
    left: 0;
    width: 24px;
    height: 24px;
    cursor: nesw-resize;
}

.window-resize-handle.corner-ne {
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: nesw-resize;
}

.window-resize-handle.corner-nw {
    /* Position to avoid close button area - close button is at left: 6px, width: 18px */
    /* Start handle after close button to prevent overlap */
    top: 0;
    left: 30px;
    width: 24px;
    height: 24px;
    cursor: nwse-resize;
}

/* Edge handles */
.window-resize-handle.edge-top {
    top: 0;
    left: 30px; /* Start after close button area (6px + 18px + 6px margin) */
    right: 24px;
    height: 8px;
    cursor: ns-resize;
}

.window-resize-handle.edge-bottom {
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 8px;
    cursor: ns-resize;
}

.window-resize-handle.edge-left {
    left: 0;
    top: 30px; /* Start below close button area */
    bottom: 24px;
    width: 8px;
    cursor: ew-resize;
}

.window-resize-handle.edge-right {
    right: 0;
    top: 24px;
    bottom: 24px;
    width: 8px;
    cursor: ew-resize;
}

.system-window.maximized .window-resize-handle {
    display: none;
}

.system-window.maximized {
    top: 0 !important;
    left: 5px !important; /* Match default left position */
    width: calc(100vw - 195px) !important; /* Account for icons, borders, and padding */
    height: calc(100vh - 37px) !important; /* Account for menu bar, borders, and top offset */
    margin-top: 30px !important;
}

/* Window Titlebar - System 1.0 Style */
/* Design: White background, striped patterns on left/right, centered title */
.window-titlebar {
    background: var(--color-white);
    border-bottom: var(--window-border) solid var(--color-black);
    height: var(--titlebar-height-scaled);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: move;
    padding: 10px 0; /* Increased top/bottom padding by 4px (from 6px to 10px) */
    user-select: none;
    font-family: 'VT323', 'Courier New', monospace;
    /* No font smoothing for pixel-perfect rendering */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    z-index: 102; /* Higher than resize handles to ensure titlebar captures events */
}

/* Striped pattern on left (before close box) */
/* System 1.0: Horizontal lines (6 lines) running across the header */
/* 2px from left edge, stops 4px before close box */
.window-titlebar::before {
    content: '';
    position: absolute;
    left: 2px; /* 2px from left edge */
    top: 3px; /* 3px gap from top */
    right: min(calc(50% + var(--title-half-width, 0px) + 15px), calc(100% - 11px)); /* Stops 5px before close box (close box at 16px, pattern ends at 11px from left) */
    bottom: 3px; /* 3px gap from bottom */
    /* Create horizontal stripes: 6 lines with 2px thickness, 1px closer (2px gap instead of 3px) */
    background: repeating-linear-gradient(
        to bottom,
        var(--color-black) 0px,
        var(--color-black) 2px,
        var(--color-white) 2px,
        var(--color-white) 4px /* Reduced from 5px to 4px (1px closer) */
    );
    z-index: 1;
}

/* Striped pattern on right - continues after close box, through title area, to right edge */
.window-titlebar::after {
    content: '';
    position: absolute;
    right: 2px; /* 2px from right edge */
    top: 3px; /* 3px gap from top */
    left: max(calc(50% + var(--title-half-width, 0px) + 15px), 43.5px); /* Starts 15px after text OR 5px after close box (close box at 16px, width 22.5px, ends at 38.5px, so pattern starts at 43.5px) */
    bottom: 3px; /* 3px gap from bottom */
    /* Create horizontal stripes: 6 lines with 2px thickness */
    background: repeating-linear-gradient(
        to bottom,
        var(--color-black) 0px,
        var(--color-black) 2px,
        var(--color-white) 2px,
        var(--color-white) 4px
    );
    z-index: 1;
}

.window-title {
    font-size: 32px !important;
    font-weight: bold;
    color: var(--color-black);
    text-align: center;
    pointer-events: none;
    z-index: 2;
    position: relative;
    padding: 0;
    margin: 0 15px; /* 15px gap on each side before striped patterns */
    font-family: 'Chicago', 'VT323', 'Courier New', monospace;
    letter-spacing: 0.5px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    white-space: nowrap; /* Prevent text wrapping for accurate width calculation */
}

/* Close Button (Left Box) - Positioned on left, between striped patterns */
.window-close {
    position: absolute;
    left: 16px; /* 16px from left edge - moved 6px to the right */
    top: 50%; /* Vertically centered */
    transform: translateY(-50%); /* Center vertically */
    width: calc(var(--button-size-scaled) * 1.25); /* 25% wider (18px * 1.25 = 22.5px) */
    height: calc(var(--titlebar-height-scaled) - 8px); /* Decreased by 2px (30px - 8px = 22px) */
    border: 2px solid var(--color-black);
    background: var(--color-white);
    cursor: pointer !important; /* Force pointer cursor */
    z-index: 101; /* Higher than striped patterns (z-index: 1) */
    -webkit-font-smoothing: none;
    pointer-events: all;
}

.window-close:hover {
    background: var(--color-black);
}

/* Maximize button removed - only close button remains */

/* Window Content */
.window-content {
    flex: 1;
    padding: 0;
    background: var(--color-white);
    overflow: hidden;
    position: relative;
    min-height: 0;
    display: flex;
}

/* Resize handle styling */
.system-window iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
}

/* Menu Bar (Top) - System 1.0 Style */
/* Original specs: 20px height, 12pt font (Chicago), 4px padding from edges, 6px between items */
.mac-menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--titlebar-height-scaled) + 8px); /* 38px = 30px + 8px for more space above/below menu titles */
    background: var(--color-white);
    border-bottom: var(--window-border) solid var(--color-black);
    display: flex;
    align-items: center;
    padding: 0 6px; /* Original: 4px, scaled: 6px (4px * 1.5) */
    z-index: 1000;
    font-size: 18px; /* Original: 12pt, scaled: 18px (12pt * 1.5) */
    font-family: 'VT323', 'Courier New', monospace;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

.menu-bar-left {
    display: flex;
    align-items: center;
    gap: 18px; /* Increased spacing between menu titles */
    padding-left: 14px; /* Moved 4px right (menu bar has 6px padding, so 6px + 14px = 20px) */
}

.apple-menu {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 32px; /* Match titlebar font size */
    font-weight: bold;
    padding: 4px 4px; /* Increased top/bottom padding */
    font-family: 'VT323', 'Courier New', monospace;
    -webkit-font-smoothing: none;
    line-height: 1; /* Allow padding to show */
}

.menu-title {
    cursor: pointer;
    padding: 8px 4px 6px 4px; /* top, right, bottom (reduced by 2px), left */
    font-size: 32px; /* Match titlebar font size */
    font-family: 'VT323', 'Courier New', monospace;
    -webkit-font-smoothing: none;
    line-height: 1; /* Allow padding to show */
}

.menu-title:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* Menu Dropdown */
.menu-with-dropdown {
    position: relative;
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    border: var(--window-border) solid var(--color-black);
    box-shadow: 
        inset -1px -1px 0 var(--color-white),
        inset 1px 1px 0 var(--color-black),
        2px 2px 0 var(--color-black);
    min-width: 200px;
    display: none;
    flex-direction: column;
    z-index: 2000;
    margin-top: 2px;
}

.menu-dropdown.active {
    display: flex;
}

.menu-item {
    padding: 8px 12px;
    color: var(--color-black);
    text-decoration: none;
    font-size: 22.5px;
    font-family: 'VT323', 'Courier New', monospace;
    -webkit-font-smoothing: none;
    border-bottom: 2px solid var(--color-black);
    cursor: pointer;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* Prevent window from covering icons */
.system-window {
    max-width: calc(100vw - 195px); /* 180px icons + 5px left + 2px border + 8px right padding */
}

.system-window.maximized {
    width: calc(100vw - 195px) !important; /* Account for icons, borders, and padding */
    max-width: calc(100vw - 195px);
}

/* Mobile: More conservative max-width */
@media (max-width: 768px) {
    .system-window {
        max-width: calc(100vw - 265px) !important;
    }
    
    .system-window.maximized {
        width: calc(100vw - 265px) !important;
        max-width: calc(100vw - 265px) !important;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .system-window {
        max-width: calc(100vw - 265px); /* Extra padding on mobile: 100px icons + 5px left + 2px border + 70px right padding + 88px extra safety */
    }
    
    .system-window.maximized {
        width: calc(100vw - 265px) !important;
        max-width: calc(100vw - 265px);
    }
}