/* ELVENSONG_KANBAN_MOBILE_20260930 (v1.0.1)
   Мобильная вёрстка канбана «Сделки · склад» (/admin). Только оформление —
   функционал (drag&drop, чипы, прокрутка, снап) не меняется.

   ПОЧЕМУ v1.0.1
   v1.0.0 использовала селекторы в один класс (.kanban-col и т.д.) и НЕ РАБОТАЛА:
   в бандле SPA (assets/index-*.css) есть правило с большей специфичностью
     @media (max-width:860px){
       .ops-root.ops-embedded .kanban-col{
         flex:0 0 calc(100vw - 28px); width:calc(100vw - 28px); max-width:calc(100vw - 28px) } }
   (0,3,0 против 0,1,0 — порядок подключения не помогает). Поэтому ширина столбца
   считалась от 100vw, а не от контейнера: поля слева/справа выходили разными,
   шапка столбца «уезжала» за край экрана.
   v1.0.1: те же/более специфичные селекторы + !important на геометрию, поэтому
   столбец всегда равен ширине своего контейнера (поля 10px с обеих сторон),
   углы скруглены, шапка и мета переносятся аккуратно. */

/* ───────────────────────── планшет / узкий десктоп ───────────────────────── */
@media (max-width: 1100px) {
  /* лента столбцов: одинаковые поля слева/справа + аккуратный снэп */
  html .ops-root.ops-embedded .kanban,
  .kanban {
    display: flex;
    gap: 10px;
    padding: 0 12px 8px;
    scroll-padding-inline: 12px;
    scroll-snap-type: x mandatory;
    box-sizing: border-box;
  }
  /* гарантированное поле в конце ленты: последний столбец не прилипает к краю */
  .kanban::after {
    content: "";
    flex: 0 0 12px;
  }
  html .ops-root.ops-embedded .kanban .kanban-col,
  .kanban .kanban-col,
  .kanban-col {
    flex: 0 0 min(88vw, 340px);
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    border-radius: max(var(--radius, 12px), 12px);
    isolation: isolate;            /* закругление не «слетает» при прокрутке */
  }
  .kanban-col-head {
    border-radius: max(var(--radius, 12px), 12px) max(var(--radius, 12px), 12px) 0 0;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .kanban-col-meta {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .kanban-col-meta b,
  .kanban-col-meta span {
    white-space: nowrap;
  }
}

/* ─────────────────────────────── телефон ─────────────────────────────── */
@media (max-width: 860px) {
  /* Поля даёт сам .ops-content (10px). Своих горизонтальных полей не добавляем,
     иначе столбец становится на 20px уже нужного. */
  html .ops-root.ops-embedded .kanban,
  .kanban {
    gap: 10px;
    padding: 0 0 6px;
    scroll-padding-inline: 0;
  }
  .kanban::after {
    flex: 0 0 0;
  }
  /* Столбец = ровно ширина контейнера (не 100vw): поля симметричны на любом телефоне. */
  html .ops-root.ops-embedded .ops-content .kanban > .kanban-col,
  html .ops-root.ops-embedded .kanban .kanban-col,
  .ops-root.ops-embedded .kanban-col,
  .kanban .kanban-col,
  .kanban-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    border-radius: max(var(--radius, 12px), 12px);
    scroll-snap-align: start;
    height: 100%;
    max-height: none;
  }
  .kanban-col-head,
  .ops-root.ops-embedded .kanban-col-head {
    padding: 12px;
    min-width: 0;
    overflow-wrap: break-word;
    border-radius: max(var(--radius, 12px), 12px) max(var(--radius, 12px), 12px) 0 0;
  }
  .kanban-col-body {
    padding: 10px 10px 14px;       /* нижний отступ, чтобы карточка не липла к скруглению */
  }
}

/* ─────────────────────────── очень узкие экраны ─────────────────────────── */
@media (max-width: 420px) {
  .kanban-col,
  .kanban-col > *,
  .kanban-col-body > * {
    min-width: 0;
  }
  .kanban-col-head {
    font-size: calc(13px * var(--font-scale, 1));
  }
  .kanban-col-meta {
    font-size: calc(12px * var(--font-scale, 1));
  }
}