/* ============================================================
   TurboText CRM — Дашборд v2 (редизайн главного экрана)
   Подключать ПОСЛЕ crm-theme.css и cosmic-dashboard.css.
   Все цвета — токены crm-theme.css. Всё скоупится на .dsh внутри #dashboard.
   ============================================================ */

#dashboard .dsh{display:flex;flex-direction:column;gap:16px;max-width:1560px}

/* ── Шапка ─────────────────────────────────────────────────── */
#dashboard .dsh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
#dashboard .dsh-title{margin:0;font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
#dashboard .dsh-sub{margin-top:5px;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
#dashboard .dsh-head-actions{display:flex;align-items:center;gap:8px}
#dashboard .dsh-select{height:36px;padding:0 12px;border-radius:10px;background:var(--bg-2);
  border:1px solid var(--border);color:var(--text);font:13px inherit;font-family:inherit;cursor:pointer}
#dashboard .dsh-select:hover{border-color:var(--border-2)}
#dashboard .dsh-icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:transparent;border:1px solid var(--border);color:var(--text-3);cursor:pointer;transition:color .15s,border-color .15s}
#dashboard .dsh-icon-btn:hover{color:var(--text);border-color:var(--border-2)}
#dashboard .dsh-icon-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ── KPI ───────────────────────────────────────────────────── */
#dashboard .dsh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
#dashboard .dsh-kpi{position:relative;overflow:hidden;padding:20px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border);transition:transform .25s}
#dashboard .dsh-kpi:hover{transform:translateY(-2px)}
#dashboard .dsh-kpi::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px 150px at 88% -14%,var(--glow),transparent 70%)}
#dashboard .dsh-kpi:hover::after{opacity:1}
#dashboard .dsh-kpi>*{position:relative;z-index:1}
#dashboard .dsh-kpi--income  {border-color:rgba(225,29,72,.30);--glow:rgba(225,29,72,.22)}
#dashboard .dsh-kpi--margin  {border-color:rgba(16,185,129,.30);--glow:rgba(16,185,129,.20)}
#dashboard .dsh-kpi--expenses{border-color:rgba(245,158,11,.28);--glow:rgba(245,158,11,.18)}
#dashboard .dsh-kpi--forecast{border-color:rgba(139,92,246,.30);--glow:rgba(139,92,246,.20)}

#dashboard .dsh-kpi-label{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);padding-right:70px}
#dashboard .dsh-kpi-value{margin-top:10px;font-size:30px;font-weight:700;letter-spacing:-.025em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
#dashboard .dsh-kpi-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
#dashboard .dsh-kpi-hint{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

#dashboard .dsh-delta{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:8px;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
#dashboard .dsh-delta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}
#dashboard .dsh-delta--up{color:var(--good);background:var(--good-soft);box-shadow:inset 0 0 0 1px rgba(16,185,129,.25)}
#dashboard .dsh-delta--down{color:var(--accent-2);background:rgba(244,63,94,.12);box-shadow:inset 0 0 0 1px rgba(244,63,94,.25)}
#dashboard .dsh-delta--neutral{color:#a78bfa;background:rgba(139,92,246,.14);box-shadow:inset 0 0 0 1px rgba(139,92,246,.28)}

/* орбитальное кольцо KPI (значение прогресса — inline --p) */
#dashboard .dsh-orbit{position:absolute;right:16px;top:16px;width:56px;height:56px;pointer-events:none;z-index:1}
#dashboard .dsh-orbit-ring,
#dashboard .dsh-orbit-progress{position:absolute;inset:0;border-radius:50%}
#dashboard .dsh-orbit-ring{border:1px dashed rgba(255,255,255,.08)}
#dashboard .dsh-orbit-progress{
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}
#dashboard .dsh-kpi--income   .dsh-orbit-progress{background:conic-gradient(var(--accent) calc(var(--p)*1%),transparent 0);filter:drop-shadow(0 0 8px rgba(225,29,72,.4))}
#dashboard .dsh-kpi--margin   .dsh-orbit-progress{background:conic-gradient(var(--good) calc(var(--p)*1%),transparent 0);filter:drop-shadow(0 0 8px rgba(16,185,129,.4))}
#dashboard .dsh-kpi--expenses .dsh-orbit-progress{background:conic-gradient(var(--warn) calc(var(--p)*1%),transparent 0);filter:drop-shadow(0 0 8px rgba(245,158,11,.4))}
#dashboard .dsh-kpi--forecast .dsh-orbit-progress{background:conic-gradient(var(--violet) calc(var(--p)*1%),transparent 0);filter:drop-shadow(0 0 8px rgba(139,92,246,.4))}
#dashboard .dsh-orbit-planet{position:absolute;inset:10px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 25%,#2b2b3a,#13131b 70%);color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--border)}
#dashboard .dsh-orbit-planet svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}

#dashboard .dsh-spark{display:block;width:100%;height:30px;margin-top:14px;overflow:visible}
#dashboard .dsh-spark polyline{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

/* полоса прогресса / доли */
#dashboard .dsh-bar{width:100%;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
#dashboard .dsh-kpi .dsh-bar{height:6px;margin-top:14px}
#dashboard .dsh-bar-fill{display:block;height:100%;border-radius:99px}
#dashboard .dsh-bar-fill--good{background:linear-gradient(90deg,rgba(16,185,129,.5),var(--good))}
#dashboard .dsh-bar-fill--warn{background:linear-gradient(90deg,rgba(245,158,11,.45),var(--warn))}
#dashboard .dsh-bar-fill--violet{background:linear-gradient(90deg,rgba(139,92,246,.45),var(--violet))}
#dashboard .dsh-bar-fill--accent{background:linear-gradient(90deg,rgba(244,63,94,.4),var(--accent-2))}
#dashboard .dsh-bar-fill--info{background:linear-gradient(90deg,rgba(59,130,246,.4),var(--info))}
#dashboard .dsh-bar-fill--cyan{background:linear-gradient(90deg,rgba(34,211,238,.4),var(--cyan))}
#dashboard .dsh-progress{margin-top:14px}
#dashboard .dsh-progress .dsh-bar{margin-top:5px}
#dashboard .dsh-progress-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}

/* ── Панели ────────────────────────────────────────────────── */
#dashboard .dsh-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
#dashboard .dsh-card{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px;
  padding:18px 20px;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));transition:border-color .2s}
#dashboard .dsh-card:hover{border-color:var(--border-2)}
#dashboard .dsh-card--wide{flex:1.55 1 440px}
#dashboard .dsh-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
#dashboard .dsh-card-title{margin:0;font-size:15px;font-weight:600;color:var(--text)}
#dashboard .dsh-card-sub{margin-top:3px;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
#dashboard .dsh-card-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#dashboard .dsh-link{font-size:12px;color:var(--accent-2);text-decoration:none;font-weight:600;cursor:pointer}
#dashboard .dsh-link:hover{color:#fb7185}

#dashboard .dsh-legend{display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--text-2)}
#dashboard .dsh-legend span{display:inline-flex;align-items:center;gap:6px}
#dashboard .dsh-dot{width:9px;height:9px;border-radius:50%;flex:none;display:block}
#dashboard .dsh-legend .dsh-dot{border-radius:3px}
#dashboard .dsh-dot--accent{background:var(--accent-2)}
#dashboard .dsh-dot--warn{background:var(--warn)}
#dashboard .dsh-dot--violet{background:var(--violet)}
#dashboard .dsh-dot--info{background:var(--info)}
#dashboard .dsh-dot--cyan{background:var(--cyan)}
#dashboard .dsh-dash{width:9px;height:2px;border-radius:2px;background:var(--good);display:block;flex:none}

/* сегмент-переключатель периода графика */
#dashboard .dsh-seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--bg-2);border:1px solid var(--border)}
#dashboard .dsh-seg button{padding:5px 11px;border:0;border-radius:7px;background:transparent;color:var(--text-3);
  font:500 11.5px inherit;font-family:inherit;cursor:pointer}
#dashboard .dsh-seg button:hover{color:var(--text)}
#dashboard .dsh-seg button.is-active{color:#fff;font-weight:600;background:var(--border)}

/* столбчатый график */
#dashboard .dsh-chart{position:relative;display:flex;align-items:flex-end;gap:6px;height:212px;padding-top:12px;
  border-bottom:1px solid #1e1e28}
/* .dsh-chart-line (линия маржинальности) стилизуется инлайном в dashboard-v2.js:
   скрипты всегда свежие (?v=Date.now()), а этот файл подключён статическим тегом и
   застревал в кэше — линия теряла position:absolute и уезжала на всю страницу */
#dashboard .dsh-chart-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:6px;border-radius:8px 8px 0 0}
#dashboard .dsh-chart-col:hover{background:rgba(255,255,255,.03)}
#dashboard .dsh-chart-margin{font-size:11px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
#dashboard .dsh-chart-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%}
#dashboard .dsh-chart-bars i{display:block;width:26%;max-width:22px;border-radius:5px 5px 0 0}
#dashboard .dsh-chart-bars .inc{background:linear-gradient(180deg,var(--info),rgba(59,130,246,.30))}
#dashboard .dsh-chart-bars .exp{background:linear-gradient(180deg,var(--accent-2),rgba(244,63,94,.30))}
#dashboard .dsh-chart-labels{display:flex;gap:6px;padding-top:8px}
#dashboard .dsh-chart-labels span{flex:1;min-width:0;text-align:center;font-size:11px;color:var(--text-3);
  white-space:nowrap;overflow:hidden}

/* пончик расходов */
#dashboard .dsh-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#dashboard .dsh-donut{position:relative;width:126px;height:126px;flex:none}
#dashboard .dsh-donut::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--slices));
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 58%);mask:radial-gradient(circle,transparent 56%,#000 58%)}
#dashboard .dsh-donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
#dashboard .dsh-donut-value{font-size:17px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
#dashboard .dsh-donut-cap{margin-top:2px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
#dashboard .dsh-legend-list{flex:1;min-width:150px;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
#dashboard .dsh-legend-list li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2)}
#dashboard .dsh-legend-list b{margin-left:auto;color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* доход по сервисам */
#dashboard .dsh-services{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
#dashboard .dsh-services li{display:flex;flex-direction:column;gap:7px}
#dashboard .dsh-service-row{display:flex;align-items:baseline;gap:10px;font-size:13px}
#dashboard .dsh-service-name{color:var(--text);font-weight:600;white-space:nowrap}
#dashboard .dsh-service-name--muted{color:var(--text-2)}
#dashboard .dsh-service-sum{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
#dashboard .dsh-service-share{width:52px;text-align:right;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
#dashboard .dsh-service-delta{width:62px;text-align:right;font-size:12px;font-weight:600;
  color:var(--text-3);font-variant-numeric:tabular-nums}
#dashboard .dsh-service-delta.dsh-up{color:var(--good)}
#dashboard .dsh-service-delta.dsh-down{color:var(--accent-2)}

/* юнит-экономика */
#dashboard .dsh-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#dashboard .dsh-tile{padding:13px 14px;border-radius:12px;background:var(--bg-2);
  border:1px solid var(--border);border-left:3px solid var(--t)}
#dashboard .dsh-tile-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
#dashboard .dsh-tile-value{margin-top:5px;font-size:20px;font-weight:700;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
#dashboard .dsh-tile-sub{margin-top:3px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

/* плитка-ссылка: повторные покупки → график по месяцам, блог → раздел аналитики */
#dashboard .dsh-tile--link{cursor:pointer;transition:border-color .2s,transform .2s}
#dashboard .dsh-tile--link:hover{border-color:var(--t);transform:translateY(-1px)}
#dashboard .dsh-tile--link::after{content:"→";position:absolute;right:12px;top:11px;
  font-size:12px;color:var(--t);opacity:.45;transition:opacity .2s,transform .2s}
#dashboard .dsh-tile--link:hover::after{opacity:1;transform:translateX(2px)}
#dashboard .dsh-tile{position:relative}
@media (prefers-reduced-motion:reduce){
  #dashboard .dsh-tile--link,#dashboard .dsh-tile--link::after{transition:none}
  #dashboard .dsh-tile--link:hover{transform:none}
}

#dashboard .dsh-note{display:flex;align-items:center;gap:9px;margin:auto 0 0;padding-top:12px;
  border-top:1px solid #1e1e28;font-size:11.5px;color:var(--muted);line-height:1.6;text-wrap:pretty}
#dashboard .dsh-note svg{width:14px;height:14px;flex:none;stroke:var(--text-3);fill:none;stroke-width:1.7}

/* ── Состояния: загрузка и «объяснённый ноль» ──────────────── */
#dashboard .dsh-skeleton{border-radius:8px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;animation:dsh-shimmer 1.4s linear infinite;color:transparent!important}
@keyframes dsh-shimmer{to{background-position:-200% 0}}
#dashboard .dsh-empty{padding:10px 12px;border-radius:10px;background:var(--surface-3);
  border:1px solid var(--border);font-size:11.5px;color:var(--text-3)}

/* ── Мобильный ─────────────────────────────────────────────── */
@media (max-width:900px){
  #dashboard .dsh-kpis{grid-template-columns:1fr}
  #dashboard .dsh-card,#dashboard .dsh-card--wide{flex:1 1 100%}
  #dashboard .dsh-title{font-size:22px}
  #dashboard .dsh-tiles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  #dashboard .dsh-kpi,#dashboard .dsh-card{transition:none}
  #dashboard .dsh-kpi:hover{transform:none}
  #dashboard .dsh-skeleton{animation:none}
}