/*
  Общие стили приложения поверх Tabler — единственный файл (подключён в
  base.html). Своих CSS-файлов под отдельные страницы не заводим; стили,
  нужные одной странице, — в её {% block extra_head %}.
  Правила применения — UI_GUIDELINES.md, §5 «Компоненты».
*/

/* ── Шкала размеров ──────────────────────────────────────────────────────
   Два размера элементов управления, шрифт у обоих — 14px, как у текста
   таблиц и форм:
   • обычный (36px) — все действия страницы, шапок карточек, панелей, форм;
   • компактный (.btn-sm / .form-control-sm / .form-select-sm, 26px) —
     только внутри строки таблицы, чтобы строка не раздувалась.
   В Tabler 1.0 компактный размер — шрифт 12px и высота 20px: рядом с
   текстом ячейки (14px) он выглядел «из другой системы». */
.btn-sm {
  --tblr-btn-padding-y: .125rem;
  --tblr-btn-padding-x: .5rem;
  --tblr-btn-font-size: .875rem;
  /* Безразмерное (=20px при 14px): Tabler умножает его на font-size в
     формуле ширины .btn-icon — «rem × rem» даёт невалидный calc(). */
  --tblr-btn-line-height: 1.4285714286;
  --tblr-btn-icon-size: 1rem;
}
.form-control-sm,
.form-select-sm {
  font-size: .875rem;
  line-height: 1.25rem;
  padding-top: .125rem;
  padding-bottom: .125rem;
  min-height: 0;
  height: auto;
}
.form-control-sm { padding-left: .5rem; padding-right: .5rem; }

/* Иконки в кнопках. Tabler задаёт размер иконки классом .icon (SVG), а у нас
   шрифтовые <i class="ti …"> — без этого правила они брали размер шрифта
   кнопки и в разных кнопках выходили разными. */
.btn .ti {
  font-size: var(--tblr-btn-icon-size);
  line-height: 1;
}

/* Нейтральная кнопка (.btn без цвета): рамка Tabler (#dce1e7) почти
   сливается с серым фоном страницы, и белая кнопка кажется ниже синей
   рядом, хотя высота одна. Цветные варианты не трогаем. */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-dark):not(.btn-link):not([class*="btn-outline-"]):not([class*="btn-ghost-"]) {
  --tblr-btn-border-color: #c9d1db;
}

/* ── Каркас ───────────────────────────────────────────────────────────────
   Слева на всю высоту — меню (.app-nav): тёмная колонка разделов (логотип и
   иконки) и светлая панель подразделов текущего раздела, её можно свернуть;
   справа .page-wrapper — шапка и контент в одном контейнере, поэтому
   выровнены друг с другом. См. CLAUDE.md, раздел «Навигация». */
@media (min-width: 992px) {
  .app-shell { flex-direction: row; }
}
.app-shell > .page-wrapper { min-width: 0; }
/* Контент — на всю ширину справа от меню, без max-width: свернули меню —
   таблицы («Выработка», «Остатки») расширяются на освободившееся место, а не
   просто сдвигаются влево. Ширину отдельных форм ограничивают сами страницы. */
.app-container { max-width: none; }

/* Меню — по образцу колонки иконок + панели подразделов. Размеры текста —
   из общей шкалы: подразделы 14px, как весь текст страницы; заголовок
   раздела 16px, как заголовок карточки. Подписей мелким шрифтом под иконками
   нет — название раздела в заголовке панели и во всплывающей панели. */
.app-nav {
  position: sticky; top: 0; z-index: 1030;
  height: 100vh; flex: 0 0 auto;
}
.nav-rail {
  width: 56px; flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding-bottom: .5rem;
  background: var(--tblr-dark);
}
.nav-rail-brand {
  height: 3.5rem; flex: 0 0 auto; margin-bottom: .25rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.nav-rail-brand span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 28px; border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary); color: #fff;
  font-weight: 700; font-size: .75rem; letter-spacing: .02em;
}
.nav-rail-group { position: relative; }
.nav-rail-group-bottom { margin-top: auto; }
.nav-rail-item {
  display: flex; align-items: center; justify-content: center;
  height: 48px;
  color: rgba(255, 255, 255, .6); text-decoration: none;
}
.nav-rail-item .ti { font-size: 1.5rem; line-height: 1; }
.nav-rail-group:hover > a.nav-rail-item { background: rgba(255, 255, 255, .06); color: #fff; }
/* Текущий раздел — светлая полоса во всю ширину колонки с синей меткой
   слева; полоса доходит до панели подразделов, рядом — её заголовок с тем же
   названием: подпункты читаются как раскрытие именно этого раздела. */
.nav-rail-item.active,
.nav-rail-group:hover > a.nav-rail-item.active {
  background: rgba(255, 255, 255, .12); color: #fff;
  box-shadow: inset 3px 0 0 var(--tblr-primary);
}
.nav-rail-item.disabled { opacity: .35; cursor: default; }

/* Всплывающая панель у иконки: название раздела + его подразделы. В
   развёрнутом меню у текущего раздела не показывается — он и так открыт. */
.nav-flyout {
  display: none;
  position: absolute; left: 100%; top: 0;
  min-width: 14rem; padding-bottom: .5rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) 0;
  box-shadow: var(--tblr-box-shadow-dropdown);
}
.nav-rail-group-bottom .nav-flyout { top: auto; bottom: 0; }
.nav-rail-group:hover > .nav-flyout,
.nav-rail-group:focus-within > .nav-flyout { display: block; }
html:not(.nav-collapsed) .nav-flyout-current { display: none !important; }
.nav-flyout-title {
  height: 46px; display: flex; align-items: center;
  padding: 0 1.5rem; font-size: 1rem; font-weight: 500;
}

.nav-sub {
  width: 216px; flex: 0 0 auto;
  overflow-y: auto;
  background: var(--tblr-bg-surface); border-right: 1px solid var(--tblr-border-color);
}
.nav-sub-title {
  height: 3.5rem; display: flex; align-items: center;
  padding: 0 1.5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--tblr-border-color);
  font-size: 1rem; font-weight: 500; /* как .card-title */
}
.nav-sub-item {
  display: block; margin: 2px .75rem; padding: .5rem .75rem;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color); text-decoration: none;
  font-size: .875rem; line-height: 1.25rem;
}
.nav-sub-item:hover { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.nav-sub-item.active,
.nav-sub-item.active:hover { background: var(--tblr-primary); color: #fff; font-weight: 500; }
.nav-sub-empty { padding: .5rem 1.5rem; color: var(--tblr-secondary); font-size: .875rem; }

/* Свернуть/развернуть панель подразделов — кнопка на её краю. Свёрнутое
   меню = только колонка иконок, подразделы — во всплывающей панели. */
.nav-toggle {
  position: absolute; top: calc(3.5rem - 12px); right: -12px; /* на линии под шапкой: в свёрнутом меню не наезжает на логотип */
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--tblr-border-color); border-radius: 50%;
  background: var(--tblr-bg-surface); color: var(--tblr-secondary);
  box-shadow: var(--tblr-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
}
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--tblr-primary); border-color: var(--tblr-primary); }
.nav-toggle .ti { font-size: 1rem; line-height: 1; }
.nav-collapsed .nav-sub { display: none; }
.nav-collapsed .nav-toggle .ti { transform: rotate(180deg); }

/* ── Компоненты ──────────────────────────────────────────────────────── */

/* Вкладки — один вид на всё приложение: иконка + подпись, активная — синим
   подчёркиванием (как активный пункт меню — синим). Вкладки «папками» из
   Tabler 1.0 (серая подложка, белая активная) на сером фоне страницы почти не
   видны, а в карточке и вне её выглядели по-разному. Разметка стандартная:
   ul.nav.nav-tabs — на странице, + .card-header-tabs — в шапке карточки. */
.nav-tabs {
  gap: 1.5rem;
  border-bottom: 1px solid var(--tblr-border-color);
}
.nav-tabs .nav-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 0;
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none;
  color: var(--tblr-secondary); font-weight: 500;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus { color: var(--tblr-body-color); border-bottom-color: var(--tblr-border-color-dark); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  color: var(--tblr-primary); border-bottom-color: var(--tblr-primary); background: none;
}
.nav-tabs .nav-link .ti { font-size: 1.125rem; line-height: 1; }
/* В шапке карточки: без серой подложки, линия вкладок — нижняя граница шапки. */
.card-header-tabs {
  background: none; padding: 0; border-bottom: 0;
  margin: calc(-1 * var(--tblr-card-cap-padding-y)) 0;
}

/* Поиск в шапке карточки с таблицей (вместо отдельной карточки-формы). */
.app-search { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.app-search .input-icon { flex: 0 1 26rem; }

/* .empty-icon в Tabler 1.0 рассчитан на SVG — шрифтовой иконке размер задаём сами. */
.empty-icon .ti { font-size: 3rem; line-height: 1; color: var(--tblr-secondary); }

/* Модальное окно без JS-компонента модалок Tabler: свой бэкдроп +
   центрирование; показ/скрытие — классом d-none (static/js/materials,
   static/js/labels). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}