/* misc_v2.css — доводка «остальных» страниц портала до вида v2 (трек D).
 *
 * ЗАЧЕМ. /home, /documents, /deals уже переодеты; вход, тикеты, пользователи,
 * чтение письма и ответы поставщиков остались в старой вёрстке: эмодзи вместо
 * иконок, кнопки без отклика, таблицы без липкой шапки. Этот файл закрывает
 * разницу, ничего не переименовывая: разметка страниц осталась прежней, менялись
 * только значки (эмодзи стали inline SVG линией) и добавились классы-обёртки.
 *
 * КАК. Подключается ПОСЛЕ v2kit.css из {% block head %} своих страниц, поэтому
 * побеждает без !important. Всё новое (@supports, color-mix, text-wrap,
 * animation-timeline) — под @supports или безвредно само по себе.
 * Цвета только смысловые: --c-good/--c-warn/--c-bad/--c-info и --fg-rgb.  */

:root { --m-ease: cubic-bezier(.2, .8, .2, 1); }

/* ── 1. Иконки. Линия в цвет текста, как в _navicons.html ───────────────── */
.mi { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.mi-lg { width: 18px; height: 18px; vertical-align: -3px; }
.mi-sm { width: 13px; height: 13px; vertical-align: -2px; }
/* Значок внутри кнопки/чипа не должен «прыгать» относительно текста */
.btn-primary .mi, .btn-ghost .mi, .btn-mini .mi, .chip .mi { margin-right: 5px; }

/* Общий отклик на нажатие для строк-ссылок и кнопок этих страниц (§1.3) */
.tk-item, .tk-tab, .emp-tile, .sr-offer, .rowmenu > summary, .rr-file, .rr-dl,
.rr-zip, .ibtn, .pop-item {
  transition: background .16s var(--m-ease), border-color .16s var(--m-ease),
              transform .14s var(--m-ease), box-shadow .16s var(--m-ease);
}
.tk-item:active, .tk-tab:active, .sr-offer:active, .rowmenu > summary:active,
.rr-file:active, .rr-dl:active, .rr-zip:active, .ibtn:active,
.pop-item:active { transform: scale(.96); }
.tk-item:focus-visible, .tk-tab:focus-visible, .emp-tile:focus-visible,
.rowmenu > summary:focus-visible, .rr-file:focus-visible, .rr-dl:focus-visible,
.rr-zip:focus-visible, .ibtn:focus-visible, .pop-item:focus-visible,
.sr-more > summary:focus-visible, .sr-rest > summary:focus-visible,
.tk-new > summary:focus-visible, .tk-file:focus-within {
  outline: 3px solid var(--c-info, #60a5fa); outline-offset: 2px; border-radius: 10px;
}

/* ── 2. Вход: первое, что видит человек ─────────────────────────────────── */
.auth-wrap { max-width: 520px; }
.auth-card { max-width: 520px; padding: clamp(22px, 4vw, 34px); border-radius: 22px; }
.auth-hero h1 {
  font-size: clamp(26px, 4.6vw, 34px); font-weight: 800; letter-spacing: -.028em;
  line-height: 1.08; text-wrap: balance; margin: 18px 0 8px;
}
.auth-hero p { font-size: 14px; line-height: 1.6; max-width: 42ch; margin: 0 auto;
  text-wrap: pretty; }
.auth-form label { letter-spacing: .01em; }
.auth-form input { min-height: 48px; font-size: 15.5px; }
.auth-form .btn-primary { min-height: 48px; letter-spacing: -.005em; }
.auth-form .btn-primary:active, .auth-form .btn-ghost:active,
.btn-wide:active { transform: scale(.96); }
.auth-form .hint { text-wrap: pretty; max-width: 46ch; }

/* Плитки сотрудников: чёткий фокус, отклик, ровная сетка на телефоне */
.quick-sep { letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.emp-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.emp-tile { min-height: 116px; border-radius: 16px; padding: 14px 10px; cursor: pointer; }
.emp-tile:focus-visible { outline-offset: 3px; }
.emp-tile:active { transform: scale(.96); }
.emp-name { font-size: 13.5px; }
/* Значок роли: раньше стояли два эмодзи — теперь SVG линией в кружке */
.emp-badge { display: grid; place-items: center; width: 21px; height: 21px;
  color: #fff; background: rgba(0, 0, 0, .55); }
.emp-badge .mi { width: 12px; height: 12px; vertical-align: 0; }
@supports (color: color-mix(in srgb, red, blue)) {
  .emp-badge { background: color-mix(in srgb, rgb(var(--fg-rgb)) 78%, transparent);
    color: rgb(var(--bg-rgb)); }
}
@media (max-width: 380px) { .emp-tiles { grid-template-columns: repeat(2, 1fr); } }
.pick-card { border-radius: 20px; }
.pick-name { letter-spacing: -.02em; }
.pick-q { text-wrap: pretty; }

/* Экраны «письмо отправлено» и «это письмо не ваше» — та же типографика */
.brand-mark.big .mi { width: 26px; height: 26px; vertical-align: 0; }
.btn-wide { min-height: 48px; }

/* ── 3. Тикеты ──────────────────────────────────────────────────────────── */
.tk-new > summary, .sr-more > summary, .sr-rest > summary {
  min-height: 40px; display: flex; align-items: center; gap: 7px; cursor: pointer;
  border-radius: var(--v2-r-md, 12px);
}
.tk-tabs { gap: 7px; flex-wrap: wrap; }
.tk-tab { min-height: 36px; border-radius: 999px; display: inline-flex;
  align-items: center; gap: 6px; }
.tk-item { border-radius: var(--v2-r-md, 12px); position: relative; }
.tk-item:hover { background: rgba(var(--fg-rgb), .05); }
/* тап-цель 44px, не раздувая строку */
.tk-item::after { content: ''; position: absolute; inset: -4px 0; }
.tk-kind-mark { display: grid; place-items: center; width: 26px; height: 26px;
  flex: none; color: rgba(var(--fg-rgb), .65); }
.tk-kind-mark .mi { width: 17px; height: 17px; vertical-align: 0; }
.tk-title { text-wrap: pretty; }
.tk-meta { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tk-kind { min-height: 40px; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; }
.tk-kind span { display: inline-flex; align-items: center; gap: 6px; }
.tk-file { min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; border-radius: var(--v2-r-sm, 9px); }
/* Тело тикета и ответы — читаемая мера строки */
.tk-body, .tk-msg-body, .tk-resolution > div:last-child {
  max-width: 72ch; line-height: 1.62; text-wrap: pretty;
}
.tk-card, .tk-resolution, .tk-actions { border-radius: var(--v2-r-lg, 16px); }
.tk-shot { border-radius: var(--v2-r-md, 12px); }
.tk-act-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-act-row button { display: inline-flex; align-items: center; gap: 6px; }
.tk-url a { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }

/* ── 4. Пользователи и роли: липкая шапка и смысловые цвета состояний ───── */
.users-table thead th {
  position: sticky; top: 52px; z-index: 2; background: rgb(var(--bg-rgb));
  box-shadow: 0 1px 0 rgba(var(--fg-rgb), .12);
}
.users-table tbody tr { transition: background .12s var(--m-ease); }
.users-table tbody tr:hover { background: rgba(var(--fg-rgb), .05); }
.users-table td { vertical-align: top; }
.add-user-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-user-form input, .add-user-form select { min-height: 40px; }
.saved-mark { color: var(--ink-good, #10b981); align-items: center; }
.saved-mark .mi { vertical-align: 0; }
.rowmenu > summary { list-style: none; width: 34px; height: 34px; display: grid;
  place-items: center; border-radius: 999px; cursor: pointer; position: relative;
  color: rgba(var(--fg-rgb), .7); }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu > summary::after { content: ''; position: absolute; inset: -5px; }
.rowmenu > summary:hover { background: rgba(var(--fg-rgb), .08); }
.rowmenu[open] > summary { background: rgba(var(--fg-rgb), .1); }
.arch-head { display: flex; align-items: center; gap: 8px; font-size: 15px;
  letter-spacing: -.01em; }
.arch-head .mi { color: rgba(var(--fg-rgb), .6); }
.archived-box { opacity: .92; }
.added-tag { color: var(--ink-info, #60a5fa); }
/* Состояния VPN — смысловыми цветами, а не «просто оранжевым» */
.vpn-st[data-st="none"] { color: rgba(var(--fg-rgb), .55); }
.vpn-st[data-st="rev"] { color: var(--ink-bad, #ef4444); }
.vpn-ev { display: inline-flex; align-items: center; color: var(--ink-warn, #f59e0b); }
.js-unarch, .js-vpn { display: inline-flex; align-items: center; gap: 5px; }

/* ── 5. Чтение письма: длинный текст читают глазами, а не «просматривают» ─ */
.rr-head h2 { font-size: clamp(17px, 2.2vw, 21px); letter-spacing: -.018em;
  line-height: 1.25; text-wrap: balance; }
.rr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; line-height: 1.5; }
.rr-warn { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-warn, #f59e0b); }
.rr-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.rr-links .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; }
.rr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rr-bar .btn-primary, .rr-bar .btn-ghost { display: inline-flex; align-items: center; gap: 6px; }
.ibtn { min-width: 38px; min-height: 38px; display: inline-grid; place-items: center;
  border-radius: 10px; position: relative; }
.ibtn::after { content: ''; position: absolute; inset: -3px; }
.ibtn .mi { width: 16px; height: 16px; vertical-align: 0; }
.pop-item { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 38px; }
.pop-item .mi { flex: none; }
/* Мера строки 65–75 знаков + воздух: главное на этой странице */
.rr-text {
  max-width: 72ch; font-size: 14.5px; line-height: 1.68;
  white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty;
  font-family: inherit; letter-spacing: .002em; padding: 4px 0 2px;
}
.rr-msg-body { max-width: 72ch; line-height: 1.62; text-wrap: pretty; }
.rr-body { padding-block: 4px; }
.rr-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rr-file, .rr-zip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.rr-dl { display: inline-grid; place-items: center; min-width: 30px; min-height: 30px;
  border-radius: 8px; position: relative; }
.rr-dl::after { content: ''; position: absolute; inset: -7px; }
.rr-log .mini { line-height: 1.55; }
.cmp-title { display: inline-flex; align-items: center; gap: 6px; }
.cmp-t, .cmp-x, .cmp-attach { display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; min-height: 30px;
  transition: background .14s var(--m-ease), transform .14s var(--m-ease); }
.cmp-t:active, .cmp-x:active, .cmp-attach:active { transform: scale(.96); }
.cmp-t:focus-visible, .cmp-x:focus-visible, .cmp-attach:focus-within {
  outline: 3px solid var(--c-info, #60a5fa); outline-offset: 2px; border-radius: 8px; }

/* ── 6. Ответы поставщиков ──────────────────────────────────────────────── */
.pr-hero .ts-form { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-best { border-radius: var(--v2-r-lg, 16px); }
.sr-best-price { letter-spacing: -.03em; text-wrap: balance; }
.sr-best-who { display: block; }
.sr-h2 { letter-spacing: -.015em; text-wrap: balance; }
.sr-offer { border-radius: var(--v2-r-md, 12px); }
.sr-o-what, .sr-o-who { text-wrap: pretty; }
.lnk-buy { display: inline-grid; place-items: center; min-width: 26px; min-height: 26px;
  border-radius: 7px; position: relative; color: inherit;
  transition: background .14s var(--m-ease), transform .14s var(--m-ease); }
.lnk-buy::after { content: ''; position: absolute; inset: -9px; }
.lnk-buy:hover { background: rgba(var(--fg-rgb), .08); }
.lnk-buy:active { transform: scale(.96); }
.lnk-buy:focus-visible { outline: 3px solid var(--c-info, #60a5fa); outline-offset: 1px; }
.sr-silent td .mi { color: rgba(var(--fg-rgb), .65); }
/* Ширину таблицы «ответили без цены» держим в прокрутке, а не в странице */
.sr-silent { min-width: 720px; }
.tbl-scroll { overflow-x: auto; }

/* Таблица прав шире телефона. Узкий экран: едет вбок ВНУТРИ своей рамки — иначе
   уезжала вся страница. Широкий: обёртка прозрачна, потому что overflow сделал бы
   её скроллпортом и липкая шапка перестала бы липнуть к шапке портала.  */
.users-table { min-width: 760px; }
@media (min-width: 1100px) {
  .archived-box .tbl-scroll, #usersForm ~ .tbl-scroll, .tbl-scroll:has(> .users-table) {
    overflow: visible;
  }
  .users-table { min-width: 0; }
}

/* Поле комментария к тикету: у textarea своя «родная» ширина по cols, и на 375px
   она растягивала страницу на 40px. Ширину задаём мы, а не браузер. */
.tk-comment .ps-box, .tk-comment textarea { width: 100%; min-width: 0; max-width: 100%;
  box-sizing: border-box; }
/* Поле выбора файла тоже имеет «родную» ширину и распирало строку на телефоне */
.tk-file { max-width: 100%; flex-wrap: wrap; }
.tk-file input[type="file"] { max-width: 100%; min-width: 0; flex: 1 1 120px; }


/* ── 7. Сотрудники (справочник) ─────────────────────────────────────────── */
#ptable thead th { position: sticky; top: 52px; z-index: 2; background: rgb(var(--bg-rgb));
  box-shadow: 0 1px 0 rgba(var(--fg-rgb), .12); }
#ptable tbody tr { transition: background .12s var(--m-ease); }
#ptable tbody tr:hover { background: rgba(var(--fg-rgb), .05); }
#ptable td a { position: relative; }
#ptable td a::after { content: ''; position: absolute; inset: -11px -6px; }

#ptable { min-width: 620px; }
@media (min-width: 1100px) { .people-scroll { overflow: visible; } #ptable { min-width: 0; } }

/* ── 8. Появление и спокойный режим ─────────────────────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tk-item, .sr-offer { animation: miIn linear both; animation-timeline: view();
      animation-range: entry 0% entry 14%; }
    @keyframes miIn { from { opacity: .35; } to { opacity: 1; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-item, .tk-tab, .emp-tile, .sr-offer, .rowmenu > summary, .rr-file, .rr-dl,
  .rr-zip, .ibtn, .pop-item, .lnk-buy, .cmp-t, .cmp-x { transition: opacity .2s; }
  .tk-item:active, .tk-tab:active, .emp-tile:active, .sr-offer:active,
  .rowmenu > summary:active, .rr-file:active, .rr-dl:active, .rr-zip:active,
  .ibtn:active, .pop-item:active, .lnk-buy:active, .cmp-t:active,
  .auth-form .btn-primary:active, .btn-wide:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .auth-card, .tk-card, .sr-best { backdrop-filter: none; }
}