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

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

    /* Предотвращаем горизонтальный скролл */
    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Все элементы не выходят за границы (кроме подсказок) */
    *: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: auto;
    }

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

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

    /* Контейнер приложения */
    .app-container {
        padding: var(--space-sm);
        overflow-x: hidden;
    }
}

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

    /* Убираем sticky — всё прокручивается вместе со страницей */
    .nav {
        position: static !important;
        flex-wrap: wrap;
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .nav-brand {
        flex: 1;
    }

    .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);
    }

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

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

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

    /* Убираем sticky у balance bar — всё прокручивается */
    .sticky-balance-bar {
        position: static !important;
        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);
    }

    .list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .list-item-info {
        width: 100%;
        justify-content: space-between;
    }

    .list-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

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

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

    /* 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-name {
        width: 100%;
        margin-bottom: var(--space-xs);
    }

    /* 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: none;
    }

    /* 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);
    }
}