/* Mac System 1-6 Style Sheet - Based on system.css */
/* Recreating the classic Macintosh interface (1984-1991) */

/* ==================================
   FONTS
   ================================== */
@font-face {
    font-family: 'Chicago';
    src: url('/static/fonts/unified/ChicagoKare.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Chicago_12';
    src: url('/static/fonts/unified/ChicagoKare.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Monaco';
    src: url('/static/fonts/unified/Monaco.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geneva';
    src: url('/static/fonts/unified/Geneva.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geneva_9';
    src: url('/static/fonts/unified/Geneva.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==================================
   CSS VARIABLES
   ================================== */
:root {
    --black: #000000;
    --white: #f0f0f0; /* Classic Macintosh gray instead of harsh white */
    --gray: #c0c0c0;
    --dark-gray: #808080;
    --light-gray: #dfdfdf;
    --font-chicago: 'Chicago', 'Chicago_12', sans-serif;
    --font-geneva: 'Geneva', 'Geneva_9', sans-serif;
    --font-monaco: 'Monaco', monospace;
}

/* ==================================
   SCROLLBARS - Classic Mac Style
   ================================== */
::-webkit-scrollbar {
    background-color: var(--white);
    width: 22px;
    height: 22px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(45deg, var(--black) 25%, transparent 0, transparent 75%, var(--black) 0, var(--black)),
                linear-gradient(45deg, var(--black) 25%, transparent 0, transparent 75%, var(--black) 0, var(--black));
    background-color: var(--white);
    background-position: 0 0, 2px 2px;
    background-size: 4px 4px;
    border-left: 3px solid var(--black);
    width: 10px;
    margin-bottom: 0px;
}


/* Plain white thumb by default (no scrolling needed) */
::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border: 1px solid var(--black);
}

/* Default thumb - plain gray square when no gripper class */
.window-content::-webkit-scrollbar-thumb:vertical {
    background-color: #f0f0f0; /* Keep default gray background */
    border: 1px solid var(--black);
    border-right: none; /* Extend gripper 1px to the right */
    position: relative;
    z-index: 1; /* Ensure thumb renders on top of arrows */
    height: 20px !important; /* Force square dimensions */
    min-height: 20px !important; /* Prevent shrinking */
}

/* Vertical scrollbar thumb WITH gripper when scrollable - square shape */
.window-content.has-vertical-scroll::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(90deg, white 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(white 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(var(--black) 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(90deg, var(--black) 1px, transparent 1px) 0 0/2px 2px !important;
    background-color: #808080 !important;
    border: 1px solid var(--black);
    border-right: none; /* Extend gripper 1px to the right */
    position: relative;
    z-index: 1; /* Ensure thumb renders on top of arrows */
    height: 20px !important; /* Force square dimensions */
    min-height: 20px !important; /* Prevent shrinking */
}

/* Remove top border when thumb is at top (touching top arrow) */
.window-content.thumb-at-top::-webkit-scrollbar-thumb:vertical {
    border-top: none;
}

/* Ensure gripper is visible when both has-vertical-scroll AND thumb-at-top */
.window-content.has-vertical-scroll.thumb-at-top::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(90deg, white 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(white 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(var(--black) 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(90deg, var(--black) 1px, transparent 1px) 0 0/2px 2px !important;
    background-color: #808080 !important;
    border: 1px solid var(--black);
    border-right: none;
    border-top: none; /* Keep top border removed */
    height: 20px !important; /* Force square dimensions */
    min-height: 20px !important; /* Prevent shrinking */
}

/* Remove bottom border when thumb is at bottom (touching bottom arrow) */
.window-content.thumb-at-bottom::-webkit-scrollbar-thumb:vertical {
    border-bottom: none;
}

/* Ensure gripper is visible when both has-vertical-scroll AND thumb-at-bottom */
.window-content.has-vertical-scroll.thumb-at-bottom::-webkit-scrollbar-thumb:vertical {
    background: linear-gradient(90deg, white 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(white 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(var(--black) 1px, transparent 1px) 0 0/2px 2px,
                linear-gradient(90deg, var(--black) 1px, transparent 1px) 0 0/2px 2px !important;
    background-color: #808080 !important;
    border: 1px solid var(--black);
    border-right: none;
    border-bottom: none; /* Keep bottom border removed */
    height: 20px !important; /* Force square dimensions */
    min-height: 20px !important; /* Prevent shrinking */
}

/* Removed - using fake thumb instead */

::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
}

::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 0h22v24H0z'/%3E%3Cpath fill='%23000' d='M1.375 12.375h5.5V11h-5.5zM6.875 17.875h6.875V16.5H6.875zM6.875 17.875v-5.5H5.5v5.5zM9.625 5.5V4.125H8.25V5.5zM11 4.125V2.75H9.625v1.375zM19.25 12.375V11h-1.375v1.375zM17.875 11V9.625H16.5V11zM16.5 9.625V8.25h-1.375v1.375zM15.125 8.25V6.875H13.75V8.25zM13.75 6.875V5.5h-1.375v1.375zM12.375 5.5V4.125H11V5.5zM8.25 6.875V5.5H6.875v1.375zM6.875 8.25V6.875H5.5V8.25zM5.5 9.625V8.25H4.125v1.375zM4.125 11V9.625H2.75V11zM2.75 12.375V11H1.375v1.375zM15.125 17.875v-5.5H13.75v5.5zM13.75 12.375h5.5V11h-5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 22px;
    border-left: 1px solid var(--black);
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    border-right: none; /* No right border - connects to track */
    box-sizing: border-box;
}

::-webkit-scrollbar-button:vertical:start:active {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h22v24H0z'/%3E%3Cpath fill='%23fff' d='M1.375 12.378h5.5v-1.375h-5.5zM6.875 17.879h6.875V6.877H6.875zM6.875 17.879v-5.501H5.5v5.5zM9.625 5.501V4.126H8.25v1.375zM11 4.126V2.75H9.625v1.375zM19.25 12.378v-1.375h-1.375v1.375zM17.875 11.002V9.627H13.75v1.375zM16.5 9.627V8.252h-2.75v1.375zM15.125 8.252V6.877H13.75v1.375zM13.75 6.876V5.501h-1.375v1.375zM12.375 5.501V4.126h-2.75v1.375zM12.375 6.876V5.501h-5.5v1.375zM6.875 8.252V6.877H5.5v1.375zM6.875 9.627V8.252h-2.75v1.375zM6.875 11.002V9.627H2.75v1.375zM2.75 12.378v-1.375H1.375v1.375zM15.125 17.879v-5.501H13.75v5.5zM13.75 12.378h5.5v-1.375h-5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 22px;
    border: 1px solid var(--black);
    border-bottom: none;
    box-sizing: border-box;
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http%3A//www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 0h22v24H0z'/%3E%3Cpath fill='%23000' d='M1.375 8h5.5v1.375h-5.5zM6.875 2.5h6.875v1.375H6.875zM6.875 2.5V8H5.5V2.5zM9.625 14.875v1.375H8.25v-1.375zM11 16.25v1.375H9.625V16.25zM19.25 8v1.375h-1.375V8zM17.875 9.375v1.375H16.5V9.375zM16.5 10.75v1.375h-1.375V10.75zM15.125 12.125V13.5H13.75v-1.375zM13.75 13.5v1.375h-1.375V13.5zM12.375 14.875v1.375H11v-1.375zM8.25 13.5v1.375H6.875V13.5zM6.875 12.125V13.5H5.5v-1.375zM5.5 10.75v1.375H4.125V10.75zM4.125 9.375v1.375H2.75V9.375zM2.75 8v1.375H1.375V8zM15.125 2.5V8H13.75V2.5zM13.75 8h5.5v1.375h-5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 22px; /* Standard height */
    border-left: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    border-top: 1px solid var(--black);
    border-right: none; /* No right border - connects to track */
    box-sizing: border-box;
}

::-webkit-scrollbar-button:vertical:end:active {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='24' fill='none' xmlns='http%3A//www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h22v24H0z'/%3E%3Cpath fill='%23fff' d='M1.375 8.002h5.5v1.375h-5.5zM6.875 2.501h6.875v11.002H6.875zM6.875 2.501v5.501H5.5v-5.5zM9.625 14.879v1.375H8.25v-1.375zM11 16.254v1.375H9.625v-1.375zM19.25 8.002v1.375h-1.375v-1.375zM17.875 9.378v1.375H13.75v-1.375zM16.5 10.753v1.375h-2.75v-1.375zM15.125 12.128v1.375H13.75v-1.375zM13.75 13.503v1.375h-1.375v-1.375zM12.375 14.879v1.375h-2.75v-1.375zM12.375 13.503v1.375h-5.5v-1.375zM6.875 12.128v1.375H5.5v-1.375zM6.875 10.753v1.375h-2.75v-1.375zM6.875 9.378v1.375H2.75v-1.375zM2.75 8.002v1.375H1.375v-1.375zM15.125 2.501v5.501H13.75v-5.5zM13.75 8.002h5.5v1.375h-5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 22px; /* Standard height */
    border: 1px solid var(--black);
    border-top: none;
    box-sizing: border-box;
}


/* ==================================
   BODY & DESKTOP
   ================================== */
body {
    background: linear-gradient(90deg, var(--white) 21px, transparent 1%) 50%,
                linear-gradient(var(--white) 21px, transparent 1%) 50%,
                var(--black);
    background-attachment: fixed;
    background-size: 22px 22px;
    margin: 0;
    padding: 0;
    font-family: var(--font-chicago);
    color: var(--black);
    overflow: hidden; /* Disable scrolling on the desktop */
}

.desktop {
    position: relative;
    width: 100vw;
    height: calc(100vh - 48px); /* Adjusted for 48px menu bar */
    margin-top: 48px; /* Adjusted for 48px menu bar */
    overflow: hidden; /* Prevent desktop scrolling */
}

/* ==================================
   SYSTEM MENU BAR
   ================================== */
.system-menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px; /* Increased by 50% from 32px */
    background: var(--white);
    border-bottom: 2px solid var(--black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    font-family: var(--font-chicago);
    font-size: 27px; /* Increased proportionally */
}

/* Session LED indicator - Classic Mac style */
.session-led-wrapper {
    padding-left: 12px;
    padding-right: 15px;
}

.session-led {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    animation: pulse 2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* System clock styles */
.system-clock {
    font-family: var(--font-chicago);
    padding: 0 15px;
}

/* Improve touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
    .system-menu-bar {
        height: 56px;  /* Larger touch target */
        font-size: 24px;
    }
    
    .desktop {
        margin-top: 56px;
        height: calc(100vh - 56px);
    }
    
    .system-menu-item {
        min-width: 64px;  /* Minimum touch target size */
        padding: 0 20px;
    }
    
    .close-box,
    .zoom-box {
        width: 32px;
        height: 32px;
    }
    
    .mac-button {
        min-height: 48px;  /* Larger touch target for buttons */
        padding: 12px 24px;
    }
    
    /* Increase dropdown item height for touch */
    .system-dropdown-item {
        min-height: 48px;
        padding: 12px 16px;
    }
}

.system-menu-left {
    display: flex;
    align-items: center;
}

.system-menu-right {
    display: flex;
    align-items: center;
    padding-right: 12px; /* Add padding to move clock away from right edge */
}

.system-menu-item {
    padding: 8px 24px; /* Even more padding for better hover area */
    height: 48px; /* Full height of menu bar */
    line-height: 32px; /* Adjusted for vertical centering */
    cursor: pointer;
    position: relative;
    user-select: none;
    box-sizing: border-box;
}

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

.apple-logo {
    font-size: 24px; /* Increased proportionally */
}

.system-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    min-width: 200px;
    z-index: 10001;
}

.system-dropdown-item {
    display: block;
    padding: 5px 20px;
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
}

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

.system-dropdown-item.disabled {
    color: var(--gray);
    cursor: default;
}

.system-dropdown-item.disabled:hover {
    background: transparent;
    color: var(--gray);
}

.menu-separator {
    height: 1px;
    background: var(--black);
    margin: 2px 0;
}

/* ==================================
   WINDOWS
   ================================== */
.window,
.mac-window {
    background-color: var(--white);
    border: 2px solid var(--black);
    border-top-left-radius: 3px; /* Subtle rounded corner on top-left */
    box-sizing: border-box; /* Include border in dimensions */
    position: absolute;
    min-width: 400px; /* Increased default minimum to match JS */
    min-height: 300px; /* Increased by 50% from 200px */
    font-family: var(--font-geneva);
    overflow: hidden; /* Prevent content from extending outside */
    box-shadow: 1px 1px 0 var(--black); /* Drop shadow */
}

/* Inner aliasing border */
.mac-window::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--gray);
    pointer-events: none;
    z-index: 1;
}

/* Title Bar */
.title-bar,
.window-header {
    background-color: var(--white);
    height: 42px; /* Increased to accommodate larger title */
    min-height: 42px;
    max-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px 0 8px;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: move;
    user-select: none;
}

/* Create the stripe cluster as a pseudo-element - solid black lines */
.window-header::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 2px;
    right: 2px;
    height: 30px; /* Increased for larger header */
    /* Create exactly 6 horizontal lines scaled proportionally */
    background-image: 
        linear-gradient(#000 0, #000 3px, transparent 3px, transparent 30px),
        linear-gradient(#000 0, #000 3px, transparent 3px, transparent 30px),
        linear-gradient(#000 0, #000 3px, transparent 3px, transparent 30px),
        linear-gradient(#000 0, #000 3px, transparent 3px, transparent 30px),
        linear-gradient(#000 0, #000 3px, transparent 3px, transparent 30px),
        linear-gradient(#000 0, #000 3px, transparent 3px, transparent 30px);
    background-size: 100% 30px;
    background-position: 
        0 0,
        0 5px,
        0 10px,
        0 15px,
        0 20px,
        0 25px;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Single black line at bottom - extends to edges */
.window-header::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--black);
    z-index: 1; /* Ensure it renders properly */
}

.title-bar .title,
.window-title {
    font-family: var(--font-chicago);
    font-weight: normal;
    font-size: 27px; /* Match menu font size */
    letter-spacing: 0;
    background: var(--white);
    padding: 1px 15px; /* Minimal vertical padding */
    z-index: 2;
    white-space: nowrap;
    line-height: 30px; /* Match stripe height */
    margin: 0 auto;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
    top: -2px; /* Moved up another 1px */
}

.inactive-title-bar .title,
.mac-window:not(.active) .window-title {
    color: #a5a5a5;
}

/* Window Controls */
.close-box,
.zoom-box {
    width: 24px;  /* Slightly smaller than stripe height */
    height: 24px; /* Square shape */
    border: 2px solid var(--black); /* Thicker border */
    border-radius: 1px;
    background: var(--white);
    position: absolute;
    cursor: pointer;
    top: 5px; /* Moved up another 1px */
    z-index: 2;
    box-shadow: 0 0 0 1px var(--white);
}

.close-box {
    left: 10px;
}

.zoom-box {
    right: 10px;
}

/* Close button - crosshair explosion on click */
.close-box:active::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    box-shadow:
        /* Top line - scaled for larger box */
        0 -11px 0 0 var(--black),
        0 -10px 0 0 var(--black),
        0 -9px 0 0 var(--black),
        0 -8px 0 0 var(--black),
        0 -7px 0 0 var(--black),
        0 -6px 0 0 var(--black),
        0 -5px 0 0 var(--black),
        /* Bottom line */
        0 11px 0 0 var(--black),
        0 10px 0 0 var(--black),
        0 9px 0 0 var(--black),
        0 8px 0 0 var(--black),
        0 7px 0 0 var(--black),
        0 6px 0 0 var(--black),
        0 5px 0 0 var(--black),
        /* Left line */
        -11px 0 0 0 var(--black),
        -10px 0 0 0 var(--black),
        -9px 0 0 0 var(--black),
        -8px 0 0 0 var(--black),
        -7px 0 0 0 var(--black),
        -6px 0 0 0 var(--black),
        -5px 0 0 0 var(--black),
        /* Right line */
        11px 0 0 0 var(--black),
        10px 0 0 0 var(--black),
        9px 0 0 0 var(--black),
        8px 0 0 0 var(--black),
        7px 0 0 0 var(--black),
        6px 0 0 0 var(--black),
        5px 0 0 0 var(--black),
        /* Diagonal lines - NW to SE */
        -9px -9px 0 0 var(--black),
        -8px -8px 0 0 var(--black),
        -7px -7px 0 0 var(--black),
        -6px -6px 0 0 var(--black),
        /* Diagonal lines - NE to SW */
        9px -9px 0 0 var(--black),
        8px -8px 0 0 var(--black),
        7px -7px 0 0 var(--black),
        6px -6px 0 0 var(--black),
        /* Diagonal lines - SW to NE */
        -9px 9px 0 0 var(--black),
        -8px 8px 0 0 var(--black),
        -7px 7px 0 0 var(--black),
        -6px 6px 0 0 var(--black),
        /* Diagonal lines - SE to NW */
        9px 9px 0 0 var(--black),
        8px 8px 0 0 var(--black),
        7px 7px 0 0 var(--black),
        6px 6px 0 0 var(--black);
}

/* Zoom button - two overlapping outlined boxes */
.zoom-box::before,
.zoom-box::after {
    content: '';
    position: absolute;
    background: transparent;
    border: 2px solid var(--black); /* Thicker border to match box */
}

.zoom-box::before {
    width: 8px;
    height: 8px;
    top: 3px;
    left: 3px;
}

.zoom-box::after {
    width: 8px;
    height: 8px;
    top: 8px;
    left: 8px;
}

/* Window Content */
.window-pane,
.window-content {
    font-size: 21px; /* Increased from 14px */
    position: absolute; /* Keep absolute for window positioning */
    top: 39px; /* Reduced by 1px to overlap with header border */
    left: 0;
    right: 0;
    bottom: -1px; /* Extend 1px beyond mac-window bottom to compensate for top adjustment */
    overflow-y: auto; /* Only show vertical scrollbar when needed */
    overflow-x: hidden; /* Never show horizontal scrollbar */
    background: var(--white);
    font-family: var(--font-geneva);
    padding-left: 40px; /* Much more padding on left */
    padding-right: 40px; /* Much more padding on right */
    padding-bottom: 2px; /* Add padding to preserve bottom border visibility */
    box-sizing: border-box; /* Include padding in dimensions */
}


/* Scrollbar styling */
.window-content::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
}

.window-content::-webkit-scrollbar:vertical {
    width: 22px;
    position: relative;
}

.content,
main.content {
    padding: 15px; /* More padding for content */
    /* Remove absolute positioning - let content flow naturally */
}

/* Window States */
.mac-window.active {
    z-index: 1000;
}

/* Zoomed state handled by JavaScript for proper constraint handling */
.mac-window.zoomed {
    /* Visual indicator that window is zoomed */
    /* Actual sizing handled in JavaScript to constrain to viewport */
}

/* ==================================
   BUTTONS
   ================================== */
.btn,
.mac-button {
    background: var(--white);
    border: 2px solid var(--black); /* Thicker border */
    border-radius: 5px;
    box-shadow: 0 0 0 0.5px var(--black);
    color: var(--black);
    cursor: pointer;
    font-family: var(--font-chicago);
    font-size: 18px; /* Scaled proportionally */
    height: 30px; /* 1.5x of 20px */
    min-width: 88px; /* 1.5x of 59px (rounded) */
    padding: 2px 12px; /* Minimal padding */
    text-align: center;
    text-decoration: none;
    display: inline-flex; /* Use flexbox for better centering */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    line-height: 1; /* Reset line-height for flexbox */
    box-sizing: border-box; /* Include border in dimensions */
}

.btn-default {
    background: var(--white);
    border: 3px solid var(--black);
    border-radius: 7px;
    box-shadow: 0 0 0 1px var(--black);
    color: var(--black);
    cursor: pointer;
    font-family: var(--font-chicago);
    font-size: 18px; /* Scaled proportionally */
    font-weight: bold;
    height: 30px; /* 1.5x of 20px */
    min-width: 88px; /* 1.5x of 59px (rounded) */
    padding: 2px 12px; /* Minimal padding */
    text-align: center;
    text-decoration: none;
    display: inline-flex; /* Use flexbox for better centering */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    line-height: 1; /* Reset line-height for flexbox */
    box-sizing: border-box; /* Include border in dimensions */
}

.btn:active,
.mac-button:active {
    background: var(--black);
    border-radius: 6px;
    color: var(--white);
}

.btn-default:active {
    background: var(--black);
    border-radius: 12px;
    color: var(--white);
}

.btn:disabled,
.mac-button:disabled {
    background: var(--white);
    border: 1.5px solid var(--black);
    color: #b6b7b8;
    cursor: default;
    opacity: 0.6;
}

.btn-default:disabled {
    background: var(--white);
    color: #b6b7b8;
    cursor: default;
}

/* ==================================
   FORMS
   ================================== */
input,
textarea,
select {
    border: 2px solid var(--black); /* Thicker border */
    font-family: var(--font-geneva);
    font-size: 21px; /* Match content font size */
    padding: 6px; /* Increased padding */
    background: var(--white);
    color: var(--black);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    background: var(--black);
    color: var(--white);
}

/* Radio Buttons */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px; /* Increased from 12px */
    height: 18px; /* Increased from 12px */
    border: 2px solid var(--black); /* Thicker border */
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px; /* Increased spacing */
}

input[type="radio"]:checked {
    background: radial-gradient(circle, var(--black) 40%, var(--white) 40%);
}

/* Checkboxes */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px; /* Increased from 13px */
    height: 20px; /* Increased from 13px */
    border: 2px solid var(--black); /* Thicker border */
    background: var(--white);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px; /* Increased spacing */
    position: relative;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8zM9 9h1v1H9zM10 10h1v1h-1zM11 11h1v1h-1zM11 0h1v1h-1zM10 1h1v1h-1zM9 2h1v1H9zM8 3h1v1H8zM7 4h1v1H7zM6 5h1v1H6zM5 6h1v1H5zM4 7h1v1H4zM3 8h1v1H3zM2 9h1v1H2zM1 10h1v1H1zM0 11h1v1H0z'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* Select Dropdown */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='17' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 0h17v17H0z'/%3E%3Cpath fill='%23000' d='M2 5h13v1H2zM4 7h9v1H4zM5 8h7v1H5zM6 9h5v1H6zM7 10h3v1H7zM8 11h1v1H8zM3 6h11v1H3z'/%3E%3C/svg%3E");
    background-position: right 2px center;
    background-repeat: no-repeat;
    padding-right: 25px;
    cursor: pointer;
}

/* ==================================
   DIALOGS & ALERTS
   ================================== */
.standard-dialog,
.modal-dialog,
.alert-box {
    background-color: var(--white);
    border: 2px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    padding: 10px;
}

.modal-dialog,
.alert-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    min-width: 300px;
}

.alert-contents,
.modal-contents {
    padding: 10px;
    font-family: var(--font-geneva);
    font-size: 14px;
}

/* ==================================
   TYPOGRAPHY
   ================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-chicago);
    font-weight: normal;
    margin: 10px 0;
}

h1 { font-size: 27px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 18px; }

p {
    margin: 10px 0;
    line-height: 1.4;
}

a {
    color: var(--black);
    text-decoration: underline;
}

hr {
    border: none;
    border-top: 1px solid var(--black);
    margin: 10px 0;
}

/* ==================================
   LISTS
   ================================== */
ul, ol {
    margin: 10px 0;
    padding-left: 20px;
}

li {
    margin: 5px 0;
}

/* ==================================
   UTILITIES
   ================================== */
.hidden {
    display: none;
}

.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ==================================
   RESIZE HANDLES
   ================================== */
.resize-handle {
    position: absolute;
    z-index: 10;
}

.resize-handle-n { top: 0; left: 5px; right: 5px; height: 5px; cursor: n-resize; }
.resize-handle-s { bottom: 0; left: 5px; right: 5px; height: 5px; cursor: s-resize; }
.resize-handle-e { top: 5px; right: 0; bottom: 5px; width: 5px; cursor: e-resize; }
.resize-handle-w { top: 5px; left: 0; bottom: 5px; width: 5px; cursor: w-resize; }
.resize-handle-ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; }
.resize-handle-nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; }
.resize-handle-se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
.resize-handle-sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; }

/* ==================================
   RESPONSIVE
   ================================== */
@media (max-width: 640px) {
    .mac-window {
        width: 90vw !important;
        left: 5vw !important;
        top: 30px !important;
    }
}