/*
  Responsive overrides (ADD-ON)
  Цель: никаких наездов элементов на мобильных/планшетах.
  Файл подключается ПОСЛЕ /styles.css.
  Ничего не удаляет — только переопределяет стили в узких брейкпоинтах.
*/

/* ===== Mobile (phones) ===== */
@media (max-width: 560px){
  /* Bottom navigation: горизонтальная панель снизу, без превращения в огромную вертикальную колонку */
  body.authed .sidebar{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--sidebar-border) !important;
    border-right: 0 !important;
    z-index: 50 !important;
  }

  body.authed .sidebar .sidehead,
  body.authed .sidebar .divider,
  body.authed .sidebar .navgroup__title,
  body.authed .sidebar .sidebar__footer{
    display: none !important;
  }

  /* Flatten nav groups into a single horizontal row */
  body.authed .sidebar .navgroup{
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.authed .sidebar .navbtn{
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 72px;
    padding: 8px 10px !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    border-radius: 12px;
  }
  body.authed .sidebar .navbtn__label{
    display: block !important;
    font-size: 11px !important;
    line-height: 1.1;
    text-align: center;
  }
  body.authed .sidebar .navbtn__icon{ color: var(--sidebar-text) !important; }

  /* If sidebar was collapsed earlier, don't hide labels on mobile */
  body.sidebar-collapsed .navbtn__label{ display: block !important; }
  body.sidebar-collapsed .sidebar{ width: auto !important; }

  /* Content: leave space for bottom nav (and safe-area on iPhone) */
  body.authed .content{
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* General anti-overlap rules */
  .tabhead{ flex-wrap: wrap !important; }
  .tabhead__right{ width: 100%; justify-content: flex-start !important; }
  .filtersbar{ flex-wrap: wrap !important; }
  .filtersbar__right{ width: 100%; justify-content: space-between !important; flex-wrap: wrap !important; }
  .row{ flex-wrap: wrap !important; }
  .grid{ grid-template-columns: 1fr !important; }
  .grid2{ grid-template-columns: 1fr !important; }
  .metricsbar{ flex-wrap: wrap !important; }
  .metriccard{ min-width: 150px; flex: 1 1 150px; }

  /* Modals */
  .modal{ padding: 10px !important; }
  .modal__panel{ width: 100% !important; max-height: 94vh !important; }
  .modal__head{ flex-wrap: wrap !important; }
  .chat__input{ flex-wrap: wrap !important; }
  .chat__input .input{ flex: 1 1 100%; }
  .chat__input .btn{ flex: 1 1 auto; }
}

@media (max-width: 420px){
  /* Make inline tags near phone smaller and prevent weird line-height */
  .tagsInline{ gap: 5px !important; margin-left: 6px !important; }
  .tagsInline .badge{ padding: 4px 6px !important; font-size: 11px !important; line-height: 1 !important; }

  /* Phone cell: allow wrapping to avoid overlap */
  #leadsTable th[data-col="phone"],
  #leadsTable td[data-col="phone"]{
    white-space: normal !important;
  }
  #leadsTable td[data-col="phone"]{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  #leadsTable td[data-col="phone"] a.link{ white-space: nowrap; }
}