/*
 * Мобільний фікс для Bootstrap-колонок.
 *
 * На сайті колонки скрізь задаються тільки як "col-md-*" і/або "col-xl-*",
 * без базового "col-12". Бутстрап-правила для col-md-* та col-xl-*
 * прописані лише всередині @media (min-width:768px) / (min-width:1200px) —
 * тобто нижче 768px ці колонки не мають ЖОДНОГО CSS-правила ширини від
 * Bootstrap і поводяться непередбачувано (стискаються під вміст замість
 * того, щоб займати повну ширину рядка).
 *
 * Це правило примусово робить такі колонки повною шириною (100%) на
 * екранах вужчих за 768px (типові мобільні телефони), імітуючи базовий
 * "col-12", якого немає в розмітці.
 */
@media (max-width: 767.98px) {
  .row > [class*="col-md-"],
  .row > [class*="col-xl-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /*
   * Широкі "горизонтальні" таблиці (наприклад, інформація про тендер —
   * один рядок даних, багато колонок) неможливо адаптувати ховаючи
   * колонки, бо кожна колонка — окрема важлива деталь. Замість цього
   * зменшуємо шрифт і відступи, щоб влазило більше без горизонтального
   * скролу, і сам скрол (від table-responsive) лишався запасним варіантом.
   */
  .table-responsive table {
    font-size: 11px !important;
  }
  .table-responsive table th,
  .table-responsive table td {
    padding: 0.3rem 0.35rem !important;
    white-space: normal;
  }
}

/*
 * За замовчуванням у sb.min.02.css ".sidebar.toggled" ховає меню повністю
 * (width:0) лише нижче 768px; від 768px і вище воно замість цього
 * звужується до іконок (width:6.5rem), але з дрібним текстом під іконкою.
 *
 * Портретна орієнтація телефону (<768px) — лишаємо повне приховування,
 * там і так замало місця для іконок поруч з контентом.
 */
@media (max-width: 767.98px) {
  .sidebar.toggled {
    width: 0 !important;
    overflow: hidden !important;
  }
}

/*
 * Альбомна орієнтація телефону (768px–991.98px) — замість повного
 * приховування згортаємо меню до чистих іконок, без підписів під ними
 * (на відміну від десктопної поведінки, де дрібний текст залишається).
 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar.toggled {
    overflow: visible !important;
    width: 6.5rem !important;
  }
  .sidebar.toggled .nav-item .nav-link span {
    display: none !important;
  }
}