/* ============================================
   MOBILE RESPONSIVE - EshxnOS
   ============================================ */

/* Hide mobile-only elements on desktop */
.snake-touch-controls {
    display: none;
}

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /* Top Bar - Simplify */
    .top-bar-menu {
        gap: 8px;
    }
    
    .top-bar-dropdown-trigger,
    .top-bar-link {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .top-bar-right .clock {
        font-size: 11px;
    }
    
    /* Desktop Icons */
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 80px);
        gap: 16px;
        padding: 16px;
    }
    
    .desktop-icon {
        width: 75px;
    }
    
    /* Taskbar Apps */
    .taskbar-apps {
        gap: 4px;
    }
    
    .taskbar-app {
        width: 40px;
        height: 40px;
    }
    
    /* Windows - Smaller default */
    .window {
        max-width: calc(100vw - 40px) !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    /* Portfolio Grid */
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    /* Resume Skills */
    .resume-skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* ========== TOP BAR ========== */
    .top-bar {
        padding: 0 12px;
        height: 36px;
    }
    
    .top-bar-logo {
        font-size: 12px;
        gap: 6px;
    }
    
    .top-bar-logo img {
        width: 12px;
        height: 12px;
    }
    
    .top-bar-menu {
        display: none;
    }
    
    .top-bar-right {
        gap: 10px;
    }
    
    .top-bar-resume {
        padding: 4px 10px;
        font-size: 11px;
    }
    
    .top-bar-resume span {
        display: none;
    }
    
    .top-bar-music {
        max-width: 100px;
    }
    
    .top-bar-music .now-playing-text {
        display: none;
    }
    
    .clock {
        font-size: 11px !important;
    }
    
    /* ========== DESKTOP ========== */
    .desktop {
        padding-top: 44px;
        padding-bottom: 70px;
    }
    
    /* ========== DESKTOP ICONS ========== */
    .desktop-icons {
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 70px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 16px 12px;
        overflow-y: auto;
        align-content: start;
    }
    
    .desktop-icon {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
        padding: 12px 8px;
    }
    
    .desktop-icon i {
        font-size: 28px;
    }
    
    .desktop-icon span {
        font-size: 10px;
        margin-top: 6px;
    }
    
    /* ========== BOTTOM WIDGETS ========== */
    .bottom-widgets {
        bottom: 80px;
        right: 12px;
        gap: 8px;
    }
    
    .widget-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    
    /* ========== TASKBAR ========== */
    .taskbar {
        height: 64px;
        padding: 8px 12px;
    }
    
    .taskbar-left {
        flex: 1;
        overflow: hidden;
    }
    
    .start-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .start-btn img {
        width: 18px;
        height: 18px;
    }
    
    .search-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .taskbar-apps {
        flex: 1;
        overflow-x: auto;
        gap: 6px;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .taskbar-apps::-webkit-scrollbar {
        display: none;
    }
    
    .taskbar-app {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }
    
    .taskbar-app i {
        font-size: 16px;
    }
    
    /* Hide tooltips on mobile */
    .taskbar-app::before,
    .taskbar-app::after {
        display: none !important;
    }
    
    .taskbar-right {
        flex-shrink: 0;
    }
    
    .taskbar-tray {
        display: none;
    }
    
    .taskbar-clock {
        padding: 6px 10px;
    }
    
    .taskbar-clock .time {
        font-size: 12px;
    }
    
    .taskbar-clock .date {
        font-size: 9px;
    }
    
    /* ========== START MENU ========== */
    .start-menu {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 64px !important;
        top: auto !important;
        width: 100% !important;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    
    .start-menu.active {
        transform: translateY(0);
    }
    
    .start-menu-apps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 16px;
        max-height: calc(70vh - 140px);
        overflow-y: auto;
    }
    
    .start-menu-label {
        grid-column: 1 / -1;
        padding: 8px 0;
    }
    
    .start-menu-item {
        flex-direction: column;
        padding: 16px 8px;
        text-align: center;
        border-radius: var(--radius);
    }
    
    .start-menu-item i {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .start-menu-item span {
        font-size: 11px;
    }
    
    .start-menu-footer {
        padding: 12px 16px;
    }
    
    /* ========== SEARCH POPUP ========== */
    .search-popup {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 64px !important;
        top: auto !important;
        width: 100% !important;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    
    .search-popup.active {
        transform: translateY(0);
    }
    
    .search-popup-results {
        max-height: calc(60vh - 70px);
    }
    
    /* ========== WINDOWS - FULLSCREEN ========== */
    .window {
        position: fixed !important;
        top: 36px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 64px !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    
    .window.minimized {
        transform: translateY(100vh) !important;
    }
    
    .window-header {
        padding: 12px 16px;
        cursor: default;
    }
    
    .window-title {
        font-size: 14px;
    }
    
    .window-btn {
        width: 14px;
        height: 14px;
    }
    
    /* Hide maximize button on mobile */
    .window-btn.maximize {
        display: none;
    }
    
    .window-content {
        padding: 16px;
        height: calc(100% - 48px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hide resize handle on mobile */
    .resize-handle {
        display: none;
    }
    
    /* ========== LOCK SCREEN ========== */
    .lock-screen {
        padding: 40px 24px;
    }
    
    .lock-avatar {
        width: 80px;
        height: 80px;
    }
    
    .lock-avatar i {
        font-size: 36px;
    }
    
    .lock-name {
        font-size: 20px;
    }
    
    .lock-input-wrap {
        width: 100%;
        max-width: 280px;
    }
    
    .lock-input {
        padding: 14px 20px;
        font-size: 16px;
    }
    
    /* ========== CONTEXT MENU ========== */
    .context-menu {
        min-width: 200px;
    }
    
    /* ========== ABOUT WINDOW ========== */
    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .profile-avatar {
        width: 70px;
        height: 70px;
    }
    
    .profile-info h1 {
        font-size: 22px;
    }
    
    .quick-links {
        justify-content: center;
    }
    
    .skills-grid {
        flex-wrap: wrap;
    }
    
    .skill-tag {
        flex: 0 0 auto;
    }
    
    /* ========== PORTFOLIO WINDOW ========== */
    .portfolio-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }
    
    .portfolio-search {
        order: 2;
        flex: 1 1 100%;
        max-width: none;
    }
    
    .portfolio-controls {
        order: 1;
        flex: 1;
        justify-content: space-between;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
    
    .portfolio-card-thumb {
        height: 140px;
    }
    
    /* Portfolio Detail View */
    .case-study-view {
        padding: 16px;
    }
    
    .case-study-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .case-study-title h2 {
        font-size: 20px;
    }
    
    .case-study-carousel {
        height: 180px;
    }
    
    .case-study-meta {
        flex-direction: column;
        gap: 12px;
    }
    
    .meta-group {
        flex-direction: row;
        justify-content: space-between;
    }
    
    /* ========== THEMES WINDOW ========== */
    .themes-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .theme-card-thumb {
        height: 140px;
    }
    
    /* Theme Detail */
    .theme-detail-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .theme-preview-gallery {
        height: 200px;
    }
    
    .theme-detail-sections {
        grid-template-columns: 1fr;
    }
    
    /* ========== SERVICES WINDOW ========== */
    .service-item {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    
    .service-icon {
        margin: 0 auto;
    }
    
    /* ========== SKILLS WINDOW ========== */
    .skills-category {
        padding: 16px;
    }
    
    .skills-category h3 {
        font-size: 14px;
    }
    
    .skills-list {
        gap: 10px;
    }
    
    .skill-item {
        padding: 10px 12px;
    }
    
    .skill-icon {
        width: 32px;
        height: 32px;
    }
    
    .skill-icon i {
        font-size: 14px;
    }
    
    .skill-name {
        font-size: 12px;
    }
    
    .skill-level {
        font-size: 10px;
    }
    
    /* ========== RESUME WINDOW ========== */
    .resume-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .resume-title h2 {
        font-size: 20px;
    }
    
    .resume-download {
        width: 100%;
        justify-content: center;
    }
    
    .resume-summary {
        font-size: 12px;
    }
    
    .resume-timeline {
        padding-left: 16px;
    }
    
    .timeline-item {
        padding-left: 20px;
    }
    
    .timeline-date {
        font-size: 10px;
    }
    
    .timeline-content h4 {
        font-size: 13px;
    }
    
    .timeline-content ul {
        font-size: 11px;
    }
    
    .resume-skills-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .resume-row {
        flex-direction: column;
    }
    
    .resume-half {
        width: 100%;
    }
    
    .resume-languages {
        flex-direction: column;
        gap: 12px;
    }
    
    /* ========== CONTACT WINDOW ========== */
    .contact-socials {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .contact-social-btn {
        width: 44px;
        height: 44px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }
    
    .form-submit {
        width: 100%;
    }
    
    /* ========== TESTIMONIALS WINDOW ========== */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .review-card {
        padding: 16px;
    }
    
    .review-text {
        font-size: 13px;
    }
    
    /* ========== MUSIC PLAYER ========== */
    #window-music .window-content {
        flex-direction: column;
        padding: 0;
    }
    
    .music-playlist-panel {
        width: 100%;
        max-height: 150px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .music-player-panel {
        padding: 20px 16px;
    }
    
    .music-cover {
        width: 100px;
        height: 100px;
    }
    
    .music-progress {
        max-width: 100%;
    }
    
    /* ========== TERMINAL WINDOW ========== */
    .terminal-output {
        padding: 12px;
        font-size: 12px;
    }
    
    .terminal-input-line {
        padding: 10px 12px;
    }
    
    .terminal-prompt {
        font-size: 11px;
    }
    
    .terminal-input {
        font-size: 14px;
    }
    
    /* ========== SNAKE GAME ========== */
    .snake-game-area {
        padding: 12px;
    }
    
    #snake-canvas {
        max-width: 100%;
        height: auto !important;
    }
    
    .snake-controls {
        padding: 12px;
    }
    
    .snake-btn {
        padding: 10px 20px;
        font-size: 12px;
    }
    
    .snake-scores {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Mobile touch controls for snake */
    .snake-touch-controls {
        display: grid !important;
        grid-template-columns: repeat(3, 50px);
        grid-template-rows: repeat(3, 50px);
        gap: 4px;
        justify-content: center;
        margin-top: 12px;
    }
    
    .snake-touch-btn {
        width: 50px;
        height: 50px;
        background: var(--bg-lighter);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        font-size: 18px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .snake-touch-btn:active {
        background: var(--primary);
    }
    
    .snake-touch-btn.up { grid-column: 2; grid-row: 1; }
    .snake-touch-btn.left { grid-column: 1; grid-row: 2; }
    .snake-touch-btn.down { grid-column: 2; grid-row: 3; }
    .snake-touch-btn.right { grid-column: 3; grid-row: 2; }
    
    /* ========== SETTINGS WINDOW ========== */
    .theme-toggle {
        flex-direction: column;
    }
    
    .theme-btn {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        padding: 14px;
    }
    
    .theme-btn i {
        font-size: 18px;
    }
    
    /* ========== STICKY NOTE ========== */
    .sticky-note {
        display: none;
    }
    
    /* ========== BOOT/TERMINAL SCREEN ========== */
    #terminal-screen .terminal-content {
        padding: 16px;
    }
    
    .skip-terminal {
        top: auto;
        bottom: 24px;
        right: 24px;
        padding: 10px 20px;
        font-size: 12px;
        height: auto;
    }
    
    /* ========== EASTER EGG ========== */
    .easter-egg-msg {
        padding: 20px 32px;
        font-size: 18px;
    }
    
    /* ========== NOTCH/SAFE AREA (iPhone X+) ========== */
    @supports (padding: max(0px)) {
        .top-bar {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
        
        .taskbar {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(8px, env(safe-area-inset-bottom));
        }
        
        .start-menu,
        .search-popup {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Desktop Icons - 3 columns */
    .desktop-icons {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Start Menu - 3 columns */
    .start-menu-apps {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .start-menu-item i {
        font-size: 22px;
    }
    
    .start-menu-item span {
        font-size: 10px;
    }
    
    /* Taskbar - Smaller */
    .taskbar {
        height: 58px;
        padding: 6px 10px;
    }
    
    .start-btn,
    .search-btn {
        width: 36px;
        height: 36px;
    }
    
    .taskbar-app {
        width: 34px;
        height: 34px;
    }
    
    .taskbar-app i {
        font-size: 14px;
    }
    
    /* Window Content */
    .window-content {
        padding: 12px;
    }
    
    /* Portfolio */
    .portfolio-card-info {
        padding: 12px;
    }
    
    .portfolio-card-info h3 {
        font-size: 14px;
    }
    
    /* Smaller text overall */
    .profile-info h1 {
        font-size: 18px;
    }
    
    .section-title {
        font-size: 12px;
    }
    
    .bio-text {
        font-size: 13px;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .desktop-icons {
        grid-template-columns: repeat(auto-fill, 70px);
        gap: 8px;
        padding: 8px;
    }
    
    .desktop-icon {
        padding: 8px;
    }
    
    .desktop-icon i {
        font-size: 22px;
    }
    
    .desktop-icon span {
        font-size: 9px;
    }
    
    .taskbar {
        height: 50px;
    }
    
    .window {
        top: 30px !important;
        bottom: 50px !important;
    }
    
    .start-menu {
        max-height: 80vh;
    }
    
    .start-menu-apps {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .taskbar-app,
    .desktop-icon,
    .start-menu-item,
    .search-result-item {
        min-height: 44px;
    }
    
    /* Remove hover effects */
    .taskbar-app:hover,
    .desktop-icon:hover,
    .window-btn:hover {
        background: transparent;
    }
    
    /* Active states instead */
    .taskbar-app:active,
    .desktop-icon:active {
        opacity: 0.7;
    }
    
    /* Disable text selection */
    .desktop-icon,
    .taskbar-app,
    .start-menu-item {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================
   PRINT STYLES (hide UI)
   ============================================ */
@media print {
    .top-bar,
    .taskbar,
    .desktop-icons,
    .bottom-widgets,
    .start-menu,
    .search-popup,
    .context-menu,
    .window-header,
    .resize-handle {
        display: none !important;
    }
    
    .window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    .window-content {
        height: auto !important;
        overflow: visible !important;
    }
}