/* Дополнения к Tailwind: аккуратный вид без сборки. */

:root {
  color-scheme: light;
}

/* Широкие таблицы прокручиваются внутри .table-scroll, но сама страница
   по горизонтали не «уезжает» (актуально для телефонов). */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Числа в таблицах — моноширинные, чтобы колонки не «прыгали». */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Полоса прокрутки для широких таблиц. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll table {
  min-width: 100%;
}

/* В сводной «Итого» первый столбец закреплён — видно, чья это строка,
   даже когда таблица прокручена вправо. */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ffffff;
}

thead .sticky-col,
tfoot .sticky-col {
  background-color: #f8fafc;
}

/* Скелетон во время HTMX-загрузки. */
.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

/* Модальное окно: плавное появление. */
#modal-root > div {
  animation: modal-fade 0.12s ease-out;
}

@keyframes modal-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Печать сводного отчёта «Итого». */
@media print {
  header,
  footer,
  nav,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
  }

  main {
    max-width: none;
    padding: 0;
  }
}