/* 📱 МОБИЛЬНАЯ ФИКСАЦИЯ - ПРЕДОТВРАЩЕНИЕ ГОРИЗОНТАЛЬНОГО СКРОЛЛА */

/* Базовые настройки для предотвращения overflow */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Контейнеры */
.container, 
.main-container, 
.dashboard-container,
.page-container,
.content-wrapper {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
}

/* Код и предварительно отформатированный текст */
pre, 
code,
.code-block {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Таблицы */
table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Изображения */
img {
    max-width: 100%;
    height: auto;
}

/* Формы */
input, 
textarea, 
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Мобильные стили */
@media (max-width: 768px) {
    /* Предотвращение zoom на iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Кнопки */
    .btn,
    button {
        font-size: 14px;
        padding: 10px 16px;
        min-height: 44px; /* Минимальная высота для touch */
    }
    
    /* Навигация */
    .navbar,
    .header {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Карточки */
    .card,
    .dashboard-card {
        margin-left: 10px;
        margin-right: 10px;
        padding: 15px;
    }
    
    /* Сетки */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .col,
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Текст */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    
    /* Модальные окна */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
}

@media (max-width: 480px) {
    /* Очень маленькие экраны */
    .container,
    .main-container,
    .dashboard-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .btn,
    button {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    .card,
    .dashboard-card {
        margin-left: 5px;
        margin-right: 5px;
        padding: 10px;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
}

/* Фиксация для длинных URL и текста */
.url-break,
.text-break {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Скрытие элементов на мобильных */
@media (max-width: 768px) {
    .d-none-mobile {
        display: none !important;
    }
    
    .d-block-mobile {
        display: block !important;
    }
}

/* Улучшение touch интерфейса */
@media (hover: none) and (pointer: coarse) {
    /* Touch устройства */
    .btn,
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Увеличиваем области клика */
    .clickable {
        padding: 10px;
    }
}

/* Предотвращение горизонтального скролла для всех элементов */
* {
    max-width: 100vw;
}

/* Специальная фиксация для элементов которые могут вылезать */
.fixed-width {
    width: 100% !important;
    max-width: 100% !important;
}

/* Адаптивные таблицы */
@media (max-width: 768px) {
    .table-mobile-stack th,
    .table-mobile-stack td {
        display: block;
        width: 100%;
        text-align: left;
    }
    
    .table-mobile-stack thead {
        display: none;
    }
    
    .table-mobile-stack td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
    }
}

/* Фиксация для iframe и embed */
iframe,
embed,
object,
video {
    max-width: 100%;
    height: auto;
}

/* Responsive iframe wrapper */
.iframe-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.iframe-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}