/* Подключается после xokoton.CSS: адаптация без изменения основной темы. */
body {
  min-width: 0;
}

.dashboard {
  /* Отдельная полоса справа, чтобы панель не перекрывала Лотти. */
  width: min(1280px, calc(100% - 320px));
  margin-right: 304px;
  min-height: 100svh;
  padding: clamp(16px, 2.5vw, 28px);
}

.loti-button {
  right: 12px;
  width: 280px;
}

.remove-icon { display: none; }

@media (max-width: 1382px) {
  [data-remove] .remove-label { display: none; }
  [data-remove] .remove-icon { display: inline; }
  [data-remove] { min-width: 44px; }
}

/* Панель закрывает Лотти; запас снизу раскрывает его при прокрутке. */
@media (max-width: 1382px), (max-height: 600px) {
  body {
    padding-bottom: calc(clamp(160px, 20vw, 280px) * 1.6 + 24px);
  }

  .dashboard {
    width: 100%;
    margin: 0 auto;
  }

  .loti-button {
    position: fixed;
    right: 12px;
    bottom: 12px;
    display: block;
    width: clamp(160px, 20vw, 280px);
    margin: 0;
  }
}

.dashboard > *,
.topbar > *,
.workspace > *,
.comparison-header > *,
.point-content,
.metric-dialog-heading > * {
  min-width: 0;
}

.topbar {
  flex-wrap: wrap;
}

.topbar > div {
  flex: 1 1 360px;
}

h1,
h2,
.status,
.coordinates,
#summary,
.visibility-info,
.time-hint,
.route-hint {
  overflow-wrap: anywhere;
}

h1 {
  line-height: 1.15;
}

.secondary-button,
.route-button,
.metric {
  min-height: 44px;
}

.secondary-button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.workspace {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
}

.point-card {
  height: auto;
}

.metric span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.table-wrapper,
.time-scale-scroll,
.metric-chart {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.time-scale-scroll {
  padding: 4px;
}

.time-scale {
  /* Все 19 подписей остаются читаемыми, прокручивается только шкала. */
  min-width: 1140px;
}

.time-labels button {
  width: 100%;
  min-height: 44px;
}

.time-slider {
  height: 32px;
}

.metric-dialog {
  max-width: calc(100% - 24px);
  max-height: 90vh;
  max-height: 90dvh;
  overflow: auto;
}

.metric-dialog-heading {
  align-items: flex-start;
}

.metric-dialog-heading form {
  flex-shrink: 0;
  margin: 0;
}

.metric-chart {
  overflow-x: auto;
}

.metric-chart svg {
  /* Не уменьшаем подписи графика до нечитаемого размера на телефоне. */
  min-width: 640px;
}

/* Планшеты и небольшие окна: карта над карточкой точки. */
@media (max-width: 1024px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .map-frame {
    min-height: 0;
    height: auto;
  }

  #map {
    min-height: 0;
    height: clamp(320px, 55svh, 535px);
  }

  .point-card {
    min-height: 0;
    height: auto;
  }

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

  .comparison-header .buttons {
    flex: 1 1 100%;
  }
}

/* В основной теме при 800px шапка становится вертикальной.
   Сбрасываем flex-basis: иначе 360px задают высоту вместо ширины. */
@media (max-width: 800px) {
  .topbar > div {
    flex: 0 1 auto;
    width: 100%;
  }
}

/* Телефоны: компактные отступы и кнопки, удобные для касания. */
@media (max-width: 600px) {
  .dashboard {
    width: 100%;
    padding: 16px 12px;
    border: 0;
    box-shadow: inset 0 0 0 4px #526bc4;
  }

  .topbar {
    gap: 14px;
    padding: 0 0 16px;
  }

  .topbar > div {
    flex: 0 1 auto;
    width: 100%;
  }

  .topbar > .secondary-button {
    width: 100%;
  }

  h1 {
    font-size: clamp(24px, 6vw, 32px);
  }

  h2 {
    font-size: 19px;
  }

  .status {
    margin-inline: 0;
    line-height: 1.5;
  }

  .workspace {
    gap: 14px;
  }

  #map {
    height: clamp(260px, 52svh, 420px);
  }

  .aurora-image {
    height: clamp(120px, 30vw, 175px);
  }

  .point-content {
    padding: 16px 12px;
  }

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

  .metric {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .timeline,
  .comparison-panel,
  .visibility-info {
    padding: 14px 12px;
    border-radius: 14px;
  }

  .timeline-heading {
    flex-wrap: wrap;
  }

  .comparison-header .buttons {
    width: 100%;
  }

  .buttons .secondary-button {
    flex: 1 1 150px;
  }

  th,
  td {
    padding: 10px 8px;
  }

  .sort-button {
    min-height: 44px;
  }

  .visibility-info .visibility-disclaimer {
    padding: 12px;
  }

  .metric-dialog {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    padding: 14px;
    border-radius: 14px;
  }
}

@media (pointer: coarse) {
  .table-wrapper button {
    min-height: 44px;
  }
}