/**
 * Mobile Design System
 * Unified mobile-first approach for DocuFlow2
 * Based on Material Design 3 and iOS HIG
 */

/* ========== MOBILE BREAKPOINTS ========== */
:root {
    /* Breakpoints as custom properties for JS access */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-large: 1440px;
    
    /* Mobile-specific spacing */
    --mobile-spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
    --mobile-spacing-sm: clamp(0.5rem, 1.5vw, 0.75rem);
    --mobile-spacing-md: clamp(0.75rem, 2vw, 1rem);
    --mobile-spacing-lg: clamp(1rem, 2.5vw, 1.5rem);
    --mobile-spacing-xl: clamp(1.5rem, 3vw, 2rem);
    --mobile-spacing-2xl: clamp(2rem, 4vw, 3rem);
    
    /* Mobile-specific typography */
    --mobile-font-size-xs: clamp(0.75rem, 2vw, 0.875rem);
    --mobile-font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
    --mobile-font-size-base: clamp(1rem, 3vw, 1.125rem);
    --mobile-font-size-lg: clamp(1.125rem, 3.5vw, 1.25rem);
    --mobile-font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
    --mobile-font-size-2xl: clamp(1.5rem, 5vw, 2rem);
    
    /* Touch targets */
    --touch-target-min: 44px; /* iOS HIG minimum */
    --touch-target-comfortable: 48px; /* Recommended */
    --touch-target-spacing: 8px; /* Minimum spacing between targets */
}

/* ========== MOBILE UTILITIES ========== */

/* Hide on mobile */
.mobile-hide {
    display: none !important;
}

@media (min-width: 768px) {
    .mobile-hide {
        display: block !important;
    }
}

/* Show only on mobile */
.mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Touch-friendly buttons */
.btn-mobile {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

@media (min-width: 768px) {
    .btn-mobile {
        min-height: 36px;
        min-width: auto;
    }
}

/* Safe area insets for notched devices */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

/* ========== MOBILE CONTAINERS ========== */

.mobile-container {
    width: 100%;
    max-width: 100%;
    padding: var(--mobile-spacing-md);
    margin: 0 auto;
}

@media (min-width: 480px) {
    .mobile-container {
        padding: var(--mobile-spacing-lg);
    }
}

@media (min-width: 768px) {
    .mobile-container {
        padding: var(--mobile-spacing-xl);
        max-width: 1200px;
    }
}

/* ========== MOBILE CARDS ========== */

.mobile-card {
    background: var(--surface);
    border-radius: 12px;
    padding: var(--mobile-spacing-lg);
    margin-bottom: var(--mobile-spacing-md);
    box-shadow: 0 2px 4px var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px var(--shadow);
}

@media (min-width: 768px) {
    .mobile-card {
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
    }
    
    .mobile-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px var(--shadow);
    }
    
    .mobile-card:active {
        transform: translateY(0);
    }
}

/* ========== MOBILE LISTS ========== */

.mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-list-item {
    padding: var(--mobile-spacing-md);
    border-bottom: 1px solid var(--border);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-md);
    transition: background 0.2s ease;
}

.mobile-list-item:active {
    background: var(--surface-hover);
}

.mobile-list-item:last-child {
    border-bottom: none;
}

/* ========== MOBILE FORMS ========== */

.mobile-form-group {
    margin-bottom: var(--mobile-spacing-lg);
}

.mobile-form-label {
    display: block;
    margin-bottom: var(--mobile-spacing-sm);
    font-weight: 500;
    font-size: var(--mobile-font-size-sm);
    color: var(--text-primary);
}

.mobile-form-input {
    width: 100%;
    padding: var(--mobile-spacing-md);
    font-size: var(--mobile-font-size-base); /* Увеличиваем для мобильных */
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.mobile-form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-alpha);
}

textarea.mobile-form-input {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-family);
    line-height: 1.5;
}

/* ========== MOBILE MODALS ========== */

.mobile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: flex-end; /* Bottom sheet на мобильных */
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.mobile-modal {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--mobile-spacing-xl);
}

@media (min-width: 768px) {
    .mobile-modal-overlay {
        align-items: center;
    }
    
    .mobile-modal {
        border-radius: 12px;
        max-width: 500px;
        max-height: 80vh;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ========== MOBILE BOTTOM SHEET ========== */

.mobile-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    z-index: var(--z-modal);
    box-shadow: 0 -4px 12px var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* ========== MOBILE SWIPE ACTIONS ========== */

.mobile-swipe-container {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

.mobile-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-sm);
    padding: 0 var(--mobile-spacing-md);
    background: var(--error);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-swipe-container.swiped .mobile-swipe-actions {
    transform: translateX(0);
}

.mobile-swipe-action {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 8px;
    touch-action: manipulation;
}

/* ========== MOBILE PULL TO REFRESH ========== */

.mobile-pull-refresh {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-pull-refresh-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding: var(--mobile-spacing-md);
    transition: transform 0.3s ease;
}

.mobile-pull-refresh.pulling .mobile-pull-refresh-indicator {
    transform: translateX(-50%) translateY(0);
}

/* ========== MOBILE GESTURES ========== */

/* Disable text selection on interactive elements */
.mobile-interactive {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Swipe hint */
.mobile-swipe-hint {
    position: absolute;
    left: var(--mobile-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: var(--mobile-font-size-xs);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-swipe-container:hover .mobile-swipe-hint {
    opacity: 1;
}

@media (max-width: 768px) {
    .mobile-swipe-hint {
        display: none;
    }
}

/* ========== MOBILE TYPOGRAPHY FIXES ========== */
/* Предотвращение переполнения текста и расширения экрана */

@media (max-width: 768px) {
    /* Предотвращение горизонтального скролла */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        position: relative;
    }
    
    /* Все элементы должны учитывать границы */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Перенос длинных слов для всех текстовых элементов */
    body, p, div, span, h1, h2, h3, h4, h5, h6, 
    .document-name, .article-title, .task-title, 
    .incident-title, .course-title, .card-title,
    .title, .name, .label, .description, .text {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
    }
    
    /* Таблицы */
    table {
        width: 100%;
        table-layout: fixed;
        word-wrap: break-word;
    }
    
    td, th {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 0; /* Для table-layout: fixed */
    }
    
    /* Изображения и медиа */
    img, video, iframe, canvas {
        max-width: 100%;
        height: auto;
    }
    
    /* Flex контейнеры */
    .flex, [class*="flex"], 
    .header-left, .header-right,
    .toolbar-group, .btn-group,
    .mobile-list-item, .document-card {
        min-width: 0;
    }
    
    /* Карточки и контейнеры */
    .card, [class*="card"], 
    .container, [class*="container"],
    .mobile-card, .article-card,
    .task-item, .incident-item,
    .course-card, .project-card {
        max-width: 100%;
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Кнопки и инпуты */
    button, input, textarea, select,
    .btn, .mobile-form-input {
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    /* Кнопки с текстом */
    button, .btn {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Специальные случаи для nowrap - с ограничениями */
    .app-title {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Ссылки */
    a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Метки */
    label, .label, .mobile-form-label {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}