/*
  Дизайн-система "Татами" — почти дословно перенесена со стилей реального сайта
  judo1413 (public/index.html, register-alesha.html: design-kit.css) и с
  реального табло (score.html/viewer.html), а не придумана заново.

  "washi" — рабочий режим (сайт, кабинеты, админка): те же Inter + Noto Serif JP
  с Google Fonts, тот же navy+терракота на тёплой бумаге, тот же фоновый паттерн,
  те же пилюли-кнопки и скруглённые карточки, что и на исходном сайте.

  "tatami" — тёмный "арена"-режим (консоль судьи и табло): системные шрифты
  без внешних подключений — в отличие от сайта, эти две страницы обязаны
  выглядеть одинаково и с интернетом, и без него в зале.
*/
:root {
  --paper: #f7f3ec;
  --paper-raised: #fffaf3;
  --ink: #1d1a15;
  --ink-soft: #5f6f7e;
  --line: #cdb79e;
  --line-strong: #a6896b;

  --mat: #264e70; /* navy — основной цвет сайта */
  --mat-deep: #1b3a56;
  --ao: #264e70;
  --ao-soft: #e4ecf2;
  --shiro-line: #a6896b;
  --shido: #c6492c; /* терракота — акцент/CTA сайта */
  --shido-deep: #a53c22;
  --shido-soft: #f3e2d8;
  --gold: #a5653a;
  --gold-soft: #f3ede4;

  --radius-s: 4px;
  --radius-m: 16px;
  --radius-pill: 40px;
  --shadow-card: 0 4px 14px rgba(44, 36, 27, 0.06);
  --shadow-btn: 0 2px 6px rgba(198, 73, 44, 0.3);

  --font-display: 'Noto Serif JP', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", ui-monospace, monospace;

  /* Шкала отступов — раньше её не было вообще, каждый отступ был отдельным
     числом в em/px по месту. Новые компоненты (страница результатов и её
     переоформленная статистика) верстаются только ею. */
  --sp-1: 0.35rem;
  --sp-2: 0.7rem;
  --sp-3: 1.1rem;
  --sp-4: 1.8rem;
  --sp-5: 2.8rem;

  /* Цвета медалей — отдельно от --gold (это общий тёплый акцент сайта, а не
     "золото" конкретно: --gold-soft уже занят под подложку подиума). Нужны
     именно три разных цвета для командного зачёта клубов. */
  --medal-1-bg: #f3ede4;
  --medal-1-fg: #8a5a1f;
  --medal-1-line: #c9973f;
  --medal-2-bg: #f2f1ee;
  --medal-2-fg: #5f5f5f;
  --medal-2-line: #a8a8a8;
  --medal-3-bg: #f3e6dc;
  --medal-3-fg: #8a4a2a;
  --medal-3-line: #b9713f;
}

/* Тёмная тема публичных страниц (результаты/статистика) — раньше была
   продублирована дословно в трёх местах (results/index.html, stats.html,
   athlete/index.html), каждая копия со своим --mat: #ffffff. Чистый белый
   на тёмном фоне убивал иерархию заголовков (h1/h2/h3/.stat-pill b/номера в
   сетке — всё становилось одним и тем же белым, неотличимым от текста).
   Теперь одна копия здесь, с мягким синим вместо чистого белого — и общие
   компоненты (.card-label, .pill-row и т.п., см. ниже) получают тёмную тему
   бесплатно, без правки в каждом файле отдельно. */
:root[data-theme="dark"] {
  --paper: #0c0c0e;
  --paper-raised: #1a1a1e;
  --ink: #e7e5df;
  --ink-soft: #98979f;
  --line: #2e2e33;
  --line-strong: #46464c;
  --mat: #9ec4e8;
  --mat-deep: #c3dcf2;
  --ao: #9ec4e8;
  --ao-soft: #16252f;
  --shido: #dd091b;
  --shido-deep: #b5071a;
  --shido-soft: #2b0a0d;
  --gold: #cf9f66;
  --gold-soft: #241c14;
  --shadow-card: 0 8px 26px rgba(0, 0, 0, 0.55);
  --shadow-btn: 0 4px 16px rgba(221, 9, 27, 0.35);
  --medal-1-bg: #2a2013;
  --medal-1-fg: #e0b878;
  --medal-1-line: #a5793f;
  --medal-2-bg: #202024;
  --medal-2-fg: #b9b8bf;
  --medal-2-line: #4a4a52;
  --medal-3-bg: #241a17;
  --medal-3-fg: #d99070;
  --medal-3-line: #9b5238;
}
html[data-theme="dark"] body { background-image: none; }
html[data-theme="dark"] .topbar {
  background: rgba(12, 12, 14, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* .badge-done/.badge-pending — фон захардкожен (не переменными), т.к. это
   всегда "выполнено"/"ожидание" вне зависимости от акцентного цвета темы.
   Но захардкоженный СВЕТЛЫЙ фон на тёмной странице выглядел светлым пятном. */
html[data-theme="dark"] .badge-done { background: #14261c; color: #7fc97f; }
html[data-theme="dark"] .badge-pending { background: #232327; color: var(--ink-soft); }
html[data-theme="dark"] .badge-gold { background: var(--gold-soft); color: var(--gold); }
/* Кнопка переключения темы должна выглядеть как соседняя ссылка в шапке —
   .nav a не подходит для <button>, повторяем нужное вручную. */
#themeToggleBtn {
  background: none; border: none; cursor: pointer; padding: 0.3em 0;
  color: var(--mat); text-decoration: none; font-family: inherit; font-size: 0.95rem; font-weight: 500;
}
#themeToggleBtn:hover { color: var(--shido); }

/* tatami — тёмный "арена"-режим, палитра с реального табло score.html/viewer.html */
.theme-tatami {
  --bg: #000000;
  --panel: #14171a;
  --panel-line: #2a2f34;
  --text: #ffffff;
  --text-soft: #9aa0a6;

  --ao-bright: #2255ff;
  --ao-panel: #0a1a4d;
  --shiro-bright: #ffffff;
  --shiro-panel: #1c1c1c;
  --shido-bright: #ffaa00;
  --ippon-gold: #ffd700;
  --active-green: #00cc00;
  --stopped-red: #cc0000;
  --osaekomi-pink: #ff88ff;

  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(45deg, rgba(38, 78, 112, 0.02) 0px, rgba(38, 78, 112, 0.02) 2px, transparent 2px, transparent 8px),
    radial-gradient(circle at 20% 40%, rgba(200, 120, 80, 0.05) 0%, transparent 30%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.theme-tatami body,
body.theme-tatami {
  background: var(--bg);
  background-image: none;
  color: var(--text);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
  color: var(--mat);
}

h1 {
  font-size: 2.4rem;
}
h2 {
  font-size: 1.6rem;
}
h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--mat);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shido);
}

.theme-tatami .eyebrow {
  color: var(--text-soft);
}

/* Кнопки-пилюли, как на исходном сайте */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75em 1.6em;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn:focus-visible {
  outline: 2px solid var(--shido);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--shido);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: var(--shido-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(198, 73, 44, 0.25);
}
.btn-secondary {
  background: transparent;
  color: var(--mat);
  border-color: var(--mat);
}
.btn-secondary:hover {
  background: var(--mat);
  color: #fff;
}
.btn-danger {
  background: transparent;
  color: var(--shido);
  border-color: var(--shido);
}
.btn-danger:hover {
  background: var(--shido-soft);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-block {
  width: 100%;
  justify-content: center;
}
.btn-sm {
  font-size: 0.8rem;
  padding: 0.45em 1.1em;
  border-radius: var(--radius-pill);
}

/* Формы — как на исходной странице регистрации */
label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.35em;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fffdf9;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--shido);
  box-shadow: 0 0 0 3px rgba(198, 73, 44, 0.12);
}
.field {
  margin-bottom: 1.2em;
}
.field-hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.3em;
}
.field-error {
  font-size: 0.8rem;
  color: var(--shido);
  margin-top: 0.3em;
}

/* Карточки — скруглённые, как на исходном сайте */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 1.6em;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(38, 26, 15, 0.1); }
  html[data-theme="dark"] .card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Полоса ключевых цифр (сводка турнира, статистика) — иконка + число моно-
   шрифтом с tabular-nums (колонки цифр выравниваются, как и полагается
   данным) + мелкая подпись. Перенесено из stats.html — было заперто в
   локальном <style> одной страницы, теперь доступно любой странице. */
.pill-row { display: flex; flex-wrap: wrap; row-gap: 0.6em; margin: var(--sp-4) 0; }
.stat-pill { display: inline-flex; align-items: center; gap: 0.5em; padding: 0 1.1em; border-right: 1px solid var(--line); }
.stat-pill:last-child { border-right: none; }
.stat-pill .icon-svg { color: var(--shido); width: 1.05em; height: 1.05em; flex-shrink: 0; }
.stat-pill b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem; color: var(--mat); }
.stat-pill .pill-label { color: var(--ink-soft); font-size: 0.82rem; }

/* Заголовок карточки данных — не серифный (в отличие от h1/h2/h3 самой
   страницы): капитель, мелкий кегль, подчёркивание-акцент вместо цвета.
   Тоже перенесено из stats.html — тот же приём, что уже отличал заголовки
   карточек друг от друга без засечек "по-журнальному" на плотной панели
   чисел. Держится не на цвете текста, а на акцентной черте — поэтому не
   ломается в тёмной теме, где h1/h2/h3 и так уже не белые (см. выше). */
.card-label {
  margin: 0 0 0.75em; padding-bottom: 0.6em; position: relative;
  font-family: var(--font-body); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  display: flex; align-items: center; gap: 0.55em;
}
.card-label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--shido); border-radius: 2px; }
.card-label .icon-svg { color: var(--shido); width: 1.05em; height: 1.05em; flex-shrink: 0; }
.card .sub { color: var(--ink-soft); font-size: 0.82rem; margin: -0.5em 0 1em; }

@media (prefers-reduced-motion: no-preference) {
  .card-in { animation: card-in 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  @keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

.ledger {
  border-top: 1px solid var(--line-strong);
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.7em 0;
  border-bottom: 1px solid var(--line);
}

/* Широкие таблицы (Заявки/Взвешивание/Татами — много колонок) переполняли
   экран на планшете без возможности прокрутки — сама страница расползалась
   вбок. Тот же приём, что уже применялся к сеткам (.brk-table-wrap). */
.table-wrap { overflow-x: auto; width: 100%; }
table.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.sheet th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  padding: 0.5em 0.6em;
}
table.sheet td {
  padding: 0.55em 0.6em;
  border-bottom: 1px solid var(--line);
}
table.sheet tbody tr:hover {
  background: var(--paper);
}
/* Клик по заголовку — сортировка по этому столбцу (админка и кабинет тренера).
   ::after — тусклая подсказка "здесь можно сортировать", видна всегда; как только
   столбец реально отсортирован, JS вставляет .sort-arrow (▲/▼) прямо в заголовок —
   :has() прячет тусклую подсказку, чтобы не показывать два значка сразу. */
table.sheet th.sortable {
  cursor: pointer;
  user-select: none;
}
table.sheet th.sortable::after {
  content: '⇅';
  margin-left: 0.35em;
  font-size: 0.85em;
  opacity: 0.35;
}
table.sheet th.sortable:hover {
  color: var(--ink);
}
table.sheet th.sortable:hover::after {
  opacity: 0.7;
}
table.sheet th.sortable:has(.sort-arrow)::after {
  content: none;
}
table.sheet th .sort-arrow {
  margin-left: 0.3em;
  color: var(--shido);
}
table.sheet td.nowrap {
  white-space: nowrap;
}
/* Кнопки действий (Изменить/Удалить и т.п.) в последней колонке — в кабинете
   тренера и в админке. Флекс на span внутри td, а не на самой td (см. комментарий
   ниже про .fio-cell — та же причина). */
table.sheet td.app-actions-cell {
  white-space: nowrap;
}
table.sheet td.app-actions-cell .app-actions {
  display: inline-flex;
  gap: 0.5em;
}
/* Фамилия/Имя в два ряда внутри ячейки ФИО — в кабинете тренера и в админке.
   Обёрнуто в span, а не поставлено прямо на td: display:flex на самой ячейке
   таблицы ломает её как участницу строки (см. td.app-actions-cell выше).
   Обе строки — одним шрифтом/размером/цветом, имя не "вторично" по отношению
   к фамилии, просто перенесено на новую строку. */
.fio-cell {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
}

/* Ао/Сиро — функциональная маркировка соперников (два кимоно в дзюдо) */
.duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8em;
}
.duel-side {
  padding: 0.5em 0.7em;
  border-radius: var(--radius-s);
  font-weight: 600;
}
.duel-ao {
  background: var(--ao-soft);
  color: var(--ao);
  border: 1px solid var(--ao);
}
.duel-shiro {
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--shiro-line);
}
.duel-vs {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Статус-бейджи */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 999px;
}
.badge-ready {
  background: var(--ao-soft);
  color: var(--ao);
}
.badge-done {
  background: #e3efe7;
  color: #1e5138;
}
.badge-pending {
  background: #efece1;
  color: var(--ink-soft);
}
.badge-gold {
  background: var(--gold-soft);
  color: var(--gold);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
}
.container-narrow {
  max-width: 480px;
  margin: 0 auto;
  padding: 3rem 1.75rem;
}

/* Шапка — липкая, полупрозрачная, с размытием, как на исходном сайте */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1.75rem;
  background: rgba(255, 250, 243, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(205, 183, 158, 0.5);
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--mat);
  text-decoration: none;
  letter-spacing: 0.02em;
}
/* Имя + слоган в столбик рядом со значком — тот же слоган, что и на лендинге,
   здесь просто маленький, под названием, а не отдельной крупной строкой. */
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-tagline {
  font-family: var(--font-body); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--ink-soft);
}
.brand-mark {
  height: 1.8em;
  width: auto;
  flex-shrink: 0;
}
.nav {
  display: flex;
  gap: 1.8em;
  align-items: center;
}
.nav a {
  color: var(--mat);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.3em 0;
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--shido);
  transition: width 0.2s ease;
}
.nav a:hover,
.nav a.active {
  color: var(--shido);
}
.nav a:hover::after,
.nav a.active::after {
  width: 100%;
}

@media (max-width: 640px) {
  /* Шапка на узком экране: бренд + два пункта меню не помещаются в одну строку
     без переноса ("Результаты" наезжает на "ArenaPilot", "Регистрация" уезжает
     за край экрана) — сжимаем и разрешаем перенос на случай, если всё равно тесно. */
  .topbar { padding: 0.75em 1rem; flex-wrap: wrap; row-gap: 0.4em; }
  .brand { font-size: 1.05rem; gap: 0.4em; }
  .brand-mark { height: 1.5em; }
  .brand-tagline { font-size: 0.52rem; }
  .nav { gap: 1em; }
  .nav a { font-size: 0.85rem; }
  .container {
    padding: 1.5rem 1rem;
  }
  .duel {
    grid-template-columns: 1fr;
    text-align: center;
  }
  h1 {
    font-size: 1.9rem;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}