/* MapLead CRM: адаптив. Файл подключается последним: медиазапросы перекрывают
   правила всех файлов выше, как в исходном едином styles.css. */

/* --- адаптив ----------------------------------------------------------------------- */

/* У админа восемь разделов: на ноутбучных ширинах шапка ужимается по шагам, у оператора
   три раздела, и ей хватает места. */
@media (max-width: 90rem) {
  body[data-role="admin"] .gate-label,
  body[data-role="admin"] .user-role {
    display: none;
  }

  body[data-role="admin"] .nav a {
    padding: 0 0.6rem;
  }
}

@media (min-width: 48rem) and (max-width: 85rem) {
  body[data-role="admin"] .today {
    display: none;
  }
}

/* 1024-1152 px: восемь разделов админа влезают, только если имя сжать до квадрата с
   инициалом (имя и роль остаются в меню) и поджать отступы разделов. */
@media (min-width: 48rem) and (max-width: 72rem) {
  body[data-role="admin"] .top-in {
    gap: 1rem;
  }

  body[data-role="admin"] .nav a {
    padding: 0 0.45rem;
  }

  body[data-role="admin"] .user-name,
  body[data-role="admin"] .user-caret {
    display: none;
  }

  body[data-role="admin"] .user-btn {
    width: 2rem;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 80rem) {
  .rail {
    flex-basis: 12.5rem;
  }
}

@media (max-width: 75rem) {
  .leads .c-contacts {
    display: none;
  }

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

@media (max-width: 63.99rem) {
  /* Окно на пол-экрана ноутбука (768-1024 px): бренд, разделы, гейт и «сегодня» не
     влезали в строку, кнопка темы уезжала за край с горизонтальной прокруткой. Подпись
     «Разговоров» уходит (клетки и число остаются), отступы ужимаются. */
  .top-in {
    gap: 1rem;
  }

  .top-meta {
    gap: 0.75rem;
  }

  .nav a {
    padding: 0 0.5rem;
  }

  .gate-label {
    display: none;
  }

  .user-name,
  .user-role,
  .user-caret {
    display: none;
  }

  .user-btn {
    width: 2rem;
    padding: 0;
    justify-content: center;
  }

  /* Пустые этапы под доской, а не справа: с узкой колонкой справа три этапа делили
     500 px, и имя «Автопилот» рвалось посередине слова. */
  .board {
    flex-direction: column;
    align-items: stretch;
  }

  .rail {
    flex-basis: auto;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  /* Лист звонка первым экраном: оператор открывает карточку с телефона, чтобы звонить. */
  .overview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "call"
      "sig"
      "msg"
      "det";
    grid-template-rows: none;
  }

  .ov-call {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: 1.5rem;
  }

  .split,
  .money-layout,
  .history {
    grid-template-columns: minmax(0, 1fr);
  }

  .history .chart--bars {
    max-width: 24rem;
  }

  /* Таблица лидов становится списком карточек: шапки нет, подписи у значений. */
  .leads,
  .leads tbody {
    display: block;
  }

  .leads thead {
    display: none;
  }

  /* Колонка auto только под приоритет: деньги с длинным методом в auto-колонке
     съедали бы ширину названия до нуля. */
  .leads tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    grid-template-areas:
      "name name prio"
      "stage claim claim"
      "signal signal signal"
      "offer money money"
      "reviews site site";
    gap: 0.45rem 1rem;
    padding: 0.75rem 0.8rem;
    border-bottom: 1px solid var(--rule-soft);
  }

  .leads tbody tr:last-child {
    border-bottom: 0;
  }

  .leads td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .c-money .money-value {
    white-space: normal;
  }

  .c-name .row-sub {
    max-width: none;
  }

  .leads td.c-name {
    grid-area: name;
    width: auto;
  }

  .leads td.c-prio {
    grid-area: prio;
  }

  .leads td.c-signal {
    grid-area: signal;
    width: auto;
  }

  .leads td.c-offer {
    grid-area: offer;
  }

  .leads td.c-money {
    grid-area: money;
    width: auto;
  }

  .leads td.c-stage {
    grid-area: stage;
  }

  .leads td.c-reviews {
    grid-area: reviews;
  }

  .leads td.c-site {
    grid-area: site;
  }

  .leads td.c-claim {
    grid-area: claim;
    align-self: center;
  }

  .leads td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    color: var(--muted);
    font-family: var(--display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .leads td.c-site::before {
    display: inline;
    margin-right: 0.4rem;
  }

  .sort-mobile {
    display: block;
  }
}

@media (max-width: 47.99rem) {
  :root {
    --gutter: 1rem;
    --fs-h1: 1.25rem;
  }

  /* На телефоне шапка в три строки и не прилипает: экран отдаём данным. */
  .top {
    position: static;
  }

  .tabs-wrap {
    top: 0;
  }

  .top-in {
    flex-wrap: wrap;
    height: auto;
    gap: 0 0.75rem;
    padding-top: 0.45rem;
  }

  .top-meta {
    display: contents;
  }

  .brand {
    order: 1;
  }

  .gate {
    order: 2;
    margin-left: auto;
  }

  .icon-btn {
    order: 3;
  }

  .nav {
    order: 4;
    flex: 1 1 auto;
    height: 2.5rem;
    margin-left: -0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav a {
    padding: 0 0.6rem;
  }

  .today {
    order: 5;
    width: calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter));
    padding: 0.3rem var(--gutter);
    border-top: 1px solid var(--rule-soft);
    font-size: var(--fs-xs);
  }

  .gate-label {
    display: none;
  }

  .gate-cells i {
    width: 0.4375rem;
  }

  /* Бренд без метки «CRM»: иначе тема уезжала во вторую строку шапки. */
  .brand-tag {
    display: none;
  }

  body[data-auth="out"] #theme {
    margin-left: auto;
  }

  .fact--minor {
    display: none;
  }

  .board {
    flex-direction: column;
    align-items: stretch;
  }

  .board-cols {
    grid-auto-flow: row;
  }

  .col--new {
    grid-column: auto;
  }

  .rail {
    flex-basis: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-name {
    font-size: 1.25rem;
  }

  .crumbs .pager-word {
    display: none;
  }

  /* Сигнал с длинными подписями на всю ширину, этап и сайт парой: меньше высоты. */
  .toolbar .input--select {
    flex: 1 1 40%;
    min-width: 0;
  }

  .toolbar select[aria-label="Сигнал"] {
    flex-basis: 100%;
  }

  .search {
    flex-basis: 100%;
  }

  .outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finding,
  .kv-row,
  .kv--wide .kv-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .c-track {
    width: auto;
  }

  .cal-table thead {
    display: none;
  }

  .cal-table,
  .cal-table tbody {
    display: block;
  }

  .cal-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem 0.75rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--rule-soft);
  }

  .cal-table td {
    padding: 0;
    border: 0;
  }

  .cal-table td:first-child,
  .cal-table td.c-track {
    grid-column: 1 / -1;
  }

  .cal-table td.n {
    text-align: left;
  }

  .cal-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-family: var(--display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .msg--user {
    max-width: 100%;
  }

  .mini-table th,
  .mini-table td {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  /* Портфель на телефоне: описание оффера на всю ширину, числа строкой под ним. */
  .portfolio thead {
    display: none;
  }

  .portfolio,
  .portfolio tbody,
  .portfolio tfoot {
    display: block;
  }

  .portfolio tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .portfolio td,
  .portfolio th {
    padding: 0;
    border: 0;
  }

  .portfolio tbody td:first-child {
    grid-column: 1 / -1;
  }

  .portfolio tbody td.n {
    text-align: left;
  }

  .portfolio tbody td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--muted);
    font-family: var(--display);
    font-size: var(--fs-xs);
  }

  .portfolio tfoot tr {
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }

  /* Короткие числа журнала остаются в одну строку с подписью. */
  .dist .kv-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .review-ai {
    margin-left: 0;
  }

  /* 16px в полях: iOS Safari не увеличивает страницу при фокусе. */
  .input {
    font-size: 1rem;
  }
}

@media (pointer: coarse) {
  .btn,
  .toggle,
  .seg-item span,
  .input {
    min-height: 2.75rem;
  }

  .btn--xs {
    min-height: 2.25rem;
  }
}