:root {
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --sub:#64748b;
  --accent:#2563eb;
  --border:#e2e8f0;
  --good:#16a34a;
  --bad:#dc2626;

  /* šířky sloupců ve Statistikách */
  --first-col:140px;
  --narrow:78px;
  --wide:110px;
}

/* Reset */
* { box-sizing:border-box; }
html, body {
  height:100%;
  width:100%;
  max-width:100vw;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  color:var(--text);
  overflow-x:hidden;
}

/* Header + nav */
header {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.wrap { max-width:980px; margin:0 auto; padding:12px 16px; }
.row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.grow { margin-left:auto; }
.nowrap { white-space:nowrap; }
h1 { font-size:18px; margin:0; font-weight:700; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:#0f172a; cursor:pointer; font-weight:600; text-decoration:none;
}
.btn:hover { background:#f8fafc; }
.btn.primary { background:#2563eb; color:#fff; border-color:transparent; }
.btn.small { padding:6px 10px; font-weight:600; }
.btn.block { display:flex; width:100%; }
.btn.icon { width:40px; height:40px; padding:0; font-size:20px; }

nav { display:flex; gap:8px; flex-wrap:wrap; }
.hamb { display:none; }
#btn-hamb { margin-left:auto; }

@media (max-width:720px){
  .hamb{display:inline-flex}
  nav{display:none}
  nav.open{display:flex;flex-direction:column;width:100%}
  header .wrap{flex-wrap:nowrap}

  #nav {
    display:none; flex-direction:column; background:#fff;
    position:absolute; top:60px; left:10px; padding:20px;
    width:calc(100% - 20px);
    border:1px solid var(--border); border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    animation:dropdown .2s ease-out;
    z-index:999;
  }
  #nav.open { display:flex; }
  @keyframes dropdown {
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
  }
}

/* Layout */
main { padding:20px 16px; }
.grid { display:grid; gap:16px;}
.cards { grid-template-columns:1fr; }
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .cards{grid-template-columns:repeat(4,1fr)} }

.card {
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:0 10px 18px -12px rgba(0,0,0,.15);
}
#view-stats .card {width: 100%}
#view-stats {justify-content: center;}

.card .head { padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700; }
.card .body { padding:16px; }
.muted { color:var(--sub); font-size:13px; }

.stat { padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.stat .label{font-size:12px;color:var(--sub)}
.stat .val{font-size:18px;font-weight:700}
.stat-match {display: flex; align-items: center; gap: 10px; border: none}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 10px;border-radius:999px;background:#eef2ff;border:1px solid #e5e7eb;cursor:pointer}
.chip:hover{background:#e0e7ff}

.pill{padding:12px;border-radius:12px;font-size:20px;border:1px solid var(--border);background:#fff}
.pill.ok{background:#ecfdf5;border-color:#bbf7d0}
.pill.off{background:#f1f5f9}

/* Inputs */
input,select {
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  width:100%; background:#fff;
}
.row-gap{display:flex;gap:8px;flex-wrap:wrap}
.hidden{display:none!important}

/* Týmy + seznamy */
.teams{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:740px){.teams{grid-template-columns:1fr 1fr}}

.list{display:grid;gap:8px}
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:#fff}
.item-in{flex:1; min-width:0;display: inline-flex;align-items: center;}
.title{font-weight:700}
.sub{font-size:14px;color:var(--sub);}
#view-stats .sub{width:120px;}
.center{text-align:center}
.score{display:flex;align-items:center;justify-content:center;gap:10px;font-size:28px;font-weight:700}
.divider{height:1px;background:var(--border);margin:10px 0}

/* zvýraznění řazení */
th.active{background:#eef2ff;color:#0f172a}
td.sorted{background:#f8fafc}

/* Databáze hráčů / seznam hráčů */
#view-players .list{gap:6px}
.player-item{padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.player-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.player-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inp-name-inline{flex:1;min-width:0;max-width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--border)}
.player-actions{display:flex;align-items:center;gap:6px;}
.team {display: flex;flex-direction: column;text-align: center;width:120px}
.team-score {display: flex;justify-content: center;width:100px}
.score{gap:20px !important;font-size: 16px;}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:10px;background:#fff;color:#0f172a;cursor:pointer}
.btn-icon:hover{background:#f8fafc}
.btn-icon.danger{color:#dc2626}
.status-dot{flex:0 0 auto;display:inline-block;vertical-align:middle;margin-right:6px}
.team-c {font-size: 15px;font-weight: 300;}
/* 👑 korunka pro rychlé zvolení kapitána */
.btn-icon.crown{font-size:16px;line-height:1}
@media (max-width:650px){
	.player-actions {flex-direction: row !important;}
	#view-stats .item {flex-direction: column;}
	#list-matches .item .sub {text-align: center;}
	#list-matches .item {align-items: normal;}
  .item-in{display:grid;width: 100%;justify-items: center;}
  #view-play .item-in{justify-items: flex-start;}
  .sub{margin:0px 0px 10px 0px;}
  .score {gap: 15px !important;width: 100%;flex-wrap: nowrap !important;}
  .team{width: 30%;}
  .team-score{width: 40%;}
  .pill{text-align: center;padding: 8px}
  #view-stats .stat{width: 25%;}
  #view-stats .stat-year{width: 45%;}
  #view-stats .stat-filter{width: 100%;}
}

/* řádek pro přidání hráče */
#view-players .body .row-gap:first-child{display:flex;align-items:stretch;gap:8px}
#inp-player{flex:1}
#btn-add{margin-left:auto;white-space:nowrap}
#view-players .row-gap button{padding:10px 20px}

/* ===================== STATISTIKY ===================== */
#view-stats .table-wrap{
  position:relative;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}
#view-stats .table-scroller{
  overflow-x: scroll;
  border-radius: 12px;
}
#view-stats .table-scroller table{
  display:inline-table;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
  width:max-content;
  min-width:unset;
}
#view-stats .table-wrap table{
  border-collapse:separate; border-spacing:0;
  width:max-content; min-width:unset;
  font-size:14px;
}
#view-stats thead th{
  padding:10px 8px;
  font-size:12px;
  text-transform:uppercase; 
  letter-spacing:.04em;
  color:var(--sub); 
  cursor:pointer; 
  user-select:none;
  white-space:nowrap; 
  vertical-align:middle;
}
#view-stats thead th .arrow{display:inline-block;margin-left:4px;opacity:.5}
#view-stats thead th:first-child,
#view-stats tbody td:first-child{
  position:sticky; 
  left:0;
  background:#fff;
  border-right:1px solid var(--border);
  white-space:nowrap;
}
#view-stats thead th:first-child{z-index:6}
#view-stats tbody td{padding:10px 8px;border-bottom:1px solid var(--border)}
#view-stats thead th:nth-child(1),
#view-stats tbody td:nth-child(1){text-align: left;}
#view-stats tbody td, #view-stats tbody th {text-align: center;}
#view-stats .row-gap>.stat{flex:3 1 100px;min-width:0}

/* ===================== Historie zápasů ===================== */
#list-matches .item{align-items:flex-start;padding:10px 12px}
#list-matches .item .title{display:flex;align-items:center;gap:0px !important;flex-wrap:wrap;font-weight:600}
#list-matches .item .sub{margin-top:2px}
#list-matches .item .pill{font-weight:700}
#list-matches .player-actions{flex:0 0 auto;align-self:center}
@media (max-width:520px){#list-matches .item{gap:8px}}

/* Footer + modal */
footer{padding:20px 16px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:16px;z-index: 9;}
.modal.open{display:flex}
.modal .panel{background:#fff;border-radius:16px;border:1px solid var(--border);width:min(520px,96vw);padding:16px}

@media (max-width:980px){
	#view-stats .row-gap {width: 100%}
	#view-stats .card {width: calc(100vw - 32px)}
	#view-stats .row-gap-input {width: 100% !important;}
  #view-stats .row-gap>.stat{flex:none;min-width:0}
}

.player-link { color: inherit; text-decoration: none; font-weight: 700; }
.player-link:hover { text-decoration: underline; }
/* --- Player detail (modal) ---- */
.player-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.player-id {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; background:#eef2ff; border:1px solid var(--border);
  font-weight:700;
}
.player-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
@media (max-width:560px){ .player-grid{ display: flex; flex-wrap: wrap; } }

.stat.small .label { font-size:11px; }
.stat.small .val { font-size:16px; }
.player-last {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.player-link { color: inherit; text-decoration: none; font-weight: 700; }
.player-link:hover { text-decoration: underline; }

/* --- Player detail: sekce a responzivní grid --- */
.player-sect { margin-top: 16px; }
.player-sect h3 { margin: 0 0 8px 0; font-size: 14px; color: var(--sub); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  gap: 10px;
}
.pm-pos .val { color: var(--good); }
.pm-neg .val { color: var(--bad); }

#view-stats td.pm-pos, 
#view-stats td.pm-neg { font-weight: 700; }

/* ==== [2025‑09‑09] Tabulka hráčů: čitelnost na PC + horizontální scroll ==== */
#view-stats .table-wrap { max-width: 100%; }

#view-stats .table-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* plynulý posun i na touchpadech */
}

/* výchozí minimální šířka pro všechny buňky kromě první */
#view-stats thead th,
#view-stats tbody td {
  min-width: var(--narrow); /* 78px */
}

/* jméno hráče – širší a sticky už je nastaveno výše */
#view-stats thead th:nth-child(1),
#view-stats tbody td:nth-child(1) {
  min-width: var(--first-col); /* 140px */
  text-align: left;
}

/* “širší” sloupce – docházka, obdržené góly, naposledy (C) */
#view-stats thead th.col-att,   #view-stats tbody td.col-att,
#view-stats thead th.col-ga,    #view-stats tbody td.col-ga,
#view-stats thead th.col-lastcap, #view-stats tbody td.col-lastcap {
  min-width: var(--wide); /* 110px */
  white-space: nowrap;
}

/* nezalamovat čísla/krátké texty, ať řádky neskáčou do dvou řádků */
#view-stats tbody td { white-space: nowrap; }

/* jemný náznak, že je tabulka posuvná */
#view-stats .table-scroller {
  position: relative;
}
#view-stats .table-scroller::after {
  content: "";
  position: sticky;
  right: 0; top: 0; bottom: 0;
  width: 16px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
}


/* ======= Toggle buttons for Payments ======= */
.toggle {
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; line-height:1; padding:8px 10px;
  border-radius:999px; border:1px solid var(--border); cursor:pointer; user-select:none;
  background:#fff; white-space:nowrap;
}
.toggle.bad { background: #fee2e2; border-color:#fecaca; color: var(--bad); }
.toggle.good { background: #dcfce7; border-color:#bbf7d0; color: var(--good); }
.toggle.neutral { background:#f1f5f9; border-color: var(--border); color: var(--sub); }
.toggle.small { padding:6px 10px; font-weight:700; }
.toggle[disabled] { opacity:.6; cursor: not-allowed; }


/* ===================== PLATBY – tabulka ve stylu Statistik ===================== */
#view-payments .tablewrap{
  position:relative;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}
#view-payments .tablewrap .table{
  border-collapse:separate; border-spacing:0;
  width:max-content; min-width:unset;
  font-size:14px;
}
#view-payments thead th{
  padding:10px 8px;
  font-size:12px;
  text-transform:uppercase; 
  letter-spacing:.04em;
  color:var(--sub); 
  white-space:nowrap; 
  vertical-align:middle;
}
#view-payments tbody td{padding:10px 8px;border-bottom:1px solid var(--border); white-space:nowrap;}
#view-payments thead th:nth-child(2),
#view-payments tbody td:nth-child(2){ /* Jméno */
  position:sticky; left:0; background:#fff; border-right:1px solid var(--border); min-width: var(--first-col);
}
#view-payments .num { text-align:right; }



/* ===== Platby: horizontální posuv a sticky hlavička + první sloupec ===== */
#view-payments .tablewrap{ overflow:auto; }
#view-payments .table { width:max-content; }
#view-payments thead th{ position: sticky; top:0; z-index: 2; background:#fff; }
#view-payments thead th:nth-child(2),
#view-payments tbody td:nth-child(2){ position: sticky; left:0; z-index: 3; background:#fff; }
#view-payments { --first-col: 115px; }
#view-payments thead th:nth-child(2), #view-payments tbody td:nth-child(2){ min-width: var(--first-col); }
#modal-payments .panel { height: 82vh;margin-top: 12vh;overflow: scroll;}