/* ========================================
   PERFECT RESPONSIVENESS - NO BUGS!
   Comprehensive mobile-first approach
   ======================================== */

/* Prevent zoom on double-tap (iOS Safari) */
* {
    touch-action: manipulation;
}

/* Prevent text size adjustment */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Ensure body fills viewport properly */
body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Fix iOS Safari 100vh issue */
.desktop {
    height: 100vh;
    height: -webkit-fill-available;
}

/* ========================================
   DESKTOP ICONS - PERFECT SCALING
   No shrinking, always readable
   ======================================== */

/* Base - Desktop (Default) */
.desktop-icon {
    min-width: 80px !important;
    min-height: 90px !important;
    max-width: 120px;
    width: 100%;
    aspect-ratio: auto !important;
}

.icon-image {
    min-width: 50px !important;
    min-height: 50px !important;
    width: clamp(50px, 8vw, 70px);
    height: clamp(50px, 8vw, 70px);
    flex-shrink: 0;
}

.icon-label {
    min-height: 2.5em !important;
    width: 100%;
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
    line-height: 1.3 !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    overflow: hidden;
}

/* ========================================
   TASKBAR - ALWAYS ACCESSIBLE
   ======================================== */

.taskbar {
    min-height: 50px !important;
    height: clamp(50px, 8vh, 60px);
    padding: 0 max(10px, 1vw);
}

.start-button {
    min-width: 40px;
    min-height: 40px;
    padding: 0 clamp(12px, 2vw, 20px);
    font-size: clamp(0.85rem, 2vw, 1rem);
    white-space: nowrap;
}

.taskbar-window {
    min-height: 36px;
    padding: 0 clamp(10px, 2vw, 15px);
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
}

.lang-option {
    min-width: 32px !important;
    min-height: 32px !important;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    flex-shrink: 0;
}

.tray-time {
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    white-space: nowrap;
}

/* ========================================
   WINDOWS - PERFECT ON ALL DEVICES
   ======================================== */

.window {
    min-width: 300px !important;
    max-width: calc(100vw - 20px) !important;
    overflow-y: auto !important;
}

/* Ensure window content scrolls properly */
.window-content {
    overflow-y: auto;
    max-height: 100%;
}

.window-header {
    min-height: 40px !important;
    padding: 0 clamp(10px, 2vw, 15px);
    touch-action: none; /* Prevent accidental scroll while dragging */
}

.window-title {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

.window-controls button {
    min-width: 30px !important;
    min-height: 30px !important;
    width: clamp(30px, 5vw, 36px);
    height: clamp(30px, 5vw, 36px);
    font-size: clamp(0.8rem, 2vw, 1rem);
}

.window-content {
    font-size: clamp(0.85rem, 2vw, 1rem);
    line-height: 1.6;
}

/* ========================================
   START MENU - ALWAYS USABLE
   ======================================== */

.start-menu {
    width: clamp(320px, 90vw, 400px) !important;
    max-height: calc(100vh - 80px) !important;
}

.menu-item {
    min-height: 44px !important; /* Touch target minimum */
    padding: clamp(10px, 2vh, 12px) clamp(12px, 3vw, 15px);
    font-size: clamp(0.85rem, 2.2vw, 0.95rem);
}

.menu-item i {
    min-width: 20px;
    font-size: clamp(1rem, 3vw, 1.2rem);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Large Tablets & Small Desktops (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: clamp(15px, 2vw, 20px);
    }
}

/* Tablets Portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 15px;
        padding: 15px;
        padding-top: 75px;
    }
    
    .window {
        min-width: 90vw !important;
        width: 90vw !important;
    }
}

/* Tablets Landscape (568px - 767px) */
@media (min-width: 568px) and (max-width: 767px) and (orientation: landscape) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 12px;
        padding: 12px;
        padding-bottom: 70px;
    }
    
    .taskbar {
        height: 50px !important;
    }
    
    .icon-image {
        width: clamp(45px, 10vw, 55px);
        height: clamp(45px, 10vw, 55px);
    }
}

/* Mobile Portrait & Small Devices (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 12px;
        padding: 12px;
        padding-bottom: 70px;
    }
    
    .icon-image {
        width: 50px !important;
        height: 50px !important;
    }
    
    .icon-label {
        font-size: 0.72rem !important;
    }
    
    .window {
        min-width: 95vw !important;
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: calc(100vh - 70px) !important;
        top: 10px !important;
        left: 2.5vw !important;
    }
    
    .window-content {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    .start-menu {
        width: 95vw !important;
    }
}

/* Small Mobile (320px - 479px) */
@media (max-width: 479px) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 10px;
        padding: 10px;
        padding-bottom: 65px;
    }
    
    .desktop-icon {
        min-width: 70px !important;
        min-height: 85px !important;
    }
    
    .icon-image {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    .icon-label {
        font-size: 0.68rem !important;
        min-height: 2.2em !important;
    }
    
    .taskbar {
        height: 55px !important;
        padding: 0 8px;
    }
    
    .start-button {
        min-width: 80px !important;
    }
    
    .start-button span {
        font-size: 0;
    }
    
    .start-button span::before {
        content: 'Wulf';
        font-size: 0.85rem;
        font-weight: 600;
    }
    
    .window {
        min-width: calc(100vw - 10px) !important;
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100vh - 70px) !important;
        top: 5px !important;
        left: 5px !important;
        height: auto !important;
    }
    
    .window-content {
        font-size: 0.88rem !important;
        max-height: calc(100vh - 115px) !important;
        overflow-y: auto !important;
    }
    
    .start-menu {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
    }
    
    .menu-item {
        font-size: 0.82rem !important;
    }
}

/* Extra Small Mobile - Instagram/WhatsApp (< 400px) */
@media (max-width: 399px) {
    .desktop-icons {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px;
        padding: 8px;
        padding-bottom: 62px;
    }
    
    .desktop-icon {
        min-width: 65px !important;
        min-height: 80px !important;
    }
    
    .icon-image {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.3rem !important;
    }
    
    .icon-label {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }
    
    .taskbar {
        height: 52px !important;
    }
    
    .start-button {
        min-width: 36px !important;
        padding: 0 8px !important;
    }
    
    .lang-option {
        min-width: 28px !important;
        min-height: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    .language-switcher {
        gap: 4px !important;
    }
    
    .tray-time {
        font-size: 0.72rem !important;
    }
    
    .window {
        top: 5px !important;
        left: 4px !important;
        max-height: calc(100vh - 65px) !important;
    }
    
    .window-content {
        max-height: calc(100vh - 110px) !important;
    }
}

/* Ultra Small (< 360px) - Very old devices */
@media (max-width: 359px) {
    .desktop-icons {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }
    
    .icon-image {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 1.2rem !important;
    }
    
    .icon-label {
        font-size: 0.62rem !important;
    }
}

/* ========================================
   LANDSCAPE SPECIFIC FIXES
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .desktop-icons {
        padding-bottom: 60px !important;
        padding-top: 10px !important;
    }
    
    .taskbar {
        height: 48px !important;
    }
    
    .start-menu {
        max-height: calc(100vh - 60px) !important;
    }
    
    .window {
        max-height: calc(100vh - 60px) !important;
    }
}

/* ========================================
   TOUCH IMPROVEMENTS
   ======================================== */

/* Minimum touch target size (44px x 44px per Apple HIG) */
.desktop-icon,
.menu-item,
.start-button,
.window-controls button,
.taskbar-window {
    min-width: 44px;
    min-height: 44px;
}

/* Prevent text selection on tap */
.desktop-icon,
.menu-item,
.start-button,
.window-controls button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Allow text selection in content */
.window-content,
.window-content * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Better scroll on mobile */
.desktop-icons,
.start-menu-content,
.window-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ========================================
   FORM INPUTS - MOBILE FRIENDLY
   ======================================== */

input,
textarea,
select,
button {
    font-size: 16px !important; /* Prevent zoom on iOS */
    min-height: 44px;
}

@media (min-width: 768px) {
    input,
    textarea,
    select {
        font-size: 0.95rem !important;
    }
}

/* ========================================
   PREVENT COMMON MOBILE BUGS
   ======================================== */

/* Fix position fixed on iOS */
@supports (-webkit-touch-callout: none) {
    .taskbar,
    .start-menu {
        position: -webkit-sticky;
        position: sticky;
    }
}

/* Prevent horizontal scroll */
body,
.desktop {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix 100vh on mobile browsers with address bar */
@supports (height: 100dvh) {
    .desktop {
        height: 100dvh;
    }
    
    .window {
        max-height: calc(100dvh - 70px);
    }
}

/* ========================================
   HIGH DPI DISPLAYS (Retina, etc)
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .icon-image,
    .window-controls button {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ========================================
   PRINT STYLES (Bonus)
   ======================================== */

@media print {
    .taskbar,
    .start-menu,
    .desktop-icons {
        display: none;
    }
    
    .window {
        position: static;
        width: 100%;
        height: auto;
        border: 1px solid #000;
    }
}

/* ========================================
   ACCESSIBILITY - SCREEN READERS
   ======================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for animations */
.window,
.desktop-icon,
.start-menu {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}