/* ORTA — кабинет продавца в бренде приложения.
 *
 * Подключается вторым файлом после orta.css (см. UNFOLD_SELLER["STYLES"])
 * и только на сайте кабинета: площадка про этот файл не знает.
 *
 * С 20.10.2026 кабинет выглядит как мобильное приложение по второму
 * макету владельца («Своё. Для своих.»): слоновая кость, хвоя, золото,
 * шрифты Onest и Golos Text. Палитра unfold — BASE_IVORY и PRIMARY_PINE
 * в config/settings/base.py, ступени взяты из токенов приложения.
 * Здесь — то, чего палитрой не добиться: шрифты, оболочка, кнопки
 * хвоей, обзор с хвойным баннером и страница входа.
 *
 * Различие площадки и кабинета — по-прежнему светлотой оболочки: у
 * площадки сайдбар графитовый, у кабинета светлый. Видно всем, включая
 * тех, кто не различает красный и зелёный.
 *
 * Тёмная тема — как ночь приложения: страница на ступень темнее
 * карточек, кнопки лесной заливкой с белой подписью (шалфей кнопкой
 * выглядел мятной таблеткой), ссылки — шалфеем.
 *
 * Переменные orta.css переопределяются парами `:root` и `.dark`: класс
 * темы висит на <html>, вес у `:root` тот же, и одна `:root` здесь
 * перебила бы ночное значение из orta.css.
 */

/* --- Шрифты приложения: Golos Text — текст, Onest — заголовки ---
 * Сжатые копии файлов приложения, казахские буквы на месте
 * (static/brand/fonts/README.md). */

@font-face {
  font-family: "Golos Text";
  src: url("../brand/fonts/golos-text-400.a3d0edeb8c7a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Golos Text";
  src: url("../brand/fonts/golos-text-500.623097474b1d.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../brand/fonts/onest-500.fecca46ec6ec.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../brand/fonts/onest-600.f2ace7a4829d.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../brand/fonts/onest-700.c79e2ccbd084.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* --- Токены --- */

:root {
  /* unfold берёт шрифт из этой переменной. Inter больше не используется
     — браузер его и не скачает. Скругление — настройкой BORDER_RADIUS:
     unfold пишет её встроенным стилем после наших файлов. */
  --font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --orta-font-head: "Onest", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Бренд — значения из mobile/lib/core/theme/app_colors.dart. */
  --orta-gold: #f3bb5e;           /* gold: только заливкой */
  --orta-on-gold: #0b1d17;        /* onGold, 10:1 */
  --orta-slogan: #8f6728;         /* slogan — тёмное золото текстом, 5.1:1 на сайдбаре */
  --orta-active: #f2e9da;         /* sand — плашка активного пункта */
  --orta-on-active: rgb(var(--color-primary-800));
  --orta-plate: #f9f0e3;          /* ornament — бежевая плашка цифр */
  --orta-banner-from: #0b4527;    /* pineRaised → pine: баннер днём */
  --orta-banner-to: #02361b;
  --orta-on-brand-muted: #b8c0ba; /* onBrandMuted — подпись на хвое, 6:1 */
  --orta-card-shadow: 0 3px 12px rgba(42, 33, 23, 0.06);

  /* Переменные orta.css — тёплые вместо zinc. */
  --orta-hairline: rgb(var(--color-base-200));
  --orta-rule: #ddd4c6;
  --orta-control: #86817a;        /* outline приложения, 3.9:1 на белом */
  --orta-focus: rgb(var(--color-primary-800));
  --tone-neutral-fg: rgb(var(--color-base-600));
  --tone-neutral-bg: rgb(var(--color-base-100));
  --tone-neutral-border: rgb(var(--color-base-200));
}

.dark {
  --orta-slogan: #e7c27a;         /* sloganDark, 10:1 */
  --orta-active: #153a30;         /* pinePlate */
  --orta-on-active: #cde9da;      /* onBuyerSoftDark, 9.7:1 */
  --orta-plate: #2f2920;          /* sandDark — ночной песок */
  --orta-banner-from: #153a30;    /* ночью баннер светлее: хвоя на тёмном не видна */
  --orta-banner-to: #0b4527;
  --orta-card-shadow: none;

  --orta-hairline: rgb(var(--color-base-700));
  --orta-rule: rgb(var(--color-base-700));
  --orta-control: #8f8679;        /* outlineDark, 4.8:1 на карточке */
  --orta-focus: rgb(var(--color-primary-200));
  --tone-neutral-fg: rgb(var(--color-base-300));
  --tone-neutral-bg: rgb(var(--color-base-800));
  --tone-neutral-border: rgb(var(--color-base-700));
}

/* --- Типографика --- */

h1, h2, h3, h4,
.orta-section-title,
.orta-value,
.orta-btn,
.sc-btn,
.sc-toolbar__primary,
button[type="submit"] {
  font-family: var(--orta-font-head);
}

/* Числа — по разрядам: Golos и Onest умеют табличные цифры (tnum). */
.orta-value,
#result_list td {
  font-variant-numeric: tabular-nums;
}

/* Подпись `dark:text-base-500` у unfold ночью — 3.3:1 на карточке.
   Подписям нужно 4.5: ночью им ступень светлее, как подписям приложения. */
.dark .dark\:text-base-500 {
  color: rgb(var(--color-base-400));
}

/* --- Оболочка --- */

/* Ночью страница на ступень темнее карточек (paperDark под
   surfaceDark), как в приложении: unfold красит их одним base-900, и
   карточка сливалась со страницей. */
.dark body {
  background-color: rgb(var(--color-base-950));
}

/* Шапка с хлебными крошками — цвета страницы, как шапки приложения:
   белая полоса поверх кости читалась чужой панелью. */
div:has(> div > #header-inner) {
  background: rgb(var(--color-base-50));
}
.dark div:has(> div > #header-inner) {
  background: rgb(var(--color-base-950));
}

/* Сайдбар — цвета страницы с волосяной границей. Внутренняя панель меню
   у unfold 0.62 (`#nav-sidebar-inner`) несёт свою заливку bg-base-50
   поверх внешней колонны, поэтому она прозрачна. */
#nav-sidebar {
  background: rgb(var(--color-base-50));
  border-right: 1px solid rgb(var(--color-base-200));
}

#nav-sidebar-inner {
  background: transparent;
}

.dark #nav-sidebar {
  background: rgb(var(--color-base-900));
  border-right-color: rgb(var(--color-base-800));
}

/* Название кабинета — Onest, слоган под ним — тёмным золотом, как под
   логотипом в шапке приложения. */
#nav-sidebar-inner div.text-font-important-light.leading-normal {
  font-family: var(--orta-font-head);
  font-weight: 600;
  font-size: 15px;
}

#nav-sidebar-inner div.text-font-subtle-light.text-xs {
  color: var(--orta-slogan);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Заголовки групп меню — мелкой разрядкой, как разделы профиля в
   приложении («АККАУНТ», «ПРИЛОЖЕНИЕ»). base-500 — 4.9:1 на кости,
   ночью base-400 — 6.6:1 на сайдбаре. */
#nav-sidebar-inner h2 {
  font-family: var(--orta-font-head);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color-base-500));
}
.dark #nav-sidebar-inner h2 {
  color: rgb(var(--color-base-400));
}

#nav-sidebar-inner ol a {
  color: rgb(var(--color-base-600));
}
.dark #nav-sidebar-inner ol a {
  color: rgb(var(--color-base-300));
}

#nav-sidebar-inner ol a:hover {
  color: rgb(var(--color-base-900));
  background: rgb(var(--color-base-100));
}
.dark #nav-sidebar-inner ol a:hover {
  color: rgb(var(--color-base-100));
  background: rgba(255, 255, 255, 0.05);
}

/* Активный пункт — бежевая плашка с хвоей, как мягкий акцент
   приложения (sand), ночью — хвойная плашка с шалфеем (pinePlate).
   unfold рисует его классом bg-base-100: селектор по id весомее его
   утилит. */
#nav-sidebar-inner ol a.bg-base-100 {
  color: var(--orta-on-active);
  background: var(--orta-active);
}
.dark #nav-sidebar-inner ol a.bg-base-100 {
  color: var(--orta-on-active);
  background: var(--orta-active);
}

/* Поиск по меню — белая плашка с рамкой, как поле поиска приложения. */
#nav-sidebar-inner .bg-white:has(> #nav-filter) {
  border-color: rgb(var(--color-base-200));
}
.dark #nav-sidebar-inner .bg-white:has(> #nav-filter) {
  background: rgb(var(--color-base-800));
  border-color: rgb(var(--color-base-700));
}

/* --- Кнопки ---
 * Главная кнопка unfold — bg-primary-600. Днём это хвоя макета (800),
 * ночью — лесная заливка (600) с белой подписью: хвоя на тёмной
 * странице не видна (1.4:1), лесная — 3.1:1, подпись на ней 6:1. */
.bg-primary-600 {
  background-color: rgb(var(--color-primary-800));
}
.border-primary-600 {
  border-color: rgb(var(--color-primary-800));
}
.dark .bg-primary-600 {
  background-color: rgb(var(--color-primary-600));
}
.dark .border-primary-600 {
  border-color: rgb(var(--color-primary-600));
}

/* orta.css ночью делает bg-primary-500 светлым с тёмной подписью — у
   кабинета это та же лесная заливка, что у кнопок. */
.dark .bg-primary-500 {
  background-color: rgb(var(--color-primary-600));
  color: #ffffff;
}

/* --- Карточки обзора --- */

.orta-card,
.orta-panel {
  background: #ffffff;
  border: 1px solid var(--orta-hairline);
  border-radius: 16px;
  box-shadow: var(--orta-card-shadow);
}
.dark .orta-card,
.dark .orta-panel {
  background: rgb(var(--color-base-900));
}

.orta-section-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.orta-value {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Плитки «Что сделать сегодня» — бежевые плашки, как цифры площадки
   на главной приложения. Ненулевая очередь — хвоей, а не голубым
   «в работе»: это призыв к делу, а не статус. */
.sc .orta-card--work {
  background: var(--orta-plate);
  border-color: transparent;
  box-shadow: none;
}
.sc .orta-card--work.is-hot .orta-value {
  color: rgb(var(--color-primary-800));
}
.dark .sc .orta-card--work.is-hot .orta-value {
  color: rgb(var(--color-primary-200));
}

a.orta-card:hover {
  border-color: var(--orta-control);
}
.sc a.orta-card--work:hover {
  border-color: transparent;
  filter: brightness(0.97);
}
.dark .sc a.orta-card--work:hover {
  filter: brightness(1.15);
}

/* --- Обзор кабинета --- */

.sc { margin-bottom: 2.5rem; }
.sc-section { margin-bottom: 2rem; }

/* Хвойный баннер — первое, что видит продавец, как баннер главной
   приложения: магазин, город и главное действие золотом. Орнамент —
   маской из static/brand/ornament.svg, цвет задаёт фон. */
.sc-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 26px 28px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--orta-banner-from), var(--orta-banner-to));
}

.sc-hero::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: var(--orta-gold);
  opacity: 0.22;
  -webkit-mask: url("../brand/ornament.974a86d75112.svg") center / contain no-repeat;
  mask: url("../brand/ornament.974a86d75112.svg") center / contain no-repeat;
  pointer-events: none;
}

.sc-hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.sc-hero__store {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Логотип в белом кольце — как на странице производителя в приложении. */
.sc-hero__logo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  object-fit: cover;
  background: #ffffff;
}

.sc-hero__logo--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--orta-font-head);
  font-size: 22px;
  font-weight: 700;
  color: #02361b;
  background: #f2e9da;
}

.sc-hero__eyebrow {
  margin: 0 0 4px;
  font-family: var(--orta-font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orta-on-brand-muted);
}

.sc-hero__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.sc-hero__meta {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--orta-on-brand-muted);
}

.sc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 120ms ease, background-color 120ms ease;
}
.sc-btn:hover { text-decoration: none; }
.sc-btn .material-symbols-outlined { font-size: 18px; }

/* Золото — только заливкой с тёмной подписью (10:1). */
.sc-btn--gold {
  color: var(--orta-on-gold);
  background: var(--orta-gold);
}
.sc-btn--gold:hover { filter: brightness(1.05); }

/* Вторая кнопка на хвое — светлая обводка, как кнопки на баннерах
   приложения: вторую золотую рядом не ставим, главная на экране одна. */
.sc-btn--on-brand {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.sc-btn--on-brand:hover { background: rgba(255, 255, 255, 0.08); }

/* Баннер состояния магазина. Показывается только когда магазин
   не активен — «всё в порядке» не нуждается в объявлении. Цвет
   семантический: это предупреждение, а не бренд. */
.sc-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--tone-warning-fg);
  background: var(--tone-warning-bg);
  border: 1px solid var(--tone-warning-border);
}

.sc-banner--danger {
  color: var(--tone-danger-fg);
  background: var(--tone-danger-bg);
  border-color: var(--tone-danger-border);
}

.sc-banner strong { font-weight: 600; }

.sc-banner a {
  color: inherit;
  text-decoration: underline;
}

/* Окно памятки поверх обзора (seller/notice.html). Карточка — колонка:
   заголовок и кнопка на месте, прокручивается только список. */
.sc-notice {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(11, 29, 23, 0.55);
}

.sc-notice__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  padding: 24px;
  border-radius: 18px;
  color: rgb(var(--color-base-900));
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(11, 29, 23, 0.25);
}
.dark .sc-notice__card {
  color: rgb(var(--color-base-100));
  background: rgb(var(--color-base-900));
}

.sc-notice__title {
  font-family: var(--orta-font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.sc-notice__intro {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
}

.sc-notice__list {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 14px;
  padding: 2px 8px 2px 24px;
  overflow-y: auto;
  list-style: decimal;
  font-size: 14px;
  line-height: 21px;
}
.sc-notice__list:focus-visible { outline: 2px solid var(--orta-focus); }
.sc-notice__list li + li { margin-top: 10px; }
.sc-notice__list strong { font-weight: 600; }

.sc-notice__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Чеклист первого дня. Пока не пройден, он заменяет собой блок
   с нулями: четыре нуля в первый день читаются как «сломано». */
.sc-checklist { padding: 4px 0; }

.sc-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--orta-hairline);
  font-size: 14px;
}
.sc-checklist li:last-child { border-bottom: 0; }

.sc-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--orta-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

/* Сделанный шаг — хвоей, как выбранное в приложении: это ход
   настройки, а не статус заказа. */
.sc-check--done {
  border-color: rgb(var(--color-primary-800));
  background: rgb(var(--color-primary-800));
  color: #ffffff;
}
.dark .sc-check--done {
  border-color: rgb(var(--color-primary-600));
  background: rgb(var(--color-primary-600));
}

.sc-checklist li.is-done span:nth-child(2) {
  color: rgb(var(--color-base-500));
  text-decoration: line-through;
}

.sc-checklist a {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgb(var(--color-primary-800));
}
.dark .sc-checklist a { color: rgb(var(--color-primary-200)); }

/* Список того, что тихо портится: не карточки с числами, а строки
   с действием — тут важно «что сделать», а не «сколько». */
.sc-attention {
  border-left: 3px solid var(--tone-warning-border);
}

.sc-attention li {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--orta-hairline);
}
.sc-attention li:last-child { border-bottom: 0; }

.sc-attention a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: rgb(var(--color-base-900));
}
.dark .sc-attention a { color: rgb(var(--color-base-100)); }
.sc-attention a:hover { text-decoration: underline; }

.sc-attention .sc-why {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: rgb(var(--color-base-500));
}

.orta-empty a {
  font-weight: 500;
  color: rgb(var(--color-primary-800));
}
.dark .orta-empty a { color: rgb(var(--color-primary-200)); }

/* --- Список товаров: панель над таблицей --- */

/* «Быстрое добавление» — единственная залитая кнопка на странице: это
   главное, зачем продавец приходит в список. Хвоя, как главная кнопка
   приложения; прайс-лист рядом, но тише. */
.sc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 16px;
}

.sc-toolbar__primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  color: #ffffff;
  background: rgb(var(--color-primary-800));
  border: 1px solid rgb(var(--color-primary-800));
}
.sc-toolbar__primary:hover { filter: brightness(1.25); text-decoration: none; }
.dark .sc-toolbar__primary {
  background: rgb(var(--color-primary-600));
  border-color: rgb(var(--color-primary-600));
}
.dark .sc-toolbar__primary:hover { filter: brightness(1.12); }
.sc-toolbar__primary .material-symbols-outlined,
.sc-toolbar .orta-btn .material-symbols-outlined { font-size: 18px; }

.sc-toolbar__hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 12.5px;
  color: rgb(var(--color-base-500));
}

/* Цена и остаток правятся прямо в строке. Поля unfold растягиваются на
   всю ячейку и съедают колонку названия — у чисел ширина известна. */
#result_list td.field-price input[name$="-price"] { width: 118px; min-width: 0; }
#result_list td.field-stock_quantity input[name$="-stock_quantity"] { width: 84px; min-width: 0; }

/* --- Вход в кабинет ---
 * Справа — хвойная панель бренда, как баннеры приложения; слева — форма
 * unfold как есть (templates/seller/login.html). */

.orta-login {
  display: flex;
  min-height: 100vh;
  background: rgb(var(--color-base-50));
}
.dark .orta-login { background: rgb(var(--color-base-950)); }

.orta-login__form {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 40px;
}

.orta-login__card {
  width: 100%;
  max-width: 400px;
  padding: 28px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--orta-hairline);
  box-shadow: var(--orta-card-shadow);
}
.dark .orta-login__card { background: rgb(var(--color-base-900)); }

.orta-login__top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.orta-login__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--orta-font-head);
  font-weight: 600;
  color: rgb(var(--color-base-900));
}
.dark .orta-login__mark { color: rgb(var(--color-base-100)); }
.orta-login__mark img { width: 34px; height: 34px; }

.orta-login__brand {
  position: relative;
  display: none;
  overflow: hidden;
  flex: 0 0 44%;
  max-width: 640px;
  padding: 56px 48px;
  color: #ffffff;
  background: linear-gradient(150deg, var(--orta-banner-from), var(--orta-banner-to));
}

/* Панель — только на широком экране: на телефоне форма важнее. */
@media (min-width: 1024px) {
  .orta-login__brand {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.orta-login__brand::before {
  content: "";
  position: absolute;
  top: -110px;
  right: -130px;
  width: 520px;
  height: 520px;
  background: var(--orta-gold);
  opacity: 0.2;
  -webkit-mask: url("../brand/ornament.974a86d75112.svg") center / contain no-repeat;
  mask: url("../brand/ornament.974a86d75112.svg") center / contain no-repeat;
  pointer-events: none;
}

.orta-login__slogan {
  position: relative;
  margin: 0 0 12px;
  font-family: var(--orta-font-head);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.orta-login__lead {
  position: relative;
  max-width: 420px;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 24px;
  color: var(--orta-on-brand-muted);
}

.orta-login__points {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orta-login__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 21px;
}

.orta-login__points .material-symbols-outlined {
  flex: none;
  font-size: 20px;
  color: var(--orta-gold);
}