/* theme-ds.css — витрина на дизайн-системе «Пульт управления v1.0».
   Токены и компоненты взяты из присланного design-system.css; здесь только то, что
   реально используется витриной, плюс наша плотная таблица, которой в системе нет.
   Прежний вид жив и доступен по адресу с ?old=1 (грузится dashboard.css). */

@import url("/static/fonts/onest.css");

:root{
  /* --- Акцент (фирменный фиолетовый из дизайн-системы) ---
     Им оформлен интерфейс: меню, кнопки, переключатель года, фокус. */
  --accent-50:#f0ecfc; --accent-100:#e2dafa; --accent-400:#8b6ff0;
  --accent:#5b3fd6; --accent-700:#4c33b8; --accent-tint:#f4f0fd;

  /* --- Фиолетовый ТЕКСТА в таблице — прежний, приглушённый ---
     Отдельно от фирменного: на плотной таблице яркий акцент бьёт по глазам,
     а мелкий текст конверсий им читается тяжело. Выбор владельца. */
  --table-ink:#3c3489;    /* конверсии: CTR, CR */
  --table-mon:#534AB7;    /* заголовки месяцев */
  /* линии между месяцами в таблице — прежний оттенок (#e2dafa из системы бледнее,
     границы месяцев на плотной таблице переставали читаться) */
  --accent-line:#cbc5ee;
  /* разделитель «названия метрик | данные» — тоже прежний (#8b6ff0 из системы бледнее) */
  --accent-edge:#6d5ef0;

  /* --- Нейтральные --- */
  --bg:#f5f5f7; --surface:#ffffff; --surface-2:#faf9fc;
  --border:#ebebf0; --border-strong:#dcdce4; --line:#f0f0f4;
  --ink:#24232e; --ink-2:#55545f; --ink-3:#8a8996; --ink-4:#b6b6bf;

  /* --- Статусы --- */
  --success:#22b07d; --success-ink:#1c8f66; --success-bg:#e7f6ef;
  --warning:#f2b01e; --warning-ink:#a9791a; --warning-bg:#fdf3dd;
  --danger:#e5484d;  --danger-ink:#c0393e;  --danger-bg:#fce9ea;

  /* --- Цвета графика (сюда же смотрит dashboard.js) --- */
  --chart-total:#1ba3c4; --chart-search:#22b07d; --chart-card:#f2b01e;
  /* линия заказов — тем же фиолетовым, что акцент (иначе на экране два похожих) */
  --chart-home:#e5484d;  --chart-orders:#5b3fd6;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(20,20,40,.04);
  --shadow-md:0 6px 20px rgba(20,20,40,.10);
  --shadow-accent:0 4px 12px rgba(91,63,214,.24);

  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --fs-base:15px; --fs-sm:13px; --fs-xs:11px;

  /* Шрифт по умолчанию — прежний системный (выбор владельца при примерке:
     с ним читается привычнее). Onest из дизайн-системы доступен по ?font=onest —
     чтобы сравнить на одних данных, не пересобирая страницу. */
  --font:-apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
:root[data-font="onest"]{ --font:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--fs-base);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-700)}

/* ============================================================
   Оболочка: шапка + боковое меню
   ============================================================ */
.ds-app{min-height:100vh;display:flex;flex-direction:column}
.ds-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:20px;height:62px;padding:0 24px;
  background:var(--surface);border-bottom:1px solid var(--border)}
.ds-header__brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.ds-header__brand img{display:block;flex-shrink:0}
/* Название и подпись — в две строки, поэтому не наследуем размер у блока */
.ds-brand__lines{display:flex;flex-direction:column;line-height:1.15}
.ds-brand__lines b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.ds-brand__lines small{font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.01em}
.ds-header__right{display:flex;align-items:center;gap:14px}
.ds-body{display:flex;flex:1;min-height:0}
/* Размеры — как в дизайн-системе (236px, отступы 18/14). Без иконок текст
   и значок «скоро» помещаются в строку, расширять панель больше не нужно. */
.ds-sidebar{width:236px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);padding:18px 14px}
.ds-nav{display:flex;flex-direction:column;gap:3px}
.ds-nav a,.ds-nav > span{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
/* Разделитель перед служебным разделом «Настройки» */
.ds-nav__sep{height:1px;background:var(--border);margin:8px 12px}
.ds-nav a{cursor:pointer}
.ds-nav a:hover{background:var(--bg);color:var(--ink)}
.ds-nav a.is-active{font-weight:600;color:var(--accent);background:var(--accent-50)}
/* «В разработке» — неактивный пункт: не ссылка вовсе, чтобы не было соблазна кликнуть */
.ds-nav span{color:var(--ink-4);cursor:default}
.ds-nav .ds-soon{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-4);background:var(--line);
  padding:2px 6px;border-radius:var(--r-pill);flex-shrink:0}
.ds-main{flex:1;min-width:0;padding:24px 28px 64px}

/* ============================================================
   Кнопки, селекты, сегменты
   ============================================================ */
.ds-btn{font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:9px 16px;border-radius:var(--r-md);font-size:14px;font-weight:600;
  border:1px solid transparent;transition:background .12s,border-color .12s,color .12s}
.ds-btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.ds-btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
/* Выход — действие с последствиями, поэтому на наведении красный, а не акцент */
.ds-btn--logout:hover{border-color:var(--danger);color:var(--danger)}
.ds-btn--ghost{background:transparent;color:var(--ink-2)}
.ds-btn--ghost:hover{background:var(--bg);color:var(--ink)}
.ds-btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.ds-btn--primary:hover{background:var(--accent-700)}
/* Кнопка на всю ширину формы (вход) */
.ds-btn--wide{width:100%;justify-content:center;padding:11px 16px;font-size:15px}

.ds-select{font-family:inherit;padding:9px 32px 9px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);
  font-size:14px;color:var(--ink);cursor:pointer;
  /* свой треугольник: родной у select в разных браузерах выглядит по-разному */
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a8996' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.ds-select:hover{border-color:var(--accent-400)}
.ds-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}

.ds-segment{display:inline-flex;padding:4px;background:#f0f0f4;border-radius:var(--r-md);gap:3px}
.ds-segment button{font-family:inherit;cursor:pointer;border:none;padding:7px 15px;
  border-radius:9px;font-size:13.5px;font-weight:600;background:transparent;color:var(--ink-3)}
.ds-segment button:hover{color:var(--ink-2)}
.ds-segment button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,40,.08)}

/* Переключатель года — в прежнем виде (рамка + залитый активный): выбор владельца.
   Он относится к таблице, а не к карточке графика, и рядом с плотной таблицей
   компактная рамка читается лучше «пилюли в подложке». */
.ds-seg-year{display:inline-flex;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);overflow:hidden}
.ds-seg-year button{font-family:inherit;border:0;cursor:pointer;
  background:var(--surface);color:var(--ink-3);font-size:12px;padding:6px 12px}
.ds-seg-year button:hover{color:var(--ink-2)}
.ds-seg-year button.on{background:var(--accent);color:#fff}

/* ============================================================
   Заголовок страницы и карточки
   ============================================================ */
.ds-page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ds-page-title{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink)}
.ds-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-sm)}
.ds-card-title{font-size:14px;font-weight:600;color:var(--ink)}
/* Заголовок карточки и её переключатель — в одной строке: экономит высоту
   и связывает подпись с органом управления. Перенос — на узком экране. */
.ds-card-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}

.ds-chart{margin-bottom:16px}

/* Вкладки раздела (Настройки → Сбор данных). Пока вкладка одна, но строка
   держит место: следующие добавляются без перекройки страницы. */
.ds-tabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:18px}
.ds-tabs a{padding:0 2px 12px;font-size:14.5px;font-weight:500;color:var(--ink-3);cursor:pointer}
.ds-tabs a.is-active{font-weight:600;color:var(--accent);
  border-bottom:2px solid var(--accent);margin-bottom:-1px;cursor:default}

/* Пояснение над содержимым раздела */
.ds-lead{margin:0 0 16px;font-size:14px;color:var(--ink-2);line-height:1.5;max-width:760px}

/* Подпись + переключатель в строку (например, «Ассоциированные конверсии») */
.ds-field-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ds-field-name{font-size:14px;font-weight:600;color:var(--ink)}
.ds-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:var(--fs-sm);color:var(--ink-3)}
.ds-legend span{display:flex;align-items:center;gap:6px}
.ds-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ============================================================
   Таблица данных — НАША, плотная (месяцы × дни).
   Стиль .ds-table из дизайн-системы намеренно не используется: капс-заголовки,
   зебра и отступы 13-14px рассчитаны на короткие списки и съели бы половину экрана.
   Здесь взяты только палитра и шрифт системы, структура — прежняя.
   ============================================================ */
.ds-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
/* ползунок над таблицей: синхронизируется скриптом, родной нижний спрятан */
.ds-scroll-top{overflow-x:auto;overflow-y:hidden;margin-bottom:6px}
.ds-scroll-top > div{height:1px}
#table-wrap{scrollbar-width:none}
#table-wrap::-webkit-scrollbar{display:none}
/* Полосу прокрутки НЕ переопределяем: стоит задать ::-webkit-scrollbar, и браузер
   убирает кнопки-стрелки по краям, а ими удобно двигать таблицу по одному столбцу.
   В дизайн-системе своя стилизация полосы есть, но здесь она дороже, чем красивее. */

/* Размеры и начертания — ровно как в исходном виде (12px, 400): таблица
   остаётся своей, из дизайн-системы взяты только палитра и шрифт. */
.wb-table{border-collapse:separate;border-spacing:0;font-size:12px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.wb-table th,.wb-table td{padding:5px 10px;text-align:right;border-bottom:1px solid var(--line)}
.wb-table thead th{position:sticky;top:0;background:var(--surface);
  font-weight:400;font-size:11.5px;color:var(--ink-3);z-index:2}
.wb-lab{position:sticky;left:0;background:var(--surface);text-align:left;
  color:var(--ink-2);box-shadow:2px 0 0 var(--accent-edge);z-index:1;min-width:170px}
.wb-table thead .wb-lab{z-index:3}
.wb-mon{border-left:1px solid var(--accent-line);font-weight:500}
.wb-mon:last-child{border-right:1px solid var(--accent-line)}
.wb-table thead .wb-mon{color:var(--table-mon);cursor:pointer}
.wb-arw{font-size:15px;vertical-align:-1px}
.wb-table td.wb-mon{background:var(--accent-tint)}
/* группы отделяются цветом шрифта: конверсии — индиго, трафик и доля — основной */
.wb-g-conv td{color:var(--table-ink)}
.wb-g-traffic td,.wb-g-share td{color:var(--ink)}
/* Даты дней — обычным начертанием (400, как в исходном виде): жирным выделены
   только месяцы-своды, иначе шапка пестрит и своды перестают выделяться. */
.wb-hdr td{font-weight:400;font-size:11.5px;color:var(--ink-3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--border);padding-top:8px}
.wb-hdr td.wb-mon,.wb-hdr td.wb-h{color:var(--ink);background:var(--surface)}
.wb-hdr td.wb-mon{cursor:pointer;font-weight:600;text-align:center}
.wb-hdr .wb-sec{font-weight:600;font-size:13px;color:var(--ink)}   /* название раздела */
.wb-gap td{height:12px;border-bottom:none}

/* ============================================================
   Плашки и статусы
   ============================================================ */
.ds-alert{margin:0 0 14px;padding:12px 16px;border-radius:var(--r-md);
  background:var(--warning-bg);border:1px solid #f4d99a;border-left:4px solid var(--warning);
  color:var(--warning-ink);font-size:14px;line-height:1.5}
.ds-alert a{color:var(--warning-ink);font-weight:700;text-decoration:underline}
.ds-alert:last-child{margin-bottom:0}
.ds-ok{color:var(--success-ink);font-weight:600}
.ds-bad{color:var(--danger-ink);font-weight:600}
.ds-row{margin:0 0 10px;line-height:1.6}
.ds-row:last-child{margin-bottom:0}
.ds-muted{font-size:var(--fs-sm);color:var(--ink-3)}

.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:var(--r-pill);font-size:12px;font-weight:600}
.ds-badge--neutral{background:var(--line);color:var(--ink-3)}

/* ============================================================
   Страница «Артикулы»
   ============================================================ */
.ds-articles{border-collapse:separate;border-spacing:0;width:100%;max-width:760px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden}
.ds-articles td{padding:12px 16px;border-bottom:1px solid var(--line)}
.ds-articles tr:last-child td{border-bottom:none}
.ds-art-label{font-weight:600;color:var(--ink)}
.ds-art-range{color:var(--ink-3);font-size:12.5px;white-space:nowrap}
.ds-art-switch{text-align:right;width:1%}
.ds-switch{position:relative;display:inline-block;width:44px;height:26px}
.ds-switch input{opacity:0;width:0;height:0}
.ds-switch span{position:absolute;inset:0;border-radius:var(--r-pill);
  background:var(--border-strong);transition:background .15s}
.ds-switch span::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .15s}
.ds-switch input:checked + span{background:var(--accent)}
.ds-switch input:checked + span::before{transform:translateX(18px)}

/* ============================================================
   Вход
   ============================================================ */
.ds-login{max-width:360px;margin:14vh auto 0;padding:28px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.ds-login__brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:20px}
.ds-login-form{display:flex;flex-direction:column;gap:12px}
.ds-input{font-family:inherit;width:100%;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);
  font-size:14.5px;color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s}
.ds-input::placeholder{color:var(--ink-3)}
.ds-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50)}
.ds-login-err{background:var(--danger-bg);color:var(--danger-ink);border-radius:var(--r-sm);
  padding:10px 14px;font-size:13.5px;margin-bottom:12px}

/* ============================================================
   Узкий экран: меню уезжает в горизонтальную полосу
   ============================================================ */
@media (max-width:900px){
  .ds-body{flex-direction:column}
  .ds-sidebar{width:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px 12px}
  .ds-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .ds-nav .ds-soon{display:none}
  .ds-nav__sep{display:none}      /* горизонтальное меню — разделитель не нужен */
  .ds-main{padding:18px 14px 48px}
}