/* Таблицы, кнопки, поля, карточки, графики. */

/* --- панель управления --- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.controls {
  display: flex;
  align-items: flex-end;
  /* Промежуток поджат до 12px: при 16px кнопка «Обновить» не влезала
     в строку и панель разъезжалась на две. */
  gap: var(--space-3);
  flex-wrap: wrap;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field > label,
.field-label {
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Узкие поля панели: подпись переносится на вторую строку, но место под неё
   резервируется всегда — иначе поля встают на разной высоте, а длинные
   подписи наезжают на соседние. */
.controls .field > label {
  min-height: 2.6em;
}

input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  transition: border-color 120ms ease;
  width: 100%;
}
input:hover, select:hover { border-color: var(--ink-faint); }
input::placeholder { color: var(--ink-faint); }

.field--narrow { width: 92px; }
.field--mid { width: 148px; }

/* Переключатель — обычный чекбокс, без имитации тумблера. */
.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-muted);
  min-height: 36px;
  cursor: pointer;
}
.check input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- кнопки: плоские, без градиентов и теней --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { border-color: var(--ink-faint); }
.btn[disabled] { color: var(--ink-faint); cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--border); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1220;
  font-weight: 500;
}
.btn--primary:hover { background: #6f9bf2; border-color: #6f9bf2; }
.btn--primary[disabled] { background: var(--surface-hover); border-color: var(--border); color: var(--ink-faint); }

.btn--quiet { background: transparent; }
.btn--small { min-height: 28px; padding: var(--space-1) var(--space-2); font-size: var(--step--1); }
.btn--danger:hover { color: var(--bad); border-color: var(--bad); }

/* --- строка состояния --- */

.panel-hint {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-block: var(--space-2);
}

.status {
  margin-top: var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.status .num { color: var(--ink); }
.status--error { color: var(--bad); }

.countdown {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

/* --- сообщения --- */

.notice {
  border: 1px solid var(--border);
  border-left: 2px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.notice--error { border-left-color: var(--bad); color: var(--ink); }
.notice--warn { border-left-color: var(--warn); color: var(--ink); }

/* Пустое состояние всегда объясняет, почему пусто. */
.empty {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* --- таблица --- */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: var(--space-4);
  overflow: clip;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}

/* Без вертикальных линий: строки разделяет только нижняя граница. */
thead th {
  position: sticky;
  top: 56px;
  z-index: 10;
  background: var(--surface);
  text-align: left;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }

/* Наведение — только цвет, размеры не двигаются. */
tbody tr { transition: background-color 120ms ease; }
tbody tr:hover { background: var(--surface-hover); }

th.right, td.right { text-align: right; }

.match-name { font-weight: 500; }
.match-league {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: 2px;
}

/* Вероятность — величина, а не категория: один смысловой цвет по порогу,
   и рядом всегда стоит число, цвет не единственный носитель смысла. */
tr.p-high td.p-cell { color: var(--good); }
tr.p-mid td.p-cell { color: var(--ink); }
tr.p-low td.p-cell { color: var(--ink-faint); }
tr.p-low { color: var(--ink-muted); }

td.p-cell { font-weight: 500; }

.edge-pos { color: var(--good); }
.edge-neg { color: var(--ink-faint); }

/* Крупное расхождение модели с фактом — это и есть вывод таблицы,
   его надо выделить, а не приглушить. */
.gap-large { color: var(--warn); }

/* Пометка строк, посчитанных без разделения на дом и выезд. */
.flag {
  display: inline-block;
  font-size: var(--step--1);
  color: var(--warn);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  margin-left: var(--space-2);
  cursor: help;
}

.tag {
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.tag--won { color: var(--good); }
.tag--lost { color: var(--bad); }
.tag--pending { color: var(--warn); }

/* --- сводка крупными числами --- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.stat-label {
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

.stat-value {
  font-size: var(--step-3);
  line-height: 1.1;
  font-weight: 500;
}
.stat-value--good { color: var(--good); }
.stat-value--bad { color: var(--bad); }

.stat-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: var(--space-2);
}

/* --- модальное окно ставки --- */

/* Нативный <dialog>: сам держит фокус внутри, закрывается по Esc и не требует
   ни библиотек, ни ручной ловушки фокуса. */
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0;
  width: min(420px, 100% - 24px);
  max-height: calc(100vh - 48px);
}

.modal::backdrop {
  background: rgba(6, 8, 12, 0.72);
}

.modal-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal-title {
  font-size: var(--step-1);
  font-weight: 600;
}

.modal-match {
  font-size: var(--step-0);
  color: var(--ink);
  margin-top: calc(var(--space-3) * -1);
}

.modal-league {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: var(--space-1);
}

.modal-facts {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.modal-facts dt {
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}

.modal-facts dd {
  margin: 0;
  font-size: var(--step-0);
}

.modal-inputs {
  display: flex;
  gap: var(--space-3);
}
.modal-inputs .field { flex: 1; }

.modal-error {
  color: var(--bad);
  font-size: var(--step--1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 760px) {
  .modal-body { padding: var(--space-4); }
  .modal-facts { gap: var(--space-4); }
  .modal-actions .btn { flex: 1; }
}

/* --- вход --- */

/* Карточка занимает ровно свободную высоту между шапкой и футером: 100vh
   вытолкнул бы футер за экран и добавил лишнюю прокрутку. */
.page-login .site-main { display: flex; }
.page-login .site-main > .container { display: flex; flex: 1; }

.login-page {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.login-card {
  width: min(360px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
}

.login-card h1 {
  font-size: var(--step-1);
  margin-bottom: var(--space-6);
}

.login-card .field { margin-bottom: var(--space-4); }
.login-card .btn { width: 100%; margin-top: var(--space-2); }

.login-error {
  margin-top: var(--space-4);
  color: var(--bad);
  font-size: var(--step--1);
}

/* --- графики --- */

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.chart-title { font-size: var(--step-0); font-weight: 500; }
.chart-sub {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis-text {
  fill: var(--ink-faint);
  font-family: var(--font-num);
  font-size: 11px;
}
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart-dot { fill: var(--accent); }
.chart-ref { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.chart-crosshair { stroke: var(--ink-faint); stroke-width: 1; }
.chart-label {
  fill: var(--ink-muted);
  font-family: var(--font-num);
  font-size: 11px;
}

/* Подсказка нарисована внутри SVG: позиция задаётся атрибутом transform,
   а не инлайновым стилем, поэтому строгий CSP её не блокирует. */
.chart-tip-box {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1;
}
.chart-tip-text {
  fill: var(--ink);
  font-family: var(--font-num);
  font-size: 11px;
}
.chart-holder { position: relative; }

/* --- мобильная вёрстка: таблица превращается в карточки --- */

@media (max-width: 760px) {
  .table-wrap {
    border: none;
    background: transparent;
    overflow: visible;
  }

  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }
  tbody tr:hover { background: var(--surface); }

  tbody td {
    border-bottom: none;
    padding: var(--space-1) 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: left;
  }
  td.right { text-align: right; }

  /* Подпись колонки переезжает в карточку — иначе числа теряют смысл. */
  tbody td::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    flex: none;
  }
  tbody td[data-label=""]::before { content: none; }

  .stat-value { font-size: var(--step-2); }
  .controls { gap: var(--space-3); }
  .field--narrow, .field--mid { width: calc(50% - var(--space-2)); }
  .controls .btn { width: 100%; }
}


/* --- теннис: обновление отдельной строки -------------------------------- */

/* Кнопка живёт в своей колонке и не тянет строку по высоте. Обёртка таблицы
   не прокручивается по горизонтали (иначе липкая шапка начнёт цепляться за
   неё, а не за страницу), поэтому колонка обязана быть узкой. */
td.row-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.btn--row {
  padding-inline: var(--space-2);
  font-size: var(--step-0);
  line-height: 1;
}
/* Словесная подпись нужна только там, где таблица разложена в карточки. */
.btn--row .btn-label { display: none; }

/* Рынок под числом: что брать, если брать вообще. Подпись, а не призыв —
   поэтому она приглушена и не спорит с самим числом за внимание. */
.badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.badge[hidden] { display: none; }

/* Исход почти решён: цену, которую мы посчитали, никто не выставит.
   Бейдж остаётся — но так, чтобы его не приняли за повод ставить. */
.badge--dead {
  color: var(--ink-faint);
  border-style: dashed;
}

/* Строка, с которой нажали. Полоса слева, а не заливка: заливку уже занимает
   наведение, и два состояния сливались бы. */
tbody tr.row--focus td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Матч пропал из живой ленты: он либо доигран, либо снят. Строку оставляем —
   исчезнувшая под курсором строка выглядит как сбой. */
tbody tr.row--gone { color: var(--ink-faint); }
tbody tr.row--gone td.p-cell { color: var(--ink-faint); }

/* Мигание изменившегося числа. Гаснет в цвет текста, поэтому после анимации
   ячейка выглядит ровно как соседние и класс можно не снимать. */
@keyframes cell-flash {
  from { background: color-mix(in srgb, var(--accent) 35%, transparent); }
  to   { background: transparent; }
}
.flash { animation: cell-flash 900ms ease-out; border-radius: var(--radius-sm); }

@media (max-width: 760px) {
  /* В карточном режиме подпись у кнопки пустая — пусть занимает всю ширину. */
  td.row-actions {
    width: auto;
    padding-top: var(--space-3);
  }
  td.row-actions .btn { width: 100%; }
  .btn--row .btn-label { display: inline; margin-left: var(--space-2); }
}