/* МАРК — административный UI: тонкая надстройка над pico.classless.

   Pico.classless по умолчанию рассчитан на чтение длинных текстов
   (узкая колонка ~1024px по центру, большой 16px шрифт, 4rem верхний
   padding). Для админки нужно ровно наоборот — широкая плотная сетка.
   Здесь: сброс body/main + шапка с горизонтальной навигацией. */

/* ---------- Глобальная плотность ---------- */

html {
  /* 14px вместо pico-дефолта 16px → больше информации на 1920×1080. */
  font-size: 14px;
}

body {
  margin: 0;
  padding: 0;
  max-width: none;
}

body > main,
body > main.mark-main {
  /* Pico ставит main в центр с padding/max-width — нам нужна широкая
     полноэкранная страница. Ограничение по ширине — большое (1600px). */
  margin: 0 auto;
  max-width: 1600px;
  padding: 1.25rem 1.75rem;
}

:root {
  --mark-header-height: 52px;
}

/* ---------- Шапка с горизонтальной навигацией ---------- */

body > header.mark-header {
  height: var(--mark-header-height);
  display: flex;
  align-items: center;
  /* 3 секции: brand слева, nav по центру (растягивается),
     user-info справа. */
  gap: 1.5rem;
  padding: 0 1.5rem;
  background: var(--pico-card-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  max-width: none;
}

.mark-header .brand {
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--pico-color);
  white-space: nowrap;
}

.mark-header .user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  margin-left: auto;
  white-space: nowrap;
}

.mark-header form {
  margin: 0;
  display: inline;
}

.mark-header form button {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  margin: 0;
  width: auto;
}

/* Горизонтальная навигация в шапке. */
.mark-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mark-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.mark-nav li {
  margin: 0;
}

.mark-nav a {
  display: block;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--pico-color);
  font-size: 0.95rem;
  white-space: nowrap;
}

.mark-nav a:hover {
  background: var(--pico-muted-border-color);
}

.mark-nav a.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  font-weight: 500;
}

/* ---------- Контент main ---------- */

main.mark-main > h1:first-child,
main.mark-main > header:first-child h1,
main.mark-main > header:first-child {
  margin-top: 0;
}

main.mark-main h1 { font-size: 1.6rem; margin-bottom: 0.75rem; }
main.mark-main h2 { font-size: 1.25rem; margin-top: 1.5rem; }
main.mark-main h3 { font-size: 1.05rem; }
main.mark-main p { margin: 0.5rem 0; }

/* Таблицы pico по умолчанию слишком воздушные. */
main.mark-main table { font-size: 0.95rem; }
main.mark-main th, main.mark-main td { padding: 0.5rem 0.75rem; }

/* Формы плотнее. */
main.mark-main label {
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
  font-size: 0.9rem;
}
main.mark-main input,
main.mark-main select,
main.mark-main textarea {
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
}
main.mark-main button {
  width: auto;
  padding: 0.4rem 1rem;
}

/* Article — наши «карточки-сообщения» (notice/warning/error). */
main.mark-main article {
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

/* ---------- Горизонтальный ряд фильтров ----------
   Используется в queue/list и entries/list — селекты Статус/Источник/Отдел
   + кнопка «Применить» в одну строку. */
.mark-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  align-items: end;
  margin: 1rem 0;
}
.mark-filters label {
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* Унификация инпутов и селектов — одинаковая высота, форма, шрифт,
   радиус. Без этого type="search" в Firefox/Chrome имеет округлые края
   и большую высоту, datalist-инпут отличается от обычного, а <select>
   у pico свой стиль. */
.mark-filters input,
.mark-filters select {
  margin: 0.15rem 0 0 0;
  height: 2.4rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  appearance: none;
  -webkit-appearance: none;
}
/* В select оставляем браузерную стрелку — иначе нечем разворачивать. */
.mark-filters select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1rem) center, calc(100% - 0.7rem) center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
}
/* «Применить» должна быть на одной линии с инпутами фильтров.
   Простейший детерминированный приём — явный padding-top, равный высоте
   text-метки соседних input-ячеек. Все попытки решить через flex-stretch
   или align-items:end давали разную высоту в разных браузерах.
   Метка text + margin = ~0.9rem * 1.5 + 0.15rem = ~1.5rem; подбираем
   1.35rem чтобы кнопка не «провалилась», а встала ровно на input-top. */
.mark-filters .apply-cell {
  margin: 0;
  /* Эмпирическая итерация: 1.5 → 2.3 (опустил слишком сильно) → 1.9
     (середина между 1.5 и 2.3, должно совпасть с bottom input'ов). */
  padding-top: 1.9rem;
  align-self: start;
  display: block;
}
.mark-filters .apply-cell .filter-spacer {
  /* Был добавлен в прошлой итерации — больше не нужен. */
  display: none;
}
.mark-filters .apply-cell button {
  width: 100%;
  margin: 0;
  /* Точная высота input'ов: padding 0.4rem*2 + line-height ~1.4em + 2px
     border. Округлено до 2.4rem, такой же как наши select'ы. */
  height: 2.4rem;
  padding: 0;
  display: block;
}

/* ---------- Multi-select пикер отделов ----------
   <select multiple> с подписью. Используется во всех формах,
   которые принимают departments. */
.mark-departments-select {
  display: block;
  margin: 0.75rem 0;
}
.mark-departments-select .dept-legend {
  display: block;
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.mark-departments-select .dept-legend small {
  color: var(--pico-muted-color);
  font-weight: normal;
}
.mark-departments-select select[multiple] {
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0.4rem;
  font-size: 0.95rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 4px;
  /* size= в HTML задаёт количество видимых строк, но pico/браузеры
     иногда срезают высоту. Жёстко задаём min-height — 7 отделов
     × ~1.7rem строка + padding. */
  min-height: 13rem;
  appearance: none;
  -webkit-appearance: none;
}
.mark-departments-select select[multiple] option {
  padding: 0.25rem 0.5rem;
}
.mark-departments-select select[multiple] option:checked {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* ---------- Кнопка загрузки файла со спинером ----------
   Используется в queue/new_file.html и entries/new_file.html. После
   submit'а кнопка дисаблится и показывает анимированный «⏳ Загружаем…». */
.upload-btn:disabled {
  opacity: 0.85;
  cursor: progress;
}
.upload-btn .btn-spinner {
  display: inline-block;
  animation: mark-pulse 1.4s ease-in-out infinite;
}
@keyframes mark-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---------- Чекбоксы с подсказкой ----------
   Когда у чекбокса есть multi-line description через <small>,
   нужен отступ между галкой и описанием. */
.mark-checkbox-with-hint {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mark-checkbox-with-hint > label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mark-checkbox-with-hint > .hint {
  margin: 0 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  line-height: 1.4;
}

/* ---------- Модальное окно ----------
   <dialog> с pico-style контентом. Открывается через HTMX afterSwap-хук
   в base.html. Закрытие — × в заголовке, Esc или клик по фону. */
/* Pico classless по дизайну делает <dialog> полноэкранным flex-overlay'ем
   (min-width:100%; min-height:100%; position:fixed) — это сам диммер, и
   с этим не воюем. Реальная «карточка» — <article> внутри. Все
   карточные стили (рамка, размер, скролл) ставим на article. */
.mark-dialog {
  /* Усиливаем backdrop-фон у диммера: pico по умолчанию полупрозрачный,
     дополним blur'ом — чтобы остальной интерфейс ушёл «за стекло».
     !important нужен потому что pico ставит свой backdrop-filter inline
     через --pico-modal-overlay-backdrop-filter. */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  background-color: rgba(15, 23, 42, 0.55) !important;
}
.mark-dialog > article {
  /* Sensible-ширина формы: 620px на десктопе, 95vw на мобильных. */
  width: min(620px, 95vw);
  max-width: min(620px, 95vw);  /* перезаписываем pico-default 510px */
  margin: auto;  /* центрируем внутри flex-родителя */
  padding: 0;
  max-height: 88vh;
  overflow-y: auto;
  border: 2px solid var(--pico-primary, #1a6cb1);
  border-radius: 10px;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
#mark-modal-content {
  padding: 1rem 1.5rem 1.5rem;
}
.mark-dialog > article > header {
  position: sticky;
  top: 0;
  background: var(--pico-card-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 0.5rem 1rem;
  margin: 0;
  z-index: 1;
}
.mark-dialog .mark-modal-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1;
}
#mark-modal-content > h1,
#mark-modal-content > h2,
#mark-modal-content > h3 {
  margin-top: 0;
}

/* Расширенная модалка для review URL-ингеста (Phase 2 «подтвердите выбор»).
   Контента много — список файлов/картинок/подссылок с превью, поле для
   правки извлечённого текста. Фиксу через :has() — современные браузеры
   (Chrome 105+, Safari 15.4+, FF 121+, 2024+) понимают. На старых
   браузерах вернётся стандартная ширина — функционально не сломается. */
.mark-dialog:has(.mark-url-review) > article {
  width: min(1000px, 95vw);
  max-width: min(1000px, 95vw);
}

/* Большое окно для редактирования content — отдельный <dialog>, шире и
   выше основного, ПОВЕРХ него. Класс `.mark-dialog-content-expander`
   фикс ширины/высоты под текст. */
.mark-dialog-content-expander > article {
  width: min(1100px, 96vw);
  max-width: min(1100px, 96vw);
  max-height: 92vh;
}
.mark-dialog-content-expander textarea {
  min-height: 60vh;
}

/* Вторая модалка для кастомизации файлов/картинок подссылки — открывается
   ПОВЕРХ основной review-модалки. Ширина та же ~1000px (превью картинок,
   списки файлов с длинными URL), max-height чуть меньше чтобы основная
   модалка под ней «дышала». */
.mark-dialog-sub-review > article {
  width: min(1000px, 95vw);
  max-width: min(1000px, 95vw);
  max-height: 90vh;
}

/* ---------- HTMX-тосты ---------- */

#mark-toasts {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 100;
}

.toast {
  padding: 0.75rem 1rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-left: 4px solid var(--pico-primary);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 360px;
  font-size: 0.9rem;
  animation: mark-toast-fade 4s ease-in-out forwards;
}

.toast.error { border-left-color: var(--pico-del-color, #c00); }
.toast.success { border-left-color: var(--pico-ins-color, #2a7); }

@keyframes mark-toast-fade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}

/* ---------- Кликабельные строки таблицы ----------
   Строка целиком имеет hx-get на модальный фрагмент, hover подсвечивает,
   cursor:pointer уже задан inline в шаблоне. */
.mark-clickable-rows tr:hover td {
  background: rgba(26, 108, 177, 0.06);
}

/* Inline-карточка контента — теперь рендерится в модальном окне. */
.mark-inline-card {
  padding: 0;
}
.mark-inline-card form {
  margin: 0.5rem 0;
}
.mark-inline-card pre {
  font-family: inherit;
  font-size: 0.9rem;
}

/* ---------- Чипы ---------- */

.chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: var(--pico-muted-border-color);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--pico-color);
  margin: 0 0.1rem;
  line-height: 1.5;
}

.chip.warning { background: #fdf6e3; color: #8a6d00; }
.chip.danger  { background: #fde8e8; color: #a00000; }

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  body > header.mark-header {
    height: auto;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  .mark-nav { flex-basis: 100%; order: 3; }
  .mark-nav ul { flex-wrap: wrap; }
  body > main, body > main.mark-main {
    padding: 0.75rem 1rem;
  }
}