/* Правила для узкого экрана.
 *
 * Кабинет собран под десктоп: боковое меню фиксированной ширины и таблицы в
 * полную ширину. На телефоне меню занимало две трети экрана, содержимое
 * уходило за границу окна, а страница прокручивалась вбок целиком. Здесь
 * меню сжимается до иконок, а таблицы прокручиваются внутри карточек.
 *
 * Файл лежит рядом со сборкой и подключается последним, поэтому переопределяет
 * стили приложения без правки его бандла.
 */

@media (max-width: 760px) {
  .layout-container > .el-aside.sidebar {
    width: 58px !important;
    overflow: visible;
    /* Иначе раскрытое подменю уходит под карточки содержимого. */
    position: relative;
    z-index: 30;
  }

  .sidebar .sidebar-logo span,
  .sidebar .el-menu-item > span,
  .sidebar .el-sub-menu__title > span {
    display: none;
  }

  .sidebar .el-sub-menu__icon-arrow {
    display: none;
  }

  .sidebar .sidebar-logo,
  .sidebar .el-menu-item,
  .sidebar .el-sub-menu__title {
    padding: 0 17px !important;
    justify-content: center;
  }

  /* У меню Element Plus прокрутка по обеим осям: при ширине в 58 пикселей
     раскрытое подменю оказывалось за правой границей и обрезалось целиком. */
  .sidebar .sidebar-menu {
    overflow: visible;
  }

  /* Подменю «Админка» раскрывается поверх содержимого, иначе его пункты
     оказались бы шириной в 58 пикселей. */
  .sidebar .el-sub-menu .el-menu {
    position: absolute;
    left: 58px;
    z-index: 20;
    min-width: 210px;
    background: #1F2D3D;
  }

  .sidebar .el-sub-menu .el-menu .el-menu-item > span {
    display: inline;
  }

  .app-header {
    padding: 0 12px !important;
  }

  .app-header .user-name {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .app-main {
    padding: 14px 12px !important;
  }

  /* Панели фильтров собраны в строку и на телефоне выходили за край. */
  .app-main .toolbar,
  .app-main .toolbar-left,
  .app-main .toolbar-right,
  .app-main .filters,
  .app-main .filters-row {
    flex-wrap: wrap;
    /* Без сброса flex-элемент не сжимается ниже своего содержимого
       и вылезает за пределы карточки. */
    min-width: 0;
  }

  .app-main .card-header,
  .app-main .card-header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Поля ввода, выпадающие списки и выбор периода заданы фиксированной
     шириной под десктоп и на телефоне уходили за правый край. Сбросить
     нужно и min-width: он сильнее max-width и держал прежний размер. */
  .app-main .el-select,
  .app-main .el-input,
  .app-main .el-date-editor,
  .app-main .el-select__wrapper,
  .app-main .el-input__wrapper {
    min-width: 0 !important;
  }

  .app-main .toolbar-left > *,
  .app-main .filters > *,
  .app-main .filters-row > *,
  .app-main .el-select,
  .app-main .el-input,
  .app-main .el-date-editor,
  .app-main .el-date-editor.el-input__wrapper {
    max-width: 100% !important;
  }

  /* Длинная подсказка в списке («Фильтр по пользователям…») не обрезалась
     и вылезала за край поля. */
  .app-main .el-select__selected-item,
  .app-main .el-select__selected-item span,
  .app-main .el-select__placeholder {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Таблицы шире экрана прокручиваются внутри своей карточки,
     а не тянут за собой всю страницу. */
  .app-main .el-table {
    max-width: 100%;
  }

  .app-main .el-card__body,
  .app-main .el-table__body-wrapper,
  .app-main .el-table__header-wrapper {
    overflow-x: auto;
  }
}