/* W2 · Аналитика истории и canvas-графики. */

#screen-analytics,
#screen-analytics *,
:is(#screen-history, #sf-history-inline) .sh-an-section,
:is(#screen-history, #sf-history-inline) .sh-an-section *,
#screen-transform :is(.chart-wrap, #bia-chart-wrap),
#screen-transform :is(.chart-wrap, #bia-chart-wrap) * {
  font-variant-numeric: tabular-nums;
}

/* Самостоятельный экран графиков */
#screen-analytics {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: var(--w2-s6) var(--w2-s5) calc(var(--w2-s9) + var(--w2-s7));
  color: var(--w2-text);
}

#screen-analytics .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--w2-s2);
  margin-bottom: var(--w2-s5);
}

#screen-analytics .filter-select {
  min-width: 180px;
  min-height: var(--w2-s8);
  padding: 0 var(--w2-s3);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s1);
  outline: none;
  background: var(--w2-surface);
  color: var(--w2-text);
  font: 600 13px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  transition: border-color .16s, background-color .16s;
}

#screen-analytics .filter-select:hover,
#screen-analytics .filter-select:focus-visible {
  border-color: rgba(200, 241, 53, .42);
  background: var(--w2-surface-raised);
}

/* Карточки canvas-графиков */
.chart-wrap,
#bia-chart-wrap {
  position: relative;
  min-width: 0;
  margin-bottom: var(--w2-s4);
  padding: var(--w2-s5);
  overflow: hidden;
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s1);
  background: var(--w2-surface);
}

.chart-wrap::before,
#bia-chart-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--w2-lime), transparent 56%);
  opacity: .64;
}

.chart-wrap h3,
#bia-chart-wrap h3 {
  margin: 0 0 var(--w2-s4);
  color: var(--w2-text-muted);
  font: 600 12px/1.35 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
}

.chart-wrap canvas,
#bia-chart-wrap canvas,
#screen-transform .sb-card canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
  max-height: 320px;
}

#screen-analytics .person-section-label {
  min-height: var(--w2-s8);
  display: flex;
  align-items: center;
  gap: var(--w2-s3);
  margin: var(--w2-s6) 0 var(--w2-s3);
  padding: 0 var(--w2-s1);
  border-top: 1px solid var(--w2-line);
  color: var(--w2-text);
  font: 700 13px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

#screen-analytics .person-section-label::before {
  content: '';
  width: var(--w2-s2);
  height: var(--w2-s2);
  flex: 0 0 auto;
  border: 1px solid var(--w2-lime);
  border-radius: 50%;
  background: rgba(200, 241, 53, .12);
}

/* Недельный объём */
#screen-analytics .weekly-vol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--w2-s2);
  margin: 0 0 var(--w2-s4);
}

#screen-analytics .vol-chip {
  min-height: var(--w2-s9);
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(72px, 1.6fr) auto;
  align-items: center;
  gap: var(--w2-s3);
  padding: var(--w2-s2) var(--w2-s3);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s1);
  background: var(--w2-surface);
}

#screen-analytics .vol-name {
  min-width: 0;
  overflow: hidden;
  color: var(--w2-text-muted);
  font: 600 12px/1.25 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-analytics .vol-bar {
  height: var(--w2-s1);
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}

#screen-analytics .vol-fill {
  height: 100%;
  background: var(--w2-lime);
  transition: width .24s;
}

#screen-analytics .vol-num {
  min-width: var(--w2-s7);
  color: var(--w2-text-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  text-align: right;
}

#screen-analytics .vol-ok { color: var(--w2-lime); }
#screen-analytics .vol-low { color: var(--w2-text-muted); }
#screen-analytics .vol-high { color: var(--w2-fire); }

/* Таблица аналитики истории */
:is(#screen-history, #sf-history-inline) .sh-an-header {
  margin-bottom: var(--w2-s4);
  color: var(--w2-text-muted);
  font: 700 13px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

:is(#screen-history, #sf-history-inline) .sh-an-section {
  margin-bottom: var(--w2-s3);
  overflow-x: auto;
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s1);
  background: var(--w2-surface);
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  scrollbar-width: thin;
}

:is(#screen-history, #sf-history-inline) .sh-an-section-title {
  min-width: 800px;
  min-height: var(--w2-s9);
  display: flex;
  align-items: center;
  gap: var(--w2-s2);
  padding: 0 var(--w2-s4);
  border-bottom: 1px solid var(--w2-line);
  color: var(--w2-text-muted);
  font: 600 13px/1.3 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

:is(#screen-history, #sf-history-inline) .sh-an-section-title svg {
  width: var(--w2-s4);
  height: var(--w2-s4);
  flex: 0 0 auto;
  color: var(--w2-lime);
}

:is(#screen-history, #sf-history-inline) .sh-an-section-title span {
  color: var(--w2-text-quiet);
  font: 600 11px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}

:is(#screen-history, #sf-history-inline) .sh-an-table {
  min-width: 800px;
  width: 100%;
  padding: var(--w2-s2) var(--w2-s4) var(--w2-s3);
}

:is(#screen-history, #sf-history-inline) .sh-an-row {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) repeat(12, minmax(44px, 1fr));
  align-items: center;
  border: 0;
}

:is(#screen-history, #sf-history-inline) .sh-an-row.head {
  min-height: var(--w2-s8);
  border-bottom: 1px solid var(--w2-line);
  color: var(--w2-text-quiet);
  font-weight: 600;
}

:is(#screen-history, #sf-history-inline) .sh-an-row.head .sh-an-ex {
  color: var(--w2-text-quiet);
  font: 600 10px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}

:is(#screen-history, #sf-history-inline) .sh-an-row.head .sh-an-val {
  min-height: var(--w2-s8);
  color: rgba(255, 255, 255, .2);
  font-size: 10px;
  cursor: default;
}

:is(#screen-history, #sf-history-inline) .sh-an-row.head .sh-an-val.current {
  color: rgba(200, 241, 53, .56);
}

:is(#screen-history, #sf-history-inline) .sh-an-row.data {
  min-height: var(--w2-s8);
}

:is(#screen-history, #sf-history-inline) .sh-an-row.pips {
  min-height: var(--w2-s3);
}

:is(#screen-history, #sf-history-inline) .sh-an-row.pips > div {
  text-align: center;
}

:is(#screen-history, #sf-history-inline) .sh-an-row.pips::after {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  margin-top: var(--w2-s2);
  background: rgba(255, 255, 255, .05);
}

:is(#screen-history, #sf-history-inline) .sh-an-row.pips.last::after { display: none; }

:is(#screen-history, #sf-history-inline) .sh-an-ex {
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: var(--w2-s3);
  overflow: hidden;
  border-left: 2px solid transparent;
  color: var(--w2-text-muted);
  font: 600 12px/1.25 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#screen-history, #sf-history-inline) .sh-an-ex.trend-up {
  border-left-color: var(--w2-lime);
  color: var(--w2-text);
}

:is(#screen-history, #sf-history-inline) .sh-an-ex.trend-same {
  border-left-color: rgba(255, 255, 255, .28);
}

:is(#screen-history, #sf-history-inline) .sh-an-ex.trend-down {
  border-left-color: var(--w2-fire);
}

:is(#screen-history, #sf-history-inline) .sh-an-ex.trend-pending {
  border-left-color: rgba(255, 255, 255, .12);
  color: var(--w2-text-quiet);
}

:is(#screen-history, #sf-history-inline) .sh-an-val {
  min-height: var(--w2-s8);
  display: grid;
  place-items: center;
  padding: 0 var(--w2-s1);
  border-radius: var(--w2-s1);
  color: var(--w2-text-muted);
  font: 600 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: color .14s, background-color .14s;
}

:is(#screen-history, #sf-history-inline) .sh-an-val:not(.empty):hover,
:is(#screen-history, #sf-history-inline) .sh-an-val:not(.empty):focus-visible {
  background: rgba(200, 241, 53, .08);
  color: var(--w2-text);
}

:is(#screen-history, #sf-history-inline) .sh-an-val.current {
  color: var(--w2-lime);
  font-weight: 700;
}

:is(#screen-history, #sf-history-inline) .sh-an-val.empty {
  color: rgba(255, 255, 255, .14);
  cursor: default;
}

:is(#screen-history, #sf-history-inline) .sh-an-pip {
  width: var(--w2-s2);
  height: var(--w2-s1);
  display: block;
  margin: 0 auto;
  border-radius: var(--w2-s1);
}

:is(#screen-history, #sf-history-inline) .sh-an-pip.up { background: var(--w2-lime); }
:is(#screen-history, #sf-history-inline) .sh-an-pip.same { background: rgba(255, 255, 255, .2); }
:is(#screen-history, #sf-history-inline) .sh-an-pip.down { background: var(--w2-fire); }

/* Детали ячейки аналитики */
.an-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--w2-s4);
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(var(--w2-s1));
}

.an-modal-overlay.show { display: flex; }

.an-modal {
  width: min(100%, 360px);
  overflow: hidden;
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s1);
  background: var(--w2-surface-raised);
  box-shadow: 0 var(--w2-s4) var(--w2-s9) rgba(0, 0, 0, .38);
  animation: w2AnalyticsModalIn .18s ease-out;
}

@keyframes w2AnalyticsModalIn {
  from { opacity: 0; transform: translateY(var(--w2-s2)); }
  to { opacity: 1; transform: translateY(0); }
}

.an-modal-head {
  padding: var(--w2-s4) var(--w2-s5) var(--w2-s3);
  border-bottom: 1px solid var(--w2-line);
}

.an-modal-head-top {
  min-height: var(--w2-s8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--w2-s3);
}

.an-modal-title {
  color: var(--w2-text);
  font: 700 15px/1.3 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

.an-modal-sub {
  margin-top: var(--w2-s1);
  color: var(--w2-text-quiet);
  font: 500 11px/1.35 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.an-modal-close {
  width: var(--w2-s8);
  height: var(--w2-s8);
  display: grid;
  flex: 0 0 auto;
  margin: calc(var(--w2-s2) * -1);
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.an-modal-close svg {
  width: var(--w2-s5);
  height: var(--w2-s5);
  fill: none;
  stroke: var(--w2-text-quiet);
  stroke-linecap: round;
  stroke-width: 2;
  transition: stroke .14s;
}

.an-modal-close:hover svg,
.an-modal-close:focus-visible svg { stroke: var(--w2-text); }

.an-modal-body { padding: var(--w2-s3) var(--w2-s5) var(--w2-s4); }

.an-modal-set {
  min-height: var(--w2-s8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2-s3);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--w2-text-muted);
  font: 500 12px/1.4 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}

.an-modal-set:last-child { border-bottom: 0; }
.an-modal-set-num { width: var(--w2-s5); color: var(--w2-text-quiet); }
.an-modal-set-val { color: var(--w2-text); font-weight: 600; }
.an-modal-set-time { margin-left: auto; color: rgba(200, 241, 53, .52); font-size: 11px; }

.an-modal-footer {
  min-height: var(--w2-s9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2-s3);
  padding: var(--w2-s2) var(--w2-s5);
  border-top: 1px solid var(--w2-line);
}

.an-modal-tonnage {
  color: var(--w2-text-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}

.an-modal-tonnage span { color: var(--w2-text); }

.an-modal-meta {
  color: var(--w2-text-quiet);
  font: 500 10px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

@media (max-width: 720px) {
  #screen-analytics {
    padding: var(--w2-s4) var(--w2-s3) calc(var(--w2-s9) + var(--w2-s7));
  }

  #screen-analytics .filter-row { align-items: stretch; }
  #screen-analytics .filter-select { min-width: 0; flex: 1 1 160px; }

  .chart-wrap,
  #bia-chart-wrap {
    margin-bottom: var(--w2-s3);
    padding: var(--w2-s4) var(--w2-s3);
  }

  .chart-wrap canvas,
  #bia-chart-wrap canvas,
  #screen-transform .sb-card canvas { max-height: 260px; }

  :is(#screen-history, #sf-history-inline) .sh-an-section-title,
  :is(#screen-history, #sf-history-inline) .sh-an-table { min-width: 760px; }
}

@media (max-width:500px) {
  :is(#screen-history, #sf-history-inline) .sh-an-section {
    overflow-x:hidden
  }

  :is(#screen-history, #sf-history-inline) .sh-an-section-title {
    width:100%;
    min-width:0;
    min-height:var(--w2-s9);
    height:auto;
    flex-wrap:wrap;
    padding:var(--w2-s3);
    box-sizing:border-box;
    overflow-wrap:anywhere
  }

  :is(#screen-history, #sf-history-inline) .sh-an-table {
    width:100%;
    min-width:0;
    padding:var(--w2-s2);
    box-sizing:border-box
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.head {
    display:none
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.data {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--w2-s1);
    min-width:0;
    padding:var(--w2-s2) 0;
    counter-reset:sh-an-session
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.data .sh-an-ex {
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    min-height:var(--w2-s8);
    padding:var(--w2-s2) var(--w2-s3);
    box-sizing:border-box;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.data .sh-an-val {
    min-width:0;
    min-height:var(--w2-s8);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--w2-s1);
    padding:var(--w2-s2);
    box-sizing:border-box;
    border:1px solid var(--w2-line);
    counter-increment:sh-an-session;
    font-variant-numeric:tabular-nums
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.data .sh-an-val::before {
    content:counter(sh-an-session) " ·";
    color:var(--w2-text-quiet);
    font-size:10px;
    font-weight:500;
    font-variant-numeric:tabular-nums
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.pips {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--w2-s1);
    min-width:0;
    min-height:0;
    padding:0 0 var(--w2-s3);
    border-bottom:1px solid var(--w2-line)
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.pips.last {
    border-bottom:0
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.pips > div:first-child {
    display:none
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.pips > div {
    min-width:0;
    min-height:var(--w2-s2);
    display:grid;
    place-items:center
  }

  :is(#screen-history, #sf-history-inline) .sh-an-row.pips::after {
    display:none
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-analytics .filter-select,
  #screen-analytics .vol-fill,
  :is(#screen-history, #sf-history-inline) .sh-an-val,
  .an-modal-close svg { transition: none; }

  .an-modal { animation: none; }
}