/* responsive.css - Адаптивные стили
 * Только медиа-запросы и переопределения под ширину экрана. Базовые стили — в core/components/layout. */

/* Планшеты (от 768px до 1024px) */
@media (max-width: 1024px) {
    /* Лента */
    .feed-layout {
        grid-template-columns: 1fr 280px;
        gap: 1.5rem;
    }
    
    /* Шапка */
    .header-nav {
        margin: 0 1rem;
        max-width: 320px;
    }
    
    .header-search {
        margin: 0 1rem;
        max-width: 300px;
    }
    
    /* Подвал: логотип сверху по центру, навигация — 3 колонки */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .footer-nav {
        grid-column: 1;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-brand {
        display: flex;
        /* text-align: center; */
    }
    
    .footer-description {
        max-width: 420px;
        margin: 0 auto;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    /* Профиль — та же сетка 25% | 75%, блок 100% */
    .profile-top-row {
        grid-template-columns: minmax(80px, 25%) 1fr;
        align-items: flex-start;
    }
    
    .profile-avatar-wrap {
        flex-shrink: 0;
    }
    
    .profile-avatar {
        width: 100%;
        max-width: 120px;
        height: auto;
        aspect-ratio: 1;
    }
    
    /* Вкладки профиля — только иконки на планшетах */
    .profile-nav .nav-tabs {
        width: 100%;
    }
    
    .profile-nav .nav-tab {
        flex: 1;
    }
    
    .profile-nav .nav-tab-label {
        display: none;
    }
    
    .profile-nav .nav-tab-link {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 0.5rem;
    }
    
    .profile-nav .nav-tab-link i {
        margin: 0;
        font-size: 1.25rem;
    }
}

/* Планшеты и телефоны (до 768px) */
@media (max-width: 768px) {
    /* Убираем горизонтальную прокрутку на всех страницах (в т.ч. настройки) */
    html {
        overflow-x: hidden;
    }
    .main-layout .container,
    .page-content {
        max-width: 100%;
        min-width: 0;
    }
    .feed-layout.settings-layout,
    .feed-layout .feed-main {
        min-width: 0;
    }
    .settings-section .card,
    .settings-section .card-body,
    .form-settings {
        min-width: 0;
    }
    .settings-avatar-row {
        flex-wrap: wrap;
    }

    .reaction-picker-popover {
        max-width: min(400px, calc(100vw - 2rem));
    }
    /* Переменные для мобильных (высота шапки на планшетах, чтобы .user-dropdown совпадал) */
    :root {
        --header-height: 62px;
        --container-padding: var(--space-3);
    }
    
    /* Шапка */
    .header-content {
        padding: 0 var(--container-padding);
    }
    
    /* Поиск в шапке скрыт на мобильном; иконки меню показываем как на ПК */
    .header-search {
        display: none;
    }

    
    .header-nav {
        display: block;
        margin: 0;
        max-width: none;
    }
    
    .header-nav .nav-list {
        gap: 0.25rem;
    }
    
    .header-nav .nav-link-icon {
        padding: 0.5rem;
    }


    
    /* Гамбургер не показываем — навигация иконками в шапке */
    .mobile-menu-btn {
        display: none;
    }
    
    .auth-buttons {
        gap: 0.5rem;
    }
    
    .auth-buttons .btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-xs);
    }
    
    /* Основной макет: одна колонка, лента по центру (макс. 600px) */
    .feed-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feed-main {
        width: 100%;
        max-width: var(--content-max);
        margin-left: auto;
        margin-right: auto;
    }
    
    .feed-layout--notifications .feed-main {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .feed-sidebar {
        display: none;
    }
    
    /* Форма создания поста */

    .create-post-header {
        gap: 0.75rem;
    }
    
    .create-post-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    /* Посты */
    .post-header, .post-content, .post-actions, .post-comment {
        padding: 0.8rem;
    }

    .post-action-buttons {
        gap: 0.5rem;
    }
    
    /* Карточки */
    .card-body {
        padding: 1.25rem;
    }
    
    /* Страница входа/регистрации */
    .auth-layout {
        padding: 1rem;
    }
    
    .auth-card {
        padding: 2rem;
    }
    
    /* Подвал: те же 3 колонки навигации */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-nav {
        grid-column: 1;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }
    
    .footer-brand {
        /* text-align: center; */
        display: flex;
    }
    
    /* Сетки */
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Модальные окна */
    .modal-content {
        max-width: 95%;
        width: 95%;
    }
    
    /* Шапка фиксирована на мобильном — не пропадает при открытом меню пользователя */
    .site-header {
        /* position: fixed; */
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-modal);
        display: flex;
        align-items: center;
        min-height: var(--header-height);
    }
    
    .site-header .container {
        flex: 1;
        width: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
    }
    
    .header-content {
        align-items: center;
    }
    
    .main-layout {
        /* padding-top: 1rem; */
    }
    
    /* Выпадающее меню под шапкой: top привязан к высоте шапки */
    .user-dropdown {
        position: fixed;
        top: 54px;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-top: 0;
        z-index: calc(var(--z-modal) - 1);
    }
    
    .user-dropdown.show {
        animation: slideInDown 0.2s ease;
    }
    
    @keyframes slideInDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    /* Компактный поиск в меню пользователя на мобильных */
    .dropdown-search-mobile {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--color-border-light);
        background: var(--color-bg-secondary);
    }
    .dropdown-search-mobile .dropdown-search-input {
        flex: 1;
        min-width: 0;
        padding: 0.375rem 0.5rem;
        font-size: var(--font-size-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-bg);
    }
    .dropdown-search-mobile .dropdown-search-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: none;
        border-radius: var(--radius-sm);
        background: var(--color-primary);
        color: var(--color-text-inverse);
        cursor: pointer;
        transition: background-color var(--transition-fast), transform var(--transition-fast);
    }
    .dropdown-search-mobile .dropdown-search-btn:hover {
        background: var(--color-primary-hover);
    }
    .dropdown-search-mobile .dropdown-search-btn [data-lucide] {
        width: 1rem;
        height: 1rem;
    }
}

/* Узкие телефоны (до 480px): компактная шапка, dropdown под неё */
@media (max-width: 480px) {
    :root {
        --header-height: 50px;
    }
    
    .site-header {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
}

/* Мобильные телефоны (до 480px) */
@media (max-width: 480px) {
    .reaction-picker-popover {
        max-width: calc(100vw - 2rem);
    }
    /* Типографика */
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
    h4 { font-size: var(--font-size-lg); }
    
    /* Шапка */
    .header-logo .logo-subtitle {
        display: none;
    }
    
    .auth-buttons .btn-text {
        display: none;
    }
    
    .auth-buttons .btn {
        padding: 0.5rem;
        min-width: 2.5rem;
        justify-content: center;
    }
    
    /* Мобильное меню */
    .mobile-nav {
        width: 100%;
    }
    
    /* Основной контент */
    
    /* Формы */
    
    .create-post-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .create-post-media {
        justify-content: center;
    }
    
    .create-post-submit {
        width: 100%;
    }
    
    /* Посты */
    .post-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .post-author {
        flex: 1;
        min-width: 0;
    }
    
    .post-category {
        order: 1;
        width: 100%;
        text-align: center;
    }
    
    /* Профиль — та же сетка 25% | 75%, блок 100% */
    .profile-info {
        padding: 1.5rem 1rem;
    }
    
    .profile-top-row {
        grid-template-columns: minmax(72px, 32%) 1fr;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .profile-avatar {
        width: 100%;
        max-width: 96px;
        height: auto;
        aspect-ratio: 1;
    }
    
    .profile-stats {
        flex-wrap: wrap;
        gap: 0;
    }
    
    .profile-stat {
        flex: 1 1 auto;
        min-width: 70px;
    }
    
    .profile-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Вкладки профиля — только иконки на мобильных */
    .profile-nav .nav-tabs {
        width: 100%;
    }
    
    .profile-nav .nav-tab {
        flex: 1;
    }
    
    .profile-nav .nav-tab-label {
        display: none;
    }
    
    .profile-nav .nav-tab-link {
        width: 100%;
        justify-content: center;
        padding: 1rem 0.5rem;
    }
    
    .profile-nav .nav-tab-link i {
        margin: 0;
        font-size: 1rem;
    }
    
    /* Карточки */
    .card-header,
    .card-body,
    .card-footer {
        padding: 1rem;
    }
    
    /* Подвал: 2 колонки навигации (занимают больше ширины) */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 0 1rem;
    }
    
    .footer-nav {
        grid-column: 1;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .footer-brand {
        display: block;
    }
    
    .footer-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-bottom {
        flex-direction: column;
        padding: 2rem 1rem;
    }
    
    .footer-legal {
        gap: 1rem;
    }
    
    /* Модальные окна */
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1.25rem;
    }
    
    .modal-footer {
        gap: 0.75rem;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    /* Сетки */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Пагинация */
    .pagination ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Админ панель — выбор периода не перекрывается шапкой, блок в колонку */
    .admin-main {
        /* padding: 1rem; */
        /* padding-top: calc(var(--header-height) + 0.75rem); */
    }
    .admin-page-header {
        /* margin-bottom: 1.25rem; */
    }
    .admin-period-select {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .admin-period-select select {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
    
    /* Страница входа/регистрации — компактно */
    .auth-card {
        padding: 1rem;
        border: none;
        box-shadow: none;
    }
    
    .auth-logo {
        font-size: 1.5rem;
    }
    
    .auth-title {
        font-size: var(--font-size-lg);
    }
    
    /* Очень маленькие экраны — дополнительная компактность */
    :root {
        --font-size-base: 0.9375rem; /* 15px */
    }
    
    /* Поля ввода — минимум 16px, иначе iOS зумит при фокусе */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input.form-control,
    textarea,
    select,
    .search-input,
    [contenteditable="true"] {
        font-size: 1rem !important;
    }
    
    .header-logo .logo-text {
        font-size: 1.5rem;
    }
    
    .user-avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .auth-buttons {
        gap: 0.25rem;
    }
    
    .auth-buttons .btn {
        padding: 0.375rem;
        min-width: 2rem;
    }
    
    /* Уведомления */
    .notifications-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .notification-link {
        padding: 0.875rem 1rem;
    }
    .notification-avatar-wrap {
        width: 40px;
        height: 40px;
    }
}

/* Адаптивность для темной темы */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .mobile-nav {
        background-color: #2d2d2d;
    }
    
    .mobile-overlay {
        background-color: rgba(0, 0, 0, 0.7);
    }
}

/* Портретная ориентация */
@media (max-height: 600px) and (orientation: portrait) {
    .auth-layout {
        padding: 1rem 0;
    }
    
    .auth-card {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-content {
        max-height: 90vh;
    }
    
    .mobile-nav {
        max-height: 100vh;
    }
}

/* Ландшафтная ориентация */
@media (orientation: landscape) and (max-height: 500px) {
    .site-header {
        position: static;
    }

    .feed-sidebar {
        position: static;
        max-height: none;
    }
}

/* Высокое разрешение (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-text,
    .header-logo {
        font-weight: var(--font-weight-black);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Печать */
@media print {
    .site-header,
    .feed-sidebar,
    .create-post-form,
    .post-actions,
    .site-footer,
    .mobile-nav,
    .mobile-overlay {
        display: none !important;
    }
    
    .main-layout,
    .container,
    .page-content,
    .feed-layout {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .feed-main {
        width: 100%;
    }
    
    body {
        background-color: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    .post-card {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
        margin-bottom: 1cm;
    }
}

/* Админка: навигация не под фиксированной шапкой на мобильном */
@media (max-width: 768px) {
    .admin-nav {
        padding-bottom: 0.75rem;
    }
}

/* Сообщения — мобильная версия, во весь экран */
@media (max-width: 768px) {
    .main-layout--messages {
        /* padding-top: 0; */
        min-height: 100vh;
    }
    
    .main-layout--messages .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        height: calc(100vh - var(--header-height));
    }
    
    .messages-layout {
        padding: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .messages-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: calc(100vh - var(--header-height));
        height: calc(100vh - var(--header-height));
        max-height: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .messages-page > .messages-sidebar {
        grid-column: 1;
        grid-row: 1;
    }
    
    .messages-page > .messages-chat-placeholder,
    .messages-page > .messages-chat-active {
        grid-column: 1;
        grid-row: 2;
    }
    
    .messages-sidebar {
        max-height: 45vh;
        min-height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }
    
    .messages-page.mobile-chat-open .messages-sidebar {
        display: none;
    }
    
    .messages-page.mobile-chat-open .messages-chat-placeholder {
        display: none;
    }
    
    .messages-page.mobile-chat-open .messages-chat-active {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .chat-back {
        display: flex;
    }
    
    .messages-header {
        padding: var(--pad-block);
    }
    
    .messages-header h1 {
        font-size: var(--font-size-lg);
    }
    
    .messages-chat-placeholder .chat-back {
        display: none;
    }
    
    .messages-chat-placeholder,
    .messages-chat-active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    
    .messages-thread {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .messages-list {
        flex: 1;
        min-height: 0;
        padding: 0.5rem 0.75rem;
    }
    
    .message-bubble {
        max-width: 88%;
    }
    
    .messages-send-form {
        padding: 0.5rem 0.75rem;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        z-index: 2;
    }
    
    .messages-attach-preview {
        max-height: 100px;
    }
    
    .messages-contenteditable {
        min-height: 36px;
        font-size: 16px;
    }
    
    .messages-send-form .btn-attach {
        width: 36px;
        height: 36px;
    }
    
    .messages-send-form .btn-send {
        width: 36px;
        height: 36px;
    }
    
    .messages-chat-header {
        padding: 0.5rem 0.75rem;
    }
    
    .chat-partner-link {
        min-width: 0;
    }
    
    .chat-partner-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .chat-partner-avatar {
        width: 32px;
        height: 32px;
    }
    
    .conversation-item {
        padding: 0.5rem 0.75rem;
    }
    
    .conversation-avatar-wrap {
        width: 40px;
        height: 40px;
    }
    
    .conversation-avatar {
        width: 40px;
        height: 40px;
    }
    
    .messages-selected-bar {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 480px) {
    .main-layout--messages .container {
        padding-left: 0;
        padding-right: 0;
    }
    
    .messages-layout {
        padding: 0;
    }
    
    .messages-page {
        min-height: calc(100vh - var(--header-height));
        height: calc(100vh - var(--header-height));
    }
    
    .messages-sidebar {
        max-height: 42vh;
        min-height: 160px;
    }
}