/* mobile.css — единые правила для телефонов (≤700px) поверх style.css/nav.css всех страниц.
   Таблицы: mobile.js подписывает ячейки (data-label), здесь строка становится карточкой-сеткой. */

html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, svg, canvas, video, iframe { max-width: 100%; }
canvas { height: auto; }

@media (max-width: 700px) {
  .container { padding: 12px 12px 72px; }
  h1, .page-title, .sb-title { font-size: 22px; line-height: 1.2; }
  h2 { font-size: 18px; }

  /* карточки KPI: две в ряд, компактнее */
  .sb-kpi-grid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .sb-kpi { padding: 12px 12px 10px; border-radius: 14px; min-width: 0; }
  .sb-kpi-value { font-size: 19px; letter-spacing: -0.02em; word-break: break-word; }
  .sb-kpi-value .delta { display: block; margin-left: 0; font-size: 12px; }
  .sb-kpi-title, .sb-kpi-head { font-size: 11px; }
  .sb-kpi-sub { font-size: 11px; line-height: 1.35; }
  .sb-kpi-ico { display: none; }

  .sb-panel, .card { padding: 14px 14px; border-radius: 14px; }
  .sb-panel + .sb-panel { margin-top: 12px; }
  .sb-panel-title { font-size: 15px; }

  /* строки кнопок и чипов переносятся, ничего не вылезает */
  .top-actions, .panel-head, .pf-head, .cal-tools, .row-actions { flex-wrap: wrap; gap: 8px; }
  .btn, button.btn { max-width: 100%; white-space: normal; }
  .cchip, .chip { white-space: nowrap; }

  /* --- таблицы → карточки --- */
  table.m-cards { width: 100%; border-collapse: collapse; }
  table.m-cards thead { display: none; }
  table.m-cards, table.m-cards tbody, table.m-cards tfoot { display: block; }
  table.m-cards tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px;
    padding: 12px 2px; border-bottom: 1px solid var(--border, #e6eaf0);
  }
  table.m-cards tr:last-child { border-bottom: 0; }
  table.m-cards td, table.m-cards th { display: block; padding: 0; border: 0; text-align: left !important; white-space: normal; min-width: 0; }
  table.m-cards td:first-child, table.m-cards td.m-full { grid-column: 1 / -1; }
  table.m-cards td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #8a97a8); margin-bottom: 2px;
  }
  table.m-cards td:first-child[data-label]::before { display: none; }
  table.m-cards td:empty { display: none; }
  table.m-cards td.num { font-variant-numeric: tabular-nums; }
  table.m-cards td .op-inst, table.m-cards td .asset-cell { display: flex; align-items: center; gap: 10px; }
  /* меню строки (три точки / карандаш) — в правый верхний угол карточки, отдельную строку под него не тратим */
  table.m-cards tr { position: relative; }
  table.m-cards td:first-child { padding-right: 44px; }
  table.m-cards td:last-child:not([data-label]):not(.m-full), table.m-cards td.m-actions { position: absolute; top: 8px; right: 0; grid-column: 2; justify-self: end; }
  table.m-cards td:last-child:not([data-label]):not(.m-full):first-child { position: static; padding-right: 0; }
  table.m-cards td.m-full { grid-column: 1 / -1 !important; justify-self: stretch; }

  /* таблицы, которые нельзя разложить, скроллим внутри карточки */
  .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* графики не тянут страницу вширь */
  .chart-box, .chart-card, .sb-chart { min-width: 0; overflow: hidden; }

  /* модальные окна на всю ширину */
  .modal { max-width: calc(100vw - 20px) !important; width: calc(100vw - 20px) !important; max-height: 92vh; overflow: auto; border-radius: 14px; }
  .modal-backdrop { padding: 10px; align-items: flex-end; }


  /* длинные ISIN и адреса переносим */
  .isin, .addr, small.tk, .mono { word-break: break-all; }
}

@media (max-width: 420px) {
  .sb-kpi-value { font-size: 17px; }
  .container { padding-left: 10px; padding-right: 10px; }
}

/* --- главная: столбики будущих выплат — все 12 месяцев в ширину экрана --- */
@media (max-width: 700px) {
  .vv-bars { gap: 3px; overflow: visible; }
  .vv-bar-col { min-width: 0; flex: 1 1 0; }
  .vv-bar-track { width: 100%; max-width: 22px; height: 96px; }
  /* подписи без «таблеток» и без знака ₽: при 12 столбиках они наезжали друг на друга (особенно при крупном шрифте на Android) */
  .vv-bars { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .vv-bars .vv-bar-sum { font-size: 9px; letter-spacing: -0.03em; padding: 0; background: none; border-radius: 0; max-width: 100%; text-align: center; overflow: hidden; }
  .vv-bars .vv-bar-sum .vv-cur { display: none; }
  .vv-bars .vv-bar-month { font-size: 10px; margin-top: 5px; padding: 0; background: none; border-radius: 0; }
  .vv-search { max-width: none; margin: 8px 0 0; flex-basis: 100%; }
  .vv-search input { padding: 10px 14px 10px 40px; }
}

/* --- криптопортфель --- */
@media (max-width: 700px) {
  .c-perseg { display: flex; width: 100%; }
  .c-perseg button { flex: 1 1 0; padding: 5px 4px; font-size: 11px; }
  .c-seg { max-width: 100%; }
  .sb-kpi-head .c-seg { margin-left: 0; }
  #cKpis .sb-kpi { overflow: hidden; }
  #cKpis .sb-kpi:nth-child(3), #cKpis .sb-kpi:nth-child(4) { grid-column: 1 / -1; }
}

/* --- профиль: боковое меню становится горизонтальной лентой и не растягивает страницу --- */
@media (max-width: 820px) {
  .ac-wrap { grid-template-columns: minmax(0, 1fr); }
  .ac-side, .ac-main { min-width: 0; max-width: 100%; }
  .ac-nav { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ac-nav::-webkit-scrollbar { display: none; }
}

/* --- шапка на телефоне: вторая строка (AI · + · портфель · профиль) всегда помещается в экран.
   Иначе мобильный браузер раздвигает страницу вширь, и кнопка ИИ уезжает за правый край. --- */
@media (max-width: 520px) {
  .header { padding: 10px 12px; row-gap: 8px; }
  .header-left { min-width: 0; max-width: 100%; }
  .header-right { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; gap: 6px; }
  .header-right > * { min-width: 0; flex-shrink: 1; }
  .header-right > a.btn, .header-right > button.btn { flex-shrink: 0; }
  #hdrPortfolioBox { flex: 1 1 0; min-width: 0; overflow: visible; }
  #hdrPortfolioBtn { min-width: 0 !important; max-width: none !important; width: 100%; overflow: hidden; padding-left: 10px !important; padding-right: 8px !important; }
  #hdrPortfolioBtn > span:first-child { flex: 0 0 auto; }
  .vvai-hbtn { flex: 0 0 auto; }
  body.vv-demo #hdrAddWrap, body.vv-demo .header-right a[href="import.html"] { display: none !important; }
}

/* --- поля ввода: 16px, чтобы iPhone не приближал страницу при нажатии на поле --- */
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  .vv-search input, #txSearch, input[type="search"] { font-size: 16px !important; }
  /* операции: поиск на всю ширину, фильтры в строку */
  .op-filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .op-filters #txFilter { flex: 1 1 45%; min-width: 0; }
  .op-filters #txSearch { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
  /* аналитика: KPI по две в ряд */
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .an-kpi { padding: 12px 12px; }
  .an-kpi .v { font-size: 19px; }
  /* кухня: подзаголовок раздела переносится, кнопка не наезжает */
  .ksec-h { align-items: center; }
  .ksec-h .s { flex: 1 1 100%; order: 3; white-space: normal; }
  /* подключение брокера: страница без .container — свои отступы */
  .import-wrap { padding: 0 12px 96px; box-sizing: border-box; }
}
@media (min-width: 701px) and (max-width: 1040px) {
  .import-wrap { padding: 0 20px; box-sizing: border-box; }
}

/* Рост/падение за день на главной: на телефоне две колонки не помещаются — цена и процент
   наезжали на название. Одна колонка, сумма в рублях внутри плашки прячется, остаётся процент. */
@media (max-width: 700px) {
  #moversInline, #moversSection { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  #moversInline .vv-tile, #moversSection .vv-tile { padding: 10px 12px; gap: 8px; }
  #moversInline .vv-tile > div:last-child, #moversSection .vv-tile > div:last-child { flex: none; max-width: 46%; }
  #moversInline .vv-tile > div:last-child > div, #moversSection .vv-tile > div:last-child > div { white-space: nowrap; font-size: 13px !important; }
  #moversInline .vv-pill .rub, #moversSection .vv-pill .rub { display: none; }
  #moversInline .vv-pill, #moversSection .vv-pill { white-space: nowrap; }
}