/*
 * Маяк · brutalist-luxe тема для Vikunja (tasks.mayak-ai.ru). v2.
 *
 * Инъектируется Caddy'ем (replace_response) перед </head> вместе со <script>,
 * который задаёт window.CUSTOM_LOGO_URL (нативная подмена логотипа Vikunja).
 * Грузится ПОСЛЕ бандла → переопределяет :root-токены по каскаду.
 *
 * Принципы apps/web/DESIGN.md: монохром (chalk #fafaf7 / near-black #0a0a0a),
 * Inter (body) + Archivo Black (заголовки), sharp edges (radius 0), без
 * accent-цветов/градиентов/мягких теней (вместо них — жёсткие рамки и
 * brutalist-офсет на плавающих поверхностях).
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Палитра: монохром chalk / near-black, accent убран ── */
  --grey-50:  #ffffff;
  --grey-100: #fafaf7;
  --grey-200: #e7e7e3;
  --grey-300: #d4d4cf;
  --grey-400: #adada8;
  --grey-500: #82827e;
  --grey-600: #565652;
  --grey-700: #2a2a28;
  --grey-800: #161615;
  --grey-900: #0a0a0a;

  --grey-100-hsl: 60, 14%, 97%;
  --grey-500-hsl: 60, 1%, 50%;

  --site-background: #f4f4f0;
  --scheme-main: #fafaf7;      /* фон карточек/навбара */
  --scheme-main-bis: #ffffff;  /* фон плавающих поверхностей (дропдаун/попап) */
  --scheme-main-ter: #efefe9;

  --white: #fafaf7;
  --white-ter: #f2f2ee;
  --white-bis: #ffffff;

  --text: #0a0a0a;
  --text-strong: #0a0a0a;
  --text-light: #565652;
  --text-invert: #fafaf7;

  /* primary → near-black (литерал + hsl-компоненты для -light/-dark/focus) */
  --primary-h: 60deg;
  --primary-s: 3%;
  --primary-l: 5%;
  --primary-a: 1;
  --primary-hsl: 60, 3%, 5%;
  --primary: #0a0a0a;
  --primary-invert: #fafaf7;
  --primary-dark: #000000;

  /* success/«готово» — тоже монохром (была неоново-зелёная кнопка) */
  --success-h: 60deg;
  --success-s: 3%;
  --success-l: 5%;
  --success: #0a0a0a;
  --success-invert: #fafaf7;

  --link: #0a0a0a;
  --link-hover: #565652;
  --link-visited: #0a0a0a;

  --border: #0a0a0a;
  --border-hover: #0a0a0a;
  --border-light: #d4d4cf;
  --card-border-color: #0a0a0a;
  --input-border-color: #0a0a0a;
  --logo-text-color: #0a0a0a;

  /* мягкие тени гасим — глубину дают рамки/офсет */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

:root.dark {
  --site-background: #0a0a0a;
  --scheme-main: #121211;
  --scheme-main-bis: #1a1a18;
  --scheme-main-ter: #242422;
  --white: #121211;
  --white-bis: #1a1a18;
  --text: #fafaf7;
  --text-strong: #fafaf7;
  --text-light: #adada8;
  --text-invert: #0a0a0a;
  --primary: #fafaf7;
  --primary-invert: #0a0a0a;
  --primary-hsl: 60, 14%, 97%;
  --success: #fafaf7;
  --success-invert: #0a0a0a;
  --link: #fafaf7;
  --link-hover: #adada8;
  --border: #fafaf7;
  --card-border-color: #fafaf7;
  --input-border-color: #fafaf7;
  --logo-text-color: #fafaf7;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ── Шрифты ── */
body,
button,
input,
select,
textarea,
.input,
.button,
.textarea,
.select select,
.navbar,
.navbar-item,
.dropdown-content,
.dropdown-item,
.menu,
.menu-list {
  font-family: 'Inter', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.title,
.subtitle,
.task-id {
  font-family: 'Archivo Black', Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* ── Sharp edges ── */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* ── Плавающие поверхности: солидный фон + жёсткая рамка + brutalist-офсет.
   (Главный фикс: дропдаун красился var(--scheme-main)=chalk без тени →
   сливался с фоном. Теперь рамка отделяет его явно.) ── */
.dropdown-content,
.card,
.modal-content,
.modal-card,
.modal-card-body,
.box,
.popup,
.notification,
.message,
.multiselect .search-results,
.tox-menu,
.tippy-box {
  background-color: var(--scheme-main-bis) !important;
  border: 1px solid var(--border) !important;
}

.dropdown-content,
.multiselect .search-results,
.tippy-box {
  box-shadow: 3px 3px 0 0 var(--border) !important;
}

.card,
.box {
  box-shadow: none !important;
}

/* Пункты дропдауна/меню — чистый ховер near-black. */
.dropdown-item:hover,
.dropdown-item.is-active,
.search-results .search-result:hover,
.multiselect .search-results button:hover {
  background-color: #0a0a0a !important;
  color: #fafaf7 !important;
}

/* ── Боковые action-кнопки задачи: тоньше, мельче, аккуратнее ── */
.action-buttons .button,
.task-view .action-buttons .button {
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.03em;
  box-shadow: none !important;
  min-block-size: 1.9rem !important;
}

.action-buttons .button .icon,
.action-buttons .button svg {
  opacity: 0.85;
}

/* Секционные подписи в сайдбаре (ОРГАНИЗАЦИЯ/УПРАВЛЕНИЕ) — тоньше. */
.action-buttons h3,
.task-view .action-buttons h3 {
  font-weight: 600 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.08em;
  color: var(--text-light) !important;
}

/* ── Редактор: компактный тулбар в стиле проекта ── */
.editor-toolbar {
  background: var(--scheme-main-bis) !important;
  border: 1px solid var(--border) !important;
  padding: 0.3rem !important;
  gap: 0.1rem;
}
/* Сегменты-разделители — тоньше и ближе. */
.editor-toolbar > * + * {
  margin-inline-start: 0.3rem !important;
  padding-inline-start: 0.3rem !important;
  border-inline-start-color: var(--border-light) !important;
}
/* Сами кнопки — мельче. */
.editor-toolbar__button {
  color: var(--text) !important;
  min-inline-size: 1.6rem !important;
  inline-size: 1.6rem !important;
  block-size: 1.6rem !important;
  margin-inline-end: 0 !important;
}
/* Иконки FontAwesome — ужать. */
.editor-toolbar__button .icon {
  inline-size: 1.6rem !important;
  block-size: 1.6rem !important;
}
.editor-toolbar__button .icon svg {
  inline-size: 0.8rem !important;
  block-size: 0.8rem !important;
  height: 0.8rem !important;
  width: 0.8rem !important;
}
/* Субскрипт H1/H2/H3 — мельче и не жирный. */
.editor-toolbar__button .icon__lower-text {
  font-size: 0.55rem !important;
  font-weight: 600 !important;
  inset-block-end: -2px !important;
}

/* ── Карточка задачи: крепкая рамка вокруг детального вида ── */
.task-view {
  border: 1px solid var(--border);
}

/* ── Логотип Маяка: явный размер (Vikunja .logo задаёт только max-*, и наш
   SVG-лого без width/height схлопывался в 0×0). ── */
img.logo,
.logo img {
  inline-size: auto !important;
  block-size: 34px !important;
  width: auto !important;
  height: 34px !important;
  max-inline-size: 190px !important;
  max-block-size: 34px !important;
  display: block !important;
}

/* ── Лоадер: маска-маяк с пульсом вместо крутящегося спиннера ── */
.loader-container.is-loading::after,
.spinner.is-loading::after {
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--text) !important;
  -webkit-mask: url('/mayak-beacon.svg') center / contain no-repeat;
  mask: url('/mayak-beacon.svg') center / contain no-repeat;
  animation: mayak-beacon-pulse 1.1s ease-in-out infinite alternate !important;
}
@keyframes mayak-beacon-pulse {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

/* Чистим фоновые градиенты, если где-то остались. */
.hero,
.navbar,
.button {
  background-image: none !important;
}