/* ============================================================
   GoalieStats – style.css  (light mode, tech/analytics)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --blue:       #0057FF;
  --blue-dark:  #0040CC;
  --blue-tint:  #EFF6FF;
  --blue-mid:   #DBEAFE;
  --ink:        #0A0F1E;
  --ink2:       #1E293B;
  --slate:      #475569;
  --muted:      #94A3B8;
  --hint:       #CBD5E1;
  --surface:    #F0F2F5;
  --surface2:   #F8FAFC;
  --white:      #FFFFFF;
  --border:     #E2E8F0;
  --border2:    #CBD5E1;
  --green:      #00B37D;
  --green-tint: #F0FDF4;
  --green-mid:  #DCFCE7;
  --red:        #E53935;
  --red-tint:   #FEF2F2;
  --red-mid:    #FEE2E2;
  --orange:     #F59E0B;
  --orange-tint:#FFFBEB;
  --font:       'Inter', sans-serif;
  --font-mono:  'DM Mono', monospace;
  --r:   8px;
  --r-lg:12px;
  --r-xl:16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 15px; min-height: 100vh; overscroll-behavior: none; }

/* AUTH */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; background:var(--surface); }
.auth-wrap { width:100%; max-width:400px; }
.auth-logo { display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:28px; }
.auth-logo-icon { width:40px; height:40px; background:var(--blue); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.auth-logo-icon svg { width:24px; height:24px; }
.auth-logo-name { font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.auth-logo-name span { color:var(--blue); }
.auth-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 24px; box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,87,255,.04); }
.auth-title { font-size:20px; font-weight:800; color:var(--ink); margin-bottom:4px; letter-spacing:-.03em; }
.auth-subtitle { font-size:13px; color:var(--slate); margin-bottom:20px; line-height:1.5; }
.auth-footer { text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
.auth-footer a { color:var(--blue); text-decoration:none; font-weight:600; }

/* FORMS */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:11px; font-weight:700; color:var(--slate); margin-bottom:5px; letter-spacing:.04em; text-transform:uppercase; }
.form-hint { font-weight:400; text-transform:none; color:var(--muted); letter-spacing:0; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 13px; font-size:14px; font-family:var(--font); background:var(--surface2); border:1.5px solid var(--border); border-radius:var(--r); color:var(--ink); outline:none; transition:border-color .15s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--blue); background:var(--white); }
.form-group textarea { resize:vertical; min-height:60px; }

/* BUTTONS */
.btn-primary { padding:11px 18px; font-size:14px; font-family:var(--font); font-weight:700; background:var(--blue); color:var(--white); border:none; border-radius:var(--r); cursor:pointer; transition:all .14s; display:inline-block; text-align:center; letter-spacing:.01em; }
.btn-primary:active { transform:scale(.97); background:var(--blue-dark); }
.btn-primary.btn-full { width:100%; }
.btn-primary.btn-lg { padding:14px; font-size:14px; font-weight:800; letter-spacing:.02em; }
.btn-outline { padding:9px 14px; font-size:13px; font-family:var(--font); font-weight:600; background:var(--white); color:var(--slate); border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; transition:all .14s; }
.btn-outline:hover, .btn-outline:active { background:var(--surface); border-color:var(--border2); color:var(--ink); }
.btn-outline.btn-sm { padding:7px 12px; font-size:12px; }
.icon-btn { width:32px; height:32px; border-radius:8px; border:1.5px solid var(--border); background:var(--white); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--slate); text-decoration:none; transition:all .14s; }
.icon-btn:hover { background:var(--surface); color:var(--ink); }
.icon-btn svg { width:15px; height:15px; }

/* ALERTS */
.alert { padding:10px 14px; border-radius:var(--r); font-size:13px; font-weight:500; margin-bottom:16px; }
.alert-danger  { background:var(--red-mid);   border:1.5px solid #FECACA; color:#991B1B; }
.alert-success { background:var(--green-mid); border:1.5px solid #BBF7D0; color:#166534; }

/* APP SHELL */
.app { max-width:480px; margin:0 auto; display:flex; flex-direction:column; min-height:100vh; }
.app-header { background:var(--white); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:12px 14px; gap:8px; position:sticky; top:0; z-index:10; }
.header-logo { display:flex; align-items:center; gap:9px; }
.logo-icon { width:30px; height:30px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-icon svg { width:17px; height:17px; }
.logo-name { font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.025em; line-height:1.1; }
.logo-name span { color:var(--blue); }
.logo-team { font-size:10px; color:var(--muted); font-weight:500; }
.header-actions { display:flex; gap:6px; }

/* NAV */
.app-nav { background:var(--surface2); border-bottom:1px solid var(--border); display:flex; padding:0 14px; }
.nav-btn { flex:1; padding:10px 4px 8px; font-size:10px; font-family:var(--font); font-weight:700; letter-spacing:.05em; border:none; background:none; color:var(--muted); cursor:pointer; transition:all .14s; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; text-transform:uppercase; }
.nav-btn svg { width:14px; height:14px; }
.nav-btn.active { color:var(--blue); }
.nav-btn.active::after { content:''; position:absolute; bottom:0; left:15%; right:15%; height:2px; background:var(--blue); border-radius:2px 2px 0 0; }

/* CONTENT */
.content { flex:1; padding:12px 14px 90px; background:var(--surface); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* CARDS */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; margin-bottom:10px; }
.card-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }

/* MATCH SELECTOR */
.match-selector { margin-bottom:10px; }
.match-selector-inner { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.match-current-name { font-size:14px; font-weight:700; color:var(--ink); margin-top:2px; }

/* TYPE GRID */
.type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.type-btn { padding:10px 8px; font-size:12.5px; font-family:var(--font); font-weight:600; border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; background:var(--surface2); color:var(--slate); transition:all .13s; text-align:center; }
.type-btn:active { transform:scale(.96); }
.type-btn.sel { background:var(--blue); color:var(--white); border-color:var(--blue); }

/* RESULT BUTTONS */
.result-row { display:flex; gap:8px; }
.result-btn { flex:1; padding:11px 6px; font-size:12.5px; font-family:var(--font); font-weight:700; border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; background:var(--surface2); color:var(--slate); transition:all .13s; text-align:center; }
.result-btn.sel-gol    { background:var(--red-tint);    border-color:#FCA5A5; color:#B91C1C; }
.result-btn.sel-zakrok { background:var(--green-tint);  border-color:#86EFAC; color:#15803D; }
.result-btn.sel-vedle  { background:var(--orange-tint); border-color:#FCD34D; color:#92400E; }

/* DIAGRAMS */
.diagram-wrap { position:relative; border-radius:var(--r); overflow:hidden; cursor:crosshair; user-select:none; -webkit-user-select:none; touch-action:none; }
.diagram-wrap svg { display:block; width:100%; }
.diagram-hint { font-size:10px; color:var(--hint); text-align:center; margin-top:5px; font-weight:500; letter-spacing:.02em; }

/* RECENT SHOTS */
.recent-header { display:flex; justify-content:space-between; align-items:center; margin:14px 0 6px; }
.shot-item { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--white); border:1px solid var(--border); border-radius:var(--r); margin-bottom:5px; }
.shot-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.shot-text { flex:1; font-size:12.5px; font-weight:500; color:var(--ink); }
.shot-sub { color:var(--muted); font-weight:400; }
.shot-who { font-size:10.5px; color:var(--hint); }
.shot-del { color:var(--hint); cursor:pointer; font-size:18px; line-height:1; padding:0 4px; }
.shot-del:hover { color:var(--red); }

/* STATS */
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.metric-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; }
.metric-val { font-size:28px; font-weight:800; font-family:var(--font-mono); line-height:1; letter-spacing:-.04em; }
.metric-val.blue  { color:var(--blue); }
.metric-val.green { color:var(--green); }
.metric-val.red   { color:var(--red); }
.metric-val.slate { color:var(--slate); }
.stat-row { display:flex; align-items:center; gap:7px; padding:7px 0; border-bottom:1px solid var(--border); }
.stat-row:last-child { border-bottom:none; }
.stat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.stat-name { flex:1; font-size:12.5px; font-weight:500; color:var(--ink2); }
.stat-n { font-size:11px; color:var(--muted); min-width:22px; text-align:right; font-family:var(--font-mono); }
.stat-pct { font-size:11px; font-family:var(--font-mono); font-weight:500; min-width:38px; text-align:right; }
.bar-bg { flex:0 0 66px; height:4px; background:var(--border); border-radius:2px; }
.bar-fill { height:4px; border-radius:2px; transition:width .3s; }

/* TREND */
.trend-chart { display:flex; align-items:flex-end; gap:6px; padding:8px 0; overflow-x:auto; }
.trend-col { display:flex; flex-direction:column; align-items:center; min-width:44px; gap:4px; }
.trend-label { font-size:11px; font-family:var(--font-mono); color:var(--slate); }
.trend-name { font-size:9px; color:var(--muted); text-align:center; max-width:44px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trend-legend { display:flex; gap:14px; font-size:11px; color:var(--muted); margin-top:8px; align-items:center; }
.trend-legend span { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle; }

/* HEATMAP */
.heat-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin:14px 0 8px; }
.heat-title:first-child { margin-top:0; }
.heat-wrap { position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.heat-count { font-size:10px; color:var(--hint); text-align:center; margin:5px 0 14px; font-weight:500; }

/* MATCH LIST */
.match-item { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:all .13s; }
.match-item:hover, .match-item.active-match { border-color:var(--blue); background:var(--blue-tint); }
.match-item-top { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.match-item-name { font-size:14px; font-weight:700; color:var(--ink); }
.match-item-meta { display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--muted); align-items:center; }

/* BADGES */
.badge { font-size:10px; padding:3px 7px; border-radius:5px; font-weight:700; letter-spacing:.03em; }
.badge-green { background:var(--green-mid); color:#166534; }
.badge-red   { background:var(--red-mid);   color:#991B1B; }
.badge-blue  { background:var(--blue-mid);  color:#1D4ED8; }
.badge-slate { background:var(--surface);   color:var(--slate); border:1px solid var(--border); }

/* CHIPS */
.filter-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip { padding:5px 12px; font-size:11px; font-family:var(--font); font-weight:600; background:var(--white); border:1.5px solid var(--border); border-radius:20px; cursor:pointer; color:var(--slate); transition:all .12s; }
.chip.active { background:var(--blue); border-color:var(--blue); color:var(--white); }

/* MODAL */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(10,15,30,.45); z-index:100; align-items:flex-end; justify-content:center; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--white); border-radius:20px 20px 0 0; border:1px solid var(--border); padding:20px 18px 32px; width:100%; max-width:480px; animation:slideUp .2s ease; box-shadow:0 -4px 24px rgba(0,0,0,.08); }
@keyframes slideUp { from { transform:translateY(60px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-title { font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.modal-close { width:28px; height:28px; border:none; background:none; color:var(--muted); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.modal-btns { display:flex; gap:8px; margin-top:14px; }
.modal-btns .btn-primary, .modal-btns .btn-outline { flex:1; }

/* TOAST */
.toast { position:fixed; bottom:88px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--ink); color:var(--white); border-radius:20px; padding:9px 18px; font-size:13px; font-weight:600; opacity:0; transition:all .22s; pointer-events:none; z-index:200; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--red); }

/* MISC */
.label-small { font-size:11px; color:var(--muted); font-weight:500; }
.link-danger { font-size:11px; color:var(--red); cursor:pointer; font-weight:600; }
.empty-state { text-align:center; padding:40px 16px; }
.empty-icon { width:46px; height:46px; background:var(--surface); border:1px solid var(--border); border-radius:12px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; }
.empty-icon svg { width:22px; height:22px; color:var(--hint); }
.empty-state p { font-size:13px; color:var(--muted); font-weight:500; }
.loading { padding:24px; text-align:center; font-size:13px; color:var(--muted); font-weight:500; }
.section-sub { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin:16px 0 8px; }

/* ── Video modul ───────────────────────────────────────────── */
.video-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--blue-mid); color:#1D4ED8; }
.clip-btn { padding:5px 10px; font-size:11px; font-weight:700; background:var(--blue); color:var(--white); border:none; border-radius:6px; cursor:pointer; flex-shrink:0; }
.clip-btn:active { transform:scale(.95); }
#video-player-inner video { background:#000; }
#clip-video-wrap { background:#000; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; min-height:180px; }



/* System font stack - náhrada za Google Fonts Inter */
:root {
  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
}