/* 📁 public/css/stat.css */

/* ============ RESET / BASE ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --success: #10b981;
  --danger: #ef4444;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.app.theme-dark {
  --bg: #0f172a;
  --card-bg: #1e293b;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100vh;
  background: var(--bg);
}

/* ============ LOADING / ERROR ============ */
.loading-screen,
.error-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
  text-align: center;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.error-screen h1 {
  font-size: 20px;
  margin-bottom: 8px;
}

.error-screen p {
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 320px;
}

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

/* ============ MAIN LAYOUT ============ */
.main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);

  /* ★ Фиксируем шапку при скролле */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding-top: 8px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
}

.logo {
  font-size: 22px;
}

.btn-refresh {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.btn-refresh:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============ FILTERS ============ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--shadow);

  /* ★ Залипает под верхом при скролле */
  position: sticky;
  top: 60px;
  z-index: 9;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-presets {
  display: flex;
  gap: 4px;
}

.filter-presets button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.filter-presets button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.filter-presets button:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-presets button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filters input[type="date"] {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}

/* ============ TABS ============ */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.tabs button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 10px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tabs button:hover:not(.active) {
  color: var(--text);
}

/* ============ TAB PANES (все 4 в DOM, видимость через .active) ============ */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}


/* На узких экранах (< 480px) — 2 колонки */
@media (max-width: 480px) {
  .tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ CARDS ============ */
.card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.card-header {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text);
}

/* ============ CARD HEADER WITH ACTIONS ============ */
.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ============ GRANULARITY DROPDOWN ============ */
.granularity-dropdown {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.granularity-dropdown:hover,
.granularity-dropdown:focus {
  border-color: var(--accent);
  outline: none;
}

.app.theme-dark .granularity-dropdown {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--border);
}

/* ============ KPI GRID ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.kpi-card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

/* ============ CHARTS ============ */
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
}

.chart-wrapper--tall {
  height: 320px;
}

.chart-wrapper canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Doughnut-графики в аудитории — чуть ниже */
.grid-2 .chart-wrapper {
  height: 220px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============ SWIPER (карусель графиков) ============ */
.swiper {
  width: 100%;
  height: 320px;
  margin-bottom: 8px;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.slide-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
  flex-shrink: 0;
}

.slide-chart-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

.slide-chart-wrap canvas {
  display: block;
}

/* Индикаторы страниц */
.swiper-pagination {
  position: relative !important;
  margin-top: 8px;
}

.swiper-pagination-bullet {
  background: var(--text-muted);
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
}

/* Кнопки навигации */
.swiper-button-prev,
.swiper-button-next {
  color: var(--accent);
  width: 28px;
  height: 28px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 14px;
  font-weight: 700;
}

/* Тёмная тема — кнопки Swiper */
.app.theme-dark .swiper-button-prev,
.app.theme-dark .swiper-button-next {
  color: #60a5fa;
}

/* Скрываем стрелки и пагинацию в режиме 7д */
.swiper--7d .swiper-button-prev,
.swiper--7d .swiper-button-next,
.swiper--7d .swiper-pagination {
  display: none !important;
}
/* ============ TABLES ============ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
}

.table tr:last-child td {
  border-bottom: none;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table tr.clickable {
  cursor: pointer;
  transition: background 0.1s;
}

.table tr.clickable:hover {
  background: rgba(59, 130, 246, 0.06);
}

.ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ EMPTY STATE ============ */
.empty {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ============ FUNNEL ============ */
.funnel-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.funnel-label {
  color: var(--text);
  text-transform: capitalize;
}

.funnel-bar-wrap {
  background: var(--border);
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
}

.funnel-bar {
  background: var(--accent);
  height: 100%;
  transition: width 0.3s;
}

.funnel-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}

/* ============ LINK DETAIL ============ */
.link-detail .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px 8px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}

.link-detail .btn-back:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateX(-2px);
}

.link-detail .btn-back svg {
  flex-shrink: 0;
}

.link-info p {
  margin-bottom: 6px;
  font-size: 13px;
}

.link-info b {
  color: var(--text-muted);
  font-weight: 500;
  display: inline-block;
  min-width: 80px;
}

/* ============ TG SPLIT ============ */
.tg-split {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.tg-item {
  text-align: center;
}

.tg-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tg-value {
  font-size: 24px;
  font-weight: 700;
}

/* ============ HEATMAP ============ */
.heatmap-wrapper {
  overflow-x: auto;
}

.heatmap {
  display: grid;
  grid-template-columns: 40px repeat(24, 1fr);
  gap: 2px;
  font-size: 10px;
  min-width: 600px;
}

.heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--border);
}

.heatmap-label {
  color: var(--text-muted);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============ WARNING BANNER ============ */
.warning-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fef3c7;
  color: #78350f;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  border: 1px solid #fcd34d;
}

.app.theme-dark .warning-banner {
  background: #422006;
  color: #fde68a;
  border-color: #78350f;
}

.btn-inline {
  background: #f59e0b;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.btn-inline:hover {
  background: #d97706;
}

/* ============ ICONS ============ */
.btn-refresh,
.btn-refresh-inner,
.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-refresh svg,
.tabs button svg {
  flex-shrink: 0;
  vertical-align: middle;
}

.tabs button {
  justify-content: center;
}

/* ============ HEADER ACTIONS ============ */
.header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}

.btn-icon > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.btn-icon:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-icon:active:not(:disabled) {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-icon.active,
.btn-icon.active > * {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}

.spinning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: spin 0.8s linear infinite;
}

/* ============ METRIC HELP ============ */
.metric-help {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ LINK LIST (мобильные карточки) ============ */
.link-list {
  display: flex;
  flex-direction: column;
}

.link-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.link-row:last-child:not(.link-row-full) {
  border-bottom: none;
}

.link-row:hover {
  background: rgba(59, 130, 246, 0.06);
}

.link-row-host {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.link-row-path {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row-stats {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text);
}

.link-row-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ============ LINKS COUNT ============ */
.stat-icon {
  font-size: 11px;
  opacity: 0.7;
}

/* ============ FUNNEL — фикс цвета ============ */
.funnel-label {
  color: var(--text);
}

.funnel-value {
  color: var(--text);
  font-weight: 700;
}

/* ═══ СПИСОК ССЫЛОК (полный) ═══ */
.link-list-full {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

.link-list-full .link-row-full:last-child {
  margin-bottom: 4px;
}

.link-row-full {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--card-bg);
  transition: background 0.1s, border-color 0.1s;
}

.link-row-full:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: var(--accent);
}

.link-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
}

.link-row-body {
  flex: 1;
  min-width: 0;
}

.link-row-full .link-row-host {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row-full .link-row-path {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.link-row-full .link-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
}

.link-row-stat svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}

/* ============ LINKS LOADING CARD ============ */
.links-loading-card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent !important;
  border-style: dashed !important;
  border-color: var(--border) !important;
  cursor: default !important;
  pointer-events: none;
}

.links-loading-card:hover {
  background: transparent !important;
  border-color: var(--border) !important;
}

.links-loading-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  animation: loading-pulse 1.4s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============ LINKS PROGRESS (внизу списка) ============ */
.links-progress {
  text-align: center;
  padding: 12px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ============ LINKS END ============ */
.links-end {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Подсказка в панели фильтров — идентична .metric-help, но с отступами по бокам */
.links-filters__help {
  margin: 0 16px 12px;
  padding: 10px 0 0;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  animation: fadeIn 0.2s ease;
}
/* Ссылка-редирект в деталке */
.link-redirect-url {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.link-redirect-url:hover {
  text-decoration: underline;
}


/* Тёмная тема — явные цвета */
.app.theme-dark .link-row-full .link-row-host {
  color: #f1f5f9;
}

.app.theme-dark .link-row-full .link-row-path {
  color: #94a3b8;
}

.app.theme-dark .link-row-full .link-row-stats {
  color: #cbd5e1;
}

.app.theme-dark .link-row-icon {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

/* ============ SCROLL TO TOP BUTTON ============ */
.btn-scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-scroll-top:hover {
  background: var(--accent-hover);
}

/* ============ CALENDAR ============ */
.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-icon-small {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.btn-icon-small:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.calendar-month {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: capitalize;
  min-width: 110px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-head {
  margin-bottom: 6px;
}

.calendar-day-name {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0;
}

.calendar-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  background: var(--card-bg);
  padding: 2px;
  min-width: 0;
}

.calendar-cell:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}

.calendar-cell--empty {
  border: none;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.calendar-cell--empty:hover {
  transform: none;
}

/* Интенсивность: --intensity от 0 до 1 */
.calendar-cell:not(.calendar-cell--empty) {
  background: rgba(59, 130, 246, calc(var(--intensity, 0) * 0.85 + 0.04));
}

.calendar-cell--selected {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.calendar-day-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.calendar-clicks {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 2px;
  min-height: 10px;
}

/* Тёмная тема: контраст цифр */
.app.theme-dark .calendar-day-num {
  color: #f1f5f9;
}

.app.theme-dark .calendar-clicks {
  color: rgba(255, 255, 255, 0.75);
}

.app.theme-dark .calendar-cell:not(.calendar-cell--empty) {
  background: rgba(96, 165, 250, calc(var(--intensity, 0) * 0.55 + 0.08));
}

/* ============ RADIAL (полярный график) ============ */
.chart-wrapper--radial {
  height: 320px;
}

.calendar-selected-day {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============ LINKS FILTERS ============ */
.links-filters {
  margin-bottom: 16px;
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.links-filters__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

.links-filters__toggle {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s;
}

.links-filters__toggle:hover,
.links-filters__toggle.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.links-filters__badge {
  color: var(--accent);
  font-size: 10px;
}

.links-filters__panel {
  border-top: 1px solid var(--border);
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.links-filters__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.links-filters__row label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.links-filters__row input[type="date"] {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}

.links-filters__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.links-filters__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.links-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.links-filters__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.links-filters__checkbox input {
  cursor: pointer;
}

.links-filters__clear {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
}

.links-filters__clear:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Чипсы */
.chip {
  background: transparent;
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chip--active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Таблица всех платформ под графиком (вкладка «Платформы») */
.platforms-table-wrap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.platforms-table-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* ============ DATE INPUT (кастомный плейсхолдер везде) ============ */
.date-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Перебиваем стили выше для инпутов внутри .date-field */
.date-field input[type="date"] {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  min-width: 135px;
  
  /* Делаем нативный текст прозрачным, чтобы он не перекрывал наш dd.mm.yyyy */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* Как только дата выбрана — возвращаем нативный цвет */
.date-field input[type="date"]:valid {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}

/* Или когда на поле кликнули (фокус) */
.date-field input[type="date"]:focus {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}

/* Наш красивый плейсхолдер */
.date-hint {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Клики проходят сквозь текст в input */
  color: var(--text-muted);
  font-size: 13px;
}

/* Прячем наш плейсхолдер, если дата выбрана или поле в фокусе */
.date-field input[type="date"]:focus + .date-hint,
.date-field input[type="date"]:valid + .date-hint {
  display: none;
}

/* Иконка календаря (делаем её видимой) */
.date-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

/* ============ ТЁМНАЯ ТЕМА: универсальные фиксы ============ */
.app.theme-dark {
  color-scheme: dark;
}

/* Все элементы, где может быть тёмный текст на тёмном фоне */
.app.theme-dark .table td,
.app.theme-dark .table th,
.app.theme-dark .link-info p,
.app.theme-dark .link-info b,
.app.theme-dark .kpi-label,
.app.theme-dark .card-header,
.app.theme-dark .links-count,
.app.theme-dark .links-progress,
.app.theme-dark .links-end,
.app.theme-dark .empty,
.app.theme-dark .metric-help,
.app.theme-dark .links-filters__label,
.app.theme-dark .links-filters__help,
.app.theme-dark .tg-label,
.app.theme-dark .tg-value,
.app.theme-dark .calendar-month,
.app.theme-dark .calendar-day-name,
.app.theme-dark .calendar-selected-day,
.app.theme-dark .funnel-label,
.app.theme-dark .funnel-value,
.app.theme-dark .filters .filter-group label {
  color: var(--text);
}

.app.theme-dark .table th,
.app.theme-dark .kpi-label,
.app.theme-dark .links-count,
.app.theme-dark .calendar-day-name,
.app.theme-dark .calendar-selected-day,
.app.theme-dark .tg-label,
.app.theme-dark .links-progress,
.app.theme-dark .links-end,
.app.theme-dark .empty,
.app.theme-dark .metric-help,
.app.theme-dark .links-filters__label,
.app.theme-dark .links-filters__help,
.app.theme-dark .filters .filter-group label {
  color: var(--text-muted);
}

/* Цифры в календаре — ярче */
.app.theme-dark .calendar-day-num {
  color: #f1f5f9;
}

/* Заголовки таблиц — светлый, но приглушённый */
.app.theme-dark .table th {
  color: #94a3b8;
  border-bottom-color: var(--border);
}

/* Ячейки таблиц */
.app.theme-dark .table td {
  color: #f1f5f9;
  border-bottom-color: var(--border);
}

/* События (impression, redirect, bot, choose) */
.app.theme-dark .table td:first-child {
  color: #e2e8f0;
}

/* Разделители в таблицах */
.app.theme-dark .table tr:last-child td {
  border-bottom: none;
}

/* «Ссылка:» и другие поля */
.app.theme-dark .link-info b {
  color: var(--text-muted);
}

.app.theme-dark .link-info p {
  color: var(--text);
}

/* Отступы в «Ссылка:» */
.app.theme-dark .link-info a {
  color: var(--accent);
}

/* Чекбокс «Только с ERID» в тёмной теме */
.app.theme-dark .links-filters__checkbox,
.app.theme-dark .links-filters__checkbox span {
  color: var(--text) !important;
}

/* И на всякий случай — сам инпут */
.app.theme-dark .links-filters__checkbox input {
  accent-color: var(--accent);
}