/* Бета 1: основное оформление OLYMP CRM + анимации и разделы в шапке по образцу шаблона OYMP CRM 2.
   Всё под :root[data-ui="motion"] — классика и стеклянная бета 2 не затронуты. Поведение — motion.js. */

:root[data-ui="motion"] { --mo-ease: cubic-bezier(.22, 1, .36, 1); }

/* ——— Шрифт и цвета — как в шаблоне OYMP CRM 2 ———
   Urbanist для латиницы и цифр; кириллицы в нём нет — она системным шрифтом, как в шаблоне. */
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/app/assets/fonts/urbanist/urbanist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/app/assets/fonts/urbanist/urbanist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* знаки ₽ и ₸ — системные, в Urbanist их нет */
@font-face { font-family: 'Urbanist'; src: local('Segoe UI'), local('Arial'); font-style: normal; font-weight: 400 700; unicode-range: U+20B8, U+20BD; }

:root[data-ui="motion"] {
  --font: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif; --head: var(--font);
  --brand: #1f55d6; --brand-600: #1a49bf; --brand-50: #e9f0fc; --brand-100: #dbe6fb;
  --ink: #121826; --ink-2: #2f3747; --muted: #5a6477; --line: #12182614; --bg: #eef1f5; --card: #fbfcfd;
  --ok: #176a3d; --ok-50: #1d7a481f; --warn: #8a5a00; --warn-50: #c98a142b; --hot: #b42a26; --hot-50: #b42a261a;
  --radius: 14px; --radius-sm: 10px;
  --shadow: 0 1px 2px #1218260d, 0 10px 26px -16px #12182638; --shadow-lg: 0 2px 6px #12182612, 0 28px 60px -24px #12182657;
  --mo-line-2: #12182626; --mo-card-2: #f3f5f8;
  --mo-pill-shadow: drop-shadow(0 4px 10px rgba(31, 85, 214, .28));
}
:root[data-ui="motion"][data-theme="dark"] {
  --brand: #6e98ff; --brand-600: #9ab7ff; --brand-50: #1a2848; --brand-100: #233562;
  --ink: #e8ecf3; --ink-2: #c6ccd7; --muted: #99a2b3; --line: #e8ecf314; --bg: #0c0f14; --card: #151a22;
  --ok: #6fcf97; --ok-50: #6fcf9724; --warn: #e6b45c; --warn-50: #e6b45c24; --hot: #f2877b; --hot-50: #f2877b24;
  --shadow: 0 1px 2px #0000004d, 0 12px 30px -16px #0009; --shadow-lg: 0 2px 6px #0006, 0 30px 70px -24px #000c;
  --mo-line-2: #e8ecf329; --mo-card-2: #11151c;
  --mo-pill-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}
:root[data-ui="motion"] body { background: var(--bg); color: var(--ink); font: 400 14px/1.45 var(--font); font-synthesis: none; -webkit-font-smoothing: antialiased; }
/* в старых правилах шрифт местами задан напрямую (Inter, Golos Text) — везде один шрифт шаблона */
:root[data-ui="motion"] :is(body, body *):not(code, pre, kbd, samp, .mono, .ic, svg, svg *) { font-family: var(--font) !important; }
:root[data-ui="motion"] :is(h1, .page-head h1) { font-weight: 600; letter-spacing: -.025em; }
:root[data-ui="motion"] :is(h2, h3) { font-weight: 600; letter-spacing: -.01em; }
:root[data-ui="motion"] .tab-top.active, :root[data-ui="motion"] .tab-top.active:hover { color: #fff; }
:root[data-ui="motion"][data-theme="dark"] .tab-top.active, :root[data-ui="motion"][data-theme="dark"] .tab-top.active:hover { color: #0b1222; }

/* ——— Плашка под активной кнопкой (слой на всю группу, видимую часть режет clip-path) ——— */
.mo-pill { position: absolute; z-index: 0; left: 0; top: 0; display: block; background: var(--brand); filter: var(--mo-pill-shadow); pointer-events: none; opacity: 0; transition: opacity .2s; }
.mo-pill.on { opacity: 1; }
.mo-pill-soft { background: var(--brand-50); filter: none; }

/* ——— Шапка: разделы как на стекле, одной белой группой по образцу шаблона 2 ——— */
@media (min-width: 769px) {
  :root[data-ui="motion"] .top-attention, :root[data-ui="motion"] .top-status, :root[data-ui="motion"] .top-launch { display: none; }
  :root[data-ui="motion"] .top-search { flex: 0 1 220px; min-width: 150px; }
  :root[data-ui="motion"] .tabs-top { display: flex; position: relative; isolation: isolate; align-self: center; align-items: center; flex: 0 1 auto; height: auto; min-width: 0; margin: 0 auto; padding: 4px; gap: 2px; border: 0; border-radius: 16px;
    background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); overflow-x: auto; scrollbar-width: none; }
  :root[data-ui="motion"] .tabs-top::-webkit-scrollbar { display: none; }
  :root[data-ui="motion"][data-theme="dark"] .tabs-top { box-shadow: inset 0 0 0 1px var(--line); }
  :root[data-ui="motion"] .tab-top { z-index: 1; height: 40px; padding: 0 15px; gap: 8px; border-radius: 12px; background: none; box-shadow: none; color: var(--muted); font: 600 14px/1 var(--font); transition: color .25s; }
  :root[data-ui="motion"] .tab-top::after, :root[data-ui="motion"] .tab-top .ic, :root[data-ui="motion"] .tab-top .tab-short, :root[data-ui="motion"] .mobile-more { display: none; }
  :root[data-ui="motion"] .tab-top .tab-full { display: inline; }
  :root[data-ui="motion"] .tab-top:hover { background: none; color: var(--ink); }
  :root[data-ui="motion"] .tab-top:active { transform: scale(.97); }
  :root[data-ui="motion"] .tab-top.active, :root[data-ui="motion"] .tab-top.active:hover { background: none; color: #fff; box-shadow: none; }
  :root[data-ui="motion"] .tab-top[data-nav="/app/overview"] { order: -1; }
  :root[data-ui="motion"] .tab-top .tab-count { position: static; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--hot-50); color: var(--hot); font: 700 11px/20px var(--font); }
  :root[data-ui="motion"] .tab-top.active .tab-count { background: rgba(255, 255, 255, .24); color: inherit; }
}
/* тесно — поиск сворачивается в кнопку и раскрывается при нажатии, название проекта прячем */
@media (min-width: 769px) and (max-width: 1599px) {
  :root[data-ui="motion"] .top-search { flex: none; width: 44px; min-width: 0; transition: width .35s var(--mo-ease); }
  :root[data-ui="motion"] .top-search:focus-within { width: 280px; }
  :root[data-ui="motion"] .top-search .ts-field { cursor: pointer; }
  :root[data-ui="motion"] .top-search:not(:focus-within) .ts-field input { opacity: 0; }
  :root[data-ui="motion"] .top-search .ts-field kbd { display: none; }
}
@media (min-width: 769px) and (max-width: 1499px) {
  :root[data-ui="motion"] .proj-name { display: none; }
  :root[data-ui="motion"] .tab-top { padding: 0 11px; font-size: 13px; }
}

/* «Обзор» и «Календарь» пришли со стекла — красим их в цвета основного оформления */
:root[data-ui="motion"] {
  --g-blur: none; --g-r-card: var(--radius); --g-r-tile: 12px; --g-ease: cubic-bezier(.2, .8, .2, 1); --g-on-accent: #fff;
  --g-glass: var(--card); --g-glass-2: var(--bg); --g-solid: var(--card); --g-float: var(--card); --g-tile: var(--bg); --g-well: var(--bg);
  --g-line: var(--line); --g-line-2: var(--line); --g-rim: var(--line); --g-shadow: var(--shadow); --g-shadow-pop: var(--shadow-lg);
  --g-text: var(--ink); --g-muted: var(--ink-2); --g-faint: var(--muted); --g-accent: var(--brand); --g-accent-text: var(--brand-600);
  --g-coral: var(--hot); --g-sky: #3b82f6; --g-good: var(--ok); --g-bad: var(--hot); --g-pill: var(--brand); --g-on-pill: #fff;
  --g-plan: linear-gradient(160deg, var(--brand-50), var(--card) 70%);
}

/* ——— Слева и на телефоне активный раздел подсвечивает бегущая плашка ——— */
:root[data-ui="motion"] .side-panel { isolation: isolate; }
:root[data-ui="motion"] .side-panel > :not(.mo-pill) { position: relative; z-index: 1; }
:root[data-ui="motion"] .side-link.active { background: transparent; }
:root[data-ui="motion"] .side-link { transition: color .25s, background .15s; }
@media (max-width: 768px) {
  :root[data-ui="motion"] .tabs-top { isolation: isolate; }
  :root[data-ui="motion"] .tabs-top > .mo-pill { background: var(--brand-50); filter: none; }
  :root[data-ui="motion"] .tabs-top > .tab-top { z-index: 1; transition: color .25s; }
  :root[data-ui="motion"] .tab-top.active { background: transparent; }
}

/* ——— Отклик на нажатие и наведение ——— */
:root[data-ui="motion"] :is(.btn, .create-btn, .sq-btn, .icon-btn, .me-btn, .proj-btn, .chip, .tq-stat) { transition: transform .18s var(--mo-ease), background .15s, box-shadow .2s, border-color .15s, color .15s, filter .15s; }
:root[data-ui="motion"] :is(.btn, .create-btn, .sq-btn, .icon-btn, .me-btn, .proj-btn, .chip, .tq-stat):active:not(:disabled) { transform: scale(.96); }
:root[data-ui="motion"] .create-btn:hover { box-shadow: 0 8px 20px -8px var(--brand); }
:root[data-ui="motion"] :is(.deal, .ct-tile, .kpi, .tq-stat, .card) { transition: transform .25s var(--mo-ease), box-shadow .25s, border-color .2s, background .2s; }
:root[data-ui="motion"] :is(.deal, .ct-tile, .kpi):hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(41, 34, 62, .28); }
:root[data-ui="motion"] .deal.dragging, :root[data-ui="motion"] .deal:active { transform: none; }

/* ——— Окна и выпадающие меню раскрываются ——— */
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes mo-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
:root[data-ui="motion"] .modal-back { animation: mo-fade .22s ease-out; }
:root[data-ui="motion"] .modal { animation: mo-pop .42s var(--mo-ease); }
:root[data-ui="motion"] :is(.create-menu, .proj-menu, .launcher, .ts-drop, .dropdown, .ctx-menu, .msg-menu, .emoji-pop):not([hidden]) { animation: mo-drop .24s var(--mo-ease); transform-origin: top right; }
:root[data-ui="motion"] .toast { animation: mo-pop .36s var(--mo-ease); }

/* ——— Смена темы: новый вид раскрывается кругом от кнопки (motion.js) ——— */
:root[data-ui="motion"]::view-transition-old(root), :root[data-ui="motion"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ——— Меню аватарки — как всплывающее меню шаблона (motion.js дорисовывает подпись, значки, разделители) ——— */
:root[data-ui="motion"] .user-pop { width: 300px; gap: 0; padding: 6px; border: 0; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--mo-line-2); transform-origin: calc(100% - 22px) 0; }
:root[data-ui="motion"] .mo-menu-label { padding: 8px 10px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="motion"] .mo-menu-sep { flex: none; height: 1px; margin: 6px 4px; background: var(--line); }
:root[data-ui="motion"] .user-pop-quick { display: contents; }
:root[data-ui="motion"] .user-pop > a, :root[data-ui="motion"] .user-pop > button, :root[data-ui="motion"] .user-pop .user-pop-quick button {
  flex-direction: row; justify-content: flex-start; width: 100%; height: 38px; min-height: 38px; padding: 0 10px; gap: 10px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap; transition: background .15s; }
:root[data-ui="motion"] .user-pop > a:hover, :root[data-ui="motion"] .user-pop > button:hover, :root[data-ui="motion"] .user-pop .user-pop-quick button:hover { background: var(--mo-card-2); color: var(--ink); }
:root[data-ui="motion"] .user-pop :is(a, button) .ic { flex: none; width: 18px; height: 18px; color: var(--muted); }
:root[data-ui="motion"] .user-pop .user-pop-quick button.is-off, :root[data-ui="motion"] .user-pop .user-pop-quick button.is-off .ic { color: var(--warn); }
:root[data-ui="motion"] .user-pop > a.user-pop-trial { height: auto; min-height: 38px; padding: 8px 10px; white-space: normal; font-size: 13px; background: var(--brand-50); color: var(--brand-600); }
:root[data-ui="motion"] .user-pop > a.user-pop-trial.trial-warn { background: var(--warn-50); color: var(--warn); }
:root[data-ui="motion"] .user-pop > a.user-pop-trial.trial-hot { background: var(--hot-50); color: var(--hot); }
:root[data-ui="motion"] .user-pop > a.user-pop-trial .ic { color: inherit; }
:root[data-ui="motion"] .user-pop .mo-danger, :root[data-ui="motion"] .user-pop .mo-danger .ic { color: var(--hot); }
@media (max-width: 768px) { :root[data-ui="motion"] .user-pop { width: auto; } }

/* ——— Окно «Оформление»: классика, бета 1, бета 2 (во всех оформлениях) ——— */
.ui-pick { display: flex; flex-direction: column; gap: 8px; min-width: min(420px, 80vw); }
.ui-pick-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .18s; }
.ui-pick-item:hover { border-color: var(--brand-100); background: var(--brand-50); }
.ui-pick-item:active { transform: scale(.98); }
.ui-pick-item.on { border-color: var(--brand); cursor: default; }
.ui-pick-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ui-pick-item b { font-size: 14.5px; font-weight: 700; }
.ui-pick-item small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.ui-pick-item i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--brand-600); }
.ui-pick-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); }
.ui-pick-ic .ic { width: 20px; height: 20px; }
:root[data-ui="glass"] .ui-pick-item { background: var(--g-tile); border-color: var(--g-line); color: var(--g-text); }
:root[data-ui="glass"] .ui-pick-item:hover { background: var(--g-well); }
:root[data-ui="glass"] .ui-pick-item.on { border-color: var(--g-accent); }
:root[data-ui="glass"] .ui-pick-item small { color: var(--g-muted); }
:root[data-ui="glass"] .ui-pick-ic { background: var(--g-well); color: var(--g-text); }
:root[data-ui="glass"] .ui-pick-item i { color: var(--g-text); }

@media (prefers-reduced-motion: reduce) {
  .mo-pill { transition: none; }
  :root[data-ui="motion"] :is(.modal-back, .modal, .toast, .create-menu, .proj-menu, .launcher, .ts-drop, .user-pop, .dropdown, .ctx-menu, .msg-menu, .emoji-pop) { animation: none; }
  :root[data-ui="motion"] :is(.deal, .ct-tile, .kpi):hover { transform: none; }
}