/*
 * Стили ядра Carrot (K16, K16a): шрифт, баннеры, индикаторы htmx, название экземпляра в меню.
 * Подключается документом через web_asset() — с хэшем содержимого в имени файла. Каркас страниц — штатные
 * макеты Tabler (D-030), своих стилей каркаса здесь нет. Цвета — только переменные Tabler (--tblr-*):
 * они следуют схеме (data-bs-theme) и акцентному цвету (data-bs-theme-primary).
 */

:root {
  --tblr-font-sans-serif: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* Индикаторы htmx: includeIndicatorStyles = false — свои стили вместо inline <style> (CSP, KD 1.4). */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/*
 * Общий баннер вверху страницы: сообщения и подтверждения опасных действий (не alert()/confirm()).
 * Слой — ниже выпадающих списков меню (1000) и раскрытого бокового меню, выше содержимого страницы.
 */
.carrot-banners {
  position: sticky;
  top: 0;
  z-index: 990;
  padding-top: .75rem;
}

.carrot-banners:empty {
  padding-top: 0;
}

.carrot-banners .alert {
  margin-bottom: .75rem;
  box-shadow: var(--tblr-box-shadow-dropdown);
  background-color: var(--tblr-bg-surface);
}

.carrot-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

/*
 * Название экземпляра в меню: значок и текст. Логотип заказчика — в теме views/theme.css, например:
 *   .carrot-logo { width: 7rem; background: url(data:image/svg+xml;base64,…) no-repeat left center / contain; }
 *   .carrot-logo .icon, .carrot-brand-name { display: none; }
 */
.carrot-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
}

.carrot-brand:hover {
  text-decoration: none;
}

.carrot-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  color: var(--tblr-primary);
}

.carrot-logo .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Свёрнутое меню folded-hover (lg и шире): виден только значок, название — при раскрытии. */
@media (min-width: 992px) {
  .navbar-folded-hover:not(:hover):not(:has(:focus-visible)) .carrot-brand-name {
    display: none;
  }
}

/* Иконки спрайта: Tabler задаёт размер и толщину классом .icon. */
svg.icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Фото в аватаре (M02): картинка поверх инициалов. Картинку, которая не загрузилась (фото ещё обрабатывается
   или удалено), убирает carrot.js — видны инициалы, а не значок «не загрузилось» (D-076). */
.avatar > img.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Выбор области изображения (file_input(), D-075): окно с Cropper.js. Изображению нужна max-width: 100% —
   иначе Cropper.js считает размеры по натуральному размеру. Рамка «круг» — только вид, файл остаётся квадратным. */
.carrot-crop {
  height: min(60vh, 32rem);
  background: var(--tblr-bg-surface-secondary);
}

.carrot-crop img {
  display: block;
  max-width: 100%;
}

.carrot-crop-circle .cropper-view-box,
.carrot-crop-circle .cropper-face {
  border-radius: 50%;
}

.carrot-crop-circle .cropper-view-box {
  outline: 0;
  box-shadow: 0 0 0 1px var(--tblr-primary);
}

/*
 * Значок-счётчик пункта меню (D-082): справа от названия. В свёрнутом боковом меню (folded-hover) названия
 * не видно — значок поверх угла иконки.
 */
.carrot-menu-badge {
  display: inline-flex;
  padding-left: .5rem;
}

.carrot-menu-badge:empty {
  display: none;
}

@media (min-width: 992px) {
  .navbar-folded-hover:not(:hover):not(:has(:focus-visible)) .nav-link:has(.carrot-menu-badge) {
    position: relative;
  }

  .navbar-folded-hover:not(:hover):not(:has(:focus-visible)) .carrot-menu-badge {
    position: absolute;
    top: .125rem;
    left: 1.75rem;
    padding-left: 0;
  }

  .navbar-folded-hover:not(:hover):not(:has(:focus-visible)) .carrot-menu-badge .badge {
    font-size: .625rem;
    padding: .125rem .3rem;
  }
}

/*
 * Реестр на телефоне (B02, D-100): уже 576 px строка таблицы — карточка. Первая колонка — заголовок карточки,
 * остальные — «подпись: значение» (подпись — data-label, заголовок колонки). Колонки, скрытые по ширине экрана
 * (show_from), в карточке видны: места по вертикали хватает. Итоги — последней карточкой, «Показать ещё» — кнопкой.
 */
@media (max-width: 575.98px) {
  .carrot-list thead {
    display: none;
  }

  .carrot-list,
  .carrot-list tbody,
  .carrot-list tfoot {
    display: block;
  }

  .carrot-list tr {
    display: block;
    padding: .75rem 1rem;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
  }

  .carrot-list.card-table tr td,
  .carrot-list tr td.d-none {
    display: flex !important;
    gap: .75rem;
    justify-content: space-between;
    padding: .125rem 0;
    border: 0;
    text-align: end;
  }

  .carrot-list td::before {
    content: attr(data-label);
    color: var(--tblr-secondary);
    text-align: start;
  }

  .carrot-list tbody tr:not(.carrot-list-more) td:first-child,
  .carrot-list tbody tr td.carrot-list-check + td {
    display: block !important;
    margin-bottom: .25rem;
    font-weight: var(--tblr-font-weight-medium);
    text-align: start;
  }

  .carrot-list tbody tr td:first-child::before,
  .carrot-list tbody tr td.carrot-list-check + td::before,
  .carrot-list td.carrot-list-nolabel::before,
  .carrot-list tr.carrot-list-more td::before {
    content: none;
  }

  .carrot-list tr.carrot-list-more td {
    justify-content: center;
  }

  /* Флажок массового действия (B03) — слева от заголовка карточки. */
  .carrot-list.card-table tbody tr td.carrot-list-check {
    display: block !important;
    float: left;
    margin: .2rem .5rem 0 0;
    padding: 0;
  }

  .carrot-list tr.carrot-list-totals td.carrot-list-check {
    display: none !important;
  }

  .carrot-list tr.carrot-list-totals {
    background: var(--tblr-bg-surface-secondary);
  }

  .carrot-list tr.carrot-list-totals td.carrot-list-nolabel:not(:first-child) {
    display: none !important;
  }
}

/* Кнопки переходов статуса (B04): переход с полями — раскрывающаяся форма <details>, кнопка — <summary>. */
.carrot-transition > summary {
    list-style: none;
}
.carrot-transition > summary::-webkit-details-marker {
    display: none;
}
.carrot-transition[open] {
    flex-basis: 100%;
}
.carrot-transition[open] > form {
    max-width: 32rem;
}

/* Строка глобального поиска в шапке (B12): поле не шире 32rem, подсказки — выпадающий список под полем во всю его
   ширину (класс show ставит carrot.js, когда в списке что-то есть); длинный список прокручивается. */
.carrot-search {
    position: relative;
    max-width: 32rem;
}
.carrot-search .carrot-search-results {
    width: 100%;
    min-width: 18rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
}
.carrot-search .carrot-search-item {
    display: flex;
    align-items: flex-start;
    white-space: normal;
}
.carrot-search .carrot-search-item > .d-block {
    min-width: 0;
}