/**
 * TRILOG CRM — Mobile v4
 * Точные переопределения инлайн-стилей из <style> каждой страницы
 */

/* ── Safe area PWA ── */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 768px) {

  /* ══ 1. BODY — убираем flex (sidebar+main в строку) ══ */
  body {
    display: block !important;
    overflow-x: hidden !important;
  }

  /* ══ 2. HEADER (.hdr) — sticky сверху ══ */
  .hdr {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    padding: 0 12px !important;
    height: 48px !important;
  }

  .logo { font-size: 13px !important; }

  .usr {
    gap: 6px !important;
    font-size: 12px !important;
  }

  /* ══ 3. SIDEBAR — скрыт, выезжает по burger ══ */
  .sidebar {
    left: -230px !important;
    top: 0 !important;
    height: 100vh !important;
    width: 220px !important;
    z-index: 1050 !important;
    transition: left 0.25s ease !important;
  }

  .sidebar.mobile-open {
    left: 0 !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.6) !important;
  }

  /* Overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
  }
  .sidebar-overlay.active { display: block; }

  /* ══ 4. MAIN — убираем margin-left: 220px ══ */
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ══ 5. PAGE (.pg) — паддинг под нижнюю навигацию ══ */
  .pg {
    padding: 12px 10px 70px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ══ 6. ДАШБОРД: stats 4→2 колонки ══ */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat { padding: 10px 12px !important; }
  .sv { font-size: 22px !important; }
  .sl2 { font-size: 10px !important; }

  /* ══ 7. ДАШБОРД: qa 3→2 колонки ══ */
  .qa {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .qb { padding: 10px 6px !important; }
  .qi { font-size: 18px !important; margin-bottom: 3px !important; }
  .ql { font-size: 11px !important; }

  /* ══ 8. WELCOME блок ══ */
  .welcome {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  .welcome h2 { font-size: 16px !important; }
  .welcome p { font-size: 12px !important; }

  /* ══ 9. CARD ══ */
  .card {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
  .ct { font-size: 12px !important; margin-bottom: 8px !important; }

  /* ══ 10. ЗАДАЧИ: tasks-grid → одна колонка ══ */
  .tasks-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .tasks-grid .kanban-col {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* due-summary: 4→2 колонки (переопределяем инлайн-стиль) */
  .due-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ══ 11. TOPBAR внутри страниц ══ */
  .topbar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 0 12px 0 !important;
  }

  .topbar-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* ══ 12. ТАБЛИЦЫ ══ */
  .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .tbl-wrap table {
    min-width: 560px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .tbl-wrap th,
  .tbl-wrap td {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  /* ══ 13. ФИЛЬТРЫ И ПОИСК ══ */
  .filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  input.search {
    width: 100% !important;
    font-size: 16px !important;
    padding: 9px 12px !important;
  }

  .toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .pg-hdr { margin-bottom: 10px !important; }
  .pg-title { font-size: 16px !important; font-weight: 600 !important; }

  /* ══ 14. ФОРМЫ ══ */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"],
  input[type="search"], textarea, select, .field-input {
    width: 100% !important;
    font-size: 16px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    -webkit-appearance: none;
  }

  .field-row, .form-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ══ 15. КНОПКИ ══ */
  .btn {
    min-height: 40px !important;
    font-size: 12px !important;
    touch-action: manipulation !important;
  }

  /* ══ 16. МОДАЛКИ ══ */
  .modal, #crm-modal > div {
    margin: 8px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  /* ══ 17. BURGER ══ */
  .burger-btn {
    display: flex !important;
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1200 !important;
    width: 34px !important;
    height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #1d4ed8 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  /* ══ 18. НИЖНЯЯ НАВИГАЦИЯ ══ */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: #1a1a2e !important;
    border-top: 1px solid #ffffff20 !important;
    z-index: 1020 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .mobile-bottom-nav a {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffffaa !important;
    text-decoration: none !important;
    font-size: 0.6rem !important;
    gap: 2px !important;
    padding: 4px 0 !important;
    transition: color 0.15s !important;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a:hover { color: #4fc3f7 !important; }
  .mobile-bottom-nav svg { width: 20px !important; height: 20px !important; }
}

/* ── Нижняя nav только на мобильном ── */
.mobile-bottom-nav { display: none; }