/**
 * Адаптация под разные устройства.
 * Подключается после layout.css.
 * Брейкпоинты: 720px (планшет/узкий экран), 480px (телефон).
 */

/* ---- Планшеты и узкие экраны (≤720px) ---- */
@media (max-width: 720px) {
  .app-header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .app-header-title {
    font-size: 15px;
  }

  .app-header-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .app-header-nav::-webkit-scrollbar {
    height: 4px;
  }

  .app-header-nav a {
    flex-shrink: 0;
    font-size: 13px;
    padding: 6px 10px;
  }

  .app-header .header-right {
    margin-left: auto;
  }

  .app-main {
    padding: 16px 12px 32px;
  }

  /* Контейнеры страниц — на узком экране не сужать контент */
  .page {
    max-width: 100% !important;
  }

  .card {
    padding: 18px 16px 20px;
    overflow-x: auto;
  }

  .page-title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  /* Таблицы: горизонтальный скролл внутри карточки */
  .data-table,
  .perms-table,
  table.data-table {
    display: table;
    min-width: 0;
  }

  .toolbar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .search-row {
    gap: 10px;
  }

  .search-row input,
  .search-row select {
    min-width: 0;
    flex: 1 1 140px;
  }

  /* Модальные окна (отступы вдвое меньше прежних margin:12px) */
  .modal-dialog,
  .modal-box,
  .calc-modal-dialog,
  .files-modal-dialog {
    max-width: min(calc(100vw - 28px), 520px) !important;
    margin: 6px;
    padding: 18px 16px;
    max-height: calc(100vh - 28px) !important;
  }

  /* Широкая модалка расчёта позиции (запрос) — не сжимать до 520px */
  .calc-modal-dialog.calc-modal-dialog--wide {
    max-width: min(calc(100vw - 28px), 920px) !important;
  }

  .preview-modal {
    inset: 6px;
  }

  .convert-dialog {
    max-width: min(95vw, 520px) !important;
  }

  /* Настройки: сайдбар сверху в одну строку */
  .settings-layout {
    flex-direction: column;
    max-width: 100%;
  }

  .settings-sidebar {
    width: 100%;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 16px 12px;
  }

  .settings-sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .settings-sidebar a {
    padding: 8px 12px;
    font-size: 13px;
  }

  .settings-content {
    padding: 16px 12px 32px;
  }
}

/* ---- Телефоны (≤480px) ---- */
@media (max-width: 480px) {
  .app-header {
    padding: 8px 12px;
    gap: 10px;
  }

  .app-header-title {
    font-size: 14px;
  }

  .app-header .btn,
  .app-header .btn-settings {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
  }

  .app-main {
    padding: 12px 10px 24px;
  }

  .card {
    padding: 14px 12px 16px;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .modal-dialog,
  .modal-box,
  .calc-modal-dialog,
  .files-modal-dialog {
    max-width: 100% !important;
    margin: 4px;
    padding: 16px 14px;
    max-height: calc(100vh - 24px) !important;
  }

  .preview-modal {
    inset: 4px;
  }

  .convert-dialog {
    max-width: 100% !important;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .search-row {
    flex-direction: column;
  }

  .search-row input,
  .search-row select {
    flex: 1 1 auto;
    width: 100%;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .settings-sidebar a {
    padding: 6px 10px;
    font-size: 12px;
  }

  .settings-content {
    padding: 12px 10px 24px;
  }
}