/**
 * VTRACK v2 — Mobile Responsive Styles
 * Адаптация под планшеты и мобильные устройства
 * 
 * ОБНОВЛЕНО: 2026-01-15
 * - КРИТИЧЕСКОЕ ИСПРАВЛЕНИЕ: iOS Safari SWF/Ruffle отображение
 * - Фиксированные высоты вместо flex для iOS
 * - Улучшенная структура для надёжного рендеринга
 */

/* ============================================
   BREAKPOINTS
   ============================================ */
/*
   Desktop:  1200px+     → 3 колонки (280px | flex | 320px)
   Tablet:   768-1199px  → 2 колонки (скрыть правую панель)
   Mobile:   <768px      → 1 колонка (всё вертикально)
*/

/* ============================================
   TABLET: 768px - 1199px
   ============================================ */
@media (max-width: 1199px) {
    /* Убираем правую панель, оставляем только левую и центральную */
    .app {
        grid-template-columns: 240px 1fr;
    }
    
    .info-panel {
        display: none;
    }
    
    /* Уменьшаем левую панель */
    .nav-panel {
        width: 240px;
    }
    
    /* Адаптируем таблицу брендов */
    .table-header,
    .table-row {
        grid-template-columns: 50px 150px 1fr 80px 80px;
    }
    
    /* Скрываем колонку "Чертежей" */
    .table-header > div:last-child,
    .table-row > div:last-child {
        display: none;
    }
}

/* ============================================
   MOBILE: < 768px
   ============================================ */
@media (max-width: 767px) {
    
    /* ============================================
       ОБЩИЙ LAYOUT - КРИТИЧНО!
       ============================================ */
    
    body {
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch;
    }
    
    .app {
        display: block !important;
        height: auto !important;
        min-height: 100vh;
        width: 100%;
    }
    
    /* ============================================
       HEADER
       ============================================ */
    
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
        padding: 0 12px;
        height: 56px;
        display: flex !important;
        align-items: center;
    }
    
    .header-left {
        gap: 12px;
    }
    
    .logo {
        font-size: 18px;
    }
    
    /* Скрываем описание на мобиле */
    .header-left > div:last-child {
        display: none;
    }
    
    .header-credit {
        display: none;
    }
    
    /* Бургер-меню */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .mobile-menu-toggle:active {
        background: var(--accent-light);
        border-color: var(--accent);
    }
    
    .mobile-menu-toggle-icon {
        width: 20px;
        height: 14px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .mobile-menu-toggle-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--text);
        border-radius: 1px;
        transition: all 0.3s;
    }
    
    .mobile-menu-toggle.active .mobile-menu-toggle-icon span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    
    .mobile-menu-toggle.active .mobile-menu-toggle-icon span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active .mobile-menu-toggle-icon span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    
    /* ============================================
       NAVIGATION PANEL (боковое меню)
       ============================================ */
    
    .nav-panel {
        position: fixed;
        left: -100%;
        top: 56px;
        width: 280px;
        height: calc(100vh - 56px);
        z-index: 999;
        transition: left 0.3s ease;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    
    .nav-panel.active {
        left: 0;
    }
    
    /* Overlay для закрытия меню */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }
    
    .mobile-overlay.active {
        display: block;
    }
    
    /* ============================================
       MAIN CONTENT - КРИТИЧНО ДЛЯ iOS!
       ============================================ */
    
    .main-content {
        display: block !important;
        width: 100%;
        padding: 16px;
        overflow: visible !important;
        height: auto !important;
    }
    
    /* ============================================
       INDEX.PHP - Главная страница
       ============================================ */
    
    /* Поисковая секция */
    .search-section {
        margin-bottom: 24px;
    }
    
    .search-header {
        margin-bottom: 16px;
    }
    
    .search-title {
        font-size: 20px;
    }
    
    .search-subtitle {
        font-size: 12px;
    }
    
    .search-box-large {
        max-width: 100%;
        margin-bottom: 8px;
    }
    
    .search-box-large input,
    .search-box-large .search-autocomplete {
        padding: 12px 16px 12px 44px;
        font-size: 14px;
    }
    
    .search-box-large::before {
        left: 16px;
        font-size: 16px;
    }
    
    .search-hint {
        font-size: 11px;
        margin-bottom: 20px;
    }
    
    .divider {
        margin: 20px 0 16px;
        font-size: 11px;
    }
    
    /* Таблица брендов → Карточки */
    .brands-table {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: transparent;
        border: none;
    }
    
    .table-header {
        display: none;
    }
    
    .table-row {
        display: flex;
        flex-direction: column;
        padding: 16px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 8px;
        gap: 12px;
    }
    
    .table-row:hover {
        background: var(--white);
        border-color: var(--accent);
    }
    
    /* Первая строка: иконка + название */
    .brand-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    .table-row > div:nth-child(1),
    .table-row > div:nth-child(2) {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .table-row > div:nth-child(2) {
        flex: 1;
    }
    
    .brand-name {
        font-size: 15px;
    }
    
    .brand-country {
        font-size: 11px;
    }
    
    /* Типы техники */
    .table-row > div:nth-child(3) {
        order: 4;
    }
    
    .brand-types {
        padding: 8px 0;
        border-top: 1px solid var(--border);
    }
    
    /* Статистика в строку */
    .table-row > div:nth-child(4),
    .table-row > div:nth-child(5),
    .table-row > div:nth-child(6) {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
    }
    
    .stat-label {
        font-size: 10px;
    }
    
    .stat-number {
        font-size: 14px;
    }
    
    /* ============================================
       NODE.PHP - КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ iOS Safari
       ============================================ */
    
    /* Breadcrumb адаптация */
    .breadcrumb {
        font-size: 11px;
        padding: 8px 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    /* ============================================
       DRAWING CONTAINER - ЯВНЫЕ РАЗМЕРЫ!
       ============================================ */
    
    .drawing-container {
        display: block !important;
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 0 !important;
        background: var(--white) !important;
        border: 2px solid var(--accent) !important;
        border-radius: 8px !important;
        overflow: visible !important;
        /* НЕ используем flex для iOS! */
    }
    
    /* Обёртка заголовка */
    .drawing-header-wrapper {
        display: block !important;
        padding: 12px !important;
    }
    
    /* Заголовок чертежа */
    .drawing-header {
        display: block !important;
        padding: 10px 12px;
    }
    
    .drawing-header-main {
        margin-bottom: 8px;
    }
    
    .drawing-header-oem {
        flex-wrap: wrap;
        margin-top: 8px;
    }
    
    .drawing-meta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin-top: 8px;
    }
    
    .drawing-title {
        font-size: 14px;
    }
    
    .drawing-code {
        font-size: 11px;
    }
    
    .meta-item {
        flex-direction: row;
        gap: 4px;
    }
    
    .meta-label {
        font-size: 10px;
    }
    
    .meta-value {
        font-size: 11px;
    }
    
    /* OEM бейджи в header компактнее */
    .header-oem-badge {
        padding: 2px 5px;
        font-size: 9px;
    }
    
    /* ============================================
       SWF/RUFFLE VIEWER - КРИТИЧНО ДЛЯ iOS!
       
       ВАЖНО: Все размеры ФИКСИРОВАННЫЕ в px!
       iOS Safari не поддерживает % и flex для embed контента
       ============================================ */
    
    .drawing-viewer {
        display: block !important;
        width: 100% !important;
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
        padding: 8px !important;
        background: var(--bg) !important;
        overflow: hidden !important;
        /* iOS Safari fixes */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .swf-container {
        display: block !important;
        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
        background: #ffffff !important;
        border: 1px solid var(--border) !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        position: relative !important;
        /* iOS Safari 3D acceleration */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Object/embed внутри контейнера */
    .swf-container object,
    .swf-container embed {
        display: block !important;
        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
    }
    
    /* RUFFLE PLAYER - КРИТИЧНО! 
       Ruffle создаёт свой элемент, которому нужны явные размеры
    */
    .swf-container ruffle-player,
    .swf-container ruffle-embed,
    ruffle-player,
    ruffle-embed {
        display: block !important;
        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        /* iOS Safari fixes */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Внутренний canvas Ruffle */
    .swf-container ruffle-player canvas,
    ruffle-player canvas {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Fallback placeholder */
    .swf-fallback {
        display: none !important;
    }

    /* Placeholder если нет чертежа */
    .swf-placeholder {
        padding: 30px 20px;
    }

    .swf-placeholder-icon {
        font-size: 48px;
        margin-bottom: 12px;
    }

    /* ============================================
       LETTER HIGHLIGHT OVERLAY - MOBILE
       ============================================ */

    /* SVG Overlay адаптация */
    .letter-overlay {
        transform: scale(0.75);
        transform-origin: top left;
    }

    /* Letter highlight - без специальных стилей для мобильных */
    /* Размеры прямоугольника задаются в JS */

    /* Spec row touch-friendly */
    .spec-row {
        min-height: 44px;
        align-items: center;
    }

    .spec-row.highlighting {
        background: var(--accent-light);
        border-left: 3px solid var(--accent);
    }
    
    /* ============================================
       MOBILE TABS (вместо правой панели)
       ============================================ */
    
    .mobile-tabs-wrapper {
        display: block !important;
        width: calc(100% + 32px) !important;
        margin: 16px -16px 0 -16px !important;
        padding: 0 16px !important;
    }
    
    .mobile-tabs {
        display: flex !important;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 8px 8px 0 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-tab {
        flex: 1;
        min-width: 90px;
        padding: 12px 12px;
        text-align: center;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }
    
    .mobile-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        background: var(--accent-light);
    }
    
    .mobile-tab-content {
        display: none;
        padding: 16px;
        background: var(--white);
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 8px 8px;
    }
    
    .mobile-tab-content.active {
        display: block !important;
    }
    
    /* Скрываем desktop правую панель */
    .info-panel {
        display: none !important;
    }
    
    /* Параметры в 2 колонки */
    .params-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .param-item {
        padding: 10px;
        background: var(--bg);
        border-radius: 6px;
        font-size: 11px;
    }
    
    .param-label {
        color: var(--text-muted);
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .param-value {
        font-weight: 600;
        color: var(--text);
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
    }
    
    /* OEM коды компактнее */
    .oem-code {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .oem-brand-group {
        padding: 8px 10px;
    }
    
    .oem-brand-name {
        font-size: 10px;
    }
    
    /* Применяемость компактнее */
    .models-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
        gap: 4px;
    }
    
    .model-box {
        padding: 6px;
        font-size: 10px;
    }
    
    .brand-header {
        padding: 6px 10px;
        margin-bottom: 6px;
    }
    
    /* ============================================
       SEARCH.PHP - Результаты поиска
       ============================================ */
    
    /* Sticky search bar */
    .search-results-header {
        position: sticky;
        top: 56px;
        z-index: 100;
        margin-bottom: 16px;
    }
    
    .search-query {
        font-size: 16px;
    }
    
    .search-meta {
        font-size: 12px;
    }
    
    /* Результаты - карточки */
    .result-card {
        flex-direction: column;
        margin-bottom: 12px;
    }
    
    .result-drawing {
        width: 100%;
        height: 200px;
        border-right: none;
        border-bottom: 2px solid var(--border);
    }
    
    .result-info {
        padding: 12px;
    }
    
    .result-name-ru {
        font-size: 14px;
    }
    
    .result-name-en {
        font-size: 11px;
    }
    
    .result-meta {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 11px;
    }
    
    /* ============================================
       BRAND.PHP & MODEL.PHP
       ============================================ */
    
    /* Node cards */
    .node-card {
        margin-bottom: 12px;
    }
    
    .node-drawing {
        width: 100%;
        height: 180px;
        border-right: none;
        border-bottom: 2px solid var(--border);
    }
    
    /* ============================================
       FOOTER
       ============================================ */
    
    .statusbar {
        display: none;
    }
    
    /* ============================================
       FORMS & INPUTS
       ============================================ */
    
    /* Touch-friendly размеры */
    input,
    select,
    button,
    .btn {
        min-height: 44px;
        font-size: 16px; /* Предотвращает zoom на iOS */
    }
    
    /* Select boxes */
    .select-box {
        padding: 12px;
        font-size: 14px;
    }
    
    .select-box-control {
        min-height: 44px;
        font-size: 14px;
    }
    
    /* ============================================
       AUTOCOMPLETE
       ============================================ */
    
    .autocomplete-results {
        max-height: 300px;
        border-radius: 8px;
    }
    
    .autocomplete-item {
        padding: 12px;
    }
    
    .autocomplete-article {
        font-size: 12px;
    }
    
    .autocomplete-name {
        font-size: 11px;
    }
    
    .autocomplete-meta {
        font-size: 10px;
    }
    
    /* ============================================
       UTILITIES
       ============================================ */
    
    /* Скрыть на мобиле */
    .hide-mobile {
        display: none !important;
    }
    
    /* Показать только на мобиле */
    .show-mobile {
        display: block !important;
    }
    
    /* Горизонтальный скролл */
    .scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Отключаем hover эффекты на touch */
    @media (hover: none) {
        .table-row:hover,
        .result-card:hover,
        .node-card:hover {
            transform: none;
        }
    }
}

/* ============================================
   SMALL MOBILE: < 480px
   ============================================ */
@media (max-width: 479px) {
    
    .logo {
        font-size: 16px;
    }
    
    .search-title {
        font-size: 18px;
    }
    
    .brand-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .brand-name {
        font-size: 14px;
    }
    
    /* Параметры в 1 колонку на маленьких экранах */
    .params-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tabs scroll */
    .mobile-tabs {
        justify-content: flex-start;
    }
    
    .mobile-tab {
        flex: 0 0 auto;
        min-width: 80px;
        padding: 10px 12px;
        font-size: 11px;
    }
    
    /* Чертёж меньше на маленьких экранах */
    .drawing-viewer {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }
    
    .swf-container {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
    
    .swf-container object,
    .swf-container ruffle-player,
    ruffle-player,
    ruffle-embed {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }
}

/* ============================================
   BRAND.PHP & MODEL.PHP АДАПТАЦИЯ
   ============================================ */
@media (max-width: 767px) {
    
    /* Карточки типов техники - 1 колонка */
    .types-grid {
        grid-template-columns: 1fr !important;
    }
    
    .type-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 16px;
    }
    
    .type-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    /* Список моделей - 1 колонка */
    .models-list {
        grid-template-columns: 1fr !important;
    }
    
    /* ============================================
       MODEL.PHP - КАРТОЧКИ УЗЛОВ (ОПТИМИЗАЦИЯ)
       ============================================ */
    
    /* Сетка узлов model.php - 1 колонка */
    .nodes-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Карточка узла - вертикальная раскладка на мобиле */
    .node-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
    }
    
    /* Изображение узла - на всю ширину сверху */
    .node-image {
        width: 100% !important;
        height: 120px !important;
        border-bottom: 1px solid var(--border);
    }
    
    /* Информация об узле */
    .node-info {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    /* Название узла */
    .node-name-ru {
        font-size: 14px !important;
        line-height: 1.3;
    }
    
    .node-name-en {
        font-size: 11px !important;
    }
    
    /* Мета-информация - в 2 ряда */
    .node-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        align-items: center !important;
    }
    
    .node-meta-item {
        font-size: 11px !important;
    }
    
    .node-meta-label {
        font-size: 10px !important;
    }
    
    .node-meta-value {
        font-size: 11px !important;
    }
    
    /* Бейджи - отдельный ряд внизу */
    .swf-badge,
    .links-badge {
        margin-left: 0 !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        flex-shrink: 0;
    }
    
    .swf-badge {
        background: #dbeafe !important;
        color: #1d4ed8 !important;
        border: 1px solid #93c5fd;
    }
    
    .links-badge {
        background: #dcfce7 !important;
        color: #166534 !important;
        border: 1px solid #86efac;
    }
    
    /* Заголовок страницы */
    .page-header {
        margin-bottom: 16px !important;
    }
    
    .page-title {
        font-size: 18px !important;
    }
    
    .page-subtitle {
        font-size: 12px !important;
    }
    
    /* Поисковая строка на всю ширину */
    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .models-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .models-title {
        text-align: center;
    }
}

/* Маленькие экраны - ещё компактнее */
@media (max-width: 479px) {
    .node-image {
        height: 100px !important;
    }
    
    .node-info {
        padding: 10px !important;
    }
    
    .node-name-ru {
        font-size: 13px !important;
    }
    
    .node-meta {
        gap: 6px 10px !important;
    }
    
    .swf-badge,
    .links-badge {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    
    /* В landscape скрываем левую панель полностью */
    .nav-panel {
        display: none;
    }
    
    /* Чертёж в landscape - меньше высота */
    .drawing-viewer {
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }
    
    .swf-container {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }
    
    .swf-container object,
    .swf-container ruffle-player,
    ruffle-player,
    ruffle-embed {
        height: 240px !important;
        min-height: 240px !important;
        max-height: 240px !important;
    }
    
    .result-drawing {
        height: 150px;
    }
    
    .node-drawing {
        height: 140px;
    }
    
    /* Header компактнее */
    .header {
        height: 48px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    /* Breadcrumb одной строкой */
    .breadcrumb {
        font-size: 10px;
        padding: 6px 12px;
    }
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */

/* Webkit-specific fixes для Ruffle */
@supports (-webkit-touch-callout: none) {
    .swf-container {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    .swf-container object,
    .swf-container ruffle-player {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .drawing-viewer {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    
    .header,
    .nav-panel,
    .mobile-menu-toggle,
    .mobile-overlay,
    .statusbar,
    .mobile-tabs {
        display: none !important;
    }
    
    .main-content {
        padding: 0;
    }
    
    .drawing-container {
        page-break-inside: avoid;
    }
}