/* ============================================================================
   ZOZNAMY SÚŤAŽÍ — /startovky a /sutaze (.zl, jazyk .sk-v2)
   ----------------------------------------------------------------------------
   Riadky, mesiace, panely a tlačidlá berie z home.css (hp-*), tu je len to,
   čo je pre tieto stránky navyše: filter, hlavička s prepínačom zobrazenia,
   našepkávač hľadania a stránkovanie. Len tokeny z tokens.css.
   ========================================================================== */

/* ── Filter ──────────────────────────────────────────────────────────── */
.zl-filtre {
    display: flex; flex-direction: column; gap: .75rem;
    margin-bottom: 1.25rem;
}

/* Čipy: na mobile jeden posuvný riadok až po hranu displeja, od tabletu
   sa zalomia. */
.zl-cipy {
    display: flex; flex-wrap: nowrap; gap: .5rem;
    margin: 0 calc(-1 * var(--hp-gutter));
    padding: 0 var(--hp-gutter) .1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.zl-cipy::-webkit-scrollbar { display: none; }
.zl .hp-fchip {
    display: inline-flex; align-items: center;
    min-height: 44px;
    text-decoration: none;
}
.zl .hp-fchip.is-active:hover { color: var(--sk-surface); }

.zl-vybery { display: flex; flex-wrap: wrap; gap: .5rem; }
.zl-select {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 44px;
    padding: 0 .6rem 0 .75rem;
    border: 1px solid var(--sk-border-strong);
    border-radius: var(--sk-radius-md);
    background-color: var(--sk-surface);
    color: var(--sk-ink-heading);
    font-family: inherit;
    font-size: .9375rem;
}
.zl-select:focus { outline: none; border-color: var(--sk-brand); box-shadow: var(--sk-focus-ring); }

/* Hľadanie vo výsledkoch + našepkávač názvov */
.zl-hladanie-riadok { display: flex; flex-direction: column; gap: .5rem; }
.zl-hladanie { position: relative; padding-right: .85rem; }
.zl-navrhy {
    position: absolute;
    top: calc(100% + .35rem); left: 0; right: 0;
    z-index: 1035;
    max-height: min(60vh, 380px);
    overflow-y: auto;
    margin: 0; padding: .3rem 0;
    list-style: none;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-md);
    box-shadow: var(--sk-shadow-overlay);
}
.zl-navrhy .zs-search-item {
    min-height: 44px;
    display: flex; align-items: center;
    padding: .5rem .9rem;
    color: var(--sk-ink-heading);
    font-size: .9375rem;
    cursor: pointer;
}
.zl-navrhy .zs-search-item:hover { background: var(--sk-surface-tint); }
.zl-navrhy .zs-search-empty { color: var(--sk-ink-muted); cursor: default; }
.zl-navrhy .search-highlight { font-weight: 700; background: none; color: var(--sk-brand-ink); }

/* ── Hlavička zoznamu ────────────────────────────────────────────────── */
.zl-hlava {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem 1rem;
}
.zl-hlava h1 {
    margin: 0;
    color: var(--sk-ink-heading);
    font-size: 1.75rem; font-weight: 750; line-height: 1.05;
    letter-spacing: -.01em;
}
.zl-ovladanie { display: flex; align-items: center; gap: .5rem; }

/* Prepínač Zoznam / Karty / Tabuľka — rovnaký segment ako záložky na titulke */
.zl-prepinac {
    display: inline-flex; gap: 2px;
    padding: 3px;
    background: var(--sk-surface-accent);
    border-radius: var(--sk-radius-md);
}
.zl-prepinac .vt-btn {
    min-height: 38px;
    padding: 0 .9rem;
    border: 0;
    border-radius: calc(var(--sk-radius-md) - 2px);
    background: transparent;
    color: var(--sk-ink-muted);
    font-family: inherit;
    font-size: .875rem; font-weight: 650;
    cursor: pointer;
}
.zl-prepinac .vt-btn:hover:not(.active) { background: var(--sk-surface); color: var(--sk-ink-heading); }
.zl-prepinac .vt-btn.active { background: var(--sk-surface); color: var(--sk-ink-heading); box-shadow: inset 0 0 0 1px var(--sk-border); }
.zl-btn-maly { min-height: 44px; font-size: .875rem; }

.zl-cas { color: var(--sk-accent-time-fg); font-weight: 650; }
.zl-panel-titul { color: var(--sk-ink-heading); font-size: 1.0625rem; font-weight: 750; font-stretch: var(--sk-stretch-condensed); }

/* Vo výsledkoch nie je stav — riadok má len šípku */
.zl .hp-riadok-stav:empty { display: none; }

/* Tabuľkové zobrazenie výsledkov (staré triedy .sv-table) v novom jazyku */
.zl .sv-table-wrap {
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-md);
    box-shadow: none;
    overflow: hidden;
}
.zl .sv-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.zl .sv-table th {
    padding: .6rem var(--hp-gutter);
    background: var(--sk-surface-subtle);
    border-bottom: 1px solid var(--sk-border);
    color: var(--sk-ink-muted);
    font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
}
.zl .sv-table td {
    padding: .7rem var(--hp-gutter);
    border-bottom: 1px solid var(--sk-border-soft);
    background: var(--sk-surface);
    color: var(--sk-ink);
}
.zl .sv-table tr:last-child td { border-bottom: 0; }
.zl .sv-table tbody tr { cursor: pointer; }
.zl .sv-table tbody tr:hover td { background: var(--sk-surface-tint); }
.zl .sv-td-name { color: var(--sk-ink-heading); font-weight: 650; }

/* Stránkovanie (Bootstrap) */
.zl-strankovanie { margin-top: 1.25rem; }
.zl .pagination { flex-wrap: wrap; gap: 4px; }
.zl .page-link {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--sk-border) !important;
    border-radius: var(--sk-radius-md) !important;
    background: var(--sk-surface);
    color: var(--sk-ink-heading) !important;
    font-variant-numeric: tabular-nums;
}
.zl .page-item.active .page-link { background: var(--sk-ink-heading); border-color: var(--sk-ink-heading) !important; color: var(--sk-surface) !important; }
.zl .page-item.disabled .page-link { color: var(--sk-ink-faint) !important; }



@media (min-width: 768px) {
    .zl-cipy { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
    .zl-hladanie-riadok { flex-direction: row; }
    .zl-hladanie { flex: 1 1 auto; }
    .zl-hladanie-riadok .zl-vybery { flex: 0 0 300px; }
    .zl-filtre > .zl-vybery .zl-select { flex: 0 1 320px; }
    .zl-hlava h1 { font-size: 2.25rem; }
}