/* Dashboard surfaces shared by monitoring and SMM. Loaded after the Portal components. */
#mon-metrics.pt-hub-kpis,
#smm-kpi.pt-hub-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

#mon-metrics .pt-hub-kpi,
#smm-kpi .pt-hub-kpi {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 14px 12px;
  border: 1px solid var(--pt-glass-line, #ecebe4);
  border-radius: 20px;
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--pt-shadow, 0 1px 2px rgba(41,42,46,.06));
}

#mon-metrics .kv,
#smm-kpi .smm-kpi-val {
  order: 1;
  min-width: 0;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#mon-metrics .kl,
#smm-kpi .smm-kpi-label { order: 0; margin: 0; font-size: 12px; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--pt-ink-2, #6f6f73); }
#mon-metrics .mon-hint,
#smm-kpi .smm-kpi-sub { order: 2; margin: 0; font-size: 11px; color: var(--pt-ink-2, #6f6f73); }
#mon-metrics .pt-hub-spark,
#smm-kpi .pt-hub-spark { order: 3; width: 100%; height: 30px; margin-top: 2px; }
#mon-metrics .pt-hub-spark path,
#smm-kpi .pt-hub-spark path { fill: none; stroke: var(--pt-k-menu-acc, #c17b4c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: pr-hub-draw 1.2s var(--pt-out, ease-out) forwards; }
#smm-kpi .pt-hub-spark path { stroke: var(--pt-k-smm-acc, #efb937); }

.mon-charts-card.pt-hub-panel,
.mon-bd-card.pt-hub-panel,
.mon-layout .smm-chart-card,
.mon-layout .smm-demo-card { border-radius: 20px; padding: 14px; }
.mon-charts,
.smm-charts { gap: 12px; }
.mon-charts > *,
.smm-charts > *,
.mon-breakdown > * { min-width: 0; }
.mon-chart.pt-hub-chart,
.smm-chart-card.pt-hub-chart { position: relative; }
.pt-hub-chart-tip { position: absolute; z-index: 5; top: 0; left: 0; width: max-content; max-width: min(280px, calc(100% - 24px)); padding: 6px 9px; border-radius: 10px; background: hsl(var(--dark)); color: hsl(var(--light)); font: 12px/1.4 "Object Sans", sans-serif; white-space: normal; overflow-wrap: anywhere; pointer-events: none; opacity: 0; box-shadow: var(--pt-shadow); }
.pt-hub-chart-tip strong { display: block; margin-bottom: 3px; }
.pt-hub-chart:hover .pt-hub-chart-tip:not(.visible),
.pt-hub-chart:focus-within .pt-hub-chart-tip:not(.visible) { opacity: 0; }
.pt-hub-chart-tip.visible { opacity: 1; }

.mon-breakdown.pt-hub-dashboard-bottom { gap: 12px; margin: 12px 0 4px; }
.mon-bd-card .pt-hub-bars { display: grid; gap: 10px; }
.mon-bd-card .pt-hub-bar { display: grid; grid-template-columns: minmax(80px, 110px) minmax(0, 1fr); gap: 4px 10px; align-items: center; border: 0; padding: 0; }
.mon-bd-card .pt-hub-bar .bd-name { font-size: 12px; overflow-wrap: anywhere; }
.mon-bd-card .pt-hub-bar .bd-nums { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
.mon-bd-card .pt-hub-bar-track { height: 10px; border-radius: 999px; background: #efeee7; overflow: hidden; }
.mon-bd-card .pt-hub-bar-track i { display: block; height: 10px; border-radius: inherit; background: linear-gradient(90deg, #f7d16a, #e9a92a); transform-origin: left; animation: pr-hub-grow 1.2s var(--pt-out, ease-out) both; }
.mon-bd-card .pt-hub-source-content { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.mon-bd-card .pt-hub-donut { flex: 0 0 120px; width: 120px; height: 120px; background: conic-gradient(var(--segments)); transform: rotate(-90deg); animation: pr-hub-ring 1.2s var(--pt-out, ease-out) both; }
.mon-bd-card .pt-hub-donut::before { width: 92px; height: 92px; }
.mon-bd-card .pt-hub-donut b { transform: rotate(90deg); display: grid; justify-items: center; font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mon-bd-card .pt-hub-donut b small { font-size: 11px; font-weight: 400; color: var(--pt-ink-3); }
/* Легенда: метка цвета · название · значение справа; ниже серым — число публикаций. */
.mon-bd-card .pt-hub-legend { flex: 1; min-width: 0; display: grid; gap: 0; }
.mon-bd-card .pt-hub-legend .bd-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 7px 0; border: 0; border-bottom: 1px solid var(--pt-line); }
.mon-bd-card .pt-hub-legend .bd-row:last-child { border-bottom: 0; }
.mon-bd-card .pt-hub-legend .bd-dot { width: 10px; height: 10px; border-radius: 3px; }
.mon-bd-card .pt-hub-legend .bd-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-bd-card .pt-hub-legend .bd-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mon-bd-card .pt-hub-legend .bd-nums { grid-column: 2 / -1; font-size: 12px; color: var(--pt-ink-3); }
.mon-layout .smm-charts { gap: 12px; }
.mon-layout .smm-chart-card { background: rgba(255,255,255,.8); border: 1px solid var(--pt-glass-line, #ecebe4); box-shadow: var(--pt-shadow, 0 1px 2px rgba(41,42,46,.06)); }
.mon-layout .smm-chart-title { font-size: 15px; font-weight: 800; }
.mon-layout .smm-demo-card { background: rgba(255,255,255,.8); border: 1px solid var(--pt-glass-line, #ecebe4); }

@keyframes pr-hub-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-hub-grow { from { transform: scaleX(0); } }
@keyframes pr-hub-ring { from { opacity: .2; transform: rotate(-90deg) scale(.85); } }

@media (max-width: 760px) {
  .mon-charts,
  .mon-breakdown,
  .smm-charts { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  #mon-metrics.pt-hub-kpis,
  #smm-kpi.pt-hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-bd-card .pt-hub-source-content { flex-direction: column; align-items: center; }
  .mon-bd-card .pt-hub-legend { width: 100%; }
  .smm-demo-grid,
  .smm-acc-grid,
  .smm-post-grid { grid-template-columns: minmax(0, 1fr); }
  .mon-chart,
  .smm-chart-canvas,
  .smm-demo-canvas { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #mon-metrics .pt-hub-spark path,
  #smm-kpi .pt-hub-spark path { animation: none; stroke-dashoffset: 0; }
  .mon-bd-card .pt-hub-bar-track i,
  .mon-bd-card .pt-hub-donut { animation: none; }
}