/* mobile.css — IM.15: touch-targets ≥36×36 на mobile (≤768).
 *
 * Глобальные правила для ВСЕХ интерактивных элементов:
 *  - кнопки (button, .btn, a.btn, [role=button])
 *  - иконки-тоглы (☰, ⋯, refresh, close)
 *  - фильтры/чипы/табы (.filter-pill, .chip, .tab, .db-hero-tab)
 *  - действия в карточках (.card-action, .user-btn, .int-btn)
 *  - элементы в таблицах
 *
 * Принцип: только mobile, не ломаем desktop.
 * Правило: min-height 36px + min-width 36px + padding чтобы визуально не выросло.
 */

/* Базовое правило для desktop — гарантируем, что кнопки/иконки ≥36×36.
 * IM.15.fix2: на desktop 1280 (где @media (max-width:768) не действует) кнопки
 * sidebar-toggle 24×24, .user-btn 25×25, .btn-outline h=34 — слишком мелкие.
 * Применяем всегда, но только к кнопкам, чтобы не сломать компактные лейблы. */
button:not(.bottom-sheet-btn):not(.swal2-styled):not(.no-min-size),
a.btn:not(.bottom-sheet-btn),
.btn:not(.bottom-sheet-btn):not(.no-min-size),
.sidebar-toggle,
.user-btn,
.btn-freeze,
.btn-delete,
.nav-item {
    min-height: 36px;
    min-width: 36px;
}

/* Иконки-тоглы topbar — общие правила для desktop + mobile.
 * 24×24 / 31×36 / 33×36 — узкие по ширине, не дотягивают до 36. */
.db-notif-btn,
.topbar-more,
.topbar-refresh,
.topbar-toggle,
.topbar-close {
    min-width: 36px;
    min-height: 36px;
}

/* FIX-3.10: горизонтальный scroll в topbar на mobile (если кнопок > 4).
 * Без этого 5+ кнопок уезжают за viewport 375. Kanban-like UX: свайп.
 * Применяется на ≤768, на desktop — обычный flex без scroll. */
@media (max-width: 768px) {
 .topbar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
 }
 .topbar > * { flex-shrink: 0; }
 .topbar h1, .page-title {
   max-width: calc(100vw - 140px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   font-size: 20px; font-weight: 600;
 }
}

/* Кнопки-стрелки (work-schedule prev/next и т.п.) — фикс 21×36 */
button:has(> :only-child):not(.no-min-size) {
    min-width: 36px;
}

/* UI-3.7: helper-text — единый стиль подписей под полями. */
.helper-text, .form-hint {
  display: block; margin-top: 4px;
  font-size: 12px; line-height: 1.4; max-width: 100%;
  color: var(--text-secondary, #6b7280);
}

/* UI-3.9: filter-row — wrap на desktop, scroll на mobile. */
.filter-row, .filter-bar, .filter-group {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
@media (max-width: 768px) {
  .filter-row, .filter-bar, .filter-group {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filter-row::-webkit-scrollbar, .filter-bar::-webkit-scrollbar { display: none; }
  .filter-row > *, .filter-bar > * { flex: 0 0 auto; }
}

/* UI-3.6: KPI grid — все карточки одной высоты (align-items: stretch).
 * grid auto-fit + minmax 140px — wrap на mobile, фикс прыгающих высот. */
.kpi-grid, .kpi-tiles, .stats-grid {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.kpi-tile, .kpi-card, .stat-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 80px;
}

/* UI-3.5: tabs/filters — horizontal scroll + snap на mobile.
 * Применяется к .tabs, .nav-tabs, .filter-tabs в любых страницах. */
@media (max-width: 768px) {
  .tabs, .nav-tabs, .filter-tabs, .tab-list, .tab-bar {
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar { display: none; }
  .tabs > *, .nav-tabs > *, .filter-tabs > *, .tab-list > * {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
    /* 1) Базовое правило для всех кнопок и интерактивных элементов */
    button:not(.bottom-sheet-btn):not(.swal2-styled),
    a.btn:not(.bottom-sheet-btn),
    .btn:not(.bottom-sheet-btn),
    [role="button"]:not(.bottom-sheet-btn) {
        min-height: 36px;
    }

    /* 2) Иконки-тоглы (без текста) — минимум 36×36 */
    .crm-sidebar-open-btn,
    .sidebar-toggle,
    .topbar-more,
    .topbar-refresh,
    .topbar-close,
    .topbar-toggle,
    .menu-btn,
    .icon-btn,
    .btn-icon {
        min-width: 36px;
        min-height: 36px;
        padding: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 3) Действия в карточках */
    .card-action,
    .user-btn,
    .int-btn,
    .quick-action-btn {
        min-height: 36px;
        min-width: 36px;
        padding: 8px 12px;
    }

    /* 4) Фильтры, чипы, табы */
    .filter-pill,
    .chip,
    .db-hero-tab,
    .tab,
    .nav-tab,
    .pipeline-tab,
    .date-presets button {
        min-height: 36px;
        padding: 8px 14px;
    }

    /* 5) Типовые action-кнопки (Редактировать / Сохранить / Отмена / Удалить) */
    .btn-edit,
    .btn-delete,
    .btn-freeze,
    .btn-unfreeze,
    .btn-primary,
    .btn-save,
    .btn-cancel,
    .btn-outline,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        min-height: 36px;
        padding: 8px 14px;
    }

    /* 6) Мелкие уведомления/иконки в topbar */
    .db-notif-btn,
    .notif-btn,
    .notification-btn,
    .alert-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 8px;
    }

    /* 7) Элементы форм (input type=checkbox/radio → обёртка label или сам input) */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 18px;
        min-height: 18px;
    }

    /* 8) Аватар + кнопка загрузки фото в профиле */
    .profile-avatar-upload,
    .avatar-upload,
    .upload-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* 9) Переключатели в табах воронок / навигация kanban */
    .kanban-nav,
    .swipe-arrow,
    .view-toggle,
    .view-toggle button,
    .view-toggle > a,
    a.icon-btn,
    a[data-view],
    button[data-view] {
        min-width: 36px;
        min-height: 36px;
    }
}

    /* 9b) ID-селекторы: стрелки навигации в work-schedule / kanban */
    #prevWeek,
    #nextWeek,
    #prevMonth,
    #nextMonth,
    #kanbanPrev,
    #kanbanNext {
        min-width: 36px;
        min-height: 36px;
    }

    /* 10) IM.9 — кнопка закрытия bottom-sheet (×) */
    .bottom-sheet-close {
        min-width: 36px;
        min-height: 36px;
        padding: 8px;
    }

    /* 11) input/select — тоже touch-target (фокус, открытие клавиатуры) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        min-height: 36px;
    }

    /* 12) Утилита для всего остального: [data-touch] */
    [data-touch="min"] {
        min-height: 36px;
        min-width: 36px;
    }

/* 13) FIX-431: topbar-actions на узких mobile (≤480): скрыть текст в
 * .topbar-actions > .btn-primary — оставить только иконку (+). Иначе
 * кнопки вроде "Создать задачу" не помещаются в 375px topbar. */
@media (max-width: 480px) {
    .topbar-actions > .btn-primary {
        padding: 8px;
        min-width: 36px;
        width: 36px;
    }
    .topbar-actions > .btn-primary > svg {
        margin: 0;
    }
    /* Текст внутри .btn-primary (прямой child, не вложенный в span) */
    .topbar-actions > .btn-primary > :not(svg) {
        display: none;
    }
}