/* Каркас оболочки vesquadra — вынесен дословно из base.html (этап 1
   UI-фундамента, ui-plan.md). Значения-литералы уходят в tokens.css на
   этапе 2; компоненты поверх Bootstrap — components.css (этап 3+). */

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-ui);
       color: var(--text); background: var(--bg); }
/* height (не min-height) + overflow:hidden фиксируют оболочку на высоту экрана
   (C4): контент прокручивается внутри .content, а шапка (topnav+subnav+лента
   вкладок) никогда не уезжает. С min-height корень рос вместе с контентом и
   прокручивалось всё окно вместе с шапкой. */
.layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── Верхний ряд навигации — канон «Ведомость»: светлый лист, чернильная линия ──
   Шапка светлая (--sheet), нижняя граница 2px сплошная чернилами — отделяет
   без тени (принцип «линии вместо теней»). align-items: baseline выравнивает
   элементы по базовой линии текста (как в d.css). */
.topnav {
  background: var(--sheet);
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; gap: 4px;
  padding: 0 20px; height: var(--header-h); flex-shrink: 0;
}
/* Логотип: PT Serif жирный, акцентная точка сургучом.
   align-self: center — выровнен по центру шапки относительно flex-column. */
.topnav .brand {
  font-family: var(--font-serif); font-weight: 700; font-size: 19px;
  letter-spacing: 0.01em; color: var(--ink);
  margin-right: 22px; align-self: center;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.topnav .brand b { color: var(--wax); font-style: normal; }
/* small-подпись убрана в каноне «Ведомость»; оставляем selector без содержимого
   для совместимости на случай, если разметка ещё несёт <small>. */
.topnav .brand small { display: none; }

/* Пункты навигации: базовая линия (align-items: stretch + inline-flex) */
.topnav-items { display: flex; gap: 0; align-self: stretch; align-items: stretch; flex: 1; }
.topnav-items a {
  display: inline-flex; align-items: center;
  padding: 0 13px; height: var(--header-h);
  color: var(--ink-soft); text-decoration: none; font-size: var(--fs-13);
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.topnav-items a:hover { color: var(--ink); background: var(--brand-dark-hover); }
/* Активный раздел: чернила + сургучная нижняя черта 3px */
.topnav-items a.active {
  color: var(--ink); font-weight: 700;
  border-bottom-color: var(--wax);
}
/* Раздел «в разработке»: ink-faint, некликабельный, без hover/курсора */
.topnav-items .nav-wip {
  display: inline-flex; align-items: center;
  padding: 0 13px; height: var(--header-h);
  color: var(--ink-faint); font-size: var(--fs-13);
  white-space: nowrap; cursor: default; user-select: none;
  border-bottom: 3px solid transparent;
}
/* Правая часть: имя пользователя PT Serif курсивом */
.topnav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; align-self: center; color: var(--ink-soft); }
.topnav-right .username {
  font-family: var(--font-serif); font-style: italic;
  color: var(--ink-soft); font-size: var(--fs-13);
}
.topnav-right a { color: var(--ink-soft); font-size: var(--fs-13); text-decoration: none; }
.topnav-right a:hover { color: var(--ink); }
.topnav-admin {
  display: inline-flex; align-items: center;
  padding: 0 12px; height: var(--header-h);
  color: var(--ink-faint); text-decoration: none; font-size: var(--fs-12);
}
.topnav-admin:hover { color: var(--ink); }

/* ── Второй ряд ─────────────────────────────────────────────────────── */
/* Подменю всегда занимает высоту (даже без пунктов): при переключении разделов
   лента и контент не прыгают — симметрия (пожелание Ильи). Сайдбар убран —
   пункты начинаются от левого края с единым горизонтальным отступом. */
.subnav { background: var(--subnav-bg); border-bottom: 1px solid var(--line);
          display: flex; align-items: center; gap: 0;
          padding: 0 16px;
          height: var(--subnav-h); flex-shrink: 0; }
.subnav a { display: block; padding: 0 14px; height: var(--subnav-h); line-height: var(--subnav-h);
            color: var(--subnav-text); text-decoration: none; font-size: var(--fs-13);
            white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--accent); }
.subnav a.active { color: var(--accent); font-weight: 600;
                   border-bottom-color: var(--accent); }

/* ── Рабочая область: горизонтальный ряд [левая колонка | чат] ──────── */
/* .workspace занимает всё место под topnav, включая высоту subnav и ленты.
   Левая .workzone — колонка с subnav, лентой и body-row; чат — правый сосед
   на всю высоту. min-width:0 обязателен: не даёт широким таблицам толкать чат. */
.workspace { display: flex; flex: 1; min-height: 0; overflow: hidden; }
/* min-height:0 обязателен наравне с min-width:0 (C4): без него колонка не
   сжимается по высоте, контент распирает страницу и прокручивается всё окно —
   шапка (topnav+subnav+лента) уезжает вверх. С ним прокрутка уходит внутрь
   .content (.body-row min-height:0), а шапка раздела остаётся на месте везде. */
.workzone  { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

/* ── Основная область внутри .workzone ───────────────────────────────── */
.body-row { display: flex; flex: 1; min-height: 0; }

/* ── Левая панель убрана (блок 1 навигации, 2026-07) ─────────────────────
   Стили .sidebar / .sidebar-home / .leftnav / .userbox удалены.
   Git помнит историю, если понадобятся. --sidebar-w = 0 в tokens.css. */

/* ── Левая вертикальная полоска пунктов раздела (tabs-standard, 2026-07) ─
   Видна только когда у активного раздела есть modules (группы: Закупки,
   Панель администратора). Разделы-одиночки (Каталог, Главная, OZON→Кабинет)
   полоску не показывают. WIP-вид — финальная полировка в следующем блоке. */
/* Канон «Ведомость»: фон paper, граница-право rule-strong */
.subnav-left {
  width: var(--subnav-left-w);
  flex-shrink: 0;
  background: var(--paper);
  border-right: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  padding: 18px 0 0 0;
  overflow-y: auto;
}
.subnav-left a {
  display: block;
  padding: 6px 0 6px 16px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-13);
  white-space: nowrap;
  border-right: 3px solid transparent;
  margin-right: -1px;
}
.subnav-left a:hover { color: var(--ink); text-decoration: none; }
.subnav-left a.active {
  color: var(--ink);
  font-weight: 700;
  border-right-color: var(--wax);
  background: transparent;
}

/* ── Контент ─────────────────────────────────────────────────────────── */
.content { flex: 1; padding: 28px 36px; overflow: auto; }
.content h1 { margin-top: 0; }
.note { color: var(--text-muted); }

/* ── Таблица товаров ─────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.data-table th { background: var(--thead-bg); font-weight: 600; text-align: left;
                 padding: 8px 12px; border-bottom: 2px solid var(--line); }
.data-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tr:hover td { background: var(--row-hover-bg); }
.data-table a { color: var(--accent); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* ── Поиск ───────────────────────────────────────────────────────────── */
.search-form { display: flex; gap: 8px; margin-bottom: 20px; }
.search-form input { flex: 1; padding: 8px 12px; border: 1px solid var(--line);
                     border-radius: var(--radius-2); font: inherit; font-size: var(--fs-13); }
.search-form button { padding: 8px 18px; background: var(--accent); color: var(--text-invert);
                      border: 0; border-radius: var(--radius-2); font: inherit; cursor: pointer; }
.search-form button:hover { background: var(--accent-strong); }

/* ── Карточка товара ─────────────────────────────────────────────────── */
.card-section { margin-bottom: 24px; }
.card-section h3 { font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .04em;
                   color: var(--text-faint); margin: 0 0 8px; }
.field-list { display: grid; grid-template-columns: 180px 1fr; gap: 4px 16px;
              font-size: var(--fs-13); }
.field-list dt { color: var(--text-muted); }
.field-list dd { margin: 0; }
/* Статусные бейджи мигрировали на Bootstrap-компонент .badge (этап 3):
   механика — bootstrap.min.css, вид — components.css с токенами. */

/* ── Панель чата ─────────────────────────────────────────────────────── */
/* Флекс-ребёнок .workspace: занимает всю высоту контейнера (= 100vh - header-h),
   не прокручивает страницу — скроллится только .chat-log внутри. */
.chatpanel { width: var(--chat-w); flex-shrink: 0; background: var(--panel);
             border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.chat-head { position: relative; padding: 14px 16px; border-bottom: 1px solid var(--line);
             font-weight: 600; font-size: var(--fs-13); }
.chat-head small { display: block; font-weight: 400; font-size: var(--fs-11); color: var(--text-faint); margin-top: 3px; }
/* Метка активной модели (C6): значение из потока «Агент» (chat_model_label). */
.chat-model { display: inline-block; margin-top: 5px; padding: 1px 8px; font-weight: 500;
              font-size: var(--fs-11); color: var(--text-muted); background: var(--hover-bg);
              border-radius: var(--radius-2); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; }
.chat-msg { margin-bottom: 12px; }
.chat-meta { font-size: var(--fs-11); color: var(--text-faint); margin-bottom: 2px; }
.chat-text { background: var(--hover-bg); border-radius: var(--radius-3); padding: 8px 10px;
             white-space: pre-wrap; word-break: break-word; font-size: var(--fs-13); }
.chat-msg.user .chat-text { background: var(--accent-soft); }
.chat-msg.assistant .chat-text { background: var(--hover-bg); }
.chat-group { border-top: 1px solid var(--line); }
.chat-group > summary { padding: 10px 14px; cursor: pointer; font-size: var(--fs-12); color: var(--accent); }
.chat-group .chat-log { flex: none; max-height: 180px; }
.chat-empty { color: var(--text-muted); font-size: var(--fs-12); line-height: 1.5; }
.chat-form { border-top: 1px solid var(--line); padding: 10px 12px; }
.chat-form textarea { width: 100%; resize: vertical; font: inherit; padding: 7px;
                      border: 1px solid var(--line); border-radius: var(--radius-3); font-size: var(--fs-13); }
.chat-form button { margin-top: 7px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-3);
                    background: var(--accent); color: var(--text-invert); font: inherit; cursor: pointer;
                    font-size: var(--fs-13); }
.chat-form button:hover { background: var(--accent-strong); }

/* ── Сворачивание чата в ярлык ────────────────────────────────────────── */
/* .chat-region — обёртка Alpine (панель + ярлык); display:contents убирает её
   из раскладки, панель и ярлык остаются прямыми флекс-детьми .workspace.
   Состояние — класс на <html> (см. base.html + _chat.html), не x-cloak. */
.chat-region { display: contents; }

/* Кнопка «свернуть» в шапке чата (шеврон вправо, C6). Оформлена видимым
   квадратом-кнопкой: прежний прозрачный шеврон сливался с фоном шапки
   (--panel) и читался только на hover. Теперь — квадрат 28×28 с собственным
   фоном (--hover-bg), бордером и тенью: явно виден в покое, выделяется на hover. */
.chat-collapse { position: absolute; top: 8px; right: 10px;
                 display: flex; align-items: center; justify-content: center;
                 width: 28px; height: 28px; padding: 0;
                 background: var(--hover-bg); color: var(--text-muted);
                 border: 1px solid var(--line); border-radius: var(--radius-2);
                 font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
                 /* shadow-1=none по канону; отделение — уже через border */
                 transition: background .12s, color .12s, border-color .12s; }
.chat-collapse:hover { background: var(--accent-soft); color: var(--accent);
                       border-color: var(--accent); }

/* Ярлык «ЧАТ»: скрыт по умолчанию, виден в свёрнутом состоянии — у верхней
   кромки правого края, чуть больше двух строк шапки чата. */
.chat-tab { display: none; }
html.chat-collapsed .chatpanel { display: none; }
html.chat-collapsed .chat-tab {
  display: flex; align-items: center; justify-content: center; align-self: flex-start;
  flex-shrink: 0; margin-top: 12px; min-height: 50px; padding: 8px 11px;
  background: var(--panel); border: 1px solid var(--line); border-right: 0;
  border-radius: var(--radius-3) 0 0 var(--radius-3);
  /* shadow-1=none по канону; отделение через border */
  color: var(--accent); font-weight: 600; font-size: var(--fs-12); letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; }
html.chat-collapsed .chat-tab:hover { background: var(--hover-bg); }

/* Alpine: скрываем x-cloak элементы до инициализации компонента. */
[x-cloak] { display: none !important; }

/* ── Экран аутентификации (base_auth.html) ───────────────────────────── */
/* Центрирование карточки входа; нет topnav/subnav/chat. */
.auth-screen { display: flex; align-items: center; justify-content: center;
               min-height: 100vh; background: var(--bg); }
.auth-card   { background: var(--panel); border: 1px solid var(--rule-strong);
               border-radius: var(--radius-3);
               /* shadow-2=none по канону; отделение через более тёмную рамку */
               padding: 40px 36px; width: 100%; max-width: 380px; }
.auth-card h1 { font-size: var(--fs-16); font-weight: 700; margin: 0 0 24px; }
.auth-card label { display: block; font-size: var(--fs-13); color: var(--text-muted);
                   margin-bottom: 4px; }
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"] { width: 100%; padding: 8px 10px; font: inherit;
                                  font-size: var(--fs-13); border: 1px solid var(--line);
                                  border-radius: var(--radius-2); margin-bottom: 14px;
                                  box-sizing: border-box; }
.auth-card input[type="text"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="email"]:focus { outline: var(--focus-ring); outline-offset: 1px; }
.auth-card .auth-checkbox { display: flex; align-items: center; gap: 8px;
                             font-size: var(--fs-13); margin-bottom: 18px; }
.auth-card .auth-checkbox input { margin: 0; }
.auth-btn { display: block; width: 100%; padding: 9px; border: 0;
            border-radius: var(--radius-2); background: var(--accent);
            color: var(--text-invert); font: inherit; font-size: var(--fs-13);
            font-weight: 600; cursor: pointer; margin-bottom: 14px; }
.auth-btn:hover { background: var(--accent-strong); }
.auth-link { font-size: var(--fs-12); color: var(--accent); cursor: pointer;
             background: none; border: none; padding: 0; text-decoration: underline; }
.auth-link:hover { color: var(--accent-strong); }
.auth-reset { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }