/**
 * touch-styles.css - Touch-friendly styling for Uncharted
 * 
 * Provides:
 * - Larger touch targets (min 44px)
 * - Touch-specific hover states
 * - Mobile layout adjustments
 * - Gesture feedback indicators
 */

/* ========================================
   TOUCH DETECTION
   ======================================== */

/* Class added to body when touch is detected */
.touch-device {
    /* Disable text selection on touch */
    -webkit-user-select: none;
    user-select: none;
    
    /* Disable touch callout (iOS) */
    -webkit-touch-callout: none;
    
    /* Disable tap highlight */
    -webkit-tap-highlight-color: transparent;
}

/* ========================================
   CANVAS TOUCH STYLES
   ======================================== */

#mainCanvas,
.canvas-container {
    /* Prevent browser handling of touch gestures */
    touch-action: none;
    
    /* Prevent text selection */
    -webkit-user-select: none;
    user-select: none;
    
    /* Optimize for touch */
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   TOUCH-FRIENDLY BUTTONS
   ======================================== */

/* Ensure minimum 44px touch targets */
.touch-device .control-bar button,
.touch-device .control-bar .btn,
.touch-device .toolbar button,
.touch-device .action-button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}

/* Larger floating trash button for touch */
.touch-device .floating-trash-button {
    width: 44px !important;
    height: 44px !important;
}

.touch-device .floating-trash-button svg {
    width: 24px;
    height: 24px;
}

/* ========================================
   CONTEXT MENU (touch long-press)
   ======================================== */

.touch-device .context-menu {
    /* Larger menu items for touch */
    min-width: 200px;
}

.touch-device .context-menu-item {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
}

/* ========================================
   TIMELINE TOUCH ADJUSTMENTS
   ======================================== */

.touch-device .dom-timeline {
    /* Slightly larger timeline for touch */
    min-height: 120px;
}

.touch-device .milestone {
    /* Larger milestone touch targets */
    min-width: 44px;
    padding: 8px 12px;
}

.touch-device .filter-btn {
    min-width: 44px;
    min-height: 36px;
    padding: 8px 12px;
}

/* ========================================
   PREVIEW POPUP TOUCH STYLES
   ======================================== */

.touch-device .dom-preview-popup {
    /* Prevent accidental dismissal on touch */
    pointer-events: auto;
}

.touch-device .dom-preview-popup .close-btn {
    /* Larger close button */
    width: 44px;
    height: 44px;
    font-size: 24px;
}

/* ========================================
   GESTURE FEEDBACK INDICATORS
   ======================================== */

/* Pinch zoom indicator */
.zoom-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.zoom-indicator.visible {
    opacity: 1;
}

/* Touch ripple effect */
.touch-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.4s ease-out;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Long press indicator */
.long-press-indicator {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(100, 149, 237, 0.8);
    border-top-color: transparent;
    animation: long-press-spin 0.5s linear infinite;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.long-press-indicator.active {
    opacity: 1;
}

@keyframes long-press-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   TASK TOUCH STYLES
   ======================================== */

/* Visual feedback for task selection on touch */
.touch-device .task-selected {
    box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.5);
}

/* Larger resize handles for touch */
.touch-device .task-resize-handle {
    width: 20px;
}

/* ========================================
   MOBILE LAYOUT (< 768px)
   ======================================== */

@media (max-width: 768px) {
    /* Control bar adjustments */
    .control-bar {
        flex-wrap: wrap;
        padding: 8px;
        gap: 8px;
    }
    
    .control-bar .section {
        flex: 1 1 auto;
        min-width: fit-content;
    }
    
    .control-bar button,
    .control-bar .btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }
    
    /* Hide labels, show icons only */
    .control-bar .btn-text {
        display: none;
    }
    
    /* Side panel full width on mobile */
    .project-side-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Context menu adjustments */
    .context-menu {
        max-width: calc(100vw - 20px);
    }
    
    /* Filter container */
    .filter-container {
        max-width: 100%;
        overflow-x: auto;
    }
    
    /* Snapshot bar */
    .snapshot-bar {
        padding: 8px;
    }
    
    .snapshot-bar button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   TABLET LAYOUT (768px - 1024px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .control-bar button,
    .control-bar .btn {
        min-width: 44px;
        min-height: 40px;
    }
    
    /* Side panel width */
    .project-side-panel {
        width: 350px;
    }
}

/* ========================================
   HIGH DPI / RETINA ADJUSTMENTS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp borders */
    .task,
    .group,
    .milestone {
        border-width: 0.5px;
    }
}

/* ========================================
   PREVENT SCROLL BOUNCE (iOS)
   ======================================== */

html, body {
    overscroll-behavior: none;
}

.touch-device body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ========================================
   ACCESSIBILITY - FOCUS INDICATORS
   ======================================== */

/* Visible focus for keyboard/assistive tech */
.control-bar button:focus-visible,
.control-bar .btn:focus-visible,
.filter-btn:focus-visible {
    outline: 3px solid #4A90D9;
    outline-offset: 2px;
}

/* Remove focus ring for mouse/touch (using :focus-visible) */
.control-bar button:focus:not(:focus-visible),
.control-bar .btn:focus:not(:focus-visible) {
    outline: none;
}