/* Телефон: мобильное приложение Bitrix24 открывает страницу на всю ширину экрана.
 *
 * Подключается последним, правит только узкий экран. Экраны для работы за
 * компьютером (сводная, проверка HR) остаются таблицами с прокруткой вбок;
 * под телефон разложены «Мои KPI», «Мой отдел» и реестр нарушений.
 */

@media (max-width: 640px) {
  main {
    padding: var(--space-3);
  }

  .panel,
  .card {
    padding: var(--space-3);
  }

  /* Шапка: название строкой выше, вкладки одной лентой с прокруткой вбок,
   * а не тремя рядами кнопок на пол-экрана. */
  .app-header {
    padding: 0;
  }

  .app-header-inner {
    gap: var(--space-1);
    padding: var(--space-2) 0 var(--space-1);
  }

  .app-title {
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
  }

  .app-nav {
    flex-wrap: nowrap;
    width: 100%;
    padding: 0 var(--space-3) var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .app-nav::-webkit-scrollbar {
    display: none;
  }

  .app-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Фильтры: поля на всю ширину, кнопка следом. */
  .field {
    flex: 1 1 100%;
    max-width: none;
  }

  /* Поля ввода не мельче 16px: иначе iOS увеличивает страницу при фокусе. */
  input[type="text"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }

  /* «Мои KPI»: показатель - карточка, под названием четыре числа в ряд. */
  .hr-metrics {
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .hr-metrics .kpi-grid,
  .hr-metrics .kpi-grid tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .hr-metrics .kpi-grid thead {
    display: none;
  }

  .hr-metrics .kpi-grid tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .hr-metrics .kpi-grid td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }

  .hr-metrics .kpi-grid td.metric-title {
    grid-column: 1 / -1;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
  }

  .hr-metrics .kpi-grid td.metric-title .cell-target,
  .hr-metrics .kpi-grid td.metric-title .muted {
    font-weight: 400;
  }

  .hr-metrics .kpi-grid td[data-label]::before {
    display: block;
    margin-bottom: 2px;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 400;
    content: attr(data-label);
  }

  /* Итоги листа: подпись слева, сумма справа, без лишних отступов. */
  .totals {
    padding: var(--space-3);
  }

  /* Реестр нарушений: карточка плотнее - короткие поля по два в ряд. */
  .vl-table .vl-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
  }

  .vl-table .vl-row td.vl-col-comment,
  .vl-table .vl-row td.vl-col-counted,
  .vl-table .vl-row td.vl-col-actions {
    grid-column: 1 / -1;
  }

  .vl-col-name,
  .vl-col-comment,
  .vl-col-counted {
    min-width: 0;
  }

  .vl-form .vl-field,
  .vl-form .vl-field-wide {
    flex: 1 1 100%;
    min-width: 0;
  }

  .vl-submit {
    width: 100%;
  }

  /* Исходные данные отдела: счётчики переносятся под имя. */
  .src-person-counters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }

  /* «Мой отдел»: карточка сотрудника. Показатель - полная строка с фактом
   * слева и процентом справа, итоги парами внизу, без зебры и плашек
   * широкой таблицы. */
  .manager-screen .kpi-grid .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .manager-screen .kpi-grid .kpi-row > td,
  .manager-screen .kpi-grid .kpi-row :is(.col-total, .col-status, .col-updated, .col-actions) {
    background: none;
    box-shadow: none;
  }

  .manager-screen .kpi-grid .kpi-row > td.col-employee {
    border-right: 0;
  }

  .manager-screen .kpi-grid .kpi-row > td.metric-cell {
    grid-column: 1 / -1;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-soft);
  }

  .manager-screen .kpi-grid .kpi-row > td.metric-cell {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .manager-screen .kpi-grid .kpi-row > td.metric-cell .cell-main {
    text-align: left;
  }

  .manager-screen .kpi-grid .kpi-row > td.metric-cell .cell-value {
    padding-left: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    text-align: left;
  }

  /* Форма новой доплаты: вид, сумма и комментарий во всю ширину. */
  .extra-form :is(select, .extra-input) {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Исходные данные внутри блока отдела - с отступом, как группы ниже. */
  .manager-screen .src-card {
    margin: 0 var(--space-3) var(--space-4);
  }

  .src-people {
    grid-template-columns: minmax(0, 1fr);
  }

  .manager-screen .kpi-grid .kpi-row > td.metric-cell .cell-input {
    width: 100%;
    max-width: 12rem;
  }

  .manager-screen .kpi-grid .kpi-row > td.col-total,
  .manager-screen .kpi-grid .kpi-row > td.col-status,
  .manager-screen .kpi-grid .kpi-row > td.col-updated {
    min-width: 0;
    max-width: none;
    text-align: left;
    align-self: start;
  }

  .manager-screen .kpi-grid .kpi-row > td.col-actions {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    max-width: none;
    white-space: normal;
  }

  .manager-screen .row-return-comment {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  /* «Проверка» HR: та же матрица отдела, что у руководителя, - карточкой. */
  .hr-ui .grid-scroll:has(.kpi-row),
  .hr-ui .grid-scroll:has(.hr-department-table) {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .hr-ui .kpi-grid:has(.kpi-row),
  .hr-ui .kpi-grid:has(.kpi-row) tbody,
  .hr-ui .hr-department-table,
  .hr-ui .hr-department-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .hr-ui .kpi-grid:has(.kpi-row) thead,
  .hr-ui .hr-department-table thead {
    display: none;
  }

  .hr-ui .kpi-grid .kpi-row,
  .hr-ui .hr-department-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .hr-ui .kpi-grid .kpi-row > td,
  .hr-ui .hr-department-table td {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: left;
  }

  .hr-ui .kpi-grid .kpi-row > td.col-employee,
  .hr-ui .hr-department-table td.hr-dept-name {
    grid-column: 1 / -1;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
  }

  .hr-ui .kpi-grid .kpi-row > td.metric-cell {
    grid-column: 1 / -1;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-soft);
  }

  .hr-ui .kpi-grid .kpi-row > td.metric-cell :is(.cell-main, .cell-value) {
    padding-left: 0;
    text-align: left;
  }

  .hr-ui .kpi-grid .kpi-row > td.metric-cell .cell-input {
    width: 100%;
    max-width: 12rem;
  }

  .hr-ui .kpi-grid .kpi-row > td[data-label]::before,
  .hr-ui .hr-department-table td[data-label]::before {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 400;
    content: attr(data-label);
  }

  .hr-ui .hr-department-table tr {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hr-ui .hr-department-table td.hr-dept-head {
    grid-column: 1 / -1;
  }
}