/* ==================================================================
   Экран «Сегодня» на телефоне — по макету «Мобильное приложение iOS».

   Отдельный слой: на мониторе его нет вовсе. Цвета системные — синий
   действия, красный опасное, зелёный успех; группы с заголовком
   заглавными; строка — это объект, кнопок в строке нет.
   ================================================================== */
.ios { display: none; }

@media (max-width: 860px) {
  .ios { display: block; }
  /*  Настольная разметка сводки на телефоне не показывается  */
  .dash-head, .split3, .dash-contracts, .dash-now, .dash-money,
  .dash-pretrial, .mob-context { display: none !important; }

  .ios {
    --blue: #007aff;          /* действие */
    --red: #ff3b30;           /* опасное */
    --green: #34c759;         /* успех */
    --grey: #8a8a8e;          /* вторичный текст */
    --sep: #e5e5ea;           /* разделитель */
    --fill: #f2f2f7;          /* фон групп */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
                 "Helvetica Neue", Arial, sans-serif;
    color: #000;
    margin: 0 -16px;
    padding: 0 0 8px;
  }

  .ios-title { font-size: 32px; font-weight: 700; letter-spacing: -0.03em;
    margin: 4px 16px 0; }
  .ios-sub { font-size: 14px; color: var(--grey); margin: 2px 16px 14px; }

  /*  Переключатель «Все · Мои · Маши» вместо строки меток  */
  .ios-seg { display: flex; gap: 2px; margin: 0 16px 18px; padding: 2px;
    background: var(--fill); border-radius: 9px; }
  .ios-seg a { flex: 1 1 0; text-align: center; padding: 7px 4px;
    font-size: 14px; font-weight: 500; color: #000; text-decoration: none;
    border-radius: 7px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .ios-seg a.on { background: #fff; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.12); }

  /*  Заголовок группы: 13/600 заглавными, действие справа синим  */
  .ios-head { display: flex; align-items: baseline; justify-content: space-between;
    padding: 0 16px 7px; margin-top: 22px; }
  .ios-head span { font-size: 13px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--grey); }
  .ios-head a { font-size: 15px; font-weight: 600; color: var(--blue);
    text-decoration: none; white-space: nowrap; }

  /*  Группа строк: белая карточка, разделитель с отступом слева  */
  .ios-list { list-style: none; margin: 0; padding: 0; background: #fff;
    border-radius: 14px; overflow: hidden; margin-inline: 16px; }
  .ios-list > li { position: relative; display: flex; align-items: stretch; }
  .ios-list > li + li::before { content: ""; position: absolute; left: 14px;
    right: 0; top: 0; height: 1px; background: var(--sep); }

  .ios-row { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 14px; min-height: 44px; text-decoration: none; color: inherit; }
  .ios-row:active { background: var(--fill); }

  .ios-time { flex: 0 0 62px; display: flex; flex-direction: column;
    font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .ios-time em { font-style: normal; font-size: 12px; font-weight: 400;
    color: var(--grey); }

  .ios-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    gap: 2px; }
  .ios-badge { align-self: flex-start; font-size: 12px; font-weight: 600;
    padding: 2px 7px; border-radius: 6px; background: #e8f0ff; color: #0a58d0; }
  .ios-badge.is-call { background: #efe9ff; color: #5a3ec8; }
  /*  Две строки максимум: длинное название задачи раздувало строку
      до трёхсот пикселей, и пять задач занимали два экрана  */
  .ios-name { font-size: 16px; font-weight: 600; line-height: 1.25;
    overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .ios-note { font-size: 13.5px; color: var(--grey); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }

  .ios-sum { flex: 0 0 auto; align-self: center; font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ios-sum.is-late { color: var(--red); }
  .ios-sum.is-ok { color: var(--green); }

  .ios-meta { flex: 0 0 auto; align-self: center; font-size: 13px; color: var(--grey);
    white-space: nowrap; }
  .ios-meta.is-late { color: var(--red); font-weight: 600; }

  .ios-chev { flex: 0 0 auto; align-self: center; color: #c4c4c7; font-size: 20px;
    line-height: 1; }
  .ios-empty { display: block; padding: 14px; color: var(--grey); font-size: 15px; }
  .ios-row.is-link .ios-name { color: var(--blue); font-weight: 600; }

  /*  Кружок выполнения слева, как в «Напоминаниях»  */
  .ios-tick { flex: 0 0 auto; display: flex; align-items: center; padding-left: 14px; }
  .ios-tick button { width: 24px; height: 24px; min-height: 24px; padding: 0;
    border: 1.6px solid #c4c4c7; border-radius: 50%; background: #fff; }
  .ios-tick button:active { background: var(--fill); }
  .ios-row.is-task { padding-left: 10px; }

  /*  Календарь месяца внутри карточки  */
  .ios-card { background: #fff; border-radius: 14px; margin-inline: 16px;
    padding: 10px 12px; overflow-x: auto; }
  /*  Календарь месяца — сеткой чисел, без списка событий в клетках:
      иначе карточка вырастает на два экрана  */
  /*  Календарь показывается целиком: обрезка прятала последнюю неделю,
      и до неё нельзя было домотать  */
  .ios-cal { max-height: none; overflow: visible; }
  .ios-cal .cal-head, .ios-cal .cal-filters, .ios-cal .calm-add,
  .ios-cal .calm-evs, .ios-cal .calm-more, .ios-cal .cal-legend { display: none; }
  .ios-cal .cal td, .ios-cal .calm-day { height: auto; min-height: 34px;
    padding: 2px; }
  .ios-cal .calm-num { font-size: 15px; font-weight: 500; }
}

/* ==================================================================
   Действия по строке: свайп влево открывает кнопки.

   Кнопки внутри строки на узком экране переносились на вторую строку и
   ломали высоту, поэтому они спрятаны под строкой — как в «Почте» и
   «Напоминаниях». Чтобы приём был заметен, после загрузки первая строка
   каждого списка один раз приоткрывается и возвращается назад.
   ================================================================== */
@media (max-width: 860px) {
  .ios-swipe { position: relative; overflow: hidden; }
  .ios-acts {
    position: absolute; right: 0; top: 0; bottom: 0; display: flex;
    align-items: stretch;
  }
  .ios-acts form, .ios-acts a { display: flex; }
  .ios-acts button, .ios-acts a {
    border: 0; min-width: 84px; padding: 0 14px; font-size: 15px;
    font-weight: 600; color: #fff; background: var(--grey);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; border-radius: 0; min-height: 100%;
  }
  .ios-acts .act-skip button { background: #ff9500; }
  .ios-acts .act-edit { background: var(--blue); }
  .ios-acts .act-del button { background: var(--red); }

  /*  Сама строка едет поверх кнопок  */
  .ios-swipe > .ios-row, .ios-swipe > .ios-tick {
    position: relative; z-index: 1; background: #fff;
    transition: transform .18s ease;
  }
  .ios-swipe.open > .ios-row, .ios-swipe.open > .ios-tick {
    transform: translateX(var(--acts, -168px));
  }
  /*  Подсказка при первом показе: строка приоткрывается и возвращается  */
  .ios-swipe.peek > .ios-row, .ios-swipe.peek > .ios-tick {
    transform: translateX(-26px);
  }
}

/*  Счётчик в заголовке группы — серым, не ссылкой  */
@media (max-width: 860px) {
  .ios-count { font-size: 15px; font-weight: 400; color: var(--grey);
    text-transform: none; letter-spacing: 0; }
}

/* ==================================================================
   Остальные разделы на телефоне: убираем управление с экрана списка.

   Выгрузки, архивы прошлых лет, формы заведения и поля отбора нужны
   на мониторе. На телефоне они занимают первые два экрана, и до данных
   человек не доходит. Всё это открывается кнопками в шапке: «⌕» и «＋».
   ================================================================== */
@media (max-width: 860px) {
  /*  Выгрузки и загрузки файлов  */
  .excel-line, .refresh-line, .sources,
  form[action*="export"], a[href*="export.xlsx"], a[href*="/export"],
  form[action*="sync-edo"], form[action*="/import"] { display: none !important; }

  /*  Переключатель архивных лет  */
  .year-switch, .years-line { display: none !important; }

  /*  Плашки «Добавить …» и «Настройки»: заводить — кнопкой «＋» в шапке  */
  details.panel.add-any, details.add-act,
  details.panel > summary[class*="add"], .panel > details[open] > summary { }
  main > details.panel:has(> summary:first-child) { }

  /*  Пояснительные абзацы под заголовком: на телефоне это стена текста  */
  .page-sub + p.small.muted, h1 + p.small.muted,
  .page-desc, .help-text, .desc-under { display: none; }

  /*  Поля отбора в потоке страницы  */
  main > form.inline:not(.search-form):not(.filters-form) { display: none; }
}

/*  Третья кнопка действия — «Открыть»: серо-синяя, как в iOS  */
@media (max-width: 860px) {
  .ios-acts .act-open { background: #5856d6; }
}

/*  Три цифры по деньгам: кегль 30, как в макете  */
@media (max-width: 860px) {
  .ios-big { flex: 0 0 auto; align-self: center; font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ios-big.is-late { color: var(--red); }
  .ios-big.is-ok { color: var(--green); }
  .ios-nums .ios-row { padding-top: 14px; padding-bottom: 14px; }
}

/* ==================================================================
   Списки на «Сегодня» листаются внутри карточки.

   Показывать пять строк и прятать остальное за ссылкой оказалось мало:
   чтобы увидеть шестое заседание, приходилось уходить в другой раздел.
   Теперь в карточке двенадцать записей, она высотой в пять строк и
   листается сама — с видимой полосой справа, чтобы это было заметно.
   ================================================================== */
@media (max-width: 860px) {
  .ios-scroll {
    max-height: 62vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*  Прокрутка списка не «протекает» на страницу и наоборот  */
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /*  Полоса видна всегда, а не только в движении: иначе непонятно,
      что список можно листать  */
  .ios-scroll::-webkit-scrollbar { width: 5px; }
  .ios-scroll::-webkit-scrollbar-thumb {
    background: #c4c4c7; border-radius: 3px;
  }
  .ios-scroll::-webkit-scrollbar-track { background: transparent; }
  /*  Тень у нижнего края подсказывает, что под ней ещё записи  */
  .ios-scroll { position: relative; }
  .ios-list.ios-scroll::after {
    content: ""; position: sticky; bottom: 0; left: 0; right: 0;
    display: block; height: 18px; margin-top: -18px;
    background: linear-gradient(transparent, rgba(255,255,255,.96));
    pointer-events: none;
  }
}