/* ============================================================================
 * Глобальные мобильные улучшения CLT (Этап 1).
 *
 * iOS PWA: блокируем авто-зум и двойной тап.
 */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/*
 *
 * Подключается в templates/base.html → значит наследуется во всех шаблонах
 * (base.html, cabinet/_base.html, superadmin/_base.html, finance, и т.д.).
 *
 * Принципы:
 *   • mobile-first only там где нужно — десктоп не трогаем
 *   • правки только внутри @media (max-width: 768px) или (max-width: 576px)
 *   • никаких !important кроме конкретных override Bootstrap
 *   • цель: сделать страницы юзабельными на iPhone и Android без скролла
 *     влево-вправо и с тач-зонами достаточного размера
 * ========================================================================= */


/* ========== УТИЛИТЫ (доступны на всех экранах) ========== */

/* Скрыть на мобильных (≤768px) */
.mob-hide { /* override через @media ниже */ }
@media (max-width: 768px) {
  .mob-hide { display: none !important; }
}

/* Показать только на мобильных (≤768px). Симметрично к Bootstrap-ным
   d-md-none, но не привязано к колоночной системе и читаемо в коде. */
.mob-only { display: none !important; }
@media (max-width: 768px) {
  .mob-only { display: block !important; }
  .mob-only.d-flex { display: flex !important; }
  .mob-only.d-inline-flex { display: inline-flex !important; }
}

/* Стэк (колонка) на мобильных — для блоков, которые на десктопе flex-row */
@media (max-width: 768px) {
  .mob-stack { flex-direction: column !important; }
  .mob-stack > * { width: 100%; }
}


/* ========== БАЗОВАЯ ТИПОГРАФИКА ========== */

@media (max-width: 768px) {
  /* Bootstrap по умолчанию даёт body 16px — не трогаем. Защита от
     случайных кастомных стилей со слишком мелким шрифтом: */
  body { font-size: 15px; }
  /* Заголовки не растягиваем больше чем нужно */
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  h4, h5 { font-size: 1rem; }
}


/* ========== ТАЧ-ЗОНЫ ≥40px на мобильных ========== */

@media (max-width: 768px) {
  /* Bootstrap btn по умолчанию ~38px высоты — добиваем до 40. Не трогаем
     btn-sm чтобы их можно было использовать осознанно, но даём минимум. */
  .btn:not(.btn-sm):not(.btn-link) {
    min-height: 40px;
  }
  /* Наши кастомные кнопки fin-icon-btn — тоже выравниваем */
  .fin-icon-btn {
    min-height: 38px;
  }
  /* Поля ввода — побольше для пальца */
  .form-control, .form-select, .fin-input, .fin-select, .fin-search input {
    min-height: 40px;
    font-size: 16px;
  }
  /* iOS не зумит когда font-size ≥16px у input. На всякий случай: */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], input[type="time"], textarea, select {
    font-size: 16px;
  }
}


/* ========== КОНТЕЙНЕРЫ — убираем горизонтальный скролл ========== */

@media (max-width: 768px) {
  /* Базовые wrap-контейнеры наших страниц: уменьшаем padding и убираем
     минимальную ширину чтобы контент не вылезал за viewport. */
  .cd-wrap, .cl-wrap, .cs-wrap, .jr-wrap, .sa-container,
  .cabinet-content, main.container, main.container-fluid {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }
}


/* ========== ТАБЛИЦЫ ========== */

@media (max-width: 768px) {
  /* Любая .table внутри .table-responsive нормально скроллится. Для
     тех таблиц что без обёртки — даём горизонтальный скролл блоку. */
  .table:not(.table-responsive .table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* .fin-table — наша кастомная таблица в fin-стиле. Та же логика. */
  .fin-table {
    font-size: 0.82rem;  /* немного компактнее на мобильном */
  }
  /* Padding в ячейках на мобильном — поменьше */
  .fin-table thead th,
  .fin-table tbody td,
  .table thead th,
  .table tbody td {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* ========== МОДАЛКИ ========== */

@media (max-width: 767.98px) {
  /* Глобальный fallback для всех модалок на мобильном — 100% viewport. */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  .modal-content {
    min-height: 100vh;
    border-radius: 0;
    border: none;
  }
  /* Body модалки должен скроллиться, если контент длиннее viewport */
  .modal-body {
    overflow-y: auto;
  }

  /* 3-колоночный layout внутри модалок (appointmentModal,
     appointmentCreateModal) — на мобильном стэкаем в одну колонку.
     Классы добавлены вручную на родителя и колонки. */
  .am-modal-row {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .am-modal-col {
    width: 100% !important;
    flex-shrink: 1 !important;
    flex: 0 0 auto !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #E5E7EB !important;
  }
  .am-modal-col:last-child { border-bottom: none !important; }

  /* Модалка как flex-column: body растягивается, футер на самом низу.
     Это правильный паттерн чтобы кнопки "Создать / Сохранить / Отмена"
     всегда были на нижней кромке экрана. */
  .modal-fullscreen-md-down .modal-content,
  .modal-dialog .modal-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
  }

  /* Тело (am-modal-row) забирает всё свободное место и скроллится */
  .am-modal-row {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;   /* критично для flex-item чтобы скроллился */
  }

  /* Если внутри обёртка modal-body — её тоже растягиваем */
  .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Футер закреплён внизу column-flex'а — visible-area дна экрана */
  .am-modal-footer,
  .modal-footer {
    flex-shrink: 0 !important;
    position: relative !important;  /* sticky убираем — flex и так держит */
    background: #fff !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  }
}


/* ========== АВАТАРЫ И КРУГИ ========== */

@media (max-width: 768px) {
  /* Большие аватары в карточке клиента — уменьшаем */
  .cd-avatar { width: 64px !important; height: 64px !important; font-size: 1.4rem !important; }
}


/* ========== KPI-КАРТОЧКИ ========== */

@media (max-width: 768px) {
  /* Финансовый дашборд: KPI блок Bootstrap col-md-3 = 4 в ряд на десктопе,
     на телефоне col-6 даёт 2 в ряд. Уменьшаем шрифт значений чтобы
     не вылезали. */
  .fin-kpi-value {
    font-size: 1.2rem !important;
  }
  .fin-kpi-label {
    font-size: 0.65rem !important;
  }
  .fin-card-pad {
    padding: 12px 12px !important;
  }
}


/* ========== ФОРМЫ — большие формы редактирования ========== */

@media (max-width: 768px) {
  /* Любой .row .col-md-* стандартно стекается на мобилке через Bootstrap.
     Дополнительно: уменьшаем gap между полями чтобы форма не растягивалась */
  .row.g-3 > * { padding-top: 8px; }

  /* Master form в accounts — кастомные .mf-* */
  .mf-section { padding: 12px !important; }
  .mf-grid { grid-template-columns: 1fr !important; }
}


/* ========== САЙДБАР КАБИНЕТА ========== */

@media (max-width: 991px) {
  /* В кабинете боковой sidebar уже off-canvas через JS (см. cabinet/_base.html).
     Дополнительно: основной контент не имеет левого отступа когда сайдбар скрыт */
  .cabinet-content {
    margin-left: 0 !important;
  }
}


/* ========== БЕЙДЖИ И ЧИПЫ ========== */

@media (max-width: 768px) {
  .badge, .fin-badge, .st-badge {
    font-size: 0.68rem;
  }
}


/* ========== ПАГИНАЦИЯ ========== */

@media (max-width: 576px) {
  /* На мобильном пагинацию иногда выкидывает за экран если много страниц */
  .pagination { flex-wrap: wrap; }
}


/* ========== СПЕЦИФИЧНЫЕ ИСПРАВЛЕНИЯ ========== */

/* navbar в base.html — убираем лишний padding */
@media (max-width: 768px) {
  .navbar-brand { font-size: 1rem; }
}

/* Footer */
@media (max-width: 768px) {
  footer.container { font-size: 0.75rem; }
}

/* ========== TOPBAR (кабинет) ========== */

@media (max-width: 768px) {
  .cabinet-topbar {
    height: 44px;
    padding: 0 10px;
  }
  .cabinet-topbar .cabinet-burger {
    font-size: 1.15rem;
    padding: 4px 6px;
    margin-right: 6px;
  }
  .cabinet-topbar .fw-semibold {
    font-size: 0.9rem;
  }
  .cabinet-topbar .cabinet-avatar {
    width: 28px; height: 28px;
    font-size: 0.65rem;
  }
  .cabinet-topbar .cabinet-user-btn {
    padding: 3px 6px;
  }
  /* Навигация по дням в topbar (журнал) */
  .cabinet-journal-mobilenav {
    display: inline-flex;align-items:center;gap:2px;margin-left:6px;
  }
  .cabinet-mobilenav-btn {
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;border:none;border-radius:6px;
    background:transparent;color:#475569;font-size:.85rem;text-decoration:none;
  }
  .cabinet-mobilenav-btn:active { background:#e5e7eb; }
  .cabinet-mobilenav-today {
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border:none;border-radius:6px;
    background:transparent;color:#0f172a;font-size:.8rem;text-decoration:none;
    margin-left:2px;
  }
  .cabinet-mobilenav-today:active { background:#e5e7eb; }
  .cabinet-mobilenav-date {
    border:none;background:transparent;font-size:.82rem;font-weight:600;
    color:#0f172a;padding:2px 4px;cursor:pointer;min-width:34px;text-align:center;
  }
  .cabinet-mobilenav-add {
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border:none;border-radius:8px;
    background:#bef264;color:#1f2937;font-size:1.05rem;
    margin-left:auto;text-decoration:none;flex-shrink:0;
  }
  .cabinet-mobilenav-add:active { background:#a3e635; }
  /* Скрываем десктопный header навигации на мобильном */
  .cabinet-journal-header #dateNavContainer { display:none !important; }
  .cabinet-journal-header #addAppointmentLink { display:none !important; }
  .cabinet-journal-header #zoomSlider { display:none !important; }
  .cabinet-journal-header #zoomLabel { display:none !important; }
  .cabinet-journal-header { margin-bottom:0 !important;padding:0 12px !important; }
  .cabinet-journal-header button[title="На весь экран"] { display:none !important; }
  /* Масштаб календаря в мобильном топбаре */
  #zoomMobWrap { margin-right: 2px; }
  #zoomMobWrap .form-range { height: 16px; }
  #zoomLabelMob { font-size: 0.68rem; color: #64748b; min-width: 28px; text-align: right; }
}

/* ========== ФИЛЬТР-БАРЫ (.fin-filter-bar) ========== */

@media (max-width: 768px) {
  /* В .fin-filter-bar поиск имеет min-width 220-240px и наезжает на соседний
     select (товары, услуги, мастера). На мобильном — поиск во всю строку,
     остальные фильтры переносятся ниже (по 2 в ряд через их flex:1 min-width:130px). */
  .fin-filter-bar .fin-search { flex: 1 1 100% !important; }
  .fin-filter-bar .fin-search input { min-width: 0 !important; width: 100%; }
  /* Группа кнопок справа (ms-auto) — на всю строку, без правого прижатия */
  .fin-filter-bar .ms-auto { margin-left: 0 !important; width: 100%; }
}