/* Клиентская инфографика: dashboard из референса 02.08.2026, только /client-table.html. */
.table-analytics {
  --ta-page:#08121b;
  --ta-card:#0d1822;
  --ta-card-deep:#0a141d;
  --ta-line:#283744;
  --ta-text:#edf3f7;
  --ta-muted:#9aabba;
  --ta-faint:#65798a;
  --ta-green:#8bdca5;
  --ta-cyan:#69ccd2;
  --ta-gold:#f0b75d;
  position:relative;
  width:100%;
  height:clamp(700px,calc(100vh - 142px),780px);
  min-height:700px;
  margin:0 0 18px;
  overflow-x:auto;
  overflow-y:hidden;
  color:var(--ta-text);
  scrollbar-color:rgba(105,204,210,.35) transparent;
  scrollbar-width:thin;
  animation:ta-dashboard-in .55s cubic-bezier(.2,.75,.25,1) both;
}
.table-analytics::-webkit-scrollbar { height:7px; }
.table-analytics::-webkit-scrollbar-thumb { border-radius:9px; background:rgba(105,204,210,.28); }
.table-analytics-canvas {
  min-width:1280px;
  height:100%;
  display:grid;
  grid-template-rows:minmax(320px,1.32fr) minmax(245px,.98fr) minmax(96px,.38fr);
  gap:14px;
}
.table-analytics-top {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(570px,2.12fr) minmax(310px,1.05fr) minmax(310px,1.03fr);
  gap:14px;
}
.table-analytics-matrices {
  min-height:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(288px,1fr));
  gap:12px;
}
.ta-card,.ta-summary-card {
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(135,157,174,.24);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 0%,rgba(105,204,210,.035),transparent 34%),
    linear-gradient(145deg,rgba(14,26,36,.985),rgba(9,19,28,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.16);
  animation:ta-card-in .48s cubic-bezier(.2,.75,.25,1) both;
}
.table-analytics-top .ta-card:nth-child(2) { animation-delay:70ms; }
.table-analytics-top .ta-card:nth-child(3) { animation-delay:140ms; }
.table-analytics-matrices .ta-card:nth-child(1) { animation-delay:180ms; }
.table-analytics-matrices .ta-card:nth-child(2) { animation-delay:220ms; }
.table-analytics-matrices .ta-card:nth-child(3) { animation-delay:260ms; }
.table-analytics-matrices .ta-card:nth-child(4) { animation-delay:300ms; }
.ta-card h2,.ta-summary-card h2 { margin:0; color:var(--ta-text); font-size:16px; line-height:1.2; font-weight:750; letter-spacing:.005em; }
.ta-card header { position:relative; z-index:2; }
.ta-icon { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }

.ta-trend-card { padding:17px 20px 10px; display:flex; flex-direction:column; }
.ta-trend-card header { flex:0 0 auto; }
.ta-card-legend { display:flex; align-items:center; gap:30px; margin-top:14px; color:#c2ccd4; font-size:13px; white-space:nowrap; }
.ta-card-legend span { display:inline-flex; align-items:center; gap:9px; }
.ta-card-legend i { width:22px; height:2px; border-radius:2px; background:var(--ta-legend); box-shadow:0 0 8px color-mix(in srgb,var(--ta-legend) 20%,transparent); }
.ta-trend-chart { width:100%; min-height:0; flex:1 1 auto; overflow:visible; }
.ta-trend-chart text,.ta-radar-chart text { font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.ta-grid-line { stroke:rgba(148,170,187,.13); stroke-width:.62; stroke-dasharray:3 6; vector-effect:non-scaling-stroke; }
.ta-axis-line { stroke:rgba(148,170,187,.22); stroke-width:.75; vector-effect:non-scaling-stroke; }
.ta-axis-text { fill:var(--ta-muted); font-size:12px; }
.ta-axis-caption { font-size:12px; font-weight:650; }
.ta-axis-green { fill:var(--ta-green); }
.ta-axis-cyan { fill:var(--ta-cyan); }
.ta-axis-gold { fill:var(--ta-gold); }
.ta-period-pill { fill:#101c28; stroke:#2a3948; stroke-width:1; vector-effect:non-scaling-stroke; }
.ta-period-marker { stroke:#0d1822; stroke-width:1.5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px currentColor); }
.ta-period-label { fill:#d6e0e7; font-size:15px; font-weight:700; letter-spacing:.01em; }
.ta-trend-line { fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:1200; stroke-dashoffset:1200; animation:ta-line-draw .95s cubic-bezier(.2,.7,.25,1) forwards; animation-delay:var(--ta-delay,0ms); }
.ta-point { stroke:none; transform-box:fill-box; transform-origin:center; animation:ta-point-pop .38s cubic-bezier(.25,1.45,.45,1) both; animation-delay:var(--ta-delay,0ms); }
.ta-value-rule { stroke-width:1; opacity:.65; vector-effect:non-scaling-stroke; }
.ta-end-value { font-size:12px; font-weight:750; paint-order:stroke; stroke:#0d1822; stroke-width:3px; stroke-linejoin:round; }

.ta-radar-card { padding:17px 20px 10px; display:flex; flex-direction:column; }
.ta-radar-card header p { margin:6px 0 0; color:var(--ta-muted); font-size:13px; }
.ta-radar-legend { display:flex; gap:28px; margin-top:18px; color:#bdc7cf; font-size:13px; }
.ta-radar-legend span { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border:1px solid #2a3948; border-radius:999px; background:#101c28; }
.ta-radar-legend i { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--ta-period,var(--ta-green)); box-shadow:0 0 7px color-mix(in srgb,var(--ta-period,var(--ta-green)) 42%,transparent); }
.ta-radar-legend i.dashed { background:var(--ta-period,var(--ta-green)); }
.ta-radar-chart { width:100%; min-height:0; flex:1 1 auto; overflow:visible; }
.ta-radar-empty { min-height:0; flex:1 1 auto; display:grid; place-items:center; color:var(--ta-muted); font-size:12px; text-align:center; }
.ta-radar-grid { fill:none; stroke:rgba(159,178,191,.32); stroke-width:.75; vector-effect:non-scaling-stroke; }
.ta-radar-axis { stroke:rgba(159,178,191,.16); stroke-width:.65; vector-effect:non-scaling-stroke; }
.ta-radar-scale { fill:#8092a0; font-size:9px; }
.ta-radar-label { fill:#d5dce2; font-size:11px; }
.ta-radar-area { fill:currentColor; fill-opacity:.09; stroke:var(--ta-green); stroke-width:1.8; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:800; stroke-dashoffset:800; animation:ta-line-draw .85s ease forwards; }
.ta-radar-compare { fill:none; stroke:var(--ta-green); stroke-width:1.65; stroke-dasharray:5 5; stroke-linejoin:round; opacity:.9; vector-effect:non-scaling-stroke; animation:ta-radar-in .75s ease both; animation-delay:140ms; }
.ta-radar-chart .ta-point { fill:var(--ta-green); }

.ta-kpi-card { position:relative; padding:17px 18px 13px; display:flex; flex-direction:column; }
.ta-kpi-card header h2 span { color:var(--ta-muted); font-weight:500; }
.ta-kpi-grid { min-height:0; flex:1 1 auto; display:grid; grid-template-columns:repeat(2,minmax(126px,1fr)); grid-template-rows:repeat(2,minmax(126px,1fr)); place-items:center; gap:12px 16px; padding:13px 5px 0; }
.ta-kpi-ring { --ta-accent:var(--ta-green); width:min(100%,138px); aspect-ratio:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; border:2px solid color-mix(in srgb,var(--ta-accent) 84%,#405361); border-radius:50%; color:var(--ta-accent); background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--ta-accent) 5%,transparent),transparent 66%); box-shadow:inset 0 0 0 5px rgba(255,255,255,.012),0 0 18px color-mix(in srgb,var(--ta-accent) 6%,transparent); animation:ta-ring-in .7s cubic-bezier(.2,.8,.25,1) both; }
.ta-kpi-ring:nth-child(2) { animation-delay:80ms; }
.ta-kpi-ring:nth-child(3) { animation-delay:160ms; }
.ta-kpi-ring:nth-child(4) { animation-delay:240ms; }
.ta-kpi-ring .ta-icon { width:27px; height:27px; }
.ta-kpi-ring strong { max-width:90%; overflow:hidden; color:#eef3f7; font-size:22px; line-height:1; font-weight:760; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ta-kpi-ring strong.ta-kpi-value--spend { max-width:96%; font-size:clamp(13px,1.7vw,22px); letter-spacing:-.045em; }
.ta-kpi-ring span { max-width:86%; color:#d0d8de; font-size:12px; line-height:1.25; text-align:center; }
.ta-kpi-card time { position:absolute; right:12px; bottom:7px; color:transparent; font-size:1px; pointer-events:none; }

.ta-matrix-card { --ta-accent:var(--ta-green); display:flex; flex-direction:column; }
.ta-matrix-card > header { height:47px; flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:0 16px; border-bottom:1px solid rgba(137,158,174,.2); color:var(--ta-accent); }
.ta-matrix-card > header .ta-icon { width:23px; height:23px; }
.ta-matrix-card > header h2 { color:#aebdca; font-size:16px; }
.ta-matrix-scroll { min-height:0; flex:1 1 auto; overflow:hidden; }
.ta-matrix-card table { width:100%; height:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; }
.ta-matrix-card th,.ta-matrix-card td { height:27px; padding:4px 10px; border-bottom:1px solid rgba(142,161,176,.15); border-right:1px solid rgba(142,161,176,.12); text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ta-matrix-card th { position:static; top:auto; background:transparent; }
.ta-matrix-card td { background:transparent; }
.ta-matrix-card tr:hover td { background:rgba(255,255,255,.012); }
.ta-matrix-card th:last-child,.ta-matrix-card td:last-child { border-right:0; }
.ta-matrix-card thead th { color:#b7c3cc; font-size:11px; font-weight:500; border-top:1px solid rgba(142,161,176,.15); }
.ta-period-dot { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:var(--ta-period); box-shadow:0 0 6px color-mix(in srgb,var(--ta-period) 38%,transparent); vertical-align:0; }
.ta-period-chip { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border:1px solid #2a3948; border-radius:999px; background:#101c28; color:#aab9c6; }
.ta-matrix-card thead th:first-child { width:25%; }
.ta-matrix-card thead th.is-current { color:var(--ta-accent); }
.ta-matrix-card tbody th { color:#d6dde2; font-weight:500; }
.ta-matrix-card tbody td { position:relative; color:#dce3e8; }
.ta-type-dot { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:var(--ta-type); box-shadow:0 0 7px color-mix(in srgb,var(--ta-type) 24%,transparent); }
.ta-matrix-number { position:relative; z-index:1; }
.ta-cell-bar { position:absolute; left:10px; right:auto; bottom:3px; width:var(--ta-fill); max-width:calc(100% - 20px); height:1.5px; border-radius:2px; background:var(--ta-accent); box-shadow:0 0 5px color-mix(in srgb,var(--ta-accent) 28%,transparent); transform-origin:left; animation:ta-cell-grow .55s cubic-bezier(.2,.75,.25,1) both; }
.ta-matrix-card tfoot th,.ta-matrix-card tfoot td { border-top:1px solid rgba(178,194,206,.29); border-bottom:0; color:#f1f5f7; font-size:14px; font-weight:750; }
.ta-matrix-card tfoot td { color:var(--ta-accent); }

.ta-summary-card { display:grid; grid-template-columns:minmax(310px,1.18fr) minmax(450px,1.32fr) minmax(310px,1fr) minmax(145px,.45fr); align-items:stretch; padding:13px 16px; }
.ta-summary-card > div { min-width:0; padding:0 20px; border-right:1px solid rgba(145,164,178,.2); }
.ta-summary-card > div:first-child { padding-left:6px; }
.ta-summary-card > div:last-child { border-right:0; padding-right:2px; }
.ta-summary-card h2 { display:flex; align-items:center; gap:10px; font-size:14px; }
.ta-summary-card h2 .ta-icon { width:22px; height:22px; color:#b9c8d3; }
.ta-conclusion p { margin:12px 0 0; overflow:hidden; color:#879bab; font-size:11px; line-height:1.45; }
.ta-growth > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:12px; }
.ta-delta { display:flex; align-items:center; gap:10px; padding:0 16px; border-right:1px solid rgba(145,164,178,.2); color:var(--ta-delta); }
.ta-delta:first-child { padding-left:0; }
.ta-delta:last-child { border-right:0; padding-right:0; }
.ta-delta .ta-icon { flex:0 0 auto; width:26px; height:26px; }
.ta-delta strong { display:block; font-size:17px; line-height:1; font-weight:650; }
.ta-delta span { display:block; margin-top:5px; color:#8fa1b0; font-size:10px; line-height:1.15; }
.ta-types > div { display:flex; align-items:center; flex-wrap:wrap; gap:11px 20px; margin-top:15px; }
.ta-types span { display:inline-flex; align-items:center; gap:7px; color:#9dabb6; font-size:10px; }
.ta-types i { width:9px; height:9px; border-radius:50%; background:var(--ta-type); }
.ta-source { display:flex; justify-content:center; flex-direction:column; gap:7px; color:#728696; font-size:10px; }
.table-analytics-empty { height:100%; min-width:900px; display:grid; place-items:center; border:1px solid rgba(135,157,174,.24); border-radius:14px; background:var(--ta-card); color:var(--ta-muted); text-align:center; }

@keyframes ta-dashboard-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes ta-card-in { from { opacity:0; transform:translateY(8px) scale(.992); } to { opacity:1; transform:none; } }
@keyframes ta-line-draw { to { stroke-dashoffset:0; } }
@keyframes ta-point-pop { from { opacity:0; transform:scale(.15); } to { opacity:1; transform:scale(1); } }
@keyframes ta-radar-in { from { opacity:0; transform:scale(.72); transform-origin:center; } to { opacity:.9; transform:scale(1); } }
@keyframes ta-ring-in { from { opacity:0; transform:scale(.75) rotate(-8deg); } to { opacity:1; transform:none; } }
@keyframes ta-cell-grow { from { opacity:.1; transform:scaleX(.02); } to { opacity:1; transform:scaleX(1); } }

@media (max-width:1450px) {
  .table-analytics-canvas { min-width:1240px; }
  .table-analytics-top { grid-template-columns:minmax(535px,2fr) minmax(290px,1fr) minmax(300px,1fr); }
  .ta-card-legend { gap:18px; }
  .ta-summary-card { grid-template-columns:minmax(290px,1.1fr) minmax(420px,1.3fr) minmax(285px,.95fr) minmax(135px,.42fr); }
}
@media (max-width:900px) {
  .table-analytics { height:720px; min-height:720px; }
  .table-analytics-canvas { min-width:1210px; }
}
@media (prefers-reduced-motion:reduce) {
  .table-analytics,.ta-card,.ta-trend-line,.ta-point,.ta-radar-area,.ta-radar-compare,.ta-kpi-ring,.ta-cell-bar { animation:none !important; transition:none !important; }
  .ta-trend-line,.ta-radar-area { stroke-dashoffset:0; }
}

/* The small dashboard analytics block is also rendered on the main cabinet.
   Its first version had an independent dark palette, so make its surfaces
   follow the same persisted light theme as the rest of the cabinet. */
body.is-dashboard-light .table-analytics,
body.is-dashboard-light #placementStatsSection .home-analytics-top {
  --ta-page:#f5f6fa;
  --ta-card:#ffffff;
  --ta-card-deep:#f8f9fc;
  --ta-line:#dfe4eb;
  --ta-text:#30343b;
  --ta-muted:#778291;
  --ta-faint:#9aa4b1;
  --ta-green:#24a866;
  --ta-cyan:#2386a1;
  --ta-gold:#b67a22;
}
body.is-dashboard-light .ta-card,
body.is-dashboard-light .ta-summary-card {
  border-color:rgba(26,39,63,.12);
  background:#ffffff;
  box-shadow:0 10px 26px rgba(33,43,67,.06);
}
body.is-dashboard-light .ta-card-legend,
body.is-dashboard-light .ta-radar-legend,
body.is-dashboard-light .ta-kpi-ring span,
body.is-dashboard-light .ta-matrix-card thead th,
body.is-dashboard-light .ta-matrix-card tbody th,
body.is-dashboard-light .ta-matrix-card tbody td,
body.is-dashboard-light .ta-conclusion p,
body.is-dashboard-light .ta-delta span,
body.is-dashboard-light .ta-types span,
body.is-dashboard-light .ta-source {
  color:var(--ta-muted);
}
body.is-dashboard-light .ta-period-pill,
body.is-dashboard-light .ta-radar-legend span,
body.is-dashboard-light .ta-period-chip {
  fill:#f8f9fc;
  stroke:#dfe4eb;
  border-color:#dfe4eb;
  background:#f8f9fc;
  color:#657181;
}
body.is-dashboard-light .ta-period-marker,
body.is-dashboard-light .ta-end-value { stroke:#ffffff; }
body.is-dashboard-light .ta-period-label,
body.is-dashboard-light .ta-radar-label,
body.is-dashboard-light .ta-kpi-ring strong,
body.is-dashboard-light .ta-matrix-card tfoot th,
body.is-dashboard-light .ta-matrix-card tfoot td { fill:#30343b; color:#30343b; }
body.is-dashboard-light .ta-grid-line { stroke:rgba(26,39,63,.10); }
body.is-dashboard-light .ta-axis-line { stroke:rgba(26,39,63,.18); }
body.is-dashboard-light .ta-radar-grid { stroke:rgba(26,39,63,.20); }
body.is-dashboard-light .ta-radar-axis { stroke:rgba(26,39,63,.12); }
body.is-dashboard-light .ta-radar-scale { fill:#8a95a2; }
body.is-dashboard-light .ta-kpi-ring {
  border-color:color-mix(in srgb,var(--ta-accent) 68%,#c5ccd7);
  box-shadow:inset 0 0 0 5px rgba(26,39,63,.025),0 0 18px color-mix(in srgb,var(--ta-accent) 7%,transparent);
}
body.is-dashboard-light .ta-matrix-card > header,
body.is-dashboard-light .ta-summary-card > div,
body.is-dashboard-light .ta-delta,
body.is-dashboard-light .ta-matrix-card th,
body.is-dashboard-light .ta-matrix-card td {
  border-color:rgba(26,39,63,.10);
}
body.is-dashboard-light .ta-matrix-card > header h2 { color:#5e6977; }
body.is-dashboard-light .ta-matrix-card tr:hover td { background:rgba(35,60,200,.035); }