/* ==========================================================================
   sp.css — единый дизайн системы отчётов СПОРТПЛАНЕР / ФТР
   Светлая тема, цвета из герба федерации. Никаких внешних библиотек:
   Bootstrap убран, ничего не тянется с CDN — страница открывается сразу.
   ========================================================================== */

:root {
  /* Фирменные цвета */
  --navy-900:#0B2545;  --navy-800:#12345C;  --navy-700:#173F70;
  --blue-600:#1665C0;  --blue-500:#2B7FE0;  --blue-050:#EAF2FD;
  --red-600:#D8232A;   --red-050:#FDECEC;

  /* Нейтральные */
  --bg:#F4F6FA;  --surface:#FFFFFF;  --surface-2:#FAFBFD;
  --border:#E4E8F0;  --border-strong:#CFD6E4;
  --text:#101828;  --text-2:#475467;  --muted:#8A94A6;

  /* Статусы */
  --live:#067647;    --live-bg:#E7F6EE;
  --soon:#175CD3;    --soon-bg:#EAF1FE;
  --done:#5C6675;    --done-bg:#F2F4F7;
  --warn:#B54708;    --warn-bg:#FEF3E2;

  --radius:12px;  --radius-sm:8px;  --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 4px 14px rgba(16,24,40,.07);
  --shadow-3:0 12px 32px rgba(16,24,40,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--blue-600); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0; font-weight:650; letter-spacing:-.01em; color:var(--navy-900); }
h1 { font-size:25px; }
h2 { font-size:19px; }
h3 { font-size:16px; }
p  { margin:0 0 10px; }

/* ------------------------------------------------------------------ шапка */
.sp-top {
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-1);
}
.sp-top__in {
  max-width:1720px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:18px;
}
.sp-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.sp-brand img { height:44px; width:auto; display:block; }
.sp-brand__t { font-size:19px; font-weight:650; color:var(--navy-900); white-space:nowrap; }
.sp-brand__s { font-size:13px; color:var(--muted); margin-top:1px; }
.sp-top__right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.sp-user { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-2); }
.sp-user__dot {
  width:34px; height:34px; border-radius:50%; flex:0 0 34px;
  background:linear-gradient(135deg,var(--blue-600),var(--navy-800));
  color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ----------------------------------------------------------------- каркас */
.sp-wrap { max-width:1720px; margin:0 auto; padding:24px 28px 56px; }
.sp-page-head { display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.sp-page-head p { color:var(--text-2); font-size:13px; margin:4px 0 0; }
.sp-spacer { margin-left:auto; }

.sp-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.sp-card__head {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.sp-card__body { padding:20px; }

/* ------------------------------------------------------------ показатели */
.sp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.sp-stat {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.sp-stat::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue-600);
}
.sp-stat--accent::before { background:var(--red-600); }
.sp-stat__k { font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.sp-stat__v { font-size:32px; font-weight:700; color:var(--navy-900); line-height:1.15; margin-top:3px; letter-spacing:-.02em; }
.sp-stat__s { font-size:13px; color:var(--text-2); margin-top:2px; }
.sp-stat__list { margin:8px 0 0; padding:0; list-style:none; font-size:14.5px; color:var(--text-2); }
.sp-stat__list li { display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.sp-stat__list b { color:var(--text); font-weight:600; }
.sp-scroll-y { max-height:150px; overflow:auto; }

/* -------------------------------------------------------------- элементы */
.sp-btn {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:600 14.5px/1 var(--font); padding:10px 17px;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); white-space:nowrap;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.sp-btn:hover { background:var(--surface-2); border-color:var(--muted); text-decoration:none; }
.sp-btn:active { transform:translateY(1px); }
.sp-btn--primary { background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.sp-btn--primary:hover { background:var(--blue-500); border-color:var(--blue-500); }
.sp-btn--accent { background:var(--red-600); border-color:var(--red-600); color:#fff; }
.sp-btn--accent:hover { filter:brightness(1.07); }
.sp-btn--ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.sp-btn--ghost:hover { background:var(--surface-2); color:var(--text); }
.sp-btn--sm { padding:7px 13px; font-size:13.5px; }

.sp-input, .sp-select {
  width:100%; font:15px/1.2 var(--font); color:var(--text);
  padding:10px 13px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s;
}
.sp-input:focus, .sp-select:focus {
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-050);
}
.sp-input::placeholder { color:var(--muted); }
.sp-search { position:relative; flex:1 1 340px; min-width:220px; }
.sp-search .sp-input { padding-left:36px; }
.sp-search__i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.sp-search__k {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--muted); border:1px solid var(--border);
  border-radius:5px; padding:1px 5px; background:var(--surface-2);
}

/* фильтры-чипы */
.sp-chips { display:flex; flex-wrap:wrap; gap:7px; }
.sp-chip {
  cursor:pointer; user-select:none; font:600 13.5px/1 var(--font);
  padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2);
  transition:all .15s;
}
.sp-chip:hover { border-color:var(--blue-500); color:var(--blue-600); }
.sp-chip[aria-pressed="true"] { background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.sp-chip__n { opacity:.65; margin-left:5px; font-weight:500; }

/* бейджи статусов */
.sp-badge {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font:600 12.5px/1 var(--font); padding:5px 10px; border-radius:var(--radius-pill);
}
.sp-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sp-badge--live   { color:var(--live); background:var(--live-bg); }
.sp-badge--soon   { color:var(--soon); background:var(--soon-bg); }
.sp-badge--done   { color:var(--done); background:var(--done-bg); }
.sp-badge--nodate { color:var(--warn); background:var(--warn-bg); }

.sp-pill {
  display:inline-block; font:600 12.5px/1 var(--font); padding:5px 9px;
  border-radius:6px; background:var(--blue-050); color:var(--navy-700);
  border:1px solid #D6E4F8;
}
.sp-num { font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- таблица */
.sp-table-wrap { overflow:auto; border-radius:var(--radius); }
table.sp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; }
table.sp-table th {
  position:sticky; top:0; z-index:5; background:var(--surface-2);
  text-align:left; font:600 12px/1.2 var(--font); text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); white-space:nowrap;
  padding:13px 14px; border-bottom:1px solid var(--border);
}
table.sp-table th.sortable { cursor:pointer; user-select:none; }
table.sp-table th.sortable:hover { color:var(--blue-600); }
table.sp-table th .sp-sort { opacity:.35; margin-left:4px; font-size:10px; }
table.sp-table th[data-dir="asc"]  .sp-sort,
table.sp-table th[data-dir="desc"] .sp-sort { opacity:1; color:var(--blue-600); }
table.sp-table td {
  padding:13px 14px; border-bottom:1px solid var(--border);
  vertical-align:middle; color:var(--text-2);
}
table.sp-table tbody tr { transition:background .12s; }
table.sp-table tbody tr:hover td { background:var(--blue-050); }
table.sp-table tbody tr:last-child td { border-bottom:none; }
table.sp-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.sp-table td.mid { text-align:center; }
table.sp-table .t-name { color:var(--text); font-weight:600; font-size:15.5px; }
table.sp-table .t-sub  { color:var(--muted); font-size:13px; margin-top:3px; }
table.sp-table .t-idx  { color:var(--muted); font-variant-numeric:tabular-nums; width:52px; }
table.sp-table tr.is-hidden { display:none; }

/* компактный режим */
body.compact table.sp-table td { padding:7px 11px; }
body.compact table.sp-table th { padding:9px 11px; }
body.compact table.sp-table .t-name { font-size:14px; }

/* ------------------------------------------------------------ сообщения */
.sp-note {
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 17px; border-radius:var(--radius-sm); font-size:14.5px;
  background:var(--warn-bg); color:#7A3B08; border:1px solid #F5D9AE; margin-bottom:16px;
}
.sp-note--info { background:var(--blue-050); color:var(--navy-700); border-color:#D6E4F8; }
.sp-note--err  { background:var(--red-050); color:#912; border-color:#F6C9C9; }
.sp-empty { padding:48px 20px; text-align:center; color:var(--muted); }
.sp-empty__t { font-size:18px; font-weight:600; color:var(--text-2); margin-bottom:6px; }

.sp-foot {
  margin-top:24px; padding-top:16px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;
}

/* ---------------------------------------------------------------- формы */
.sp-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sp-field { display:flex; flex-direction:column; gap:5px; }
.sp-label { font:600 12px/1 var(--font); color:var(--text-2); }

/* ------------------------------------------------------------ страница входа */
.sp-login { min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, #E8F0FB 0%, var(--bg) 60%); }
.sp-login__card {
  width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-3);
  padding:34px 32px;
}
.sp-login__logo { display:block; height:52px; margin:0 auto 18px; }
.sp-login__t { text-align:center; font-size:20px; font-weight:650; color:var(--navy-900); }
.sp-login__s { text-align:center; color:var(--muted); font-size:13px; margin:4px 0 24px; }
.sp-login .sp-field { margin-bottom:14px; }
.sp-login .sp-btn { width:100%; justify-content:center; padding:11px; font-size:15px; }

/* ------------------------------------------------------------- разделы отчёта */
.sp-section { margin-bottom:20px; }
.sp-section__h {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.sp-section__h h2 { font-size:18px; }
.sp-section__h::after { content:''; flex:1; height:1px; background:var(--border); }
.sp-kv { width:100%; border-collapse:collapse; font-size:15.5px; }
.sp-kv th {
  text-align:left; font-weight:600; color:var(--text-2); width:230px;
  padding:11px 16px 11px 0; border-bottom:1px solid var(--border); vertical-align:top; font-size:14.5px;
}
.sp-kv td { padding:11px 0; border-bottom:1px solid var(--border); color:var(--text); }
.sp-kv tr:last-child th, .sp-kv tr:last-child td { border-bottom:none; }

.sp-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }

/* --------------------------------------------------------------- печать */
@media print {
  .sp-top, .sp-toolbar, .no-print, .sp-foot, .sp-chips { display:none !important; }
  body { background:#fff; }
  .sp-wrap { max-width:none; padding:0; }
  .sp-card { border:none; box-shadow:none; }
  .sp-section { break-inside:avoid; }
  table.sp-table th { position:static; }
}

/* ------------------------------------------------------------ адаптивность */
@media (max-width:820px) {
  .sp-top__in, .sp-wrap { padding-left:14px; padding-right:14px; }
  .sp-brand__s, .sp-user span { display:none; }
  h1 { font-size:19px; }
  .sp-stat__v { font-size:23px; }
}


/* ==========================================================================
   Лоадер перехода между страницами. Показывается по клику на внутреннюю
   ссылку и блокирует повторные клики, пока страница грузится, — заодно
   отсекает лишние запросы от двойных нажатий.
   ========================================================================== */
.sp-load {
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:22px;
  background:rgba(244,246,250,.86); backdrop-filter:blur(3px);
  animation:sp-fade .18s ease-out;
}
.sp-load.is-on { display:flex; }
@keyframes sp-fade { from { opacity:0 } to { opacity:1 } }

.sp-load__ball { width:64px; height:64px; animation:sp-spin 1.15s linear infinite; }
@keyframes sp-spin { to { transform:rotate(360deg) } }

.sp-load__t {
  font:700 15px/1 var(--font); letter-spacing:.24em; text-transform:uppercase;
  color:var(--navy-900);
}
.sp-load__s { font:500 13.5px/1 var(--font); color:var(--muted); margin-top:-14px; }

.sp-load__bar { width:210px; height:4px; border-radius:4px; background:#DDE4EE; overflow:hidden; }
.sp-load__bar i {
  display:block; height:100%; width:40%; border-radius:4px;
  background:linear-gradient(90deg,var(--blue-600),var(--red-600));
  animation:sp-slide 1.05s ease-in-out infinite;
}
@keyframes sp-slide {
  0%   { transform:translateX(-100%) }
  100% { transform:translateX(310%) }
}

/* тонкая полоса прогресса у верхней кромки окна */
.sp-progress {
  position:fixed; top:0; left:0; height:3px; width:0; z-index:9100;
  background:linear-gradient(90deg,var(--blue-600),var(--red-600));
  transition:width .25s ease-out; box-shadow:0 0 8px rgba(22,101,192,.5);
}
@media print { .sp-load, .sp-progress { display:none !important; } }