/* assets/css/xp-style.css */
/* Styles for Windows XP Look and Feel - Version 1.2.0 */

/* Desktop */
#desktop {
    /* background-image set by PHP/Customizer */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #3A6EA5; /* Fallback XP blue */
    width: 100vw;
    height: calc(100vh - 30px); /* Full height minus taskbar */
    position: relative;
    overflow: hidden; /* Important: Keep desktop from scrolling */
    padding: 10px;
    box-sizing: border-box;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px; /* Standard XP icon width */
    margin: 10px;
    padding: 5px;
    cursor: pointer; /* Or 'default' and rely on JS for dblclick cursor change */
    text-align: center;
    float: left; /* Basic grid layout */
    border: 1px solid transparent;
    border-radius: 3px;
    position: relative; /* For potential focus outlines */
}

.desktop-icon:hover,
.desktop-icon:focus-within { /* More accessible hover/focus */
    background-color: rgba(50, 120, 220, 0.2); /* XP selection highlight (Luna Blue) */
    border: 1px dotted rgba(0, 0, 0, 0.4);
}
.desktop-icon:active {
    background-color: rgba(50, 120, 220, 0.3);
}
/* Add a specific focus style for keyboard navigation */
.desktop-icon:focus {
    outline: 1px dashed #000; /* Or a more XP-like focus ring */
    outline-offset: 1px;
}


.desktop-icon img {
    width: 32px; /* Common icon size */
    height: 32px;
    margin-bottom: 5px;
    image-rendering: pixelated; /* For retro icons if they are low-res */
}

.desktop-icon span {
    color: #FFFFFF;
    font-size: 11px; /* Tahoma 8pt is common */
    text-shadow: 1px 1px 1px #000000;
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.2;
    display: -webkit-box; /* For multi-line ellipsis (approximate) */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.4em; /* 2 lines approx */
}

/* Taskbar */
#taskbar {
    background: linear-gradient(to bottom, #245EDC 0%, #3F8CF3 100%); /* XP Blue gradient */
    border-top: 1px solid #4A8CF7;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* XP taskbar height */
    display: flex;
    align-items: center;
    padding: 0 3px; /* Padding for Start button and clock */
    z-index: 20000; /* Highest z-index for taskbar */
    box-sizing: border-box;
}

#start-button {
    background-color: #5CB85C; /* XP Green */
    background-image: linear-gradient(to bottom, #7BD97B 0%, #54A454 100%); /* XP Start button gradient */
    border: 1px solid #3C8C3C;
    border-radius: 3px;
    padding: 0 8px 0 2px; /* Space for image and text */
    margin-right: 5px;
    cursor: pointer;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; /* XP Start button font */
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    height: 26px; /* Slightly less than taskbar for visual effect */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 1px rgba(0,0,0,0.2);
    line-height: 26px; /* Vertically center text if no image */
}
#start-button:hover {
    background-image: linear-gradient(to bottom, #8BDF8B 0%, #63B363 100%);
}
#start-button:active, #start-button[aria-expanded="true"] {
    background-image: linear-gradient(to top, #7BD97B 0%, #54A454 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
#start-button:focus {
    outline: 1px dotted #FFF;
    outline-offset: -2px;
}

#start-button img {
    height: 22px; /* Adjust based on your image */
    width: auto;   /* Adjust based on your image */
    margin-right: 6px;
    margin-left: 3px;
}

#taskbar-apps {
    display: flex;
    flex-grow: 1;
    height: 100%;
    align-items: center;
    overflow: hidden; /* Hide excess tabs */
    padding: 0 2px; /* Small gap */
}

.taskbar-app-button {
    background: linear-gradient(to bottom, #5B9AF3 0%, #3E83DE 100%); /* XP Taskbar button gradient */
    border: 1px solid #2C5EA3;
    border-radius: 3px; /* Slightly more rounded */
    padding: 0 8px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 11px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px; /* XP typical max width */
    min-width: 60px; /* Prevent too small buttons */
    height: 22px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0px rgba(0,0,0,0.1);
    text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
    line-height: 22px; /* Center text */
}
.taskbar-app-button img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.taskbar-app-button.active, .taskbar-app-button:active {
    background: linear-gradient(to top, #5B9AF3 0%, #3E83DE 100%); /* Pressed look */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    font-weight: bold; /* Active task often bolded */
}
.taskbar-app-button:hover {
     background: linear-gradient(to bottom, #7BAEF7 0%, #5E93E2 100%);
}
.taskbar-app-button:focus {
    outline: 1px dotted #FFF;
    outline-offset: -2px;
}


#taskbar-clock {
    background-color: #306AC5; /* Slightly darker blue */
    border: 1px solid #2C5EA3;
    border-left: 1px solid #73A5E6; /* XP style highlight */
    padding: 0 8px;
    color: white;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    margin-left: 5px;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.15);
    flex-shrink: 0; /* Prevent clock from shrinking */
}

/* Start Menu */
.start-menu {
    background-color: #EBF3FE; /* XP Menu background */
    border: 1px solid #082E54; /* Dark blue border */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 30px; /* Above taskbar */
    left: 0;
    width: 380px; /* Approximate XP Start Menu width */
    /* display: none; Hidden by default, JS handles .active */
    flex-direction: column;
    z-index: 19999; /* Below taskbar, above windows */
    font-size: 11px;
    overflow: hidden; /* For rounded corners if any */
}

/* .start-menu.active is handled by JS by setting display:flex */

.start-menu-header {
    background: linear-gradient(to bottom, #5B9AF3 0%, #3E83DE 100%); /* XP Blue gradient */
    padding: 5px 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #082E54;
    height: 50px; /* Fixed height for header */
    box-sizing: border-box;
}

.start-menu-avatar {
    width: 40px;
    height: 40px;
    border: 1px solid #FFFFFF;
    margin-right: 10px;
    background-color: #FFF; /* Placeholder */
    border-radius: 2px;
    object-fit: cover;
}

.start-menu-username {
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.start-menu-body {
    display: flex;
    height: 350px; /* Approximate height, content might scroll */
    background-color: #F0F0F0; /* Main panel background */
}

.start-menu-main-panel {
    width: 55%; /* XP proportions */
    background-color: #FFFFFF; /* Left panel often white */
    border-right: 1px solid #B5C9E0; /* Separator line */
    overflow-y: auto;
    padding: 5px 0;
}

.start-menu-side-panel {
    width: 45%;
    background-color: #D4E5F7; /* Right panel light blue */
    overflow-y: auto;
    padding: 5px 0;
}

.start-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.start-menu-item {
    padding: 0; /* Let the <a> tag handle padding for full click area */
    color: #000000;
    cursor: pointer;
    display: flex; /* Ensure li takes full width for its child <a> */
    align-items: center;
    white-space: nowrap;
    font-size: 11px;
    position: relative; /* For focus outline on child a */
}
.start-menu-item a {
    padding: 6px 10px 6px 15px; /* Padding inside the link */
    color: #000000;
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.start-menu-item:hover > a,
.start-menu-item > a:hover,
.start-menu-item > a:focus {
    background-color: #316AC5; /* XP hover blue */
    color: white !important;
    outline: none; /* Remove default focus, rely on background */
}
.start-menu-item > a:focus { /* Add a visible focus style */
    outline: 1px dotted #FFF;
    outline-offset: -1px;
}


.start-menu-item-icon { /* Class for icons in walker */
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: contain;
}
.start-menu-item.separator {
    padding: 3px 0;
    height: auto;
}
.start-menu-item.separator hr {
    border: 0;
    border-top: 1px solid #B5C9E0; /* XP separator color */
    margin: 0 5px; /* Indent separator slightly */
}


.start-menu-footer {
    background-color: #EBF3FE; /* Match main menu bg */
    border-top: 1px solid #B5C9E0;
    padding: 5px 10px;
    text-align: right;
    height: 32px; /* Fixed height */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.start-menu-shutdown {
    color: #000000;
    text-decoration: none;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 3px;
}
.start-menu-shutdown:hover, .start-menu-shutdown:focus {
    background-color: #316AC5;
    color: white;
    border-color: #082E54;
    outline: none;
}
.start-menu-shutdown:focus {
    outline: 1px dotted #000;
    outline-offset: 1px;
}
.start-menu-shutdown img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}


/* Windows */
#window-container {
    position: absolute; /* Should be relative to #desktop or body */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to desktop icons initially */
}

.xp-window {
    background-color: #ECE9D8; /* XP window background "off-white" */
    border-top: 1px solid #FFFFFF; /* XP Window Border Style */
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    box-shadow: 1px 1px 0px #404040, 2px 2px 0px #404040, 3px 3px 0px #404040, 4px 4px 0px #404040, 5px 5px 0px #404040; /* Classic XP shadow */
    position: absolute;
    /* top, left, width, height set by JS */
    min-width: 250px;
    min-height: 150px;
    /* display: none; Hidden by default, JS handles .active */
    flex-direction: column;
    z-index: 100; /* Default z-index, JS manages active */
    pointer-events: all; /* Windows themselves should be interactive */
    border-radius: 6px 6px 0 0; /* XP top rounded corners */
    overflow: hidden; /* Important for iframe and rounded corners */
}

/* .xp-window.active is handled by JS by setting display:flex and z-index */

.xp-window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* Fill #desktop */
    height: 100% !important; /* Fill #desktop */
    border-radius: 0;
    border: none;
    box-shadow: none; /* No shadow when maximized */
}


.xp-window-titlebar {
    background: linear-gradient(to bottom, #245EDC 0%, #5086ED 4%, #3F8CF3 8%, #2D68D5 12%, #2A63CF 15%, #2A63CF 92%, #77A4E9 96%, #A0C0F3 100%); /* XP Titlebar Luna gradient */
    color: white;
    padding: 3px 3px 3px 8px; /* Fine-tuned padding */
    font-size: 12px; /* Tahoma 9pt bold */
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default; /* Default for titlebar, grab on draggable area */
    height: 26px; /* XP title bar height */
    border-bottom: 1px solid #082E54; /* Dark blue line under title */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.15);
    flex-shrink: 0;
    position: relative; /* For draggable handle */
}
.xp-window-titlebar-draggable-area { /* Make only this part draggable */
    flex-grow: 1;
    height: 100%;
    cursor: grab;
    display: flex;
    align-items: center;
    margin-right: 5px; /* Space before controls */
}
.xp-window-titlebar-draggable-area:active {
    cursor: grabbing;
}


.xp-window-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 3px;
}
.xp-window-titlebar-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    flex-shrink: 0;
}

.xp-window-controls {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xp-window-control-button {
    width: 21px;
    height: 21px;
    background-color: #D4E5F7; /* Light blue for buttons */
    border: 1px solid;
    border-color: #FFFFFF #082E54 #082E54 #FFFFFF; /* XP button border */
    border-radius: 2px;
    margin-left: 2px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Marlett", "Webdings"; /* Font for symbols if not using images */
    font-size: 12px; /* Adjust for symbols */
    color: #082E54; /* Dark blue symbols */
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0; /* Remove default button padding */
    box-shadow: 1px 1px 0px rgba(0,0,0,0.1); /* Subtle shadow */
}
.xp-window-control-button:hover {
    filter: brightness(1.05) saturate(1.2);
}
.xp-window-control-button:active {
    filter: brightness(0.95);
    border-color: #082E54 #FFFFFF #FFFFFF #082E54; /* Inverted border on press */
    box-shadow: none;
}
.xp-window-control-button:focus {
    outline: 1px dotted #000;
    outline-offset: -1px;
}


/* Specific icons using CSS background if preferred over JS setting, or as fallback */
.xp-window-minimize { /* background-image set by JS */ }
.xp-window-maximize { /* background-image set by JS */ }
.xp-window-restore { /* background-image set by JS; display: none; by JS */ }
.xp-window-close {
    /* background-image set by JS */
    background-color: #E81123; /* XP Close button red */
    border-color: #FFFFFF #A30000 #A30000 #FFFFFF;
    color: white;
}
.xp-window-close:hover { background-color: #F1707A; }
.xp-window-close:active { background-color: #B70000; border-color: #A30000 #FFFFFF #FFFFFF #A30000;}


.xp-window-content {
    padding: 0; /* No padding for iframe by default */
    font-size: 11px;
    flex-grow: 1;
    overflow: auto; /* Scrollbars if content overflows */
    background-color: #FFFFFF; /* Default content background */
    display: flex; /* For iframe to fill height */
    flex-direction: column; /* For iframe */
    position: relative; /* For loading overlay */
}

.xp-window-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* Remove extra space below iframe */
}

/* Resizer Handle (optional, can be styled further) */
.xp-window-resizer {
    width: 12px;
    height: 12px;
    background: transparent; /* Can be a small grip icon */
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    z-index: 1; /* Above content but below other controls if overlapping */
}


/* Context Menu */
.xp-context-menu {
    position: absolute;
    background-color: #F0F0F0; /* XP menu color */
    border: 1px solid;
    border-color: #FFFFFF #808080 #808080 #FFFFFF; /* XP menu border */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    z-index: 20001; /* Above taskbar */
    padding: 2px;
    min-width: 150px;
    font-size: 11px;
}
.xp-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.xp-context-menu li {
    padding: 5px 20px 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.xp-context-menu li:hover, .xp-context-menu li:focus {
    background-color: #316AC5; /* XP selection blue */
    color: white;
    outline: none;
}

/* Loading overlay for iframe content */
.xp-window-loading-overlay {
    position: absolute;
    top: 0; /* Cover entire content area */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Slightly more opaque */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; /* Above iframe but below title bar controls */
    transition: opacity 0.3s ease-out;
}
.xp-window-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.xp-window-loading-overlay span {
    padding: 10px 20px;
    background-color: #082E54; /* Dark blue */
    color: white;
    border-radius: 3px;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Properties Window Content */
.properties-content {
    padding: 10px;
    color: #000;
}
.properties-content h3 {
    margin-top: 0;
    font-size: 14px;
    color: #082E54;
}
.properties-content hr {
    border: 0;
    border-top: 1px solid #B5C9E0;
    margin: 10px 0;
}
.properties-content p {
    margin: 5px 0;
}