/* ==========================================
   VTC Manager - Styles Mobile Spécifiques
   ========================================== */

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Augmenter les zones tactiles */
    button,
    .nav-item,
    .card,
    .list-item {
        min-height: 48px;
    }
    
    .card-action-btn {
        min-width: 48px;
        min-height: 48px;
    }
    
    /* Désactiver les effets hover sur mobile */
    .card:hover,
    .list-item:hover,
    .nav-item:hover {
        transform: none;
    }
}

/* Swipe gestures */
.swipeable {
    position: relative;
    touch-action: pan-y;
}

.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    transform: translateX(100%);
    transition: transform var(--transition-fast);
}

.swipeable.swiping .swipe-actions {
    transform: translateX(0);
}

.swipe-action {
    height: 100%;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: var(--font-size-lg);
    min-width: 80px;
    cursor: pointer;
}

.swipe-action.edit {
    background-color: var(--primary-color);
}

.swipe-action.delete {
    background-color: var(--danger-color);
}

.swipe-action.whatsapp {
    background-color: #25D366;
}

/* Pull to refresh */
.pull-to-refresh {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform var(--transition-fast);
    background-color: var(--bg-primary);
}

.pull-to-refresh.pulling {
    transform: translateY(0);
}

.pull-to-refresh-icon {
    font-size: var(--font-size-xl);
    animation: spin 1s linear infinite;
}

/* Bottom sheet (alternative to modal on mobile) */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    z-index: 200;
    max-height: 90vh;
    overflow-y: auto;
}

.bottom-sheet.active {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    margin: var(--spacing-sm) auto;
}

/* Safe area insets for notch/home indicator */
@supports (padding: max(0px)) {
    .app-header {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }
    
    .app-content {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    }
    
    .fab {
        bottom: max(var(--spacing-lg), calc(env(safe-area-inset-bottom) + var(--spacing-md)));
        right: max(var(--spacing-lg), calc(env(safe-area-inset-right) + var(--spacing-md)));
    }
    
    .notification {
        bottom: max(var(--spacing-lg), calc(env(safe-area-inset-bottom) + var(--spacing-md)));
    }
}

/* Landscape mode */
@media (orientation: landscape) and (max-height: 500px) {
    .app-header {
        height: 48px;
    }
    
    :root {
        --header-height: 48px;
    }
    
    .welcome-card {
        padding: var(--spacing-md);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Very small screens */
@media (max-width: 320px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: var(--spacing-sm);
    }
    
    .filters-bar {
        flex-direction: column;
    }
}

/* iOS specific */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari bottom bar */
    .app-content {
        min-height: calc(100vh - var(--header-height) - 60px);
    }
    
    /* Prevent zoom on input focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Android specific */
@media (pointer: coarse) and (hover: none) {
    /* Ripple effect for buttons */
    button {
        position: relative;
        overflow: hidden;
    }
    
    button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
    }
    
    button:active::after {
        width: 300px;
        height: 300px;
    }
}

/* Prevent text selection on touch devices */
@media (hover: none) {
    .card,
    .list-item,
    .nav-item,
    button {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Optimize animations for mobile */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    /* Les variables seront définies ici si le mode sombre est activé */
    /* Actuellement commenté, peut être activé plus tard
    :root {
        --bg-primary: #1e1e1e;
        --bg-secondary: #2d2d2d;
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --border-color: #404040;
    }
    */
}

/* Keyboard on screen */
.keyboard-visible .fab {
    display: none;
}

/* Improved scrolling on iOS */
.list-container,
.modal-body,
.bottom-sheet {
    -webkit-overflow-scrolling: touch;
}

/* Sticky header in lists */
.list-header {
    position: sticky;
    top: 0;
    background-color: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    z-index: 10;
}

/* Quick action menu */
.quick-menu {
    position: fixed;
    bottom: calc(var(--spacing-lg) + 70px);
    right: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transform: scale(0);
    transform-origin: bottom right;
    transition: transform var(--transition-normal);
}

.quick-menu.active {
    transform: scale(1);
}

.quick-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    cursor: pointer;
}

.quick-menu-icon {
    font-size: var(--font-size-xl);
}

/* Offline indicator */
.offline-indicator {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--warning-color);
    color: var(--text-white);
    padding: var(--spacing-sm);
    text-align: center;
    font-size: var(--font-size-sm);
    transform: translateY(-100%);
    transition: transform var(--transition-normal);
    z-index: 99;
}

.offline-indicator.show {
    transform: translateY(0);
}

/* Install prompt */
.install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    color: var(--text-white);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    z-index: 99;
}

.install-prompt.show {
    transform: translateY(0);
}

.install-prompt-content {
    flex: 1;
}

.install-prompt-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.install-prompt-description {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.install-prompt-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.install-prompt-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    background-color: var(--text-white);
    color: var(--primary-color);
    border: none;
    font-weight: 600;
    cursor: pointer;
}

.install-prompt-dismiss {
    background-color: transparent;
    color: var(--text-white);
    border: 1px solid var(--text-white);
}