/* Хаслер Office: оформление экранов входа, регистрации и приглашения Paperclip.
   Ставит haslar-install.sh (шаг «Оформление») в ui-dist Paperclip → /haslar/brand.css.
   Действует только с классом html.haslar-auth (его ставит brand.js на /auth, /invite/…, /board-claim/…):
   внутренние экраны офиса не меняются (кроме заставки загрузки внизу). Без классов Paperclip ничего не ломается — это только стили.
   Палитра плагина: фон #F4F2EE, ink #1A1916, accent #FF6A13 (тёмная тема — #FF7A2E). */

html.haslar-auth {
  --hz-bg: #F4F2EE;
  --hz-card: #FBFAF7;
  --hz-ink: #1A1916;
  --hz-muted: #6B665C;
  --hz-line: rgba(26, 25, 22, 0.12);
  --hz-field: rgba(26, 25, 22, 0.18);
  --hz-accent: #FF6A13;
  --hz-on-accent: #FFFFFF;
  --background: var(--hz-bg);
  --foreground: var(--hz-ink);
  --card: var(--hz-card);
  --card-foreground: var(--hz-ink);
  --primary: var(--hz-accent);
  --primary-foreground: var(--hz-on-accent);
  --muted-foreground: var(--hz-muted);
  --border: var(--hz-line);
  --input: var(--hz-field);
  --ring: var(--hz-accent);
  background: var(--hz-bg);
}
html.haslar-auth.dark {
  --hz-bg: #171512;
  --hz-card: #1F1C18;
  --hz-ink: #F4F2EE;
  --hz-muted: #A8A196;
  --hz-line: rgba(244, 242, 238, 0.10);
  --hz-field: rgba(244, 242, 238, 0.16);
  --hz-accent: #FF7A2E;
  --hz-on-accent: #1A1916;
}
html.haslar-auth body { background: var(--hz-bg); color: var(--hz-ink); }

/* Знак вместо логотипа Paperclip: прячем его контуры, рисуем «Х» в оранжевом квадрате и подпись
   шрифтом страницы (Inter). SVG-элемент React не трогаем — только стили. */
html.haslar-auth svg[aria-label="Paperclip"] { display: none; }
html.haslar-auth div:has(> svg[aria-label="Paperclip"]) {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--hz-ink);
}
html.haslar-auth div:has(> svg[aria-label="Paperclip"])::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: 7px;
  background: url("/haslar/favicon.svg") center / cover no-repeat;
}
html.haslar-auth div:has(> svg[aria-label="Paperclip"])::after { content: "Хаслер Office"; }

/* Правая половина экрана входа (ASCII-анимация Paperclip) — тёплая плашка со знаком. */
html.haslar-auth .fixed.inset-0 > .hidden.md\:block.w-1\/2 {
  background: #FF6A13 url("/haslar/favicon.svg") center / 140px no-repeat;   /* светлая: квадрат сливается с фоном — видна «Х» */
}
html.haslar-auth.dark .fixed.inset-0 > .hidden.md\:block.w-1\/2 {
  background: var(--hz-card) url("/haslar/favicon.svg") center / 120px no-repeat;  /* тёмная: оранжевый знак на тёплом тёмном */
  border-left: 1px solid var(--hz-line);
}
html.haslar-auth .fixed.inset-0 > .hidden.md\:block.w-1\/2 > * { visibility: hidden; }
/* переключатель темы в углу — поверх правой панели */
html.haslar-auth .fixed.inset-0 > .absolute.top-4.right-4 { color: #1A1916; }
html.haslar-auth.dark .fixed.inset-0 > .absolute.top-4.right-4 { color: var(--hz-ink); }

/* Кнопки — оранжевые, поля — с оранжевым фокусом. */
html.haslar-auth button[type="submit"],
html.haslar-auth .bg-primary { background-color: var(--hz-accent) !important; color: var(--hz-on-accent) !important; border-color: var(--hz-accent) !important; }
html.haslar-auth button[type="submit"]:hover { filter: brightness(0.95); }
html.haslar-auth input:focus { border-color: var(--hz-accent) !important; box-shadow: 0 0 0 1px var(--hz-accent) !important; }
html.haslar-auth .underline { text-decoration-color: var(--hz-accent); }

/* Страница приглашения у Paperclip всегда тёмная (классы zinc-*): ведём её по теме и палитре. */
html.haslar-auth .bg-zinc-950, html.haslar-auth .bg-zinc-950\/95 { background-color: var(--hz-bg) !important; }
html.haslar-auth .text-zinc-100, html.haslar-auth .text-white { color: var(--hz-ink) !important; }
html.haslar-auth .text-zinc-300 { color: var(--hz-ink) !important; }
html.haslar-auth .text-zinc-400, html.haslar-auth .text-zinc-500 { color: var(--hz-muted) !important; }
html.haslar-auth .border-zinc-800 { border-color: var(--hz-line) !important; }
html.haslar-auth .border-zinc-800.p-3, html.haslar-auth .border-zinc-800.p-6 { background-color: var(--hz-card); }
html.haslar-auth .hover\:border-zinc-600:hover, html.haslar-auth .focus\:border-zinc-500:focus { border-color: var(--hz-accent) !important; }
/* выбранная вкладка «Создать аккаунт / У меня есть аккаунт» */
html.haslar-auth .bg-zinc-100 { background-color: var(--hz-accent) !important; border-color: var(--hz-accent) !important; }
html.haslar-auth .bg-zinc-100.text-zinc-950, html.haslar-auth .text-zinc-950 { color: var(--hz-on-accent) !important; }
/* картинка компании в приглашении (буква на узоре) → знак Хаслер */
html.haslar-auth .h-16.w-16 { background: url("/haslar/favicon.svg") center / cover no-repeat; border-color: transparent !important; color: transparent !important; border-radius: 14px; }
html.haslar-auth .h-16.w-16 > img { display: none; }
/* поля ввода на тёмной/светлой карточке */
html.haslar-auth input { background-color: transparent; color: var(--hz-ink); }

/* Меню офиса: в шапке вместо сгенерированной картинки компании (буква на узоре) — знак Хаслер.
   Только для сгенерированной (img из data:), загруженный клиентом логотип компании остаётся.
   Действует во всём офисе, не только на экранах входа (меню есть только внутри). */
aside.primary-sidebar-surface span.min-w-0.flex-1.items-center.gap-2 > div.size-5.rounded-md:has(> img[src^="data:"]) {
  background: url("/haslar/favicon.svg") center / cover no-repeat;
  color: transparent !important;
}
aside.primary-sidebar-surface span.min-w-0.flex-1.items-center.gap-2 > div.size-5.rounded-md:has(> img[src^="data:"]) > img,
aside.primary-sidebar-surface span.min-w-0.flex-1.items-center.gap-2 > div.size-5.rounded-md:has(> img[src^="data:"]) > span { visibility: hidden; }

/* Заставка при открытии офиса (пока грузится интерфейс): вместо скрепки Paperclip — знак «Х», мягко пульсирует.
   Действует на всех экранах, только пока на месте эта заставка. */
#root > div[role="status"] > svg.paperclip-thinking-icon { display: none; }
#root > div[role="status"]:has(> svg.paperclip-thinking-icon)::before {
  content: ""; width: 72px; height: 72px; border-radius: 16px;
  background: url("/haslar/favicon.svg") center / cover no-repeat;
  animation: haslar-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes haslar-pulse { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #root > div[role="status"]:has(> svg.paperclip-thinking-icon)::before { animation: none; } }