/* Мобильная адаптация существующих страниц. Каркас и тема — в app.css. */
@media (max-width: 767.98px) {
  main .d-flex.justify-content-between,
  main .d-flex.justify-content-end,
  main .d-flex.gap-2,
  main .form-inline {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  main .d-flex {
    min-width: 0;
  }

  main .d-flex.justify-content-between {
    align-items: stretch !important;
    flex-direction: column;
  }

  main .d-flex.justify-content-between > *,
  main .d-flex.justify-content-end > * {
    min-width: 0;
    max-width: 100%;
  }

  main .d-flex.justify-content-between > * {
    width: 100%;
  }

  main .d-flex.justify-content-between > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  main .d-flex.justify-content-between > :last-child:not(h1):not(h2),
  main .d-flex.justify-content-end > :last-child {
    margin-top: 0.25rem;
  }

  main .text-right {
    text-align: left !important;
  }

  main .btn:not(.btn-link):not(.close),
  .modal .btn:not(.btn-link):not(.close) {
    min-height: 42px;
    white-space: normal;
  }

  main input:not([type='checkbox']):not([type='radio']),
  main select,
  main textarea,
  .modal input:not([type='checkbox']):not([type='radio']),
  .modal select,
  .modal textarea {
    max-width: 100% !important;
    min-height: 42px;
  }

  main input[type='file'] {
    width: 100%;
  }

  main .row > [class*='col-'] {
    min-width: 0;
  }

  main .card-body {
    padding: 1rem;
  }

  main .card,
  main .card-body,
  main .row,
  main [class*='col-'] {
    min-width: 0;
  }

  main .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }

  main .nav-pills .nav-link {
    white-space: nowrap;
  }


  .table-responsive > table {
    width: max-content;
    min-width: 680px;
  }

  .table-responsive > table.table-sm {
    min-width: 560px;
  }

  .table-responsive .form-control {
    min-width: 110px;
  }

  table[style*='table-layout: fixed'] {
    min-width: 1380px;
  }

  .employee-list-table th:nth-child(4),
  .employee-list-table td:nth-child(4),
  .entity-list-table th:nth-child(3),
  .entity-list-table td:nth-child(3),
  .entity-list-table th:nth-child(5),
  .entity-list-table td:nth-child(5),
  .counterparty-list-table th:nth-child(3),
  .counterparty-list-table td:nth-child(3),
  .counterparty-list-table th:nth-child(5),
  .counterparty-list-table td:nth-child(5),
  .mobile-hide {
    display: none !important;
  }

  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    width: auto;
    max-width: none;
    margin: 0.5rem;
  }

  .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .modal-body {
    overflow-y: auto;
    padding: 1rem;
  }

  .modal-footer {
    flex-wrap: wrap;
    padding: 0.75rem;
  }

  .modal-footer > * {
    margin: 0.25rem !important;
  }

  /* Поля не мельче 16px — иначе iPhone увеличивает страницу при вводе. */
  main input:not([type='checkbox']):not([type='radio']),
  main select,
  main textarea,
  .modal input:not([type='checkbox']):not([type='radio']),
  .modal select,
  .modal textarea,
  .app-search input {
    font-size: 16px;
  }

  /* Блоки-«поля» (div.form-control) растут по тексту, а не обрезают его. */
  .form-control:not(input):not(select):not(textarea) {
    height: auto;
    min-height: 42px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Строка «Найдено строк: N · Excel» остаётся строкой. */
  main .js-table-status.d-flex {
    flex-direction: row;
    align-items: center !important;
  }

  main .js-table-status.d-flex > * {
    width: auto;
    margin-top: 0 !important;
  }

  /* Вкладки карточек — одна строка с прокруткой пальцем вместо 3–4 рядов. */
  main .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  main .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  main .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  main .nav-tabs .nav-link {
    white-space: nowrap;
  }

  /* Шапка окна: кнопки под заголовком, а не сжатые рядом с ним. */
  .modal-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .modal-header .modal-title {
    flex: 1 1 60%;
  }

  .modal-header .js-moek-open {
    order: 3;
    flex: 1 0 100%;
    margin: 0 !important;
  }

  /* Таблицы-списки на телефоне — карточками: одна строка = одна карточка с подписями полей.
     Разметку (data-label) готовит static_dev/js/app.js, класс mobile-cards. */
  .table-responsive > table.mobile-cards {
    width: 100%;
    min-width: 0;
  }

  table.mobile-cards thead {
    display: none;
  }

  table.mobile-cards,
  table.mobile-cards tbody,
  table.mobile-cards tr:not(.d-none),
  table.mobile-cards td {
    display: block;
    width: 100%;
  }

  table.mobile-cards tr:not(.d-none) {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--app-border, #e3e8ef);
  }

  table.mobile-cards td {
    border: 0 !important;
    padding: 0.1rem 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  table.mobile-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    color: var(--app-muted, #6b7785);
    margin-top: 0.3rem;
  }

  table.mobile-cards td.mobile-card-title {
    font-size: 1rem;
  }

  table.mobile-cards td.mobile-card-title::before,
  table.mobile-cards td:empty,
  table.mobile-cards td.mobile-card-empty {
    display: none;
  }

  table.mobile-cards td[colspan] {
    text-align: center !important;
  }

  table.mobile-cards td[colspan]::before {
    display: none;
  }
}