/* =====================================================
   RESPONSIVE STYLES - Mobile First Approach
   Адаптив для экранов < 768px
   ===================================================== */

/* Кнопка Главная скрыта по умолчанию (на ПК не нужна) */
.home-btn-mobile {
    display: none;
}

/* ===========================================
   ГЛОБАЛЬНЫЕ ПРАВИЛА ПРОТИВ ПЕРЕПОЛНЕНИЯ
   =========================================== */
@media (max-width: 768px) {

    /* Не используем overflow на html/body — это ломает sticky */
    /* Горизонтальный скролл контролируется на уровне контейнеров */

    /* Все элементы не выходят за границы (кроме подсказок) */
    *:not(.admin-tooltip):not(.admin-tooltip *) {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Длинный текст переносится, но без разрыва слов по слогам */
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    div {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
        /* Не разрываем слова по слогам */
    }

    /* Числа и суммы не переносятся, но уменьшаются */
    .total-balance-text {
        font-size: 1.8rem !important;
    }

    .stat-value {
        font-size: var(--font-size-lg) !important;
    }

    /* Контейнер приложения — убрали overflow чтобы sticky работал */
    .app-container {
        padding: var(--space-sm);
    }
}

/* ===========================================
   НАВИГАЦИЯ - Мобильная версия
   =========================================== */
@media (max-width: 768px) {

    /* Навигация фиксируется при прокрутке */
    .nav {
        position: sticky !important;
        top: 0;
        z-index: 1000;
        background: var(--bg-secondary);
        flex-wrap: wrap;
        padding: var(--space-sm) var(--space-md);
        padding-top: 24px;
        /* Отступ сверху — чёрная полоса под статус-бар */
        gap: var(--space-sm);
    }

    .nav-brand {
        flex: none;
        /* Не растягиваем, чтобы кнопка Главная была рядом */
    }

    .nav-brand span {
        font-size: var(--font-size-md);
    }

    .nav-links {
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: var(--space-xs);
        padding-top: var(--space-md);
        border-top: 1px solid var(--glass-border);
        display: none;
    }

    .nav-links.mobile-open {
        display: flex;
    }

    .nav-link {
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.03);
    }

    .nav-actions {
        gap: var(--space-sm);
    }

    /* Кнопка бургер-меню (слева) */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--text-primary);
        order: -1;
        margin-right: var(--space-sm);
    }

    /* Кнопка Главная для мобильных — сразу после логотипа */
    .home-btn-mobile {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 12px;
        background: rgba(79, 70, 229, 0.2);
        border: 1px solid rgba(79, 70, 229, 0.4);
        border-radius: var(--radius-md);
        color: var(--accent-primary);
        margin-left: var(--space-sm);
        margin-right: auto;
        text-decoration: none;
        font-size: var(--font-size-sm);
        font-weight: 500;
    }

    .home-btn-mobile:hover {
        background: var(--accent-primary);
        color: white;
    }

    .home-btn-mobile i,
    .home-btn-mobile svg {
        width: 18px;
        height: 18px;
    }

    /* Скрываем обратную связь текст, оставляем иконку */
    #feedback-btn span {
        display: none;
    }

    /* Скрываем переключатель языка */
    .lang-switch {
        display: none;
    }

    /* Скрываем подсказки toggle */
    .tooltip-toggle {
        display: none;
    }

    /* Sticky balance bar для мобильных — прилипает ПОД навигацией */
    .sticky-balance-bar {
        position: sticky !important;
        top: 70px;
        /* Высота навигации */
        z-index: 100;
        background: var(--bg-primary);
        margin: 0 0 var(--space-md) 0;
    }

    /* Убираем все sticky у таблиц */
    th {
        position: static !important;
    }
}

/* ===========================================
   КАРТОЧКИ И КОНТЕНТ
   =========================================== */
@media (max-width: 768px) {
    .card {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    /* Summary cards */
    .summary-cards {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm);
    }

    .summary-card {
        padding: var(--space-md);
    }

    /* Analytics stats */
    .analytics-stats,
    .partners-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-sm);
    }

    .stat-card {
        padding: var(--space-sm);
    }

    .stat-value {
        font-size: var(--font-size-xl);
    }

    /* Grid layouts */
    .goals-grid,
    .substats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Funds grid */
    .funds-grid {
        grid-template-columns: 1fr !important;
    }

    .fund-card {
        padding: var(--space-md);
    }
}

/* ===========================================
   ФОРМЫ И ИНПУТЫ
   =========================================== */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: var(--space-md);
    }

    .form-control {
        padding: var(--space-sm) var(--space-md);
        font-size: 16px;
        /* Предотвращает zoom на iOS */
    }

    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        width: 100%;
    }

    .btn-lg {
        padding: var(--space-md) var(--space-lg);
    }

    /* Кнопки в ряд — стакаем */
    .flex.gap-md:has(.btn) {
        flex-direction: column;
    }

    .flex.gap-sm:has(.btn) {
        flex-direction: column;
    }

    /* Action buttons группа */
    .action-buttons,
    .header-controls {
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }

    .action-buttons .btn,
    .header-controls .btn {
        width: 100%;
    }
}

/* ===========================================
   ТАБЛИЦЫ - Горизонтальный скролл
   =========================================== */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-md));
        padding: 0 var(--space-md);
    }

    table {
        min-width: 600px;
        font-size: var(--font-size-sm);
    }

    th,
    td {
        padding: var(--space-sm);
        white-space: nowrap;
    }

    /* Partners table */
    .partners-table {
        min-width: 700px;
    }

    .partners-filters {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .filter-btn {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }
}

/* ===========================================
   МОДАЛЬНЫЕ ОКНА
   =========================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        max-height: 90vh;
        overflow-y: auto;
        margin: var(--space-md);
        padding: var(--space-md);
    }

    .modal-content h3 {
        font-size: var(--font-size-lg);
    }

    /* Form в модалке */
    .modal-content .form-group {
        margin-bottom: var(--space-sm);
    }
}

/* ===========================================
   ГРАФИКИ (Charts)
   =========================================== */
@media (max-width: 768px) {
    .chart-container {
        height: 250px !important;
        min-height: 200px;
    }

    /* Уменьшаем отступы вокруг графиков */
    .chart-card {
        padding: var(--space-sm);
    }

    .chart-card canvas {
        max-height: 220px;
    }
}

/* ===========================================
   BLOCK 1 - Доходы/Расходы
   =========================================== */
@media (max-width: 768px) {

    /* Lists */
    .list-group {
        gap: var(--space-sm);
    }

    /* Элементы списка Block1 (доходы/расходы) */
    #income-list>div,
    #fixed-list>div,
    #variable-list>div {
        flex-wrap: nowrap !important;
        /* Карандашик НЕ переносится! */
        justify-content: flex-start !important;
        align-items: flex-start;
        /* Выравнивание по верху если текст переносится */
        gap: 12px;
    }

    /* Контейнер название + сумма */
    #income-list>div>.flex-1,
    #fixed-list>div>.flex-1,
    #variable-list>div>.flex-1 {
        flex: 1 1 auto !important;
        gap: 12px;
        justify-content: flex-start !important;
        flex-wrap: wrap;
        /* Только внутри — название может переноситься */
        align-items: baseline;
    }

    /* Название: переносится при нехватке места */
    #income-list>div>.flex-1>span:first-child,
    #fixed-list>div>.flex-1>span:first-child,
    #variable-list>div>.flex-1>span:first-child {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Карандашик: маленький, рядом с суммой */
    #income-list>div>.btn,
    #fixed-list>div>.btn,
    #variable-list>div>.btn,
    .list-item-right .btn {
        margin-left: 12px !important;
        flex-shrink: 0;
        padding: 4px !important;
        min-width: auto !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Period info */
    .period-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    /* Убираем точку перед кнопками (flex gap-sm) */
    .flex.gap-sm {
        list-style: none !important;
    }

    .flex.gap-sm>.btn {
        list-style: none !important;
    }

    .flex.gap-sm>.btn::before {
        content: none !important;
    }
}

/* ===========================================
   BLOCK 2 - Планирование
   =========================================== */
@media (max-width: 768px) {

    /* Заголовок блока планирования — адаптивный шрифт */
    #page-planning h1 {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }

    /* Funds header */
    .funds-header {
        flex-direction: column;
        gap: var(--space-md);
    }

    .funds-actions {
        width: 100%;
        flex-direction: column;
    }

    .funds-actions .btn {
        width: 100%;
    }

    /* Fund items внутри карточки */
    .fund-items {
        gap: var(--space-xs);
    }

    .fund-item {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .fund-item-row {
        flex-wrap: wrap;
    }

    .fund-item-name {
        width: 100%;
        overflow-wrap: break-word;
    }

    .fund-item-controls {
        flex-shrink: 0;
    }

    /* Debts section */
    .debts-list {
        gap: var(--space-sm);
    }

    .debt-item {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* ===========================================
   ANALYTICS - Аналитика
   =========================================== */
@media (max-width: 768px) {
    .analytics-header {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Блок селектора периода — в 2 строки */
    .card>.flex.justify-between.items-center.gap-md {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Навигация по периодам */
    .card>.flex>.flex.items-center.gap-sm:first-child {
        width: 100%;
        justify-content: center;
    }

    /* Инпуты дат */
    .card>.flex>.flex.items-center.gap-sm:last-child {
        width: 100%;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .card input[type="date"] {
        width: 100%;
        padding: var(--space-sm) !important;
    }

    /* Goals cards — квадратные, крупные */
    .goals-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md);
    }

    .goal-card-square {
        min-height: 320px;
    }

    /* Картинка цели — пропорциональная, не растянутая */
    .goal-image-container {
        height: 180px;
        min-height: auto;
        aspect-ratio: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .goal-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .goal-image-placeholder {
        font-size: var(--font-size-lg);
        padding: var(--space-lg);
    }

    .goal-image-placeholder i {
        width: 48px !important;
        height: 48px !important;
    }

    .goal-info {
        padding: var(--space-md);
    }

    .goal-info h4 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-sm);
    }

    /* Custom stats */
    .custom-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Графики */
    .grid.grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================
   PARTNERS - Партнёры
   =========================================== */
@media (max-width: 768px) {
    .partners-header {
        flex-direction: column;
        gap: var(--space-md);
    }

    .header-controls {
        width: 100%;
    }

    .reward-settings {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .reward-input {
        width: 80px;
    }

    /* Referral link */
    .referral-block {
        padding: var(--space-md);
    }

    .referral-link-container {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .referral-link-input {
        width: 100%;
        font-size: var(--font-size-sm);
    }

    .btn-copy {
        width: 100%;
    }

    .qr-mini {
        display: block;
        margin: 0 auto;
    }

    /* Referrer inline panel */
    .referrer-inline-panel {
        padding: var(--space-sm);
    }

    .referrer-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .referrer-panel-body {
        flex-direction: column;
        align-items: stretch;
    }

    .referrer-panel-body select {
        max-width: none;
        width: 100%;
    }

    .referrer-panel-body .btn {
        width: 100%;
    }
}

/* ===========================================
   AUTH PAGES - Логин/Регистрация
   =========================================== */
@media (max-width: 768px) {
    .auth-card {
        padding: var(--space-lg);
        margin: var(--space-md);
    }

    .auth-title {
        font-size: var(--font-size-xl);
    }

    .promo-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================
   УТИЛИТЫ ДЛЯ МОБИЛЬНЫХ
   =========================================== */
@media (max-width: 768px) {

    /* Скрыть на мобильных */
    .hide-mobile {
        display: none !important;
    }

    /* Показать только на мобильных */
    .show-mobile {
        display: block !important;
    }

    /* Flex в колонку на мобильных */
    .mobile-col {
        flex-direction: column !important;
    }

    /* Полная ширина */
    .mobile-full {
        width: 100% !important;
    }

    /* Уменьшенные отступы */
    .mobile-compact {
        padding: var(--space-sm) !important;
    }
}

/* По умолчанию скрываем элементы только для мобильных */
.show-mobile {
    display: none !important;
}

/* Кнопка бургер меню по умолчанию скрыта */
.mobile-menu-btn {
    display: none;
}

/* ===========================================
   ПЛАНШЕТЫ (768px - 1024px)
   =========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .app-container {
        padding: var(--space-md);
    }

    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .funds-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .goals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}