/* ===== WINDOW MANAGER STYLES ===== */

/* Common window styles */
.window {
    transition: box-shadow var(--transition-normal);
    will-change: transform, opacity;
}

/* Windows in absolute position (after movement) */
.window[style*="position: absolute"] {
    transition-property: none;
}

/* Window header - draggable area */
.window-header {
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap: var(--space-xs);
}

/* Window states */
.monitor-window.dragging,
.terminal-window.dragging,
.logo-window.dragging,
.chat-window.dragging,
.news-window.dragging {
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.5);
    opacity: 0.95;
}

.monitor-window.resizing,
.terminal-window.resizing,
.logo-window.resizing,
.chat-window.resizing,
.news-window.resizing {
    box-shadow: var(--glow-primary);
}

/* Prevent text selection while interacting */
.dragging .window-header,
.resizing {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ===== WINDOW CONTROLS ===== */

/* Control buttons container */
.window-controls {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    margin-left: auto;
}

/* Base styles for ALL control buttons - applied directly via selectors */
.window-control.minimize,
.refresh-chat,
.close-schedule,
.close-request,
.close-visual,
.close-data,
.close-modal {
    /* Common base styles for all control buttons */
    min-width: 1rem;
    min-height: 1rem;
    max-width: 1.5rem;
    max-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: revert;
    border-color: #D6DADE;
    background: #D6DADE;
    cursor: pointer;
    padding: 0.125rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

/* Base hover state for most buttons */
@media (hover: hover) {
    .window-control.minimize:hover,
    .refresh-chat:hover {
        background: #00000033;
    }

    .close-schedule:hover,
    .close-request:hover,
    .close-visual:hover,
    .close-data:hover,
    .close-modal:hover {
        background: #00000033;
        color: var(--theme-error);
    }
}

/* Additional specific styles */
.window-control {
    padding: 0;
    border: none;
    background: transparent;
}

/* Specific close button styling if it exists */
.window-control.close {
    color: #ff5555;
}

/* Close button hover - desktop only with precise pointer */
@media (hover: hover) and (pointer: fine) {
    .window-control.close:hover {
        background: #ff5555;
        color: white;
    }
}
 
/* Touch feedback for mobile */
.window-control.close:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

/* Text hiding for buttons with spans */
.refresh-chat span {
    display: none;
}

/* Icon styles */
.minimize-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all var(--transition-fast);
    pointer-events: none;
    transform: scale(1.1);
}

/* Additional styles for modal close buttons */
.close-schedule,
.close-request,
.close-visual,
.close-data,
.close-modal {
    color: var(--window-header-text);
    
    margin-left: auto;
}

/* ===== RESIZE HANDLES ===== */

/* Base resize handle */
.resize-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Show handles on window hover - desktop only with precise pointer */
@media (hover: hover) and (pointer: fine) {
    .monitor-window:hover .resize-handle,
    .terminal-window:hover .resize-handle,
    .logo-window:hover .resize-handle,
    .chat-window:hover .resize-handle,
    .news-window:hover .resize-handle {
        opacity: 1;
    }
}

/* Visual feedback on handle hover */
@media (hover: hover) {
    .resize-handle:hover {
        background: rgba(116, 255, 149, 0.3);
    }
}
/* Handle positions and cursors */
.resize-n, .resize-s {
    left: 0;
    right: 0;
    height: 0.4rem;
    cursor: ns-resize;
}

.resize-n {
    top: 0;
}

.resize-s {
    bottom: 0;
}

.resize-e, .resize-w {
    top: 0;
    bottom: 0;
    width: 0.4rem;
    cursor: ew-resize;
}

.resize-e {
    right: 0;
}

.resize-w {
    left: 0;
}

.resize-se {
    bottom: 0;
    right: 0;
    width: 1rem;
    height: 1rem;
    cursor: nwse-resize;
    opacity: 1;
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 15;
}

/* Resize grip icon */
.resize-se::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background-image: url('../assets/images/icons/minimized/resize_grip.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

/* Resize grip hover - desktop only with precise pointer */
@media (hover: hover) and (pointer: fine) {
    .resize-se:hover::before {
        opacity: 1;
    }
}

/* ===== MINIMIZED WINDOWS ===== */

/* Container for minimized window icons */
.minimized-windows {
    position: absolute;
    left: var(--space-sm);
    bottom: 0;
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-xs) 0;
    z-index: 10;
    height: var(--footer-height);
    width: auto;
    max-width: 50%;
}

/* Minimized window icon button */
.minimized-window-icon {
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-fast);
    padding: calc(var(--space-xs) / 2);
    width: calc(var(--footer-height) - var(--space-xs));
    height: calc(var(--footer-height) - var(--space-xs));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Minimized window icon hover - desktop only with precise pointer */
@media (hover: hover) and (pointer: fine) {
    .minimized-window-icon:hover {
        transform: translateY(-0.125rem);
    }
}
 
/* Touch feedback for mobile */
.minimized-window-icon:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Icon image styling */
.minimized-icon-img {
    width: calc(var(--footer-height) - var(--space-md));
    height: calc(var(--footer-height) - var(--space-md));
    max-width: var(--icon-size-md);
    max-height: var(--icon-size-md);
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(76%) sepia(83%) saturate(1067%) hue-rotate(81deg) brightness(102%) contrast(101%);
    transition: all var(--transition-fast);
}

/* Minimized icon image hover - desktop only with precise pointer */
@media (hover: hover) and (pointer: fine) {
    .minimized-window-icon:hover .minimized-icon-img {
        filter: brightness(0) saturate(100%) invert(76%) sepia(83%) saturate(1067%) hue-rotate(81deg) brightness(120%) contrast(101%);
        transform: scale(1.1);
    }
}

/* Hide old icon/title elements */
.minimized-window-icon .icon,
.minimized-window-icon .title {
    display: none;
}

/* ===== WINDOW ANIMATIONS ===== */

/* Common animation properties */
.window-minimizing,
.window-restoring {
    pointer-events: none;
    visibility: visible;
    overflow: hidden;
    transform-origin: center center;
}

/* Minimize animation */
.window-minimizing {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Restore animation */
.window-restoring {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.6, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

/* Force logo-window to use block display during animations (overrides flex) */
.logo-window.window-minimizing,
.logo-window.window-restoring {
    display: block;
}

/* Disable aspect-ratio during animations to prevent layout recalculation */
.logo-window.window-minimizing .logo-content,
.logo-window.window-restoring .logo-content {
    aspect-ratio: unset;
}

/* Minimized state */
.window-minimized {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -9999px;
    left: -9999px;
}

/* Keep visibility during animations */
.window-minimizing.window-minimized,
.window-restoring.window-minimized {
    visibility: visible;
    display: block;
}

/* Smooth transitions for programmatic movements */
.window-transitioning {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== INTERFACE ADJUSTMENTS ===== */

/* Content area adapts to window positions */
.interface-content {
    transition: min-height 0.05s ease;
}

/* Empêche les fenêtres de passer sous le footer */
.window[style*="position: absolute"] {
    max-height: calc(100vh - var(--footer-height) - var(--space-md));  /* Limite la hauteur max */
}

/* Center footer status */
.footer-status {
    position: relative;
    z-index: 1;
}

/* ===== BROWSER COMPATIBILITY FIXES ===== */

/* Ensure consistent box model across browsers */
.window {
    box-sizing: border-box;
}

/* Prevent overflow on interface content */
.interface-content {
    position: relative;
}

/* Ensure windows respect container boundaries */
.interface-content > .window {
    max-width: 100%;
}

/* ===== UTILITY CLASSES ===== */

/* Hidden window container state */
.window-container-hidden {
    visibility: hidden;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Window states */
.window-dragging {
    /* Moved from inline styles */
    cursor: move;
    user-select: none;
}

.window-resizing {
    /* Moved from inline styles */
    cursor: inherit;
    user-select: none;
}

/* ===== RESPONSIVE BEHAVIOR ===== */

/* Signal monitor window narrow layout */
.monitor-window .monitor-flex-container.narrow-window {
    flex-direction: column;
}

.monitor-window .monitor-flex-container.narrow-window .playlist-monitor {
    order: 0;
    width: 100%;
}

.monitor-window .monitor-flex-container.narrow-window .track-history-monitor {
    order: 1;
    width: 100%;
    margin-top: var(--space-md);
}

/* Browser resize optimization */
.resizing-browser .window {
    transition: all 0.05s linear;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .window-controls,
    .resize-handle,
    .minimized-windows {
        display: none;
    }
    
    .window {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
    }
}

/* Small desktop screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .window-control.minimize,
    .refresh-chat {
        width: calc(var(--font-size-window-header) * 1.1);
        height: calc(var(--font-size-window-header) * 1.1);
    }
}