/* =====================================================================
   ADMIN UI — nový vzhled (karty eventů, sidebar, ikony)
   ---------------------------------------------------------------------
   Samostatný soubor, načítá se AŽ za admin.css, takže jen přebíjí to,
   co potřebuje. Původní admin.css zůstává nedotčený — kdyby cokoliv
   nesedělo, stačí odebrat jeden <link> a je zpět původní vzhled.
   ===================================================================== */

:root {
    --ui-bg:        #0b1220;
    --ui-surface:   #0f172a;
    --ui-surface-2: #131c31;
    --ui-line:      #1e293b;
    --ui-line-soft: #172033;
    --ui-text:      #e8eef8;
    --ui-muted:     #8b9bb4;
    --ui-dim:       #5b6b85;
    --ui-accent:    #2f8bfd;
    --ui-accent-dk: #1f6fd6;
    --ui-ok:        #22c55e;
    --ui-warn:      #f5a524;
    --ui-bad:       #f04d5c;
    --ui-r:         14px;
}

/* --- ikony ---------------------------------------------------------- */
.ic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.ic-inline { margin-right: 7px; }

/* --- sidebar -------------------------------------------------------- */
.sidebar { background: var(--ui-surface); border-right: 1px solid var(--ui-line); }

.sidebar-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 20px 18px; border-bottom: 1px solid var(--ui-line-soft);
}
/* Značka v sidebaru. Ikona má vlastní tmavé pozadí i zaoblení, takže pod
   ní žádná světlá podložka není - jen jemný rámeček, aby neplavala v ploše. */
.brand-mark {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: var(--ui-bg);
    border: 1px solid var(--ui-line);
    overflow: hidden; line-height: 0;
    display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text h3 {
    margin: 0; font-size: 0.92rem; font-weight: 800; color: var(--ui-text);
    line-height: 1.2; text-transform: uppercase; letter-spacing: 0.4px;
}
.brand-text .status-tag {
    font-size: 0.68rem; color: var(--ui-accent); font-weight: 600;
}

.sidebar-menu { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }

.menu-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: 10px;
    color: var(--ui-muted); font-size: 0.87rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.menu-item:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.menu-item.active { background: var(--ui-accent); color: #fff; }
.menu-item.active .ic { color: #fff; }

.menu-section-label {
    padding: 16px 14px 7px; font-size: 0.64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--ui-dim);
}
.menu-divider { height: 1px; background: var(--ui-line-soft); margin: 12px 14px; }

.menu-sub-items { padding-left: 14px; display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.sub-item {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.82rem; padding: 7px 12px; border-radius: 8px;
    cursor: pointer; color: var(--ui-dim); font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.sub-item:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.sub-item.active-sub { color: var(--ui-accent); background: rgba(47,139,253,0.10); font-weight: 700; }
.sub-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--ui-line-soft); }
.sidebar-footer p { color: var(--ui-dim); font-size: 0.72rem; }
.logout-link {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    color: var(--ui-muted); font-size: 0.78rem; text-decoration: none; font-weight: 600;
}
.logout-link:hover { color: var(--ui-bad); }

/* --- hlavička ------------------------------------------------------- */
.main-header { padding: 26px 30px 0; }
.header-title h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.6px; margin: 0; }
.header-title p { color: var(--ui-muted); font-size: 0.88rem; margin: 4px 0 0; }

/* --- filtry --------------------------------------------------------- */
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip {
    background: var(--ui-surface); border: 1px solid var(--ui-line);
    color: var(--ui-muted); padding: 8px 16px; border-radius: 9px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.chip:hover { color: var(--ui-text); border-color: #2b3a55; }
.chip.active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }

/* --- karta eventu (kompaktní řádek) --------------------------------
   Cíl: vejít se s ~12 eventy na obrazovku místo 3. Proto řádek, ne
   kartička - a všechny akce jako ikony, nic schované pod třemi tečkami.
   ------------------------------------------------------------------- */
.ev-list { display: flex; flex-direction: column; gap: 6px; }

.ev-card {
    background: var(--ui-surface); border: 1px solid var(--ui-line);
    border-radius: 10px; padding: 9px 14px;
    display: grid; gap: 10px 16px; align-items: center;
    /* Sloupec se statistikami musí smět zmenšit (min 0), jinak jeho obsah
       přeteče do sloupce s ikonami a "Turnaj běží" se překrývá s odkazy.
       Sloupec s akcemi je min-content, aby se ikony nikdy nezmáčkly. */
    grid-template-columns: 40px minmax(150px, 1.5fr) minmax(0, 1.2fr) min-content;
    transition: border-color 0.12s, background 0.12s;
}
.ev-card > * { min-width: 0; }
.ev-card:hover { border-color: #2b3a55; background: var(--ui-surface-2); }

.ev-logo {
    width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
    background: var(--ui-bg); border: 1px solid var(--ui-line);
    display: flex; align-items: center; justify-content: center;
}
.ev-logo img { max-width: 84%; max-height: 84%; object-fit: contain; }
.ev-logo .ph { color: var(--ui-dim); }

.ev-name {
    font-size: 0.88rem; font-weight: 700; color: var(--ui-text);
    letter-spacing: -0.2px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-sub {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 3px; color: var(--ui-dim); font-size: 0.71rem; line-height: 1.3;
}
.ev-sub .dot { color: var(--ui-line); }
.ev-tag {
    padding: 1px 7px; border-radius: 5px; background: var(--ui-surface-2);
    border: 1px solid var(--ui-line); color: var(--ui-muted);
    font-size: 0.66rem; font-weight: 700;
}

/* statistiky v jednom řádku */
/* wrap, ne nowrap: když se čísla nevejdou, zalomí se pod sebe.
   S nowrap přetékala do sloupce s ikonami. */
.ev-stats { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-width: 0; }
.ev-stat { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.ev-stat .n { font-size: 0.95rem; font-weight: 800; line-height: 1; }
.ev-stat .l { font-size: 0.66rem; color: var(--ui-dim); }
.ev-stat.total .n { color: var(--ui-text); }
.ev-stat.ok .n    { color: var(--ui-ok); }
.ev-stat.bad .n   { color: var(--ui-bad); }
.ev-stat.rate .n  { color: var(--ui-accent); }

.ev-bar {
    margin-top: 6px; height: 3px; border-radius: 99px;
    background: var(--ui-line); overflow: hidden; max-width: 260px;
}
.ev-bar span { display: block; height: 100%; background: var(--ui-ok); border-radius: 99px; }

.ev-stat.wait .n  { color: var(--ui-warn); }

/* přepínač stavu turnaje u pexesa - rychlá akce přímo v řádku */
.ev-pill {
    padding: 4px 11px; border-radius: 20px; cursor: pointer;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3px;
    white-space: nowrap; font-family: inherit; transition: background 0.12s;
}
.ev-pill.on  { background: rgba(34,197,94,0.12);  border: 1px solid rgba(34,197,94,0.4);  color: #4ade80; }
.ev-pill.off { background: rgba(91,107,133,0.12); border: 1px solid rgba(91,107,133,0.4); color: var(--ui-dim); }
.ev-pill.on:hover  { background: rgba(34,197,94,0.22); }
.ev-pill.off:hover { background: rgba(91,107,133,0.22); }

/* štítek hry - jen v přehledu "Moje hry", kde jsou hry promíchané */
.ev-tag.game { background: rgba(47,139,253,0.10); border-color: rgba(47,139,253,0.30); color: #7dbcff; }

/* akce - vše viditelné, ikonová tlačítka.
   Moderace je popsaná slovem, protože je to nejčastější akce
   a z ikony oka nebylo poznat, že vede do moderace. */
.btn-mod {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    background: rgba(47,139,253,0.12); border: 1px solid rgba(47,139,253,0.35);
    color: var(--ui-accent); font-size: 0.78rem; font-weight: 700;
    white-space: nowrap; transition: background 0.12s;
    font-family: inherit;
}
.btn-mod:hover { background: rgba(47,139,253,0.22); }

.ev-actions {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0; justify-self: end; white-space: nowrap;
}
.ib {
    width: 31px; height: 31px; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    color: var(--ui-muted); text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ib:hover { background: var(--ui-bg); border-color: var(--ui-line); color: var(--ui-text); }
.ib.accent { color: var(--ui-accent); }
.ib.accent:hover { background: rgba(47,139,253,0.12); border-color: rgba(47,139,253,0.35); }
.ib.danger { color: var(--ui-dim); }
.ib.danger:hover { background: rgba(240,77,92,0.12); border-color: rgba(240,77,92,0.35); color: var(--ui-bad); }
.ib-sep { width: 1px; height: 18px; background: var(--ui-line); margin: 0 3px; }

/* --- prázdný stav --------------------------------------------------- */
.ev-empty {
    border: 1px dashed var(--ui-line); border-radius: var(--ui-r);
    padding: 52px 24px; text-align: center; color: var(--ui-dim);
}
.ev-empty .ic { color: var(--ui-line); margin-bottom: 12px; }
.ev-empty h4 { color: var(--ui-muted); margin: 0 0 6px; font-size: 0.95rem; }
.ev-empty p { margin: 0; font-size: 0.82rem; }

/* --- responzivita --------------------------------------------------- */
/* Na užších oknech radši statistiky na vlastní řádek pod názvem,
   než aby se lámaly do dvou řádků vedle ikon. */
@media (max-width: 1450px) {
    .ev-card { grid-template-columns: 40px minmax(150px,1.4fr) min-content; }
    /* Explicitní umístění: akce zůstávají vpravo na prvním řádku,
       statistiky se přesunou pod ně přes celou šířku. Bez toho by
       auto-placement hodilo akce do 40px sloupce s logem. */
    .ev-card > div:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    .ev-card > .ev-actions { grid-column: 3; grid-row: 1; }
    .ev-bar { max-width: none; }
}
@media (max-width: 900px) {
    .ev-card { grid-template-columns: 40px 1fr; }
    .ev-card > div:nth-child(3) { grid-column: 1 / -1; grid-row: auto; }
    .ev-card > .ev-actions { grid-column: 1 / -1; grid-row: auto; flex-wrap: wrap; justify-self: start; }
}

/* --- vyhledávání eventů --------------------------------------------- */
.ev-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--ui-surface); border: 1px solid var(--ui-line);
    border-radius: 9px; padding: 0 11px; height: 36px;
    flex: 1 1 210px; max-width: 320px;
    transition: border-color 0.15s;
}
.ev-search:focus-within { border-color: var(--ui-accent); }
.ev-search .ic { color: var(--ui-dim); }
.ev-search input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--ui-text); font-size: 0.84rem; font-family: inherit;
}
.ev-search input::placeholder { color: var(--ui-dim); }
.ev-search input::-webkit-search-cancel-button { display: none; }
.ev-search button {
    background: transparent; border: none; color: var(--ui-dim);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ev-search button:hover { color: var(--ui-text); }

.ev-empty mark, .ev-name mark {
    background: rgba(47,139,253,0.28); color: inherit; border-radius: 3px; padding: 0 1px;
}

/* =====================================================================
   NOVÝ EVENT
   ---------------------------------------------------------------------
   Formulář rozdělený do tří kroků. Výběr hry jsou karty místo <select>,
   protože ikonu a jednu větu popisu člověk přečte rychleji než rozbalovací
   seznam - a hlavně hned vidí, co ta hra vlastně dělá.
   ===================================================================== */

.nv-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1080px) { .nv-wrap { grid-template-columns: 1fr; } }

.nv-form {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    padding: 26px 26px 24px;
}

/* --- krok ----------------------------------------------------------- */
.nv-step { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--ui-line-soft); }
.nv-step:last-of-type { border-bottom: 0; margin-bottom: 20px; padding-bottom: 0; }

.nv-step-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 15px; }
.nv-step-head h3 { margin: 0 0 3px; font-size: 0.98rem; font-weight: 750; color: var(--ui-text); letter-spacing: -0.01em; }
.nv-step-head p  { margin: 0; font-size: 0.79rem; color: var(--ui-dim); line-height: 1.5; }

.nv-num {
    flex-shrink: 0; width: 25px; height: 25px; border-radius: 8px;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line);
    color: var(--ui-muted); font-size: 0.76rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

/* --- pole ----------------------------------------------------------- */
.nv-input-lg {
    width: 100%; box-sizing: border-box;
    background: var(--ui-bg); border: 1px solid var(--ui-line);
    color: var(--ui-text); border-radius: 11px;
    padding: 14px 16px; font-size: 1rem; font-weight: 600;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.nv-input-lg::placeholder { color: var(--ui-dim); font-weight: 500; }
.nv-input-lg:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(47,139,253,0.16); }

/* Prvky, které musí zůstat v DOM kvůli zbytku kódu, ale nemají být vidět. */
.nv-hidden-select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* --- výběr hry ------------------------------------------------------ */
/* Naschvál pevné dvě sloupce místo auto-fit: se čtyřmi hrami vyjde
   úhledná mřížka 2x2, ne tři a jedna osamocená pod nimi. */
.nv-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .nv-games { grid-template-columns: 1fr; } }

.nv-game {
    display: flex; gap: 12px; align-items: flex-start; text-align: left;
    background: var(--ui-bg); border: 1px solid var(--ui-line);
    border-radius: 12px; padding: 14px 15px; cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
    color: inherit; font: inherit;
}
.nv-game:hover { border-color: #2b3a55; background: var(--ui-surface-2); }
.nv-game:active { transform: translateY(1px); }

/* Pozor na pořadí specificity: o pár řádků níž je `.nv-game span`, které
   nastavuje display:block - a protože rámeček ikony JE span, přebilo to
   tady flex a ikona spadla do levého horního rohu. Dvě třídy v selektoru
   ten souboj vyhrají. */
.nv-game .nv-game-ic {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    background: var(--ui-surface-2); border: 1px solid var(--ui-line);
    color: var(--ui-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.nv-game b { display: block; font-size: 0.88rem; font-weight: 750; color: var(--ui-text); margin-bottom: 3px; }
.nv-game span { display: block; font-size: 0.75rem; color: var(--ui-dim); line-height: 1.45; }

.nv-game.is-on {
    border-color: var(--ui-accent);
    background: rgba(47,139,253,0.07);
    box-shadow: 0 0 0 1px var(--ui-accent) inset;
}
.nv-games .nv-game.is-on .nv-game-ic { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.nv-game.is-on span { color: var(--ui-muted); }

/* --- termín --------------------------------------------------------- */
.nv-seg {
    display: inline-flex; background: var(--ui-bg);
    border: 1px solid var(--ui-line); border-radius: 11px; padding: 4px; gap: 4px;
}
.nv-seg-btn {
    background: transparent; border: 0; color: var(--ui-muted);
    padding: 9px 18px; border-radius: 8px; cursor: pointer;
    font-size: 0.82rem; font-weight: 700; font-family: inherit;
    transition: background .15s, color .15s;
}
.nv-seg-btn:hover { color: var(--ui-text); }
.nv-seg-btn.is-on { background: var(--ui-accent); color: #fff; }

.nv-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; max-width: 430px; }
.nv-dates label { display: block; font-size: 0.74rem; color: var(--ui-dim); font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.nv-dates input {
    width: 100%; box-sizing: border-box;
    background: var(--ui-bg); border: 1px solid var(--ui-line); color: var(--ui-text);
    border-radius: 10px; padding: 11px 13px; font-size: 0.88rem; font-family: inherit;
    outline: none; transition: border-color .15s;
}
.nv-dates input:focus { border-color: var(--ui-accent); }
.nv-dates input::-webkit-calendar-picker-indicator { filter: invert(0.65); cursor: pointer; }

/* --- odeslání ------------------------------------------------------- */
.nv-submit {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--ui-accent); color: #fff; border: 0;
    padding: 15px 22px; border-radius: 12px;
    font-size: 0.94rem; font-weight: 800; font-family: inherit; cursor: pointer;
    box-shadow: 0 6px 18px rgba(47,139,253,0.26);
    transition: background .15s, transform .12s, box-shadow .15s;
}
.nv-submit:hover { background: var(--ui-accent-dk); box-shadow: 0 8px 22px rgba(47,139,253,0.34); }
.nv-submit:active { transform: translateY(1px); }
.nv-submit:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* --- výsledek ------------------------------------------------------- */
.nv-result {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r);
    padding: 22px 20px 20px;
    text-align: center;
}
.nv-result-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(34,197,94,0.12); color: var(--ui-ok);
    border: 1px solid rgba(34,197,94,0.28);
    border-radius: 20px; padding: 4px 12px 4px 10px;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em;
    text-transform: uppercase; margin-bottom: 14px;
}
.nv-result h2 {
    margin: 0 0 6px; font-size: 1rem; font-weight: 750; color: var(--ui-text);
    line-height: 1.35; word-break: break-word;
}
.nv-result code {
    display: block; font-size: 0.7rem; color: var(--ui-dim);
    background: var(--ui-bg); border: 1px solid var(--ui-line-soft);
    border-radius: 7px; padding: 6px 9px; margin: 0 0 16px;
    word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nv-result .qr-wrapper {
    background: #fff; border-radius: 12px; padding: 12px;
    display: inline-block; line-height: 0; margin: 0;
}
.nv-result .qr-wrapper img { display: block; border-radius: 4px; }
.nv-result .qr-wrapper a {
    display: block; line-height: 1.4; margin-top: 9px;
    font-size: 0.76rem; font-weight: 700; color: var(--ui-accent-dk); text-decoration: none;
}
.nv-result .qr-wrapper a:hover { text-decoration: underline; }
.nv-result-hint { margin: 14px 0 0; font-size: 0.75rem; color: var(--ui-dim); line-height: 1.5; }