/* =====================================================================
   FireSport Results – vzhľad
   Paleta:  --ink (podklad), --panel, --line, --fire (akcent),
            --amber (medaily), --stream (voda / prúdy), --text, --muted
   Typografia: Barlow Condensed (nadpisy), IBM Plex Sans (text),
               IBM Plex Mono (časy a čísla – „stopky“)
   ===================================================================== */

:root {
  --ink:      #0E1116;
  --panel:    #161B22;
  --panel-2:  #1C222C;
  --line:     #262E3A;
  --fire:     #E8442A;
  --fire-dim: rgba(232, 68, 42, .14);
  --amber:    #FFB020;
  --stream:   #1FA8C7;
  --green:    #22C55E;
  --text:     #E6EDF5;
  --muted:    #8B98A9;
  --radius:   14px;
  --shadow:   0 10px 30px rgba(0,0,0,.35);
  /* kategórie: muži modrá, ženy červená */
  --sex-m:    #3B82F6;
  --sex-z:    #EC4899;
}

* { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { max-width: 100%; overflow-x: hidden; }
.topbar-inner { min-width: 0; }
.topbar-inner > * { min-width: 0; }

body {
  background:
    radial-gradient(900px 420px at 50% -180px, rgba(232,68,42,.16), transparent 70%),
    var(--ink);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  padding-bottom: 84px;
  min-height: 100vh;
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

h1, h2, h3, h4, h5, .display-font, .page-title, .card-title, .stat-value {
  font-family: 'Barlow Condensed', 'IBM Plex Sans', sans-serif;
  letter-spacing: .02em;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--fire); }
hr { border-color: var(--line); opacity: 1; }
::selection { background: var(--fire); color: #fff; }
:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }

/* ---------- Horná lišta ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(14,17,22,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 58px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #FFFFFF; }
.brand:hover { color: #FFFFFF; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(160deg, var(--fire), #B4241A); color: #fff; font-size: 16px; }
.brand-text span { color: var(--fire); }

.topnav { display: flex; gap: 4px; margin-left: 10px; }
.topnav-link {
  padding: 7px 14px; border-radius: 999px; color: var(--muted);
  font-weight: 600; font-size: 14px; transition: .15s;
}
.topnav-link:hover { color: var(--text); background: var(--panel); }
.topnav-link.is-active { color: #fff; background: var(--fire-dim); box-shadow: inset 0 0 0 1px rgba(232,68,42,.4); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.user-chip { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line);
  color: var(--text); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 14px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--fire), #8E1B12); color: #fff; font-size: 12px; font-weight: 700; }

/* ---------- Spodná lišta (mobil) ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
  display: flex; background: rgba(14,17,22,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 2px 8px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.tabbar-link i { font-size: 19px; }
.tabbar-link.is-active { color: var(--fire); }

/* ---------- Stránka ---------- */
.page { padding-top: 22px; padding-bottom: 40px; }
.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted);
  font-size: 13px; margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fire); }
.crumbs i { font-size: 10px; opacity: .6; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-size: clamp(26px, 5vw, 38px); font-weight: 700; text-transform: uppercase;
  margin: 0; line-height: 1.05; }
.page-title::after { content: ''; display: block; width: 54px; height: 3px; margin-top: 9px;
  background: var(--fire); border-radius: 2px; }
.page-sub { color: var(--muted); margin: 10px 0 0; font-size: 14px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Panely ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-title { font-size: 19px; font-weight: 700; text-transform: uppercase; margin: 0;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .04em; }
.panel-body { padding: 16px; }
.panel-body.p-0 { padding: 0; }

/* ---------- Štatistické dlaždice ---------- */
.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 18px; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.stat-value { font-size: 30px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.stat-value.mono { font-family: 'IBM Plex Mono', monospace; font-size: 26px; }
.stat-note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat.accent { border-color: rgba(232,68,42,.45); background: linear-gradient(160deg, var(--fire-dim), var(--panel)); }

/* ---------- Časy ---------- */
.time { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.time-final { font-size: 19px; font-weight: 700; }
.time-diff { color: var(--muted); font-size: 12px; font-family: 'IBM Plex Mono', monospace; }
.time-none { color: var(--muted); }

/* Signature: dvojica prúdov LP / PP */
.streams { display: flex; flex-direction: column; gap: 3px; min-width: 132px; }
.stream { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; font-size: 12px; }
.stream-code { color: var(--muted); font-weight: 700; font-size: 10px; letter-spacing: .1em; }
.stream-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stream-bar span { display: block; height: 100%; background: var(--stream); border-radius: 3px; }
.stream.is-final .stream-bar span { background: var(--fire); }
.stream-val { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.stream.is-final .stream-val { color: var(--fire); font-weight: 700; }
.stream.is-void .stream-val { color: var(--muted); text-decoration: line-through; }

/* ---------- Odznaky ---------- */
.badge-soft { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.st-valid   { color: var(--green);  border-color: rgba(34,197,94,.35);  background: rgba(34,197,94,.10); }
.st-invalid { color: var(--fire);   border-color: rgba(232,68,42,.35);  background: rgba(232,68,42,.10); }
.st-dnf     { color: var(--amber);  border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.10); }
.st-dns     { color: var(--muted); }
.ev-live    { color: #fff; background: var(--fire); border-color: var(--fire); animation: pulse 1.8s infinite; }
.ev-finished{ color: var(--muted); }
.ev-planned { color: var(--stream); border-color: rgba(31,168,199,.35); background: rgba(31,168,199,.10); }
.ev-cancelled { color: var(--muted); text-decoration: line-through; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,68,42,.55); } 50% { box-shadow: 0 0 0 6px rgba(232,68,42,0); } }
@media (prefers-reduced-motion: reduce) { .ev-live { animation: none; } }

/* ---------- Umiestnenie ---------- */
.place { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--line); font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 16px; }
.pl-gold   { background: linear-gradient(160deg,#FFD76E,#E5A100); color: #241A00; border-color: #E5A100; }
.pl-silver { background: linear-gradient(160deg,#E4E9F0,#9AA6B5); color: #14181E; border-color: #9AA6B5; }
.pl-bronze { background: linear-gradient(160deg,#E2A46A,#B06A2C); color: #1B1005; border-color: #B06A2C; }

/* ---------- Zoznam udalostí (flashscore) ---------- */
.fs-list { display: flex; flex-direction: column; }
.fs-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); transition: background .12s; }
.fs-row:last-child { border-bottom: 0; }
.fs-row:hover { background: var(--panel-2); }
.fs-date { text-align: center; min-width: 44px; }
.fs-day { font-family: 'Barlow Condensed', sans-serif; font-size: 21px; font-weight: 700; line-height: 1; }
.fs-mon { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.fs-name { font-weight: 600; }
.fs-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.fs-go { color: var(--muted); }

/* Riadok výsledku */
.res-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line); }
.res-row:last-child { border-bottom: 0; }
.res-row:hover { background: var(--panel-2); }
.res-team { font-weight: 600; }
.res-club { color: var(--muted); font-size: 12px; }
.res-right { display: flex; align-items: center; gap: 14px; }
.res-row.is-winner { background: linear-gradient(90deg, rgba(255,176,32,.10), transparent 60%); }

/* ---------- Tabuľky / DataTables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); margin-bottom: 0; }
.table > :not(caption) > * > * { border-color: var(--line); padding: 10px 12px; }
.table thead th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; border-bottom: 1px solid var(--line) !important; white-space: nowrap; }
.table tbody tr:hover > * { background: var(--panel-2); }
.table-clickable tbody tr { cursor: pointer; }

div.dataTables_wrapper { padding: 12px 14px 4px; }
.dataTables_filter input, .dataTables_length select {
  background: var(--panel-2) !important; border: 1px solid var(--line) !important; color: var(--text) !important;
  border-radius: 9px !important; padding: 5px 10px !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--muted) !important; font-size: 13px; }
.page-link { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.page-item.active .page-link { background: var(--fire); border-color: var(--fire); color: #fff; }
.page-link:hover { background: var(--line); color: var(--text); }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr > td.dtr-control:before { background-color: var(--fire) !important; border: 0 !important; }

/* ---------- Formuláre ---------- */
.form-control, .form-select, .input-group-text {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 12px; }
.form-control:focus, .form-select:focus {
  background: var(--panel-2); color: var(--text); border-color: var(--fire); box-shadow: 0 0 0 3px var(--fire-dim); }
.form-control::placeholder { color: #5D6B7C; }
.form-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  font-weight: 700; margin-bottom: 5px; }
.form-text { color: var(--muted); font-size: 12px; }
.input-time { font-family: 'IBM Plex Mono', monospace; font-size: 20px; text-align: center; letter-spacing: .02em; }

.btn { border-radius: 10px; font-weight: 600; }
.btn-accent { background: var(--fire); border-color: var(--fire); color: #fff; }
.btn-accent:hover, .btn-accent:focus { background: #CF3520; border-color: #CF3520; color: #fff; }
.btn-ghost { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--line); color: var(--text); }

.alert { border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.alert-success { border-color: rgba(34,197,94,.4);  background: rgba(34,197,94,.10); }
.alert-danger  { border-color: rgba(232,68,42,.4);  background: rgba(232,68,42,.10); }
.alert-warning { border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.10); }
.alert-info    { border-color: rgba(31,168,199,.4); background: rgba(31,168,199,.10); }

.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.nav-tabs .nav-link { color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  font-weight: 600; padding: 9px 14px; }
.nav-tabs .nav-link:hover { color: var(--text); }
.nav-tabs .nav-link.active { color: var(--text); background: transparent; border-bottom-color: var(--fire); }

.dropdown-menu { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.dropdown-item { color: var(--text); border-radius: 8px; }
.dropdown-item:hover { background: var(--panel-2); color: var(--text); }
.modal-content { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--line); }

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty i { font-size: 38px; color: var(--line); display: block; margin-bottom: 10px; }

/* ---------- Prihlásenie ---------- */
.auth-wrap { max-width: 430px; margin: 6vh auto; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 26px; box-shadow: var(--shadow); }

/* ---------- Pätička ---------- */
.sitefoot { border-top: 1px solid var(--line); margin-top: 30px; padding: 22px 0 26px; background: rgba(0,0,0,.2); }
.sitefoot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.sitefoot-links { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); }
.sitefoot-links a { color: var(--muted); font-size: 13px; }

/* ---------- Správa ---------- */
.admin-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .admin-grid { grid-template-columns: repeat(3, 1fr); } }
.admin-tile { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; transition: .15s; }
.admin-tile:hover { border-color: var(--fire); transform: translateY(-2px); color: var(--text); }
.admin-tile i { font-size: 22px; color: var(--fire); }
.admin-tile h3 { font-size: 18px; margin: 8px 0 3px; text-transform: uppercase; }
.admin-tile p { color: var(--muted); font-size: 13px; margin: 0; }

.text-muted { color: var(--muted) !important; }
.mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- Stav bez pripojenia (PWA) ---------- */
.offline-bar {
  position: sticky; top: 58px; z-index: 1029;
  background: var(--amber); color: #241A00;
  font-size: 13px; font-weight: 600; text-align: center;
  padding: 7px 14px;
}
.offline-bar i { margin-right: 6px; }
@media (display-mode: standalone) {
  /* v nainštalovanej aplikácii nepotrebujeme odkazy v pätičke */
  .sitefoot-links { display: none; }
  body { padding-bottom: 96px; }
}

/* ---------- Séria dochádzky ---------- */
.streak { display: flex; flex-wrap: wrap; gap: 6px; }
.streak-dot { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; border: 1px solid var(--line); background: var(--panel-2); }
.stream-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stream-bar > span { display: block; height: 100%; background: var(--fire); border-radius: 3px; }

/* ---------- Vyhľadávanie v hlavnej lište ---------- */
.topsearch {
  display: flex; align-items: center; gap: 8px; flex: 0 1 320px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; margin-left: auto; transition: border-color .15s, flex-basis .15s;
}
.topsearch:focus-within { border-color: var(--fire); flex-basis: 400px; }
.topsearch i { color: var(--muted); font-size: 14px; }
.topsearch input {
  background: none; border: 0; outline: none; color: var(--text);
  font-size: 14px; width: 100%; font-family: inherit;
}
.topsearch input::placeholder { color: #5D6B7C; }
.topbar-right { margin-left: 12px; }

/* ---------- Select2 v tmavej téme ---------- */
.select2-container--bootstrap-5 .select2-selection {
  background: var(--panel-2) !important; border: 1px solid var(--line) !important;
  color: var(--text) !important; border-radius: 10px !important; min-height: 42px;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--fire) !important; box-shadow: 0 0 0 3px var(--fire-dim) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--text) !important; line-height: 28px;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: #5D6B7C !important; }
.select2-container--bootstrap-5 .select2-dropdown {
  background: var(--panel) !important; border-color: var(--line) !important;
  border-radius: 12px !important; box-shadow: var(--shadow);
}
.select2-container--bootstrap-5 .select2-search__field {
  background: var(--panel-2) !important; border: 1px solid var(--line) !important;
  color: var(--text) !important; border-radius: 8px !important;
}
.select2-container--bootstrap-5 .select2-results__option { color: var(--text); padding: 8px 12px; }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background: var(--fire) !important; color: #fff !important; }
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] { background: var(--panel-2) !important; }
.select2-results__options { max-height: 320px; }

/* ---------- Neverejné udalosti ---------- */
.ev-private { color: var(--amber); border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.10); }

/* ---------- Filtračná lišta a stránkovanie veľkých zoznamov ---------- */
.filterbar { position: sticky; top: 58px; z-index: 1020; background: rgba(14,17,22,.94);
  backdrop-filter: blur(10px); padding: 12px 0; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.alpha-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.alpha-nav a { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px; font-weight: 600; }
.alpha-nav a:hover { color: var(--text); border-color: var(--fire); }
.alpha-nav a.is-active { background: var(--fire); border-color: var(--fire); color: #fff; }
.result-count { color: var(--muted); font-size: 13px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 16px; }
.pager a, .pager span { padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; }
.pager .is-active { background: var(--fire); border-color: var(--fire); color: #fff; }
.pager .is-dots { border-color: transparent; background: none; color: var(--muted); }

@media (max-width: 991px) { .filterbar { top: 0; } }

/* ---------- Podružné menu (sekcie správy, kategórie, číselníky) ---------- */
.subnav {
  display: flex; gap: 2px; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 5px; margin-bottom: 18px;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { height: 5px; }
.subnav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.subnav-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 15px; border-radius: 9px; color: var(--muted);
  font-weight: 600; font-size: 14px; transition: background .12s, color .12s;
}
.subnav-link i { font-size: 15px; opacity: .85; }
.subnav-link:hover { background: var(--panel-2); color: var(--text); }
.subnav-link.is-active { background: var(--fire); color: #fff; }
.subnav-link.is-active i { opacity: 1; }
.subnav-link .count {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,.14); font-variant-numeric: tabular-nums;
}
.subnav-link:not(.is-active) .count { background: var(--panel-2); color: var(--muted); }

/* oddeľovač v menu (napr. pred nastaveniami) */
.subnav-sep { width: 1px; background: var(--line); margin: 6px 6px; flex: 0 0 auto; }

/* ---------- Filtračná lišta ---------- */
.filterbar .form-label { margin-bottom: 4px; }
.filterbar .select2-container { min-height: 42px; }

/* Select2 nad lepiacimi lištami a tabuľkami */
.select2-container { z-index: 1055; }
.select2-container--open { z-index: 1056; }

/* v lepiacej lište nech výber nevytŕča */
.filterbar .select2-container--bootstrap-5 .select2-selection { min-height: 42px; }

/* ---------- Zoznam oprávnení v profile ---------- */
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.caps li { display: flex; gap: 11px; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.caps li i { color: var(--fire); font-size: 16px; margin-top: 2px; }

/* ---------- AJAX zoznamy ---------- */
.js-ajax-list { transition: opacity .15s; position: relative; }
.js-ajax-list.is-loading { opacity: .45; pointer-events: none; }
.js-ajax-list.is-loading::after {
  content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='14' fill='none' stroke='%23E8442A' stroke-width='3' stroke-dasharray='60 30'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 17 17' to='360 17 17' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center 60px;
}

/* ---------- Našepkávač vo vyhľadávaní ---------- */
.topsearch { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1040;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; display: none; min-width: 320px;
}
.suggest.is-open { display: block; }
.suggest a { display: flex; gap: 10px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover { background: var(--panel-2); }
.suggest i { color: var(--fire); font-size: 15px; }
.suggest span { display: flex; flex-direction: column; min-width: 0; }
.suggest strong { font-size: 14px; font-weight: 600; }
.suggest em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- Ukazovateľ uloženia (dochádzka) ---------- */
.save-flag { font-size: 11px; font-weight: 600; letter-spacing: .04em; min-height: 14px; display: block; }
.save-flag.is-saving { color: var(--muted); }
.save-flag.is-ok { color: var(--green); }
.save-flag.is-err { color: var(--fire); }

/* ---------- Živý prepočet času pri zápise ---------- */
.live-time { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; min-height: 20px; }
.live-time.is-ok { color: var(--text); }
.live-time strong { font-family: 'IBM Plex Mono', monospace; color: var(--fire); font-size: 16px; }

/* ---------- AJAX zoznamy ---------- */
.js-ajax-list { position: relative; transition: opacity .12s; }
.js-ajax-list.is-loading { opacity: .45; pointer-events: none; }
.js-ajax-list.is-loading::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(232,68,42,.15), transparent 60%);
}
.list-head { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 16px 0; }

/* ---------- Našepkávač vyhľadávania ---------- */
.topsearch { position: relative; }
.suggest {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; z-index: 1050; min-width: 320px;
}
.suggest.is-open { display: block; }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover { background: var(--panel-2); color: var(--text); }
.suggest a > i { color: var(--fire); font-size: 15px; }
.suggest a span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suggest a em { font-style: normal; color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-type { flex: 0 0 auto !important; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; }
.suggest-more { justify-content: center; color: var(--fire) !important; font-weight: 600; }

/* ---------- Stav ukladania riadku dochádzky ---------- */
tr.is-saving { opacity: .55; }
tr.is-saved > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tr.is-error > td:first-child { box-shadow: inset 3px 0 0 var(--fire); }
tr.is-saved, tr.is-error { transition: box-shadow .2s; }

/* ===================================================================
   TLAČ – z tmavého portálu spraví čistú výsledkovku na papier
   =================================================================== */
@media print {
  @page { size: A4; margin: 12mm; }

  /* preč všetko, čo na papieri nemá čo hľadať */
  .topbar, .tabbar, .sitefoot, .filterbar, .subnav, .page-actions,
  .crumbs, .offline-bar, .pager, .alert, .btn, .dataTables_filter,
  .dataTables_length, .dataTables_paginate, .dataTables_info,
  .suggest, .nav-tabs, form { display: none !important; }

  /* aktívna záložka výsledkov sa musí vytlačiť aj so skrytými susedmi */
  .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }

  html, body {
    background: #fff !important; color: #000 !important;
    font-size: 10.5pt; padding: 0 !important;
  }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .page { padding: 0 !important; }
  .panel {
    background: #fff !important; border: 0 !important; box-shadow: none !important;
    margin: 0 0 10pt !important; break-inside: auto;
  }
  .panel-head { border-bottom: 1.5pt solid #000 !important; padding: 0 0 4pt !important; }
  .panel-title, .page-title { color: #000 !important; }
  .page-title { font-size: 20pt; }
  .page-title::after { background: #E8442A !important; }
  .page-sub, .text-muted, .res-club, .fs-meta { color: #444 !important; }
  .panel-body { padding: 0 !important; }

  /* tabuľky s čitateľnými linkami */
  .table { color: #000 !important; }
  .table > :not(caption) > * > * {
    border-color: #bbb !important; padding: 4pt 6pt !important; background: #fff !important;
  }
  .table thead th {
    color: #000 !important; border-bottom: 1pt solid #000 !important;
    background: #eee !important; font-size: 8pt;
  }
  thead { display: table-header-group; }   /* hlavička sa opakuje na každej strane */
  tr, .res-row, .fs-row { break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }

  /* výsledkový riadok */
  .res-row { border-bottom: 0.5pt solid #ccc !important; padding: 4pt 0 !important; }
  .place { border: 0.5pt solid #666 !important; background: #fff !important; color: #000 !important; }
  .pl-gold, .pl-silver, .pl-bronze { background: #eee !important; }
  .time, .time-final { color: #000 !important; }
  .badge-soft { border: 0.5pt solid #999 !important; background: #fff !important; color: #000 !important; }
  .streams { display: none !important; }   /* pruhy prúdov nemajú na papieri zmysel */

  /* dlaždice a grafy von */
  .stat-grid, canvas, .admin-grid, .streak { display: none !important; }

  /* hlavička dokumentu doplnená cez CSS */
  .print-only { display: block !important; }
}

.print-only { display: none; }

/* ---------- Nadpisy okruhov ---------- */
.section-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin: 26px 0 12px; display: flex; align-items: center; gap: 12px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-title:first-of-type { margin-top: 8px; }

/* ---------- Kontextová rada pod nadpisom ---------- */
.pagehelp {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(31,168,199,.08); border: 1px solid rgba(31,168,199,.28);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 18px;
  font-size: 13.5px; color: var(--text);
}
.pagehelp > i { color: var(--stream); font-size: 16px; margin-top: 1px; }
.pagehelp > div { flex: 1; }
.pagehelp a { color: var(--stream); text-decoration: underline; }
.pagehelp-close { background: none; border: 0; color: var(--muted); padding: 0 2px; font-size: 12px; }
.pagehelp-close:hover { color: var(--text); }
.pagehelp.is-hidden { display: none; }

/* ---------- Postup nastavenia ---------- */
.progress-bar-outer { height: 8px; border-radius: 4px; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden; }
.progress-bar-outer > span { display: block; height: 100%;
  background: linear-gradient(90deg, var(--fire), var(--amber)); transition: width .4s; }
.setup-nudge { border-color: rgba(232,68,42,.4);
  background: linear-gradient(160deg, var(--fire-dim), var(--panel)); }

.steps { display: grid; gap: 12px; margin-bottom: 18px; }
.step { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; }
.step.is-done { opacity: .72; }
.step-mark { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; }
.step.is-done .step-mark { background: var(--green); border-color: var(--green); color: #06210f; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700;
  text-transform: uppercase; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.step-desc { color: var(--muted); font-size: 13.5px; margin: 0 0 10px; }
.step-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Príručka ---------- */
.guide-toc { position: sticky; top: 74px; }
.guide-toc .panel-body { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.guide-toc a { padding: 8px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 600; }
.guide-toc a:hover { background: var(--panel-2); color: var(--text); }
.guide-toc a.is-active { background: var(--fire-dim); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(232,68,42,.35); }
.guide p { line-height: 1.65; }
.guide section { scroll-margin-top: 80px; }
.guide ul, .guide ol { line-height: 1.7; }
@media (max-width: 991px) { .guide-toc { position: static; } }

/* ===================================================================
   SVETLÁ TÉMA – prepína sa tlačidlom v hlavnej lište, predvolená je tmavá
   =================================================================== */
[data-theme="light"] {
  --sex-m:    #1D4ED8;
  --sex-z:    #BE185D;
  --ink:      #eef1f5;
  --panel:    #ffffff;
  --panel-2:  #f4f7fa;
  --line:     #e2e7ed;
  --fire:     #D93B22;
  --fire-dim: rgba(217, 59, 34, .10);
  --amber:    #C77800;
  --stream:   #14719F;
  --green:    #16803C;
  --text:     #16202C;
  --muted:    #63707F;
  --shadow:   0 1px 2px rgba(16,22,31,.07), 0 6px 18px rgba(16,22,31,.06);
}

[data-theme="light"] body {
  background: var(--ink);
}
[data-theme="light"] .topbar {
  background: #10161F; border-bottom: 0;
}
[data-theme="light"] .topnav-link { color: rgba(230,237,245,.72); }
[data-theme="light"] .topnav-link:hover { color: #fff; background: rgba(255,255,255,.10); }
[data-theme="light"] .topnav-link.is-active { color: #fff; background: var(--fire); box-shadow: none; }
[data-theme="light"] .user-chip,
[data-theme="light"] .topsearch { background: rgba(255,255,255,.10); border-color: transparent; }
[data-theme="light"] .topsearch input { color: #fff; }
[data-theme="light"] .topsearch input::placeholder,
[data-theme="light"] .topsearch i { color: rgba(230,237,245,.55); }
[data-theme="light"] .tabbar { background: var(--panel); box-shadow: 0 -2px 12px rgba(16,22,31,.08); }
[data-theme="light"] .tabbar-link { color: var(--muted); }
[data-theme="light"] .tabbar-link.is-active { color: var(--fire); }
[data-theme="light"] .form-control::placeholder { color: #94A0AE; }
[data-theme="light"] .table thead th { background: var(--panel-2); }
[data-theme="light"] .fs-go, [data-theme="light"] .empty i { color: #C3CBD5; }
[data-theme="light"] .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.5); }
[data-theme="light"] .pl-gold, [data-theme="light"] .pl-silver, [data-theme="light"] .pl-bronze { color: #14181E; }

/* prepínač témy */
.theme-toggle {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 15px;
}
.theme-toggle:hover { border-color: var(--fire); color: var(--fire); }
[data-theme="light"] .theme-toggle { background: rgba(255,255,255,.10); border-color: transparent; color: #fff; }

/* ===================================================================
   KATEGÓRIE MUŽI / ŽENY – jednotné farebné odlíšenie v celom systéme
   =================================================================== */
.sex { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid transparent; white-space: nowrap; }
.sex i { font-size: 11px; }
.sex-m { color: var(--sex-m); background: color-mix(in srgb, var(--sex-m) 12%, transparent);
  border-color: color-mix(in srgb, var(--sex-m) 40%, transparent); }
.sex-z { color: var(--sex-z); background: color-mix(in srgb, var(--sex-z) 12%, transparent);
  border-color: color-mix(in srgb, var(--sex-z) 40%, transparent); }

/* pruh pri riadku a karte podľa kategórie */
.row-sex-m { box-shadow: inset 3px 0 0 var(--sex-m); }
.row-sex-z { box-shadow: inset 3px 0 0 var(--sex-z); }
.tab-sex-m.is-active, .nav-link.tab-sex-m.active { border-bottom-color: var(--sex-m) !important; }
.tab-sex-z.is-active, .nav-link.tab-sex-z.active { border-bottom-color: var(--sex-z) !important; }
.subnav-link.tab-sex-m.is-active { background: var(--sex-m); }
.subnav-link.tab-sex-z.is-active { background: var(--sex-z); }

/* prepínač kategórie – jednoduchší filter než rozbaľovací zoznam */
.segmented { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.segmented .btn { border: 0; background: none; color: var(--muted); font-weight: 600;
  font-size: 14px; padding: 7px 14px; border-radius: 8px; display: inline-flex;
  align-items: center; gap: 6px; }
.segmented .btn:hover { color: var(--text); }
.segmented .btn-check:checked + .btn { background: var(--fire); color: #fff; }
.segmented .btn-check:checked + .btn.sex-m { background: var(--sex-m); color: #fff; }
.segmented .btn-check:checked + .btn.sex-z { background: var(--sex-z); color: #fff; }
.segmented .btn.sex-m, .segmented .btn.sex-z { background: none; border: 0; }

/* ---------- Rozbaľovacie menu akcií v hlavičke stránky ---------- */
.page-actions .dropdown-menu { min-width: 232px; padding: 6px; }
.page-actions .dropdown-item { padding: 8px 10px; font-size: 14px; }
.page-actions .dropdown-header { font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); padding: 6px 10px 4px; }
.page-actions .dropdown-item i { color: var(--muted); width: 16px; }
.page-actions .dropdown-item:hover i { color: var(--fire); }
.page-actions .dropdown-item.text-danger i { color: inherit; }
@media (max-width: 575px) {
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .page-actions .dropdown { flex: 0 0 auto; }
}

/* ---------- Akcie stránky: jedno tlačidlo + rozbaľovacie menu ---------- */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-actions .dropdown-toggle::after { margin-left: 6px; }
.page-actions .dropdown-menu { min-width: 240px; padding: 6px; }
.page-actions .dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border-radius: 8px; font-size: 14px; font-weight: 500;
}
.page-actions .dropdown-item i { font-size: 15px; color: var(--muted); width: 18px; text-align: center; }
.page-actions .dropdown-item:hover i { color: var(--fire); }
.page-actions .dropdown-item.text-danger i { color: inherit; }
.page-actions .dropdown-divider { margin: 5px 2px; }

@media (max-width: 575px) {
  .page-actions { width: 100%; }
  .page-actions > .btn, .page-actions > .dropdown { flex: 1; }
  .page-actions > .dropdown > .btn { width: 100%; }
}

/* ---------- Oddeľovač na prihlasovacej stránke ---------- */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-divider span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
#fsBiometric i, #fsBiometricAdd i { font-size: 18px; vertical-align: -2px; margin-right: 6px; }

/* ===================================================================
   ŽIVÝ PRENOS
   =================================================================== */
.livebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, var(--fire-dim), transparent 70%);
  border: 1px solid rgba(232,68,42,.42); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
}
.livebar strong { color: var(--fire); text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: .08em; font-size: 16px; }
.livebar .live-text { color: var(--muted); }
.livebar .live-time { margin-left: auto; color: var(--muted); font-size: 12px;
  font-family: 'IBM Plex Mono', monospace; }
.livebar .live-pause { background: none; border: 1px solid var(--line); color: var(--muted);
  width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; }
.livebar .live-pause:hover { color: var(--text); border-color: var(--fire); }
.livebar.is-paused { background: none; border-color: var(--line); }
.livebar.is-finished { background: none; border-color: var(--line); }
.livebar.is-finished strong { color: var(--muted); }

.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fire);
  box-shadow: 0 0 0 0 rgba(232,68,42,.6); animation: livepulse 1.6s infinite; flex: 0 0 auto; }
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,68,42,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(232,68,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,68,42,0); }
}
.livebar.is-paused .live-dot { animation: none; background: var(--muted); }

/* zvýraznenie čerstvo zapísaného a zmeneného riadku */
[data-attempt].is-new    { animation: rowin 3.5s ease-out; }
[data-attempt].is-changed { animation: rowchange 3.5s ease-out; }
@keyframes rowin {
  0%   { background: rgba(34,197,94,.30); }
  100% { background: transparent; }
}
@keyframes rowchange {
  0%   { background: rgba(255,176,32,.30); }
  100% { background: transparent; }
}
.stat-value.is-changed { animation: statpop 2.2s ease-out; }
@keyframes statpop {
  0%   { color: var(--fire); transform: scale(1.08); }
  100% { color: inherit; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot, [data-attempt].is-new, [data-attempt].is-changed, .stat-value.is-changed { animation: none; }
  [data-attempt].is-new { box-shadow: inset 3px 0 0 var(--green); }
  [data-attempt].is-changed { box-shadow: inset 3px 0 0 var(--amber); }
}

/* odznak na zoznamoch udalostí */
.ev-live .live-dot { width: 7px; height: 7px; margin-right: 5px; display: inline-block; vertical-align: middle; }

/* ---------- História pokusov po kategóriách ---------- */
.cat-block { border-bottom: 1px solid var(--line); }
.cat-block:last-child { border-bottom: 0; }
.cat-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--panel-2); }
.cat-title { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
  display: flex; align-items: center; gap: 8px; }
.cat-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.cat-best strong { color: var(--amber); margin-left: 4px; }
tr.is-best > td   { background: rgba(31,168,199,.08); }
tr.is-best .time-final { color: var(--stream); font-weight: 700; }
tr.is-attack > td { background: rgba(255,176,32,.08); }
tr.is-best.is-attack > td {
  background: linear-gradient(90deg, rgba(31,168,199,.10), rgba(255,176,32,.10));
}

/* ---------- Označenie najlepšieho pokusu a zostreku ---------- */
.has-mark { position: relative; }
.has-mark .res-row { border-left: 3px solid var(--amber); padding-left: 13px; }
.marks { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 10px 16px; margin-top: -6px; }
.mark { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; }
.mark-attempt { color: var(--stream); background: rgba(31,168,199,.12); border: 1px solid rgba(31,168,199,.35); }
.mark-attack  { color: var(--amber);  background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.38); }

/* ---------- Bez internetu: miesto grafu ---------- */
.chart-off { display: grid; place-items: center; min-height: 120px; padding: 18px;
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted);
  font-size: 13px; text-align: center; }

/* triedenie tabuliek v offline režime */
table.js-datatable thead th, table.js-sortable thead th { user-select: none; }
table.js-datatable thead th:hover, table.js-sortable thead th:hover { color: var(--text); }

/* ---------- Ročenka ---------- */
.yearbook { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.yb-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.yb-item span { display: block; color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.yb-item strong { display: block; font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.1; }
.yb-item em { display: block; font-style: normal; color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* ---------- Blok ligy v prehľade sezón ---------- */
.league-block { border-top: 1px solid var(--line); }
.league-head { padding: 9px 16px; background: var(--panel-2); font-weight: 600; font-size: 14px; }
.league-head i { color: var(--amber); margin-right: 6px; }
.league-head a { color: var(--text); }
.league-head a:hover { color: var(--fire); }

/* ---------- Vektorové ikony (offline režim) ---------- */
.btn .bi, .dropdown-item .bi { width: 1.05em; height: 1.05em; }
.subnav-link .bi { width: 1.05em; height: 1.05em; }
.admin-tile .bi { width: 1.6em; height: 1.6em; }
.bd-flame .bi { width: 1.1em; height: 1.1em; }
.empty .bi { width: 2.2em; height: 2.2em; }

/* ---------- Plocha pre grafy ---------- */
.chart-box { position: relative; height: 240px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }
canvas[data-chart], #timeChart, #eventChart, #statusChart, #monthChart, #memberChart {
  min-height: 200px;
}

/* ===================================================================
   SVETLÁ TÉMA – doplnenie komponentov, ktoré ju nemali
   =================================================================== */
[data-theme="light"] .pagehelp {
  background: rgba(20,113,159,.07); border-color: rgba(20,113,159,.25);
}
[data-theme="light"] .filterbar {
  background: rgba(238,241,245,.95); border-bottom-color: var(--line);
}
[data-theme="light"] .step { background: var(--panel); }
[data-theme="light"] .step-mark { background: var(--panel-2); }
[data-theme="light"] .step.is-done .step-mark { background: var(--green); color: #fff; }
[data-theme="light"] .progress-bar-outer { background: var(--panel-2); }
[data-theme="light"] .suggest { background: var(--panel); }
[data-theme="light"] .suggest a:hover { background: var(--panel-2); }
[data-theme="light"] .caps li { background: var(--panel-2); }
[data-theme="light"] .pager a, [data-theme="light"] .pager span { background: var(--panel); }
[data-theme="light"] .pager .is-active { background: var(--fire); color: #fff; }
[data-theme="light"] .alpha-nav a { background: var(--panel); }
[data-theme="light"] .alpha-nav a.is-active { background: var(--fire); color: #fff; }
[data-theme="light"] .badge-soft { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
[data-theme="light"] .place { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
[data-theme="light"] .fs-row:hover, [data-theme="light"] .res-row:hover { background: var(--panel-2); }
[data-theme="light"] .cat-head, [data-theme="light"] .league-head { background: var(--panel-2); }
[data-theme="light"] .yb-item { background: var(--panel-2); }
[data-theme="light"] .subnav { background: var(--panel); }
[data-theme="light"] .subnav-link:hover { background: var(--panel-2); }
[data-theme="light"] .livebar { background: linear-gradient(90deg, var(--fire-dim), transparent 70%); }
[data-theme="light"] .setup-nudge { background: linear-gradient(160deg, var(--fire-dim), var(--panel)); }
[data-theme="light"] .mark-attempt { background: rgba(20,113,159,.10); border-color: rgba(20,113,159,.30); }
[data-theme="light"] .mark-attack { background: rgba(199,120,0,.12); border-color: rgba(199,120,0,.32); }
[data-theme="light"] tr.is-best > td { background: rgba(20,113,159,.07); }
[data-theme="light"] tr.is-attack > td { background: rgba(199,120,0,.09); }
[data-theme="light"] .chart-off { border-color: var(--line); }
[data-theme="light"] .stat.accent { background: linear-gradient(160deg, var(--fire-dim), var(--panel)); }
[data-theme="light"] .admin-tile { background: var(--panel); }
[data-theme="light"] .admin-tile:hover { border-color: var(--fire); }
[data-theme="light"] .dropdown-menu { background: var(--panel); }
[data-theme="light"] .dropdown-item:hover { background: var(--panel-2); }
[data-theme="light"] .form-check-input { border-color: var(--line); }
[data-theme="light"] .btn-ghost { background: var(--panel); border-color: var(--line); }
[data-theme="light"] .btn-ghost:hover { background: var(--panel-2); }
[data-theme="light"] .cat-best strong { color: var(--amber); }
[data-theme="light"] .sitefoot { border-top-color: var(--line); }
[data-theme="light"] .offline-bar { background: var(--amber); color: #201400; }

/* ===================================================================
   RÝCHLY ZÁPIS ČASOV
   Veľké polia, jasné stavy, použiteľné jednou rukou pri základni.
   =================================================================== */
.quick-new { border-color: rgba(232,68,42,.35); }
.quick-new .form-control-lg, .quick-new .form-select-lg {
  font-size: 18px; padding: .65rem .8rem;
}
.quick-time { font-family: 'IBM Plex Mono', monospace; text-align: center; font-weight: 600; }
.quick-hint { color: var(--muted); font-size: 12.5px; margin-top: 10px; }
.quick-hint kbd { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }

.quick-list { display: flex; flex-direction: column; }
.quick-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  transition: background .2s, box-shadow .2s;
}
.quick-row:last-child { border-bottom: 0; }
.quick-row.is-saving { opacity: .6; }
.quick-row.is-saved  { box-shadow: inset 4px 0 0 var(--green); background: rgba(34,197,94,.06); }
.quick-row.is-error  { box-shadow: inset 4px 0 0 var(--fire); background: rgba(232,68,42,.07); }

.qr-team { min-width: 0; }
.qr-team strong { display: block; font-size: 15.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.qr-team span { color: var(--muted); font-size: 12px; }

.qr-times { display: flex; gap: 8px; }
.qr-time { display: flex; flex-direction: column; gap: 2px; }
.qr-time span { color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; text-align: center; }
.qr-time input {
  width: 92px; text-align: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 16px; font-weight: 600; padding: .35rem .4rem;
}

.qr-result { text-align: right; min-width: 96px; }
.qr-final { font-family: 'IBM Plex Mono', monospace; font-size: 19px; font-weight: 700; }
.qr-status { margin-top: 2px; }

.qr-actions { display: flex; align-items: center; gap: 6px; }
.qr-actions .form-select { width: auto; min-width: 84px; }

@media (max-width: 767px) {
  .quick-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .qr-times { grid-column: 1 / 2; }
  .qr-result { grid-row: 1 / 2; grid-column: 2 / 3; }
  .qr-actions { grid-column: 2 / 3; justify-content: flex-end; }
  .qr-time input { width: 84px; font-size: 17px; padding: .45rem .4rem; }
  .quick-new .form-control-lg { font-size: 19px; }
}

/* ---------- Výber správcov udalosti ---------- */
.manager-list { display: grid; gap: 6px; max-height: 300px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.manager-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: 8px; cursor: pointer; }
.manager-item:hover { background: var(--panel-2); }
.manager-item span { display: flex; flex-direction: column; line-height: 1.25; }
.manager-item em { font-style: normal; color: var(--muted); font-size: 12px; }

/* ===================================================================
   PRÍRUČKA – vizuálne prvky
   =================================================================== */
.guide h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 10px; }
.guide h3:first-child { margin-top: 0; }
.guide p { line-height: 1.7; }
.guide .lead { font-size: 15.5px; color: var(--text); }

/* obrázok / schéma */
.figure { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin: 16px 0; }
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption { color: var(--muted); font-size: 12.5px; margin-top: 10px; text-align: center; }

/* postupnosť krokov */
.flow { display: grid; gap: 10px; margin: 16px 0; }
.flow-step { display: flex; gap: 12px; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.flow-num { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fire); color: #fff; font-weight: 700; font-size: 13px; }
.flow-step strong { display: block; margin-bottom: 2px; }
.flow-step span { color: var(--muted); font-size: 13.5px; }

/* dlaždice s pojmami */
.terms { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 16px 0; }
.term { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.term b { display: block; font-size: 15px; margin-bottom: 4px; }
.term span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.term.accent { border-color: rgba(232,68,42,.4); }
.term.amber  { border-color: rgba(255,176,32,.4); }

/* matica rolí */
.matrix { font-size: 13px; }
.matrix th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.matrix td:first-child { text-align: left; }
.matrix td { text-align: center; }
.matrix .yes { color: var(--green); font-weight: 700; }
.matrix .own { color: var(--amber); font-weight: 700; font-size: 11px; }
.matrix .no  { color: var(--line); }

/* klávesová skratka */
kbd { background: var(--panel-2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 7px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }

/* upozornenie v texte */
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; margin: 14px 0;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 13.5px; }
.note i { font-size: 16px; margin-top: 1px; }
.note-tip  { border-color: rgba(31,168,199,.35); background: rgba(31,168,199,.08); }
.note-warn { border-color: rgba(255,176,32,.38); background: rgba(255,176,32,.08); }
.note-tip i  { color: var(--stream); }
.note-warn i { color: var(--amber); }

/* ===================================================================
   POROVNANIE DRUŽSTIEV
   =================================================================== */
.cmp-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.cmp-side { text-align: center; padding: 14px 10px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); }
.cmp-side span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-side strong { font-family: 'Barlow Condensed', sans-serif; font-size: 40px;
  font-weight: 700; line-height: 1; }
.cmp-side.is-lead { border-color: var(--fire); background: var(--fire-dim); }
.cmp-side.is-lead strong { color: var(--fire); }
.cmp-mid { text-align: center; color: var(--muted); }
.cmp-mid span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.cmp-mid strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 24px; }
.cmp-mid em { font-style: normal; font-size: 11.5px; }

.cmp-win { color: var(--green); font-weight: 700; }
.cmp-table td:first-child { color: var(--muted); }
.cmp-table tbody tr:hover { background: var(--panel-2); }

@media (max-width: 575px) {
  .cmp-side strong { font-size: 30px; }
  .cmp-score { gap: 8px; }
}

/* ===================================================================
   ODSADENIE A VRSTVENIE – doladenie pre mobil
   =================================================================== */

/* Obsah sa nikdy nesmie dotýkať kraja obrazovky. Platí aj vtedy,
   keď sa nepoužije mriežka Bootstrapu. */
.container-xl, .container, .container-fluid {
  padding-left: 16px; padding-right: 16px;
}
@media (min-width: 992px) {
  .container-xl, .container { padding-left: 24px; padding-right: 24px; }
}

/* Panely na úzkej obrazovke: menšie vnútorné odsadenie, ale nie nula */
@media (max-width: 575px) {
  .page { padding-top: 16px; padding-bottom: 32px; }
  .panel { border-radius: 12px; }
  .panel-head { padding: 12px 14px; }
  .panel-body { padding: 14px; }
  .fs-row, .res-row, .quick-row { padding-left: 14px; padding-right: 14px; }
  .cat-head, .league-head, .list-head { padding-left: 14px; padding-right: 14px; }
  .table > :not(caption) > * > * { padding-left: 10px; padding-right: 10px; }
  .table-responsive { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .filterbar { padding: 12px 0; }
  .page-title { font-size: 26px; }
  .stat { padding: 12px 14px; }
  .yearbook { gap: 10px; }
}

/* Aby sa dlhé názvy nelepili na okraj a nepretekali */
.panel-title, .page-title, .res-team, .fs-name, .qr-team strong { overflow-wrap: anywhere; }

/* ---------- vrstvenie: menu musí byť vždy nad obsahom ---------- */
.page-head { position: relative; z-index: 1035; }
.page-actions .dropdown-menu { z-index: 1060; }
.subnav { position: relative; z-index: 1010; }
.filterbar { z-index: 1005; }

/* rozbaľovacie menu vnútri tabuľky nesmie byť orezané */
.table-responsive { overflow-x: auto; overflow-y: visible; }
.table-responsive:has(.dropdown-menu.show) { overflow: visible; }

/* na mobile sa menu akcií otvorí zarovnané k pravému okraju obrazovky */
@media (max-width: 575px) {
  .page-actions { width: 100%; }
  .page-actions .dropdown { position: static; }
  .page-actions .dropdown-menu { left: 16px; right: 16px; width: auto; min-width: 0; }
}

/* ---------- Horná lišta: vždy svetlý text na tmavom podklade ---------- */
[data-theme="light"] .brand,
[data-theme="light"] .brand:hover,
[data-theme="light"] .brand-text { color: #FFFFFF; }
[data-theme="light"] .brand-text span { color: #FF7A5C; }   /* jasnejšia červená kvôli kontrastu */
[data-theme="light"] .topbar .btn-ghost {
  background: rgba(255,255,255,.12); border-color: transparent; color: #fff;
}
[data-theme="light"] .topbar .btn-ghost:hover { background: rgba(255,255,255,.2); }
[data-theme="light"] .topbar .user-chip { color: #fff; }
[data-theme="light"] .topbar .dropdown-menu { color: var(--text); }
[data-theme="light"] .theme-toggle { color: #fff; }
[data-theme="light"] .topbar i { color: inherit; }

/* v tmavej téme necháme pôvodný odtieň */
.brand-text span { color: var(--fire); }

/* ===================================================================
   NAČÍTAVANIE, SPÄŤ HORE, VRSTVENIE MENU
   =================================================================== */

/* ---------- načítavacia vrstva ---------- */
.fs-loading {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--ink); transition: opacity .25s ease, visibility .25s;
}
.fs-loading.is-done { opacity: 0; visibility: hidden; }
.fs-loading-mark {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--fire), #B4241A); color: #fff; font-size: 28px;
  animation: fspulse 1.4s ease-in-out infinite;
}
@keyframes fspulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(232,68,42,.45); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(232,68,42,0); }
}
.fs-loading-bar { width: 160px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fs-loading-bar > span { display: block; width: 40%; height: 100%; border-radius: 2px;
  background: var(--fire); animation: fsslide 1.1s ease-in-out infinite; }
@keyframes fsslide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-loading-mark, .fs-loading-bar > span { animation: none; }
}

/* ---------- tlačidlo Späť hore ---------- */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 1035;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow); font-size: 16px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--fire); color: var(--fire); }
@media (max-width: 767px) {
  /* nad spodnou lištou, nech ju neprekrýva */
  .to-top { bottom: 74px; right: 12px; }
}

/* ---------- vrstvenie hlavného menu a podmenu ---------- */
.topbar { z-index: 1050; }                 /* hlavná lišta je vždy najvyššie */
.subnav {
  position: sticky; top: 58px; z-index: 1040;
  background: var(--panel);
}
.offline-bar { z-index: 1045; }
.filterbar   { z-index: 1030; top: 58px; }
.page-head   { z-index: 1035; }
.page-actions .dropdown-menu { z-index: 1060; }

/* keď je na stránke aj podmenu, filtračná lišta sa lepí až pod ním */
.subnav + * .filterbar, .subnav ~ .filterbar { top: 112px; }

@media (max-width: 991px) {
  .subnav, .filterbar { top: 56px; }
  .subnav ~ .filterbar { top: 108px; }
}

/* horné menu už od tabletu */
@media (min-width: 768px) and (max-width: 991px) {
  .topnav-link { padding: 6px 10px; font-size: 13px; }
  .topbar-inner { gap: 10px; }
}