/* DASL · слой формы и движения: крупные скругления, мягкие тени, плавные переходы,
   пилюли и переключатели-капсулы. Цвета не трогает — они из allosta.css. Подключается последней на всех
   страницах и переопределяет переменные --tm-* — логика страниц не меняется.
   Откат — убрать <link href="css/theme.css"> и <script src="js/motion.js">. */

/* Цвета — родные DASL (allosta.css: красный акцент, Inter, светлая/тёмная тема).
   Здесь только форма: скругления, тени, кривые анимаций. */
:root {
  --tm-radius: 14px;
  --tm-radius-lg: 20px;
  --tm-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --tm-shadow-lg: 0 24px 60px rgba(0, 0, 0, .14);
  --tm-shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 14px 34px rgba(0, 0, 0, .1);
  --tm-ease: cubic-bezier(.2, .8, .2, 1);
  --tm-ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  /* «горячее» и мягкий акцент — из родного красного DASL */
  --tm-hot: var(--tm-accent);
  --tm-hot-bg: var(--tm-accent-bg);
  --tm-accent-soft: var(--tm-accent-bg);
}
:root[data-theme=dark] {
  --tm-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --tm-shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
  --tm-shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .35);
}

/* ── фон и типографика ─────────────────────────────────────────────────── */
.tm-header h1, h1 { letter-spacing: -.03em; }
::selection { background: var(--tm-accent-soft); }

/* ── карточки и панели ─────────────────────────────────────────────────── */
.tm-panel, .kpi-cell, .home-cell, .em-brand, .sc-issue, .tm-insight, .insight-card, .chart-panel {
  transition: box-shadow .25s var(--tm-ease), transform .25s var(--tm-ease), background-color .2s, border-color .2s;
}
.tm-panel { border-radius: var(--tm-radius-lg); border-color: var(--tm-border-soft); }

.kpi-strip, .home-grid, .px-summary, .kpi-grid, .kpi-compare-grid, .cards {
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.kpi-cell, .home-cell, .px-summary > *, .kpi-grid > *, .kpi-compare-grid > *, .cards > * {
  background: var(--tm-panel) !important;
  border: 1px solid var(--tm-border-soft);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow);
}
.kpi-cell:hover, .home-cell:hover, .em-brand:hover, .kpi-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--tm-shadow-hover);
}
.kpi-val { font-variant-numeric: tabular-nums; }

/* ── кнопки, фильтры, поля ─────────────────────────────────────────────── */
.tm-btn, .tm-btn-outline, .ph-chip, .tm-tag, .home-pill, .em-tag {
  border-radius: 999px !important;
}
.tm-btn {
  background: var(--tm-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--tm-accent) 22%, transparent);
  transition: background .2s, transform .15s var(--tm-ease), box-shadow .2s;
}
.tm-btn:hover { background: var(--tm-accent-dark); box-shadow: 0 10px 26px color-mix(in srgb, var(--tm-accent) 30%, transparent); }
:root[data-theme=dark] .tm-btn { color: #fff; box-shadow: none; }
.tm-btn-outline { transition: border-color .2s, color .2s, background .2s, transform .15s var(--tm-ease); }
.tm-btn-outline:hover { border-color: var(--tm-accent); color: var(--tm-accent); background: var(--tm-accent-bg); }
.tm-btn:active, .tm-btn-outline:active, .ph-chip:active, .nav-item:active, .kpi-cell:active { transform: scale(.97); }

.ph-chip { transition: background .2s, color .2s, border-color .2s, transform .15s var(--tm-ease); }
.ph-chip.active {
  background: var(--tm-navy) !important;
  color: var(--tm-panel) !important;
  border-color: var(--tm-navy) !important;
}

input[type=text], input[type=date], input[type=number], input[type=email], input[type=url], select, textarea {
  border-radius: 12px !important;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--tm-accent) !important; box-shadow: 0 0 0 4px var(--tm-accent-bg) !important; outline: none; }

/* ── меню ─────────────────────────────────────────────────────────────── */
.sidebar { background: color-mix(in srgb, var(--tm-panel) 88%, transparent); border-right-color: var(--tm-border-soft); }
.nav-item {
  margin: 1px 10px;
  border-radius: 12px;
  border-left: 0 !important;
  transition: background .2s, color .2s, transform .15s var(--tm-ease);
}
.nav-item:hover { background: var(--tm-panel-2); }
.nav-item.active {
  background: var(--tm-navy) !important;
  color: var(--tm-panel) !important;
}
.nav-item.active .nav-icon { color: var(--tm-panel) !important; opacity: 1; }
:root[data-theme=dark] .nav-item.active { background: var(--tm-accent) !important; color: #fff !important; }
:root[data-theme=dark] .nav-item.active .nav-icon { color: #fff !important; }

/* ── таблицы ──────────────────────────────────────────────────────────── */
.tm-table tbody tr { transition: background-color .15s; }
.tm-table thead th { border-bottom-color: var(--tm-border-soft); }

/* ── «горячее» — терракота ────────────────────────────────────────────── */
.home-pill.warn { background: var(--tm-hot-bg); color: var(--tm-hot); }

/* ── анимации появления ───────────────────────────────────────────────── */
@keyframes dasl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dasl-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dasl-fade { from { opacity: 0; } to { opacity: 1; } }

.screen.active { animation: dasl-in .38s var(--tm-ease) both; }
.screen.active > .tm-panel, .screen.active > .kpi-strip, .screen.active > div > .tm-panel,
.main > .tm-panel, .main > .kpi-strip, .main > .em-brands {
  animation: dasl-in .45s var(--tm-ease) both;
}
.screen.active > :nth-child(2), .main > :nth-child(2) { animation-delay: .03s; }
.screen.active > :nth-child(3), .main > :nth-child(3) { animation-delay: .06s; }
.screen.active > :nth-child(4), .main > :nth-child(4) { animation-delay: .09s; }
.screen.active > :nth-child(5), .main > :nth-child(5) { animation-delay: .12s; }
.screen.active > :nth-child(n+6), .main > :nth-child(n+6) { animation-delay: .15s; }
.kpi-strip > *, .home-grid > * { animation: dasl-pop .45s var(--tm-ease) both; }
.kpi-strip > :nth-child(2), .home-grid > :nth-child(2) { animation-delay: .04s; }
.kpi-strip > :nth-child(3), .home-grid > :nth-child(3) { animation-delay: .08s; }
.kpi-strip > :nth-child(4), .home-grid > :nth-child(4) { animation-delay: .12s; }
.kpi-strip > :nth-child(n+5), .home-grid > :nth-child(n+5) { animation-delay: .16s; }

/* окна и шторки */
.em-modal-box, #settings-panel, #sales-modal, .modal, [role=dialog] {
  animation: dasl-pop .32s var(--tm-ease-spring) both;
}
#pf-overlay, .em-modal, #settings-overlay, .m-sidebar-backdrop.m-open { animation: dasl-fade .25s ease both; }
.sidebar { transition: transform .32s var(--tm-ease) !important; }

/* раскрывающиеся блоки */
#pf-amo-note-box, [id^=pc-note-], #em-drill-panel, #pf-impact-drill, .em-sub td, .sc-section {
  animation: dasl-in .3s var(--tm-ease) both;
}

/* аккуратный скроллбар */
::-webkit-scrollbar-thumb { background: var(--tm-border); }
:root[data-theme=dark] ::-webkit-scrollbar-thumb { background: var(--tm-border); }

/* ── переходы: окна, вкладки, страницы, тема ──────────────────────────────
   Открытие — «всплытие», закрытие — обратное (класс .dasl-closing ставит motion.js
   на ~200 мс после снятия .open, чтобы окно успело уйти, а не исчезнуть). */
@keyframes dasl-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes dasl-fade-out { to { opacity: 0; } }
@keyframes dasl-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dasl-slide-out { to { transform: translateX(40px); opacity: 0; } }
#sales-overlay.open, #drill-overlay.open, #creo-overlay.open, #lead-drawer-overlay.open, #creo-preview-overlay.open { animation: dasl-fade .22s ease both; }
#sales-modal.open .sales-box, #drill-modal.open .sales-box, #creo-modal.open .sales-box, #creo-preview-modal.open .creo-preview-box { animation: dasl-pop .32s var(--tm-ease-spring) both; }
#sales-modal, #drill-modal, #creo-modal, #creo-preview-modal { animation: none; }
#lead-drawer.open .lead-drawer-box { animation: dasl-slide-in .32s var(--tm-ease) both; }
#sales-overlay.dasl-closing, #drill-overlay.dasl-closing, #creo-overlay.dasl-closing, #lead-drawer-overlay.dasl-closing, #creo-preview-overlay.dasl-closing,
#pf-overlay.dasl-closing { display: block; animation: dasl-fade-out .2s ease both; pointer-events: none; }
#sales-modal.dasl-closing, #drill-modal.dasl-closing, #creo-modal.dasl-closing, #creo-preview-modal.dasl-closing, #so-modal.dasl-closing { display: flex; pointer-events: none; }
#sales-modal.dasl-closing .sales-box, #drill-modal.dasl-closing .sales-box, #creo-modal.dasl-closing .sales-box,
#creo-preview-modal.dasl-closing .creo-preview-box, #so-modal.dasl-closing .so-panel { animation: dasl-out .2s ease both; }
/* #pf-modal центрируется через transform — у него свои ключевые кадры, иначе съезжает */
@keyframes dasl-pf-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes dasl-pf-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
#pf-modal.open { animation: dasl-pf-in .3s var(--tm-ease) both; }
#pf-modal.dasl-closing { animation: dasl-pf-out .2s ease both; }
#so-modal.dasl-closing { animation: dasl-fade-out .2s ease both; }
#pf-modal.dasl-closing { display: flex; pointer-events: none; }
#lead-drawer.dasl-closing { display: flex; pointer-events: none; }
#lead-drawer.dasl-closing .lead-drawer-box { animation: dasl-slide-out .22s ease both; }

/* вкладки внутри разделов: содержимое плавно появляется при каждом переключении */
#funnel-tab-funnel, #funnel-tab-economics, #funnel-tab-health, #losses-tab-reasons, #losses-tab-phones,
.page-title, .page-sub { animation: dasl-in .3s var(--tm-ease) both; }

/* переходы между страницами (Chrome/Edge/Safari 18+): мягкая смена, меню стоит на месте */
@view-transition { navigation: auto; }
.dasl-top { view-transition-name: dasl-top; }
.dasl-rail { view-transition-name: dasl-rail; }
::view-transition-old(root) { animation: dasl-fade-out .18s ease both; }
::view-transition-new(root) { animation: dasl-fade .26s ease both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Структура как в «rapport»: верхняя панель с разделами-пилюлями + панель быстрых действий ── */
.dasl-top, .dasl-rail { display: none; }
@media (min-width: 861px) {
  .sidebar { display: none !important; }
  .layout { display: block !important; }
  .main { margin: 0 auto !important; max-width: 1280px; padding: 26px 40px 90px 40px !important; }
  .main .theme-toggle { display: none; }

  .dasl-top {
    display: flex; align-items: center; gap: 18px;
    position: sticky; top: 0; z-index: 150;
    padding: 12px 40px;
    background: color-mix(in srgb, var(--tm-black) 80%, transparent);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--tm-border-soft);
    animation: dasl-fade .35s ease both;
  }
  .dasl-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--tm-navy); text-decoration: none; flex-shrink: 0; }
  .dasl-pills {
    position: relative; display: flex; align-items: center; gap: 2px; padding: 4px;
    background: var(--tm-panel); border: 1px solid var(--tm-border-soft); border-radius: 999px;
    box-shadow: var(--tm-shadow); margin: 0 auto;
  }
  .dasl-pill-ind {
    position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); border-radius: 999px;
    background: var(--tm-navy); box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    transition: transform .42s var(--tm-ease-spring), width .42s var(--tm-ease), opacity .2s;
    z-index: 0; opacity: 0;
  }
  .dasl-pill {
    position: relative; z-index: 1; padding: 8px 16px; border-radius: 999px; border: 0; background: none;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--tm-text-dim); text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: color .25s, background .2s, transform .15s var(--tm-ease);
  }
  .dasl-pill:hover { color: var(--tm-navy); }
  .dasl-pill.active { color: var(--tm-panel); }
  .dasl-pill:active { transform: scale(.96); }
  :root[data-theme=dark] .dasl-pill-ind { background: var(--tm-accent); }
  :root[data-theme=dark] .dasl-pill.active { color: #fff; }

  .dasl-more { position: relative; }
  .dasl-more-menu {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; padding: 6px;
    background: var(--tm-panel); border: 1px solid var(--tm-border-soft); border-radius: 18px;
    box-shadow: var(--tm-shadow-lg); display: none; z-index: 200;
  }
  .dasl-more.open .dasl-more-menu { display: block; animation: dasl-pop .26s var(--tm-ease-spring) both; transform-origin: top right; }
  .dasl-more-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
    color: var(--tm-text); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .15s;
  }
  .dasl-more-item:hover { background: var(--tm-panel-2); }
  .dasl-more-item.active { background: var(--tm-accent-bg); color: var(--tm-accent); font-weight: 700; }

  .dasl-top-right { display: flex; gap: 8px; flex-shrink: 0; }
  .dasl-icon-btn {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--tm-panel); border: 1px solid var(--tm-border-soft); color: var(--tm-navy);
    box-shadow: var(--tm-shadow); text-decoration: none; font-size: 15px; cursor: pointer;
    transition: transform .2s var(--tm-ease), box-shadow .2s;
  }
  .dasl-icon-btn:hover { transform: translateY(-1px); box-shadow: var(--tm-shadow-hover); }
  .dasl-icon-btn:active { transform: scale(.94); }

  .dasl-rail {
    display: flex; flex-direction: column; gap: 4px; padding: 7px;
    position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 140;
    background: var(--tm-navy); border-radius: 999px; box-shadow: var(--tm-shadow-lg);
    animation: dasl-pop .5s var(--tm-ease-spring) .15s both;
  }
  .dasl-rail-btn {
    position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: transparent; color: var(--tm-panel); font-size: 16px; cursor: pointer;
    display: grid; place-items: center; transition: background .2s, transform .15s var(--tm-ease);
  }
  .dasl-rail-btn:hover { background: rgba(255, 255, 255, .12); }
  .dasl-rail-btn:active { transform: scale(.9); }
  .dasl-rail-btn.spin { animation: dasl-spin .9s var(--tm-ease); }
  .dasl-rail-btn::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
    transform: translate(-4px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
    background: var(--tm-navy); color: var(--tm-panel); font-size: 12px; font-weight: 600;
    padding: 6px 10px; border-radius: 10px; box-shadow: var(--tm-shadow);
    transition: opacity .18s, transform .18s var(--tm-ease);
  }
  .dasl-rail-btn:hover::after { opacity: 1; transform: translate(0, -50%); }
  :root[data-theme=dark] .dasl-rail { background: var(--tm-panel-2); border: 1px solid var(--tm-border); }
  :root[data-theme=dark] .dasl-rail-btn { color: var(--tm-text); }
}
/* на ноутбуках поуже — отодвигаем контент от панели быстрых действий */
@media (min-width: 861px) and (max-width: 1440px) { .main { padding-left: 92px !important; } }
@keyframes dasl-spin { to { transform: rotate(360deg); } }

/* ── структура экранов «как в обзоре продаж» (шаг 3) ──────────────────────
   Крупный заголовок без «моно», подписи секций обычным текстом, крупные цифры,
   фильтры — сегментами, таблицы — с подсветкой строк. Только визуальный слой. */
.page-title, .tm-header h1 { font-family: inherit !important; font-size: 30px !important; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.page-sub, .tm-header .tm-sub { font-family: inherit !important; font-size: 13px !important; color: var(--tm-text-dim) !important; margin-top: 6px; }
.tm-header .tm-eyebrow { display: none; }
.page-header, .tm-header { margin-bottom: 20px !important; }

.kpi-label, .home-cell .kpi-label { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; color: var(--tm-text-dim) !important; margin-bottom: 8px; }
.kpi-strip .kpi-val, .home-grid:not(.home-grid-sm) .kpi-val { font-family: inherit !important; font-size: 30px !important; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.kpi-delta, .kpi-sub { font-family: inherit !important; font-size: 12.5px !important; }
.kpi-cell, .home-cell { padding: 18px 20px !important; }

.tm-panel-title, .home-section-lbl, .px-section-title, .sort-bar-label,
.screen .funnel-title { font-family: inherit !important; text-transform: none !important; letter-spacing: -.01em !important; font-size: 15px !important; font-weight: 650; color: var(--tm-text) !important; }
.tm-panel-title .line, .screen .funnel-title > div { display: none !important; }
.home-section-lbl, .screen .funnel-title { margin: 26px 0 12px !important; }
.tm-panel { padding: 20px 22px; box-shadow: var(--tm-shadow); }

.ph-filters, .sort-bar { display: inline-flex !important; gap: 2px !important; padding: 3px; background: var(--tm-border-soft); border-radius: 999px; flex-wrap: wrap; }
.ph-filters .ph-chip, .sort-bar .sort-btn { border: 0 !important; background: transparent !important; color: var(--tm-text-dim) !important; padding: 6px 14px !important; border-radius: 999px !important; font-family: inherit !important; font-size: 13px !important; }
.ph-filters .ph-chip.active, .sort-bar .sort-btn.active { background: var(--tm-panel) !important; color: var(--tm-text) !important; box-shadow: var(--tm-shadow); }
.sort-bar-label { font-size: 13px !important; font-weight: 500; padding: 0 6px 0 10px; color: var(--tm-text-dim) !important; }

.tm-table thead th { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600; }
.tm-table tbody tr { transition: background-color .15s; }
.tm-table tbody tr:hover { background: color-mix(in srgb, var(--tm-accent) 6%, transparent); }

.creo-card, .pipeline-card, .manager-card, .px-card, .sc-page { transition: transform .2s var(--tm-ease-spring), box-shadow .2s; }
.creo-card:hover, .pipeline-card:hover, .manager-card:hover, .px-card:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow-hover); }

@media (max-width: 860px) {
  .page-title, .tm-header h1 { font-size: 24px !important; }
  .kpi-strip .kpi-val, .home-grid:not(.home-grid-sm) .kpi-val { font-size: 22px !important; }
  .ph-filters, .sort-bar { display: flex !important; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .ph-filters .ph-chip, .sort-bar .sort-btn { white-space: nowrap; flex: none; }
}
@media (max-width: 860px) {
  /* на телефоне #pf-modal — шторка снизу без transform-центрирования */
  @keyframes dasl-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes dasl-sheet-out { to { transform: translateY(40px); opacity: 0; } }
  #pf-modal.open { animation: dasl-sheet-in .3s var(--tm-ease) both; }
  #pf-modal.dasl-closing { animation: dasl-sheet-out .2s ease both; }
}
@media (max-width: 860px) {
  /* нечётная последняя карточка цифр — на всю ширину, а не «висит» одна */
  .kpi-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}