/* Основные стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  padding: 2rem;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 3rem;
}

.title {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.subtitle {
  color: #94a3b8;
  font-size: 1.25rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.stat-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.3);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(16, 185, 129, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.stat-card:hover::before {
  opacity: 1;
  transform: rotate(45deg) translate(50%, 50%);
}

.stat-label {
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #10b981;
  position: relative;
  z-index: 1;
}

.stat-subtitle {
  color: #64748b;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  position: relative;
  z-index: 1;
}
.city-title { font-size: 1.25rem; color: #34d399; margin: 1rem 0 0.5rem; font-weight: 600; }
.city-block { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(51,65,85,0.12); }

/* фиксированная сетка таблицы */
table.stats-table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
table.stats-table th, table.stats-table td { vertical-align: top; }
/* числовые колонки вправо, но текстовые — влево */
td.revenue, td.cash, td.noncash, td.visits { text-align: right; }
td.cell-services, td.cell-goods { text-align: left; }

/* контейнер, чтобы бейджи не «уезжали» */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

.service-tag {
  display:inline-block; padding:.15rem .5rem; border-radius:9999px;
  background:rgba(52,211,153,.15); color:#34d399; margin:.1rem .25rem .1rem 0;
  font-size:.85rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.good-tag {
  display:inline-block; padding:.15rem .5rem; border-radius:9999px;
  background:rgba(59,130,246,.15); color:#60a5fa; margin:.1rem .25rem .1rem 0;
  font-size:.85rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.companies-section {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 1rem;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
}

.table-container {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(51, 65, 85, 0.5);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(15, 23, 42, 0.8);
}

th {
  background: rgba(16, 185, 129, 0.1);
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #10b981;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

td {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.3);
  transition: background-color 0.2s ease;
}

tr:hover td {
  background: rgba(16, 185, 129, 0.05);
}

.company-id {
  font-family: 'Monaco', 'Courier New', monospace;
  color: #94a3b8;
  font-size: 0.875rem;
}

.company-name {
  font-weight: 600;
  color: #f8fafc;
}

.visits-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.revenue {
  color: #10b981;
  font-weight: 600;
}

.cash {
  color: #f59e0b;
  font-weight: 600;
}

.noncash {
  color: #3b82f6;
  font-weight: 600;
}

.services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.service-tag {
    background: rgba(51, 65, 85, 0.5);
    color: #cbd5e1;
    padding: 0.2rem;
    margin: 0.2rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    border: 1px solid rgba(71, 85, 105, 0.5);
    display: inline-flex;
}
.date-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.date-controls input[type="date"] {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.6);
  color: #f8fafc;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  outline: none;
}

.btn {
  background: linear-gradient(135deg, rgba(16,185,129,0.9), rgba(52,211,153,0.9));
  color: #0f172a;
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(16,185,129,0.3);
}

.btn.btn-secondary {
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0;
  border: 1px solid rgba(51, 65, 85, 0.8);
}

.btn-link {
  color: #34d399;
  text-decoration: none;
  font-weight: 600;
}

.btn-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  body { padding: 1rem; }

  .title { font-size: 1.75rem; line-height: 1.2; }
  .subtitle { font-size: 1rem; }

  /* Статистика в столбик */
  .stats-grid { grid-template-columns: 1fr; gap: 1rem; }
  .stat-card { padding: 1rem; }
  .stat-value { font-size: 1.5rem; }

  /* Город и секции */
  .companies-section { padding: 1rem; }
  .city-title { font-size: 1.1rem; margin: .75rem 0 .5rem; }

  /* Таблица → карточки */
  .table-container { border-radius: .75rem; overflow: visible; border: none; }

  table.stats-table { border-collapse: separate; border-spacing: 0; background: transparent; }
  table.stats-table thead { display: none; }
  table.stats-table colgroup { display: none; }

  table.stats-table tbody { display: grid; gap: .75rem; }

  table.stats-table tr {
    display: grid;
    gap: .5rem;
    padding: .9rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(51, 65, 85, 0.5);
    border-radius: .75rem;
  }

  table.stats-table td {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: .5rem;
    align-items: start;
    padding: .35rem 0;
    border-bottom: none;
    font-size: .95rem;
    background: transparent !important;
  }

  /* Лейбл слева, значение справа */
  table.stats-table td::before {
    content: attr(data-label);
    color: #94a3b8;
    font-weight: 500;
  }

  /* Выравнивание чисел на мобильных влево для читабельности */
  td.revenue, td.cash, td.noncash, td.visits { text-align: left; }

  /* ID и название — повыше и жирнее */
  td.company-id { order: -2; font-family: 'Monaco','Courier New', monospace; color: #a3b2c2; }
  td.company-name { order: -1; }
  td.company-name::before { content: "Название"; }

  /* Бейдж визитов чуть крупнее */
  .visits-badge { display: inline-block; padding: .3rem .65rem; font-size: .9rem; }

  /* Теги — одна строка со скроллом (чтобы не раздувать карточку) */
  .tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .4rem;      /* вертикальный и горизонтальный зазоры */
    white-space: normal;
    overflow: visible;
    padding: 0;
  }

  .service-tag,
  .good-tag {
    display: inline-flex;
    max-width: 100%;
    white-space: normal;     /* многострочный текст внутри длинных тегов */
    word-break: break-word;  /* перенос длинных слов/артикулов */
    line-height: 1.2;
    margin: 0;               /* отступы контролируем через gap */
    padding: .2rem .5rem;
    border-radius: .5rem;
    font-size: .85rem;
  }
  .tags-wrap::-webkit-scrollbar { height: 6px; }
  .tags-wrap::-webkit-scrollbar-thumb { background: rgba(71,85,105,.6); border-radius: 9999px; }

  .service-tag, .good-tag {
    display: inline-flex;
    margin-right: .4rem;
    margin-bottom: .25rem;
  }

  /* Кнопки — крупнее и удобнее для тача */
  .btn { padding: .6rem 1rem; border-radius: .7rem; }
  .btn.btn-secondary { border-width: 1px; }

  /* Дата-контролы — в столбик на узком экране */
  .date-controls { flex-direction: column; align-items: stretch; gap: .5rem; }
  .date-controls input[type="date"] { width: 100%; }

  /* Ховеры без сильных теней на мобилках */
  .stat-card:hover { transform: none; box-shadow: none; }
  tr:hover td { background: transparent; }
  .date-toolbar{
  flex-direction:column;
  align-items:stretch;
  gap:.6rem;
  padding:.75rem;
  margin: .75rem 0 1.25rem;
  }
  .date-input{ width:100%; }
  .btn-icon{ width:100%; height:2.6rem; border-radius:.7rem; }
  .btn-chip{ justify-content:center; padding:.55rem .9rem; }
}
/* === Date toolbar (календарь + навигация) === */
.date-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin:1rem auto 2rem;
  padding:.75rem 1rem;
  background:rgba(30,41,59,.5);
  border:1px solid rgba(51,65,85,.5);
  border-radius:.75rem;
  backdrop-filter:blur(10px);
}

/* Кнопки ← → */
.btn-icon{
  width:2.25rem;
  height:2.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  background:rgba(15,23,42,.8);
  border:1px solid rgba(51,65,85,.6);
  color:#e2e8f0;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-icon:hover{
  transform:translateY(-1px);
  background:rgba(15,23,42,.9);
  border-color:rgba(71,85,105,.8);
  box-shadow:0 8px 18px rgba(15,23,42,.35);
}
.btn-icon:active{ transform:none; }
.btn-icon:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(16,185,129,.55);
}

/* Поле даты */
.date-input,
.date-toolbar input[type="date"]{
  background:rgba(15,23,42,.8);
  border:1px solid rgba(51,65,85,.6);
  color:#f8fafc;
  padding:.55rem .75rem;
  border-radius:.6rem;
  outline:none;
  font-weight:600;
  letter-spacing:.02em;
  min-width: 12.5rem; /* чтобы не прыгало */
  transition:border-color .15s ease, box-shadow .15s ease;
}
.date-input:focus-visible{
  border-color:rgba(16,185,129,.7);
  box-shadow:0 0 0 2px rgba(16,185,129,.35);
}
/* аккуратней пикер в webkit */
.date-input::-webkit-calendar-picker-indicator{
  filter: invert(0.85);
  opacity:.9;
}

/* Чипы «Сегодня/Вчера» */
.btn-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .8rem;
  border-radius:9999px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.28);
  color:#34d399;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-chip:hover{
  transform:translateY(-1px);
  background:rgba(16,185,129,.18);
  border-color:rgba(16,185,129,.4);
  box-shadow:0 10px 20px rgba(16,185,129,.18);
}
.btn-chip:active{ transform:none; }
.btn-chip:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(16,185,129,.45);
}
/* можно помечать активную (если захочешь из JS) */
.btn-chip.is-active{
  background:rgba(16,185,129,.25);
  border-color:rgba(16,185,129,.55);
}