/*
 * eSamson — combined stylesheet
 * Merged from: theme.css, esamson.css, main.css
 *
 * Accent colour: #ff7a00 (orange)
 * Background:    #0f0f0f / #1b1b1b
 */

/* =============================================================================
   SELF-HOSTED FONTS (replaces the two Google Fonts @import lines)
   DM Sans (used for the main site UI) and Barlow / Barlow Condensed (used on
   the tournament bracket pages) are now served from this theme instead of
   fonts.googleapis.com / fonts.gstatic.com — no third-party requests.

   Place the "fonts" folder (17 DM Sans + Barlow + Barlow Condensed .woff2
   files, ~376KB total) in the SAME directory as this theme.css file. If
   theme.css is enqueued from a different path than where "fonts" ends up,
   adjust the url('fonts/...') paths below to match.

   Only woff2 is included (near-universal browser support since ~2020); the
   .woff fallback that Google's CSS also serves was dropped to keep the file
   count down. Each weight has two @font-face rules (latin + latin-ext
   unicode-range) so Polish diacritics (ą ć ę ł ń ó ś ź ż) render correctly —
   the original @import URL only requested the "latin" subset, so this is
   actually more correct than before, not just a like-for-like swap.
============================================================================= */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('fonts/dm-sans/dm-sans-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('fonts/dm-sans/dm-sans-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/dm-sans/dm-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/dm-sans/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/dm-sans/dm-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/dm-sans/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/dm-sans/dm-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/dm-sans/dm-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/dm-sans/dm-sans-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/dm-sans/dm-sans-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/barlow/barlow-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/barlow/barlow-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/barlow/barlow-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/barlow/barlow-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('fonts/barlow-condensed/barlow-condensed-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* =============================================================================
   DESIGN TOKENS
============================================================================= */

:root {
    /* Accent */
    --es-accent:       #ff7a00;
    --es-accent-dim:   rgba(255, 122, 0, 0.12);
    --es-accent-glow:  rgba(255, 122, 0, 0.25);
    --es-accent-2:     #ff9d45;

    /* Surfaces */
    --es-bg:           #0f0f0f;
    --es-surface:      #141414;
    --es-surface-2:    #1b1b1b;
    --es-surface-3:    #222222;

    /* Borders */
    --es-border:       rgba(255, 122, 0, 0.15);
    --es-border-hi:    rgba(255, 122, 0, 0.40);
    --es-border-hard:  #3a3a3a;

    /* Text */
    --es-text:         #f5f5f5;
    --es-text-2:       #d0d0d0;
    --es-text-3:       #888888;
    --es-text-muted:   #9b9b9b;

    /* Status */
    --es-success:      #3ecf8e;
    --es-danger:       #ff6b72;
    --es-warn:         #f5a623;

    /* Layout */
    --es-nav-h:        80px;
    --es-radius:       14px;
    --es-radius-sm:    8px;
    --es-radius-lg:    18px;
    --es-font:         'DM Sans', 'Inter', 'Segoe UI', sans-serif;
    --es-font-nav:     'Bahnschrift', 'Segoe UI', sans-serif;

    /* Seeding component (generic .sm-alert only — the full seed-manager
       widget below defines its own scoped --sm-* palette) */
    --sm-radius:       12px;
}

/* =============================================================================
   LIGHT MODE TOKENS
   Applied when <html data-theme="light">. Everything below in this file that
   already references an --es-* variable adapts automatically; a handful of
   hardcoded dark-only colors (header bar, inputs, scrollbar, generic table
   borders) get explicit light overrides further down. Standalone widgets with
   their own local palettes (csv-importer, tf-card seeding, tournament bracket
   colors) intentionally keep their fixed colors in both modes.
============================================================================= */

:root[data-theme="light"] {
    /* Accent stays the same brand orange, just tuned slightly for contrast on white */
    --es-accent:       #e56a00;
    --es-accent-dim:   rgba(229, 106, 0, 0.10);
    --es-accent-glow:  rgba(229, 106, 0, 0.20);
    --es-accent-2:     #ff8c1a;

    /* Surfaces */
    --es-bg:           #f7f6f4;
    --es-surface:      #ffffff;
    --es-surface-2:    #f0efec;
    --es-surface-3:    #e7e5e1;

    /* Borders */
    --es-border:       rgba(229, 106, 0, 0.18);
    --es-border-hi:    rgba(229, 106, 0, 0.45);
    --es-border-hard:  #d8d5cf;

    /* Text */
    --es-text:         #1a1a1a;
    --es-text-2:       #3a3a3a;
    --es-text-3:       #6b6b6b;
    --es-text-muted:   #8a8a8a;
}


/* =============================================================================
   RESET
============================================================================= */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, svg { display: block; max-width: 100%; }

/* Shared print behavior for the "admin dark page" family (mecze.php,
   klasyfikacja.php, and any future page using the same pattern): hide site
   chrome and login remnants, force a plain white/black printout. Each page's
   own @media print block (further down) only needs its page-specific rules
   on top of this. */
@media print {
  header, #masthead, .site-header, nav, .navbar,
  #wpadminbar, .btn-print, .mecze-print-bar, .klas-print-bar,
  #loginform, .float_L, .float_R,
  div.container:has(#loginform),
  div.container:has(.float_L) { display: none !important; }

  body { background: #fff !important; color: #000 !important; }
}


/* =============================================================================
   BASE
============================================================================= */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--es-bg);
    color: var(--es-text);
    font-family: var(--es-font);
    font-size: 15px;
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--es-accent);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }

p {
    color: var(--es-text-2);
    font-size: 1.05rem;
    text-align: center;
}

a {
    color: var(--es-accent);
    text-decoration: none;
    transition: all 0.3s ease;
}
a:hover { opacity: 0.85; }

label {
    color: var(--es-text);
    font-weight: bold;
    margin-bottom: 6px;
    display: inline-block;
}


/* =============================================================================
   SCROLLBAR
============================================================================= */

::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--es-accent); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--es-accent-2); }

[data-theme="light"] ::-webkit-scrollbar-track { background: #eceae6; }


/* =============================================================================
   HEADER
============================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: #000;
    border-bottom: 2px solid var(--es-accent);
    box-shadow: 0 0 20px var(--es-accent-glow);
    padding: 18px 0;
}

[data-theme="light"] .site-header {
    background: #ffffff;
    box-shadow: 0 0 16px rgba(0,0,0,0.06);
}

[data-theme="light"] .logo a { color: var(--es-accent); }

.nav-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

/* Logo */
.logo {
    display: flex;
    justify-content: center;
	line-height: 1;
}

/* Top row: spacer | logo | theme toggle — the spacer balances the toggle's
   width so the logo stays visually centered on the row, not the container. */
.es-header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 12px;
}
.es-header-top .logo { justify-self: center; }
.es-header-top .es-theme-toggle { justify-self: end; }

.logo a {
    color: var(--es-accent);
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.logo a:hover {
    text-shadow: 0 0 10px var(--es-accent-glow);
    transform: scale(1.03);
}

.description {
    display: flex;
    justify-content: center;
	font-size: 10px;
	font-weight: 500;
	padding: 0 0 10px 0;
}


/* Light/dark mode toggle */
.es-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--es-border);
    border-radius: 50%;
    color: var(--es-accent);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.es-theme-toggle:hover {
    background: var(--es-accent-dim);
    border-color: var(--es-border-hi);
    transform: translateY(-2px);
}
.es-theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show the sun icon in dark mode (click to go light), moon icon in light mode */
.es-theme-toggle .es-icon-moon { display: none; }
[data-theme="light"] .es-theme-toggle .es-icon-sun  { display: none; }
[data-theme="light"] .es-theme-toggle .es-icon-moon { display: block; }

/* Hamburger toggle (hidden on desktop, revealed at <=768px below) */
.es-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius-sm);
    cursor: pointer;
}
.es-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--es-accent);
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.es-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.es-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.es-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Nav */
.top-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: center;
}

.nav-menu li { position: relative; }

.nav-menu li a {
    color: var(--es-text);
    text-decoration: none;
    padding: 12px 22px;
    border-radius: var(--es-radius-sm);
    font-family: var(--es-font-nav);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.nav-menu li a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,122,0,0.2), rgba(255,122,0,0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--es-radius-sm);
}
.nav-menu li a:hover::before { opacity: 1; }

.nav-menu li a:hover,
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a {
    color: var(--es-accent);
    background: rgba(255,122,0,0.08);
    transform: translateY(-3px);
    box-shadow: 0 0 16px rgba(255,122,0,0.28);
    text-shadow: 0 0 8px rgba(255,122,0,0.5);
}


/* =============================================================================
   LAYOUT
============================================================================= */

.site-content {
    min-height: 85vh;
    padding: 0px 20px 80px;
    background: var(--es-surface-2);
}

/* Container: full-width block, stacks vertically */
.container {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
    overflow: hidden; /* clears internal floats */
}

.text-center { text-align: center; color: var(--es-text); overflow-x: auto;}


/* =============================================================================
   INFO BAR  (Turniej / Zalogowany)
============================================================================= */

.container .float_L {
    float: left;
    margin-top: 5px;
    font-size: 14px;
    color: var(--es-text-2);
}

.container .float_L form {
    display: flex;
    flex-direction: row;   /* override global form column */
}	
	
.container .float_L b {
    color: var(--es-text);
    font-weight: 600;
}

.container .float_R {
    float: right;
    margin-top: 5px;
}
.container .float_R form {
    display: flex;
    flex-direction: row;   /* override global form column */
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--es-text-2);
}
.container .float_R b {
    color: var(--es-text);
    font-weight: 600;
}


/* =============================================================================
   USER MENU (top_turniej.php — float_R user/gear dropdown)
============================================================================= */

.container .float_R .es-usermenu-item-form {
    display: block;      /* override .container .float_R form flex-row rule */
    margin: 0;
    gap: 0;
    font-size: inherit;
    color: inherit;
}

/* This topbar's container must NOT clip (overflow: hidden) like the shared
   .container rule does, or the absolutely-positioned dropdown gets cut off
   at the container's edge instead of floating above the page. We keep the
   "container" class (so the existing ".container .float_L/.float_R" rules
   still apply) and override just the clipping behaviour here, using a
   classic clearfix instead of overflow so floats are still cleared. The
   extra class raises specificity, so this reliably wins over ".container". */
.container.topbar-no-clip {
    overflow: visible;
}
.container.topbar-no-clip::after {
    content: "";
    display: table;
    clear: both;
}

.es-usermenu {
    position: relative;
}

.es-usermenu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--es-radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    font-family: var(--es-font);
    font-size: 14px;
    color: var(--es-text-2);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.es-usermenu-trigger:hover,
.es-usermenu-trigger[aria-expanded="true"] {
    color: var(--es-accent);
    border-color: var(--es-border-hi);
    background: var(--es-accent-dim);
    box-shadow: 0 0 14px var(--es-accent-glow);
}

.es-usermenu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
    transition: color 0.2s ease, transform 0.3s ease;
}

.es-usermenu-trigger:hover .es-usermenu-icon-gear,
.es-usermenu-trigger[aria-expanded="true"] .es-usermenu-icon-gear {
    transform: rotate(60deg);
}

.es-usermenu-name {
    color: var(--es-text);
    font-weight: 600;
    transition: color 0.2s ease;
}

.es-usermenu-trigger:hover .es-usermenu-name,
.es-usermenu-trigger[aria-expanded="true"] .es-usermenu-name {
    color: var(--es-accent);
}

.es-usermenu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--es-surface);
    border: 1px solid var(--es-border-hi);
    border-radius: var(--es-radius-sm);
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--es-accent-dim);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1100;
}

.es-usermenu.is-open .es-usermenu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.es-usermenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: var(--es-radius-sm);
    background: transparent;
    color: var(--es-text-2);
    font-family: var(--es-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.es-usermenu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: inherit;
}

.es-usermenu-item:hover {
    background: var(--es-accent-dim);
    color: var(--es-accent);
}

.es-usermenu-logout:hover {
    background: rgba(255, 107, 114, 0.1);
    color: var(--es-danger);
}


/* =============================================================================
   HERO / CONTENT BOXES
============================================================================= */

.hero-section {
    text-align: center;
    background: rgba(24,24,24,0.9);
    border: 1px solid var(--es-border);
    border-radius: 24px;
    padding: 60px 80px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 25px var(--es-accent-dim);
    transition: all 0.4s ease;
    width: auto;
    max-width: fit-content;
}

[data-theme="light"] .hero-section {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 0 20px var(--es-accent-dim);
}
.hero-section:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.65), 0 0 35px rgba(255,122,0,0.12);
}

.post-card,
.content-box {
    display: inline-block;
    background: rgba(22,22,22,0.95);
    border: 1px solid var(--es-border);
    border-left: 4px solid var(--es-accent);
    border-radius: var(--es-radius-lg);
    padding: 30px;
    margin: 20px auto;
    width: auto;
    max-width: fit-content;
    box-shadow: 0 5px 20px rgba(0,0,0,0.35);
    transition: all 0.35s ease;
}

[data-theme="light"] .post-card,
[data-theme="light"] .content-box {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 5px 16px rgba(0,0,0,0.08);
}
.post-card:hover,
.content-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255,122,0,0.12);
}


/* =============================================================================
   FORMS — global defaults
============================================================================= */

form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 0;
}

input,
textarea,
select {
    background: #252525;
    border: 1px solid var(--es-border-hard);
    color: var(--es-text);
    padding: 14px 18px;
    border-radius: var(--es-radius);
    font-size: 1rem;
    font-family: var(--es-font);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    outline: none;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #ffffff;
}

textarea {
    min-height: 140px;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--es-accent);
    box-shadow: 0 0 0 3px rgba(255,122,0,0.15), 0 0 18px rgba(255,122,0,0.18);
    transform: translateY(-1px);
}

input::placeholder,
textarea::placeholder { color: var(--es-text-muted); }

/* Slim / micro inputs */
.sliminput   { margin-bottom: 0; }
.input-micro { width: 25px; }
.seed        { width: 30px; }
.only-button { margin-bottom: 0; }


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 4 columns */
  width: max-content;
  margin: 0 auto;
}

.grid-item {
  padding: 2px;
  text-align: center;
}

/* =============================================================================
   ZGŁOSZENIA — "Dodaj/Edytuj zespół" cards and the "Zgłoszone zespoły" list
   Shared by team_manual.php (team_sklad), double_manual.php (team_double,
   Siatkówka Plażowa only) and team_list.php. Uses the site-wide --es-*
   tokens so it adapts to light/dark automatically, unlike the older
   csv-importer-style fixed-color cards.
============================================================================= */

.zt-card {
  background: var(--es-surface-2);
  border: 1px solid var(--es-border);
  border-radius: var(--es-radius-lg);
  padding: 28px 32px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .zt-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); }

.zt-card h3 {
  color: var(--es-text);
  font-family: var(--es-font-nav);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--es-border);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.zt-card h3:not(:first-child) { margin-top: 28px; }

/* Team-level fields (Nazwa / Reprezentuje / Miasto for team_sklad) */
.zt-team-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 18px;
  margin-bottom: 24px;
}
.zt-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.zt-field span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--es-text-3);
}
.zt-field input { width: 100%; }

/* Player roster grid (team_sklad — up to $ile_osob_w_skladzie rows) */
.zt-roster { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.zt-roster-row {
  display: grid;
  grid-template-columns: 26px minmax(120px, 1fr) minmax(120px, 1fr) minmax(100px, 0.8fr);
  gap: 10px;
  align-items: center;
}
.zt-roster-nr {
  color: var(--es-text-3);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}
@media (max-width: 640px) {
  .zt-roster-row { grid-template-columns: 24px 1fr 1fr; grid-template-areas: "nr imie nazwisko" "nr rola rola"; row-gap: 6px; }
  .zt-roster-row .zt-roster-nr        { grid-area: nr; }
  .zt-roster-row input[name$="_imie"] { grid-area: imie; }
  .zt-roster-row input[name$="_nazwisko"] { grid-area: nazwisko; }
  .zt-roster-row input[name$="_rola"] { grid-area: rola; }
}

/* Two player sub-cards (team_double, Siatkówka Plażowa) */
.zt-players-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .zt-players-2 { grid-template-columns: 1fr; }
}
.zt-player {
  background: var(--es-surface-3);
  border: 1px solid var(--es-border);
  border-radius: var(--es-radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zt-player-label {
  font-family: var(--es-font-nav);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--es-accent);
}

.zt-submit { margin: 0 auto; }

/* --- Zgłoszone zespoły (registered teams list) --- */
.zt-teams { max-width: 900px; margin: 0 auto; text-align: left; }

.zt-teams-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--es-border);
}
.zt-teams-head h3 {
  font-family: var(--es-font-nav);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--es-text);
  font-size: 1.15rem;
}
.zt-teams-count { color: var(--es-text-3); font-size: 0.85rem; white-space: nowrap; }
.zt-teams-empty { color: var(--es-text-3); padding: 12px 4px; }

.zt-teams-table { display: flex; flex-direction: column; gap: 4px; }

.zt-teams-row {
  display: grid;
  grid-template-columns: 40px 1.4fr 1.4fr auto;
  gap: 14px;
  align-items: center;
  background: var(--es-surface-2);
  border: 1px solid var(--es-border);
  border-radius: var(--es-radius-sm);
  padding: 6px 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.zt-teams-row:hover { border-color: var(--es-border-hi); background: var(--es-surface-3); }

.zt-teams-row--head {
  background: transparent;
  border-color: transparent;
  padding: 0 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-text-3);
}
.zt-teams-row--head:hover { background: transparent; border-color: transparent; }

.zt-col-nr { color: var(--es-text-3); font-weight: 700; text-align: center; }
.zt-col-name {
  color: var(--es-text);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zt-col-repr {
  color: var(--es-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zt-col-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.zt-col-actions--locked { color: var(--es-text-3); justify-content: flex-end; }
/* Let the Edytuj <form>'s button sit directly among the other action
   buttons instead of being laid out by the global `form { flex-direction:
   column }` rule. */
.zt-col-actions form { display: contents; }

.zt-confirm { display: flex; align-items: center; gap: 10px; }
.zt-confirm form { display: contents; }
.zt-confirm .btn-remove { white-space: nowrap; }

@media (max-width: 720px) {
  .zt-teams-row {
    grid-template-columns: 26px 1fr;
    grid-template-areas:
      "nr name"
      "repr repr"
      "actions actions";
    row-gap: 4px;
  }
  .zt-teams-row--head { display: none; }
  .zt-col-nr { grid-area: nr; }
  .zt-col-name { grid-area: name; white-space: normal; }
  .zt-col-repr { grid-area: repr; white-space: normal; }
  .zt-col-repr::before { content: "Reprezentuje: "; color: var(--es-text-3); font-weight: 600; }
  .zt-col-actions { grid-area: actions; justify-content: flex-start; flex-wrap: wrap; }
}

/* =============================================================================
   BUTTONS
============================================================================= */

button {
    background: linear-gradient(135deg, #2ba8ff, #147dff);
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: var(--es-radius);
    font-family: var(--es-font-nav);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    width: fit-content;
    align-self: center;
}
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(43,168,255,0.35);
}

.btn.btn-edit {
  /* Base styles */
  font-size: 0.75rem;
  padding: 4px 8px;
  border: 1px solid #5a5a00;   /* Dark yellow border */
  border-radius: 4px;
  background: transparent;
  color: var(--es-text-2);    /* Adapts to light/dark */
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn.btn-edit { border-color: #c9a900; }

/* Hover effect */
.btn.btn-edit:hover {
  background: #ffd700;        /* Gold/yellow */
  color: #1a1a1a;             /* Dark text for contrast */
  border-color: #ffd700;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3); /* Yellow glow */
}

/* Optional: Add pencil icon */
.btn.btn-edit::before {
  content: "✏️ ";
  margin-right: 4px;
}

.btn.btn-remove {
  /* Base styles */
  font-size: 0.75rem;
  padding: 4px 8px;
  border: 1px solid #880000;   /* Dark red border */
  border-radius: 4px;
  background: transparent;
  color: var(--es-text-2);    /* Adapts to light/dark */
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn.btn-remove { border-color: #c94040; }

/* Hover effect */
.btn.btn-remove:hover {
  background: #ff4444;        /* Bright red */
  color: #ffffff;             /* White text for contrast */
  border-color: #ff4444;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 68, 68, 0.3); /* Red glow */
}

/* Optional: Add trash icon */
.btn.btn-remove::before {
  content: "🗑️ ";
  margin-right: 4px;
}

.btn.btn-cancel {
  /* Base styles */
  font-size: 0.75rem;
  padding: 4px 8px;
  border: 1px solid #1a5a1a;   /* Dark green border */
  border-radius: 4px;
  background: transparent;
  color: var(--es-text-2);    /* Adapts to light/dark */
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn.btn-cancel { border-color: #3a9a3a; }

/* Hover effect */
.btn.btn-cancel:hover {
  background: #4CAF50;        /* Bright green */
  color: #1a1a1a;             /* Dark text for contrast */
  border-color: #4CAF50;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3); /* Green glow */
}

.btn.btn-cancel::before {
  content: "✕ ";
  margin-right: 4px;
}


/* Turniej button, overrides global input styles */
input.btn.btn-turniej[name="esamson_turniej"] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--es-border-hi);
    border-radius: var(--es-radius-sm);
    color: var(--es-text-2);
    font-family: var(--es-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
    width: auto;
    min-width: unset;
    transform: none;
}
input.btn.btn-turniej[name="esamson_turniej"]:hover {
    background: rgba(80, 120, 189, 0.1);
    border-color: rgba(80, 120, 189, 0.5);
    transform: none;
    box-shadow: none;
}


/* WYLOGUJ — small ghost button, overrides global input styles */
input.btn.btn-logout[name="esamson_login"] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--es-border-hi);
    border-radius: var(--es-radius-sm);
    color: var(--es-text-2);
    font-family: var(--es-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
    width: auto;
    min-width: unset;
    transform: none;
}
input.btn.btn-logout[name="esamson_login"]:hover {
    background: rgba(255, 107, 114, 0.1);
    border-color: rgba(255, 107, 114, 0.5);
    color: var(--es-danger);
    transform: none;
    box-shadow: none;
}


/* =============================================================================
   FOOTER
============================================================================= */

.site-footer {
    text-align: center;
    padding: 30px 20px;
    border-top: 1px solid var(--es-border);
    background: var(--es-surface);
    color: var(--es-text-3);
}


/* =============================================================================
   TABLES
============================================================================= */

table, th, td {
    border: 3px solid #111;
}

[data-theme="light"] table,
[data-theme="light"] th,
[data-theme="light"] td {
    border-color: #ddd;
}

.es-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.es-table th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--es-text-3);
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--es-border);
}
.es-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--es-border);
    color: var(--es-text-2);
}
.es-table tbody tr:hover td { background: var(--es-surface-3); }
.es-table tbody tr:last-child td { border-bottom: none; }


/* =============================================================================
   GRID / WRAPPER LAYOUTS  (bracket & match blocks)
============================================================================= */

.wrapper {
    display: grid;
    grid-auto-columns: max-content;
    grid-gap: 3px;
    width: max-content;
    background-color: #111;
    padding: 5px;
    margin: 5px auto;
}

[data-theme="light"] .wrapper { background-color: #ddd; }

.fullwrapper {
    display: grid;
    grid-auto-columns: max-content;
    grid-gap: 3px;
    width: 100%;
    background-color: #2E1E00;
    padding: 5px;
}

.block {
    background-color: var(--es-surface-3);
    padding: 3px 6px;
}

.blockleft {
    background-color: var(--es-surface-3);
    padding: 3px 6px;
    display: inline-grid;
}

.full-width {
  width: 100%;
  box-sizing: border-box;
}

/* Column-span helpers */
.widexx     { grid-row: 1 / 2; background-color: rgb(28, 28, 42); text-align: center; }
.wide6x     { grid-row: 1 / 2; grid-column: 1 / 7; background-color: rgb(28, 28, 42); text-align: center; }
.wide5x     { grid-row: 1 / 2; grid-column: 1 / 6; background-color: rgb(28, 28, 42); text-align: center; }
.wide4x     { grid-row: 1 / 2; grid-column: 1 / 5; background-color: rgb(28, 28, 42); text-align: center; display: flex}
.wide3x     { grid-row: 1 / 2; grid-column: 1 / 4; background-color: #aa5814; text-align: center; padding: 0 10px; }
.wide2x     { grid-row: 1 / 2; grid-column: 1 / 3; background-color: #0F4E8C; text-align: center; display: block; }
.wide1x     { grid-row: 1 / 2; grid-column: 1 / 2; background-color: #aa5814; text-align: center; padding: 0 10px; }
.wide2xfull { grid-row: 1 / 2; grid-column: 1 / 3; background-color: rgb(28, 28, 42); text-align: center; display: block; width: 100%; }
.wide3x_inner { grid-column: 1 / 4; background-color: #80BFFF; text-align: center; }

.zawodnik1  { grid-row: 3 / 4; grid-column: 1 / 3; background-color: #f9e7c5; text-align: center; }
.zawodnik2  { grid-row: 4 / 5; grid-column: 1 / 3; background-color: #f9e7c5; text-align: center; }
.right-align { text-align: right; background-color: #f9e7c5; }


/* =============================================================================
   UTILITY
============================================================================= */

.max          { width: 100%; height: 100%; background-color: #11ff11; }
.wynik_srodek { text-align: center; }

.srodek {
    display: flex;
    align-items: center;
}

.środkowanieP {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.lable {
    font-weight: bold;
    text-align: center;
}

.lablesrodek {
    padding: 1px 2px 3px 4px;
    display: flex;
    align-items: center;
    font-weight: bold;
}

/* Legacy label colours */
.tytuł  { text-align: center; font-size: 2em; font-weight: bold; color: #c96b0e; }
.labels { text-align: center; font-weight: bold; color: #c96b0e; }


/* =============================================================================
   ALERTS
============================================================================= */

.sm-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--sm-radius);
    font-size: 14px;
    margin: 0 auto 20px auto;
    border: 1px solid;
    width: max-content;
    text-align: center;
}
.sm-alert-success {
    background: rgba(62, 207, 142, 0.08);
    border-color: rgba(62, 207, 142, 0.30);
    color: var(--es-success);
}
.sm-alert-error {
    background: rgba(255, 107, 114, 0.08);
    border-color: rgba(255, 107, 114, 0.30);
    color: var(--es-danger);
}

/* Variant for showing several messages in one alert box */
.sm-alert-list {
    display: block;
    text-align: left;
}
.sm-alert-list ul {
    margin: 0;
    padding-left: 20px;
}
.sm-alert-list li {
    margin: 4px 0;
}

/* Small inline hint text under/between form fields */
.field-hint {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin: -8px 0 12px 0;
    text-align: center;
}


/* =============================================================================
   WORDPRESS HELPERS
============================================================================= */

img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

.alignleft   { float: left;  margin-right: 20px; }
.alignright  { float: right; margin-left: 20px; }
.aligncenter { display: block; margin: 0 auto; }


/* =============================================================================
   RESPONSIVE
============================================================================= */

@media (max-width: 768px) {

    /* Show hamburger, hide desktop nav */
    .es-hamburger { display: flex; }

    .es-nav {
        /* Hidden off-screen by default */
        display: block;
        position: fixed;
        top: 68px;       /* = header height */
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.97);
        border-top: 1px solid var(--es-border);
        padding: 24px 20px;
        overflow-y: auto;
        /* overridden for light mode just below */

        /* Slide in from top */
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease;
        z-index: 999;
    }

    .es-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    [data-theme="light"] .es-nav {
        background: rgba(255, 255, 255, 0.98);
    }

    .es-nav .es-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        justify-content: flex-start;
    }

    .es-nav .es-nav-list li { width: 100%; }

    .es-nav .es-nav-list li a {
        display: block;
        width: 100%;
        padding: 14px 18px;
        font-size: 1.1rem;
        border-radius: var(--es-radius);
        text-align: left;
    }

    .es-nav .es-nav-list li a:hover,
    .es-nav .es-nav-list li.current-menu-item > a,
    .es-nav .es-nav-list li.current_page_item > a {
        transform: none;
        background: rgba(255,122,0,0.10);
    }

    /* Layout adjustments */
    .es-main        { padding: 24px 16px 48px; }
    .site-content   { padding: 24px 12px 48px; }
    .container      { padding: 12px 16px; }
    h1              { font-size: 2rem; }
    h2              { font-size: 1.5rem; }

    /* Stack info bar vertically */
    .container .float_L,
    .container .float_R { float: none; display: block; }
    .container .float_R form { justify-content: flex-start; }

    .hero-section   { padding: 30px 20px; width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
    .es-header-inner { padding: 0 16px; }
    .es-logo         { font-size: 18px; }
    h1               { font-size: 1.7rem; }
}


.drop-zone {
	border: 2px dashed #ccc;
	border-radius: 8px;
	padding: 40px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	margin: 20px 0;
	background: #fafafa;
}
.drop-zone:hover, .drop-zone.drag-over {
	border-color: #4CAF50;
	background: #f0f8ff;
}
.drop-zone .file-info {
	margin-top: 10px;
	font-size: 0.9em;
	color: #666;
}



/* Dla meczy */

.gr-wrap {
  font-family: 'DM Sans','Segoe UI',sans-serif;
  --gr-card:    #1c1c2a;
  --gr-border:  rgba(255,255,255,0.08);
  --gr-border-hi: rgba(255,255,255,0.20);
  --gr-accent:  #7c6dfa;
  --gr-accent-dim: rgba(124,109,250,0.16);
  --gr-text:    #eeeef5;
  --gr-muted:   #7777a0;
  --gr-dimmer:  #44445a;
  --gr-success: #3ecf8e;
  --gr-danger:  #ff6b72;
  --gr-warn:    #f5a623;
  --gr-radius:  12px;
  --gr-overlay-1: rgba(255,255,255,0.03);
  --gr-overlay-2: rgba(255,255,255,0.04);
  --gr-overlay-3: rgba(255,255,255,0.05);
  --gr-overlay-4: rgba(255,255,255,0.06);
  --gr-overlay-5: rgba(255,255,255,0.07);
  --gr-overlay-6: rgba(255,255,255,0.12);
  color: var(--gr-text);
  padding: 32px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gr-wrap *, .gr-wrap *::before, .gr-wrap *::after { box-sizing: border-box; }

[data-theme="light"] .gr-wrap {
  --gr-card:       #ffffff;
  --gr-border:     rgba(0,0,0,0.08);
  --gr-border-hi:  rgba(0,0,0,0.18);
  --gr-accent:     #5b4bd6;
  --gr-accent-dim: rgba(91,75,214,0.12);
  --gr-text:       #1a1a1a;
  --gr-muted:      #5a5a72;
  --gr-dimmer:     #d5d5e2;
  --gr-overlay-1:  rgba(0,0,0,0.03);
  --gr-overlay-2:  rgba(0,0,0,0.04);
  --gr-overlay-3:  rgba(0,0,0,0.05);
  --gr-overlay-4:  rgba(0,0,0,0.06);
  --gr-overlay-5:  rgba(0,0,0,0.07);
  --gr-overlay-6:  rgba(0,0,0,0.12);
}

.gr-inner {
  width: 100%;
  max-width: 960px;
}

/* Header */
.gr-header { margin-bottom: 20px; text-align: center; }
.gr-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gr-accent); margin-bottom: 6px;
}
.gr-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
.gr-subtitle { font-size: 13px; color: var(--gr-muted); margin: 0; }

/* ---- Below: moved from losowanie.php (group-stage controls/grid/slots) ---- */

/* Controls bar */
.gr-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--gr-card);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius);
  padding: 14px 20px;
  margin-bottom: 16px;
}
.gr-controls label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gr-muted);
  display: flex; align-items: center; gap: 10px;
}
.gr-num-input {
  width: 72px; height: 34px;
  background: var(--gr-overlay-3);
  border: 1px solid var(--gr-border);
  border-radius: 8px;
  color: var(--gr-text);
  font-size: 14px; font-weight: 600; font-family: inherit;
  text-align: center; padding: 0 6px;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.gr-num-input::-webkit-outer-spin-button,
.gr-num-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.gr-num-input:focus { outline: none; border-color: var(--gr-accent); }
.gr-controls-meta { font-size: 13px; color: var(--gr-muted); margin-left: auto; }
.gr-controls-meta strong { color: var(--gr-text); }

/* Warnings */
.gr-warning {
  display: none;
  align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--gr-radius);
  font-size: 13px; margin-bottom: 12px; border: 1px solid;
  width: 100%;
}
.gr-warning.visible { display: flex; }
.gr-warning-danger { background: rgba(255,107,114,0.10); border-color: rgba(255,107,114,0.35); color: var(--gr-danger); }
.gr-warning-warn   { background: rgba(245,166,35,0.10);  border-color: rgba(245,166,35,0.35);  color: var(--gr-warn); }

/* Groups grid */
.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  width: 100%;
}

/* Single group card */
.gr-group {
  background: var(--gr-card);
  border: 1px solid var(--gr-border);
  border-radius: var(--gr-radius);
  overflow: hidden;
  transition: border-color 0.18s;
}
.gr-group:hover { border-color: var(--gr-border-hi); }

/* Size adjuster row above the group header */
.gr-size-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px 6px;
  background: var(--gr-overlay-1);
  border-bottom: 1px solid var(--gr-border);
}
.gr-size-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gr-dimmer);
}
.gr-size-control { display: flex; align-items: center; gap: 6px; }
.gr-size-btn {
  width: 22px; height: 22px;
  background: var(--gr-overlay-4);
  border: 1px solid var(--gr-border);
  border-radius: 6px; color: var(--gr-text);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  padding: 0; font-family: inherit;
}
.gr-size-btn:hover:not(:disabled) { background: var(--gr-overlay-6); border-color: var(--gr-border-hi); }
.gr-size-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.gr-size-val {
  font-size: 12px; font-weight: 700; color: var(--gr-text);
  min-width: 18px; text-align: center;
}

/* Group header — bold label bar */
.gr-group-header {
  padding: 9px 14px 8px;
  border-bottom: 1px solid var(--gr-border);
  background: var(--gr-accent-dim);
}
.gr-group-label {
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gr-accent); text-transform: uppercase;
}

/* Slots — single-column table rows */
.gr-slots { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 4px; }

.gr-slot {
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  min-height: 36px;
  display: flex; align-items: center; gap: 8px;
}
.gr-slot.filled {
  background: var(--gr-overlay-2);
  border: 1px solid var(--gr-border);
}
.gr-slot.filled:nth-child(even) { background: var(--gr-overlay-5); }
.gr-slot.empty {
  background: transparent;
  border: 1px dashed var(--gr-dimmer);
  color: var(--gr-dimmer); font-size: 12px;
}
.gr-slot.pending {
  background: var(--gr-overlay-2);
  border: 1px dashed rgba(124,109,250,0.3);
}
.gr-slot.pending .gr-slot-name {
  color: var(--gr-muted);
  font-style: italic;
  font-weight: 400;
}
.pending-name {
  color: var(--gr-muted) !important;
  font-style: italic;
  font-weight: 400 !important;
}
.gr-slot-pos {
  font-size: 11px; font-weight: 700; color: var(--gr-accent);
  background: var(--gr-accent-dim);
  border-radius: 5px; padding: 2px 6px; flex-shrink: 0;
  min-width: 28px; text-align: center;
}
.gr-slot.empty .gr-slot-pos { opacity: 0.55; }
.gr-slot-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.gr-slot-name { font-weight: 500; color: var(--gr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-slot-rep  { font-size: 11px; color: var(--gr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Form actions + save button */
.gr-actions, .gr-form-actions {
  margin-top: 18px; display: flex; justify-content: flex-start;
}
.gr-form-actions {
  margin-top: 18px; display: flex; justify-content: center;
}
.gr-btn-save, .gr-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gr-accent); color: #fff; border: none;
  padding: 10px 22px; border-radius: var(--gr-radius);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; letter-spacing: .03em; transition: background .15s;
}
.gr-btn-save:hover, .gr-save-btn:hover { background: #99aaff; }

/* Alerts */
.gr-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--gr-radius);
  font-size: 13px; margin-bottom: 14px; border: 1px solid;
  width: 100%;
}
.gr-alert-success { background: rgba(62,207,142,0.10); border-color: rgba(62,207,142,0.35); color: var(--gr-success); }
.gr-alert-error   { background: rgba(255,107,114,0.10); border-color: rgba(255,107,114,0.35); color: var(--gr-danger); }


/* =============================================================================
   TOURNAMENT FORM  (Nowy / Edytuj Turniej)
============================================================================= */

.tf-card {
    background: rgba(22,22,22,0.95);
    border: 1px solid var(--es-border);
    border-left: 4px solid var(--es-accent);
    border-radius: var(--es-radius-lg);
    padding: 36px 40px 40px;
    max-width: 680px;
    margin: 24px auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 0 25px var(--es-accent-dim);
    transition: box-shadow 0.35s ease;
}

[data-theme="light"] .tf-card {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 0 20px var(--es-accent-dim);
}
.tf-card:hover {
    box-shadow: 0 14px 46px rgba(0,0,0,0.55), 0 0 32px rgba(255,122,0,0.14);
}

.tf-card h3 {
    text-align: center;
    margin-bottom: 28px;
    font-size: 1.5rem;
}

.tf-card form {
    /* override global column-flex form gap value, keep column stacking */
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 0;
}

.tf-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tf-row.tf-hidden { display: none; }

.tf-row label {
    color: var(--es-text-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.tf-row input,
.tf-row select {
    width: 100%;
    margin-bottom: 0;
}

/* Paired fields on one line: Start/Koniec, and the 3 jak_gramy inputs */
.tf-subgrid-2,
.tf-subgrid-3 {
    display: grid;
    gap: 18px 24px;
}
.tf-subgrid-2 { grid-template-columns: 1fr 1fr; }
.tf-subgrid-3 { grid-template-columns: repeat(3, 1fr); }
.tf-subgrid-3.tf-hidden { display: none; }

/* Two-column split: tournament/elimination settings on the left, discipline on the right */
.tf-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    align-items: start;
}

.tf-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Location picker: address search + Leaflet map ---------------------------- */

.tf-row-relative { position: relative; }

.tf-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: var(--es-surface-2);
    border: 1px solid var(--es-border-hi);
    border-radius: var(--es-radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.tf-suggestions li {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--es-text-2);
    cursor: pointer;
    border-bottom: 1px solid var(--es-border);
}

.tf-suggestions li:last-child { border-bottom: none; }

.tf-suggestions li:hover {
    background: var(--es-accent-dim);
    color: var(--es-text);
}

.tf-map {
    width: 100%;
    height: 260px;
    border-radius: var(--es-radius-sm);
    border: 1px solid var(--es-border-hard);
    z-index: 0;
}

.tf-map-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--es-text-3);
}

.tf-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.tf-actions .btn-primary {
    min-width: 200px;
}

@media (max-width: 640px) {
    .tf-subgrid-2,
    .tf-subgrid-3,
    .tf-columns { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .tf-card { padding: 24px 20px 28px; }
}



.csv-importer {
	display: flex;
	justify-content: center;
	--bg:        #1e1e2e;
    --surface:   #2a2a3c;
    --border:    #3d3d55;
    --text:      #e0e0f0;
    --muted:     #8888aa;
    --accent:    #7b8cde;
    --accent-h:  #99aaff;
    --radius:    6px;
    --ok-bg:     #1a3a2a;  --ok-bdr: #2e6e4a;  --ok-txt: #7ed9a0;
    --err-bg:    #3a1a1e;  --err-bdr:#7a2e38;  --err-txt: #f4a0a8;
    --warn-bg:   #2e2510;  --warn-bdr:#7a5e10; --warn-txt:#f0cc70;
    --info-bg:   #12263a;  --info-bdr:#1e5080; --info-txt:#7ec8f4;
    font-family: inherit;
}
.csv-importer *,
.csv-importer *::before,
.csv-importer *::after { box-sizing: border-box; }

[data-theme="light"] .csv-importer {
    --bg:        #f4f4f8;
    --surface:   #ffffff;
    --border:    #d8d8e6;
    --text:      #1a1a2a;
    --muted:     #6a6a85;
    --accent:    #5566c2;
    --accent-h:  #4455a8;
    --ok-bg:     #e7f7ef;  --ok-bdr: #8fd9b6;  --ok-txt: #1f7a4c;
    --err-bg:    #fdecee;  --err-bdr:#f0a8ae;  --err-txt: #a02330;
    --warn-bg:   #fdf3df;  --warn-bdr:#e8c877; --warn-txt: #8a6a10;
    --info-bg:   #e8f4fc;  --info-bdr:#a8d4f0; --info-txt: #1f5f8a;
}

.csv-importer .ci-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    max-width: 560px;
    color: var(--text);
}
.csv-importer h3 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-h);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.csv-importer .ci-hint {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
}
.csv-importer .ci-hint strong { color: var(--text); }
.csv-importer .ci-hint code {
    background: #111120;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    color: #b0b8f8;
}
[data-theme="light"] .csv-importer .ci-hint code {
    background: #eceefa;
    color: #4a52b0;
}
.csv-importer .ci-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.csv-importer .ci-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 150px;
}
.csv-importer label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.csv-importer input[type="file"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    width: 100%;
    cursor: pointer;
}
.csv-importer input[type="file"]:focus { outline: 2px solid var(--accent); }

.csv-importer select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    color: var(--text);
    font-size: 13px;
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238888aa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.csv-importer select:focus { outline: 2px solid var(--accent); }

.csv-importer .ci-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}
.csv-importer .ci-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}
.csv-importer .ci-check span {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.csv-importer .ci-check small {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.csv-importer button[type="submit"] {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    transition: background .15s;
}
.csv-importer button[type="submit"]:hover { background: var(--accent-h); }

.csv-importer .ci-msg {
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.csv-importer .ci-msg-success { background:var(--ok-bg);   border:1px solid var(--ok-bdr);   color:var(--ok-txt);   }
.csv-importer .ci-msg-error   { background:var(--err-bg);  border:1px solid var(--err-bdr);  color:var(--err-txt);  }
.csv-importer .ci-msg-warning { background:var(--warn-bg); border:1px solid var(--warn-bdr); color:var(--warn-txt); }
.csv-importer .ci-msg-info    { background:var(--info-bg); border:1px solid var(--info-bdr); color:var(--info-txt); }


/* Custom styles for dostep.php - 3-column layout */
.wide-card {
    max-width: 1200px;
    width: 100%;
}

.tf-columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.tf-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 960px) {
    .tf-columns-3 {
        grid-template-columns: 1fr;
    }
}

.table {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  background-color: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2e2e2e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="light"] .table { background-color: #ffffff; border-color: #e2e2e2; }
[data-theme="light"] .cell  { color: #1a1a1a; border-bottom-color: #eee; }
[data-theme="light"] .row:hover .cell { background-color: #f5f5f5; }
[data-theme="light"] .row .cell:nth-child(2) { color: #555; }

.row {
  display: contents;
}

.cell {
  padding: 14px 16px;
  color: #e0e0e0;
  font-size: 14px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  transition: background-color 0.15s ease;
}

/* Remove border on last row */
.row:last-child .cell {
  border-bottom: none;
}

/* Hover highlight across the whole row */
.row:hover .cell {
  background-color: #242424;
}

/* Middle column: truncate with ellipsis */
.row .cell:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  color: #b8b8b8;
}

/* First column: subtle orange accent as the "label" column */
.row .cell:first-child {
  color: #ff9d4d;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* =============================================================================
   SEED MANAGER (moved from losowanie.php)
   Drag-and-drop seeding list. Fully self-contained local palette, scoped
   under .seed-manager. Note: the two .sm-alert rules below are scoped to
   .seed-manager specifically because a differently-styled, unrelated
   ".sm-alert" already exists site-wide in the ALERTS section above — this
   avoids the class-name collision that existed when this CSS lived inline
   in losowanie.php.
============================================================================= */

.seed-manager {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  --sm-card:        #1c1c2a;
  --sm-border:      rgba(255,255,255,0.08);
  --sm-border-hi:   rgba(255,255,255,0.20);
  --sm-accent:      #7c6dfa;
  --sm-accent-dim:  rgba(124,109,250,0.16);
  --sm-accent-glow: rgba(124,109,250,0.30);
  --sm-text:        #eeeef5;
  --sm-muted:       #7777a0;
  --sm-dimmer:      #44445a;
  --sm-success:     #3ecf8e;
  --sm-danger:      #ff6b72;
  --sm-warn:        #f5a623;
  --sm-radius:      12px;
  --sm-row-h:       56px; /* used by JS too via CSS var */
  --sm-overlay-1:   rgba(255,255,255,0.03);
  --sm-overlay-2:   rgba(255,255,255,0.05);
  --sm-overlay-3:   rgba(255,255,255,0.06);
  --sm-overlay-4:   rgba(255,255,255,0.10);
  padding: 32px 24px 48px;
  color: var(--sm-text);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seed-manager *, .seed-manager *::before, .seed-manager *::after { box-sizing: border-box; }

[data-theme="light"] .seed-manager {
  --sm-card:        #ffffff;
  --sm-border:      rgba(0,0,0,0.10);
  --sm-border-hi:   rgba(0,0,0,0.22);
  --sm-accent:      #5b4bd6;
  --sm-accent-dim:  rgba(91,75,214,0.12);
  --sm-accent-glow: rgba(91,75,214,0.25);
  --sm-text:        #1a1a1a;
  --sm-muted:       #5a5a72;
  --sm-dimmer:      #b8b8c8;
  --sm-overlay-1:   rgba(0,0,0,0.03);
  --sm-overlay-2:   rgba(0,0,0,0.05);
  --sm-overlay-3:   rgba(0,0,0,0.06);
  --sm-overlay-4:   rgba(0,0,0,0.10);
}

/* width: matches the group section above (.gr-inner) so both sections align */
.sm-inner {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header */
.sm-header { margin-bottom: 24px; text-align: center; }
.sm-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sm-accent); margin-bottom: 6px;
}
.sm-title {
  font-size: 26px; font-weight: 700; color: var(--sm-text);
  margin: 0 0 6px; letter-spacing: -0.02em;
}
.sm-subtitle { font-size: 14px; color: var(--sm-muted); margin: 0; }

/* Alerts — scoped to .seed-manager to avoid colliding with the sitewide .sm-alert */
.seed-manager .sm-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--sm-radius);
  font-size: 14px; margin-bottom: 16px; border: 1px solid;
  width: 100%;
}
.seed-manager .sm-alert-success { background: rgba(62,207,142,0.08); border-color: rgba(62,207,142,0.3); color: var(--sm-success); }
.seed-manager .sm-alert-error   { background: rgba(255,107,114,0.08); border-color: rgba(255,107,114,0.3); color: var(--sm-danger); }

/* Section label */
.sm-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--sm-dimmer);
  padding: 0 4px 8px; border-bottom: 1px solid var(--sm-border);
  margin-bottom: 8px; width: 100%; text-align: left;
}

/* Column header */
.sm-col-header {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 160px 80px 28px;
  gap: 12px;
  padding: 0 14px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sm-dimmer);
  width: 100%; text-align: left;
}

/* List */
.sm-list {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: flex; flex-direction: column;
  gap: 0; /* gaps handled via padding-top/bottom on spacers */
  width: 100%;
  position: relative;
}

/* Rows */
.sm-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 160px 80px 28px;
  gap: 12px;
  align-items: center;
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  padding: 0 14px;
  height: var(--sm-row-h);
  cursor: grab;
  user-select: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  position: relative;
  margin-bottom: 6px;
  will-change: transform;
}
.sm-row:last-child { margin-bottom: 0; }
.sm-row:active { cursor: grabbing; }
.sm-row:hover  { border-color: var(--sm-border-hi); }

.sm-row.is-dragging { opacity: 0; pointer-events: none; }

.sm-row.shift-down { transform: translateY(calc(var(--sm-row-h) + 6px)); transition: transform 0.18s ease; }
.sm-row.shift-up   { transform: translateY(calc(-1 * (var(--sm-row-h) + 6px))); transition: transform 0.18s ease; }
.sm-row.no-shift   { transform: translateY(0); transition: transform 0.18s ease; }

.sm-row.unseeded { cursor: default; border-style: dashed; opacity: 0.75; }
.sm-row.unseeded:hover { border-color: var(--sm-border-hi); opacity: 1; }

/* Seed badge */
.sm-seed {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--sm-accent); background: var(--sm-accent-dim);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; flex-shrink: 0;
}
.sm-seed.empty {
  background: transparent;
  border: 1px dashed var(--sm-dimmer);
  color: var(--sm-dimmer);
  font-size: 18px; font-weight: 300;
}

/* Team info */
.sm-team-name  { font-size: 15px; font-weight: 500; color: var(--sm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-represents { font-size: 13px; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Manual seed input */
.sm-seed-input {
  width: 72px; height: 32px;
  background: var(--sm-overlay-2);
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  color: var(--sm-text);
  font-size: 13px; font-family: inherit;
  text-align: center;
  padding: 0 6px;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.sm-seed-input::-webkit-outer-spin-button,
.sm-seed-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sm-seed-input:focus { outline: none; border-color: var(--sm-accent); }
.sm-seed-input::placeholder { color: var(--sm-dimmer); }

/* Handle */
.sm-handle {
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0.22; transition: opacity 0.18s; padding: 4px; flex-shrink: 0;
  cursor: grab;
}
.sm-row:hover .sm-handle { opacity: 0.60; }
.sm-handle span { display: block; width: 16px; height: 2px; background: var(--sm-text); border-radius: 2px; }

/* Ghost */
.sm-ghost {
  position: fixed; pointer-events: none; z-index: 9999;
  background: var(--sm-card);
  border: 1px solid var(--sm-accent);
  border-radius: var(--sm-radius);
  padding: 0 14px;
  height: var(--sm-row-h);
  box-shadow: 0 12px 48px var(--sm-accent-glow);
  transform: rotate(1deg) scale(1.02);
  display: flex; align-items: center; gap: 12px;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  color: var(--sm-text);
}

/* Drop gap indicator */
.sm-drop-gap {
  height: 0;
  overflow: visible;
  position: relative;
  transition: height 0.18s ease;
  pointer-events: none;
}
.sm-drop-gap.active {
  height: calc(var(--sm-row-h) + 6px);
}
.sm-drop-gap::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: var(--sm-accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--sm-accent-glow);
  opacity: 0;
  transition: opacity 0.15s;
}
.sm-drop-gap.active::after { opacity: 1; }

/* Divider between seeded/unseeded */
.sm-divider {
  width: 100%; border: none;
  border-top: 1px dashed var(--sm-border);
  margin: 16px 0 12px;
}

/* Buttons */
.sm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.sm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; border-radius: var(--sm-radius);
  padding: 12px 22px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  letter-spacing: 0.01em;
}
.sm-btn:active { transform: scale(0.97); }
.sm-btn-primary { background: var(--sm-accent); color: #fff; }
.sm-btn-primary:hover { background: #9588fc; }
.sm-btn-secondary {
  background: var(--sm-overlay-3);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
}
.sm-btn-secondary:hover { background: var(--sm-overlay-4); border-color: var(--sm-border-hi); }

.sm-counter { font-size: 13px; color: var(--sm-muted); }
.sm-counter strong { color: var(--sm-text); font-weight: 600; }


/* =============================================================================
   ADMIN DARK PAGES — shared design tokens
   Originally two near-identical copies (one inline in mecze.php, one inline
   in klasyfikacja.php) with the same surface/card/border/accent/text/muted/
   radius/font values, just under different generic :root names. Consolidated
   here as one --admin-* token set so both pages (and .btn-print, which was
   byte-for-byte identical in both files) share a single source of truth.
   They stay in global :root (rather than scoped to .mecze-page/.klas-page)
   because mecze.php's confirmation modal renders as a sibling of .mecze-page
   in the markup, not nested inside it, so it still needs to reach these vars.
   The universal *,*::before,*::after reset that was here originally has been
   dropped — it exactly duplicated the site's global RESET rule at the top of
   this file.
============================================================================= */

  :root {
    --admin-surface:   #161921;
    --admin-card:      #1e2330;
    --admin-card-hov:  #262c3e;
    --admin-border:    #2e3550;
    --admin-accent:    #f0a500;
    --admin-text:      #e8ecf5;
    --admin-muted:     #6b7494;
    --admin-disabled:  #0f1117;
    --admin-disabled-text: #4a5170;
    --admin-radius:    6px;
    --admin-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --admin-font-cond: 'Arial Narrow', var(--admin-font-base);
    --admin-status-waiting:   #6b7494;
    --admin-status-progress:  #f0a500;
    --admin-status-finished:  #3ec97a;
    --admin-status-cancelled: #e5484d;
    --admin-status-walkower:  #8a7cf0;
    --admin-status-bye:       #4fa8e0;
    /* Podium colors (klasyfikacja.php) */
    --admin-gold:      #f0a500;
    --admin-silver:    #a8b4c0;
    --admin-bronze:    #c87941;
  }
  .mecze-page {
    color:var(--admin-text); font-family:var(--admin-font-base);
    padding:24px 28px 48px;
    display:flex; flex-direction:column; align-items:center;
  }
  .mecze-error {
    color:#f97373; font-family:var(--admin-font-cond); font-weight:600;
    padding:12px 0;
  }

  /* --- Tournament header: print-only (hidden on screen) --- */
  .mecze-turniej-header {
    display:none;
    text-align:center; margin-bottom:24px;
  }
  .mecze-turniej-nazwa {
    font-family:var(--admin-font-cond); font-size:1.6rem; font-weight:800;
    letter-spacing:.04em; color:var(--admin-text);
  }
  .mecze-turniej-daty {
    font-family:var(--admin-font-cond); font-size:.95rem;
    color:var(--admin-muted); margin-top:4px;
  }

  /* --- Gorny pasek ustawien - dwa wiersze, etykieta obok pola ---
     flex-direction:column rozdziela wiersze; kazdy settings-row
     jest jednym wierszem z polami obok siebie. */
  .settings-bar {
    display:flex; flex-direction:column; gap:12px;
    background:var(--admin-card); border:1px solid var(--admin-border); border-radius:var(--admin-radius);
    padding:14px 20px; margin-bottom:8px; width:fit-content; max-width:100%;
  }
  .settings-row {
    display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:24px;
  }
  .settings-field {
    display:flex; flex-direction:row; flex:0 0 auto; align-items:center; gap:10px; white-space:nowrap;
  }
  .settings-field label {
    display:inline-block; margin:0; font-family:var(--admin-font-cond); font-size:.78rem; letter-spacing:.03em;
    color:var(--admin-muted); font-weight:700; white-space:nowrap;
  }
  .settings-field input,
  .settings-field select {
    display:inline-block; margin:0; background:var(--admin-surface); border:1px solid var(--admin-border); border-radius:var(--admin-radius);
    color:var(--admin-text); padding:8px 10px; font-size:.9rem; min-width:110px;
  }
  .settings-select { cursor:pointer; }
  .mecze-ok {
    color:var(--admin-status-finished); font-family:var(--admin-font-cond); font-weight:600;
    padding:8px 0; font-size:.88rem;
  }
  .tabela-tytul {
    font-family:var(--admin-font-cond); font-size:1.1rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--admin-accent);
    margin:24px 0 10px 0; text-align:center; width:100%;
  }
  /* --- Tabela awansu --- */
  .awans-hint {
    font-size:.8rem; color:var(--admin-muted); margin-bottom:10px; text-align:center;
  }
  .awans-wrapper { overflow-x:auto; }
  .awans-actions { margin-top:14px; display:flex; justify-content:center; }

  table.awans-table {
    width:auto; margin:0 auto 8px; border-collapse:collapse; background:var(--admin-surface);
    border-radius:var(--admin-radius); overflow:hidden;
  }
  table.awans-table th, table.awans-table td {
    border:1px solid var(--admin-border); padding:9px 16px;
    font-size:.85rem; text-align:left;
  }
  table.awans-table thead th {
    background:var(--admin-card); font-family:var(--admin-font-cond);
    font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    font-size:.72rem; color:var(--admin-muted); text-align:center;
  }
  .awans-th-handle { width:28px; }
  .awans-handle {
    cursor:grab; color:var(--admin-muted); font-size:1.1rem;
    text-align:center; padding:9px 8px; user-select:none;
  }
  .awans-handle:active { cursor:grabbing; }

  tr.awans-row { transition:background .12s; }
  tr.awans-row-seed  { background:rgba(240,165,0,.06); }
  tr.awans-row-nie   { background:transparent; }
  tr.awans-row.dragging {
    opacity:.35;
  }
  /* Drop gap: a blue line appears between rows when dragging over */
  tr.awans-row.drag-over-above td { box-shadow:inset 0 3px 0 0 var(--admin-accent); }
  tr.awans-row.drag-over-below td { box-shadow:inset 0 -3px 0 0 var(--admin-accent); }

  /* Separator rows between place tiers */
  tr.awans-separator-row td {
    padding:0; height:2px; border:none;
    background:var(--admin-border);
  }

  td.awans-seed  { color:var(--admin-accent); font-weight:700; text-align:center; }
  td.awans-nie   { color:var(--admin-muted);  font-weight:400; text-align:center; }
  td.awans-miejsce { color:var(--admin-muted); text-align:center; font-variant-numeric:tabular-nums; }
  td.awans-stat  { color:var(--admin-muted); font-size:.78rem; text-align:center; font-variant-numeric:tabular-nums; }
  .btn-zapisz {
    background:var(--admin-accent); color:#1a1200; border:none; border-radius:var(--admin-radius);
    font-weight:700; font-size:.85rem; padding:10px 18px; cursor:pointer;
  }
  .btn-zapisz:active { transform:scale(0.98); }

  /* --- Tabela --- */
  table.mecze-table {
    width:auto; margin:0 auto; border-collapse:collapse; background:var(--admin-surface);
    border-radius:var(--admin-radius); overflow:hidden;
  }
  table.mecze-table th, table.mecze-table td {
    border:1px solid var(--admin-border); padding:10px 14px;
    font-size:.85rem; text-align:center;
  }
  table.mecze-table thead th {
    background:var(--admin-card); font-family:var(--admin-font-cond);
    font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    font-size:.72rem; color:var(--admin-muted);
  }
  table.mecze-table tbody tr.match-row {
    cursor:pointer; transition:background .12s ease; scroll-margin-top:140px;
  }
  table.mecze-table tbody tr.match-row:hover {
    background:var(--admin-card-hov);
  }
  table.mecze-table tbody tr.match-row.disabled-row {
    cursor:default; background:var(--admin-disabled); color:var(--admin-disabled-text);
  }
  table.mecze-table tbody tr.match-row.disabled-row td {
    color:var(--admin-disabled-text);
  }
  td.col-numer { font-family:var(--admin-font-cond); font-weight:700; color:var(--admin-accent); }
  .wynik-detail { font-size:.72rem; color:var(--admin-muted); }

  .inline-input {
    width:90px; background:var(--admin-surface); border:1px solid var(--admin-border); border-radius:4px;
    color:var(--admin-text); padding:4px 6px; font-size:.82rem; text-align:center;
  }
  .inline-input-boisko { width:70px; }

  .status-badge {
    display:inline-block; padding:4px 10px; border-radius:999px;
    font-family:var(--admin-font-cond); font-weight:700; font-size:.7rem;
    letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
    background:rgba(255,255,255,.06);
  }
  .status-0 { color:var(--admin-status-waiting); }
  .status-1 { color:var(--admin-status-waiting); }
  .status-2 { color:var(--admin-status-progress); }
  .status-3 { color:var(--admin-status-finished); }
  .status-4 { color:var(--admin-status-finished); }
  .status-5 { color:var(--admin-status-walkower); }
  .status-6 { color:var(--admin-status-bye); }

  .btn-akcja {
    display:inline-block; background:var(--admin-card); border:1px solid var(--admin-border);
    border-radius:4px; color:var(--admin-text); font-size:.78rem; font-weight:600;
    padding:6px 12px; text-decoration:none; cursor:pointer;
  }
  .btn-akcja:hover { background:var(--admin-card-hov); }
  .btn-akcja-anuluj { color:var(--admin-muted); }

  .inline-cell { cursor:default; }
  .inline-save-status {
    display:inline-block; width:14px; margin-left:4px; font-size:.85rem; font-weight:700;
  }
  .inline-save-status.saving { color:var(--admin-muted); }
  .inline-save-status.saved  { color:var(--admin-status-finished); }
  .inline-save-status.error  { color:var(--admin-status-cancelled); cursor:help; }

  /* --- Modal potwierdzenia awansow --- */
  .modal-overlay {
    display:none; position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.65); align-items:center; justify-content:center;
  }
  .modal-overlay.modal-visible { display:flex; }
  .modal-box {
    background:var(--admin-card); border:1px solid var(--admin-border); border-radius:10px;
    padding:28px 32px; max-width:420px; width:90%; text-align:center;
  }
  .modal-box p {
    font-size:1rem; line-height:1.5; margin-bottom:22px; color:var(--admin-text);
  }
  .modal-actions { display:flex; gap:14px; justify-content:center; }
  .btn-modal-cofnij {
    background:var(--admin-bg-elevated, var(--admin-card)); color:var(--admin-muted);
    border:1px solid var(--admin-border); border-radius:var(--admin-radius);
    font-weight:700; font-size:.9rem; padding:10px 22px; cursor:pointer;
  }
  .btn-modal-potwierdz {
    background:#c0292e; color:#fff; border:none;
    border-radius:var(--admin-radius);
    font-weight:700; font-size:.9rem; padding:10px 22px; cursor:pointer;
  }
  .btn-modal-potwierdz:active { transform:scale(.98); }
  tr.edit-row td { background:var(--admin-card); text-align:left; padding:0; }
  .edit-panel { padding:18px 24px 20px 48px; } /* margines z lewej, jak dla "podrzednych" wierszy */
  .edit-panel-error { margin-bottom:12px; }
  .set-edit-row {
    display:flex; align-items:center; gap:10px; margin-bottom:8px;
  }
  .set-edit-label {
    font-family:var(--admin-font-cond); font-weight:700; color:var(--admin-muted);
    width:60px; font-size:.8rem;
  }
  .set-edit-input {
    width:64px; background:var(--admin-surface); border:1px solid var(--admin-border); border-radius:4px;
    color:var(--admin-text); padding:6px 8px; text-align:center; font-size:.9rem;
  }
  .set-edit-sep { color:var(--admin-muted); font-weight:700; }
  .edit-panel-actions {
    display:flex; align-items:center; gap:14px; margin-top:14px;
  }

  /* --- Print button --- */
  .mecze-print-bar {
    display:flex; justify-content:center; width:100%; max-width:720px;
    margin-top:28px;
  }
  .btn-print {
    background:var(--admin-accent); border:none;
    border-radius:var(--admin-radius); color:#1a1200;
    font-family:var(--admin-font-cond); font-weight:700; font-size:.9rem;
    padding:10px 28px; cursor:pointer; letter-spacing:.04em;
    text-transform:uppercase;
  }
  .btn-print:hover { background:#d98e00; }

  /* --- Print media --- */
  @media print {
    /* Controls that only make sense on-screen */
    .settings-bar, .awans-actions, .awans-th-handle, .awans-handle,
    .btn-akcja, .btn-zapisz, .inline-save-status,
    tr.edit-row, .modal-overlay, .col-akcja { display:none !important; }

    .mecze-page { padding:4mm 0; }
    .mecze-turniej-header { display:block !important; }
    .mecze-turniej-nazwa { color:#000 !important; }
    .mecze-turniej-daty  { color:#444 !important; }

    table.mecze-table, table.awans-table { width:100%; outline:2px solid #333; }
    table.mecze-table th, table.mecze-table td,
    table.awans-table th, table.awans-table td {
      border:1px solid #999 !important; color:#000 !important;
    }
    table.mecze-table thead th, table.awans-table thead th {
      background:#1a1a2e !important; color:#f0a500 !important;
      -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
    .status-badge { background:transparent !important; }
    .tabela-tytul { color:#c47a00 !important; }
  }

:root[data-theme="light"] {
  --admin-surface:          #f5f6fa;
  --admin-card:             #ffffff;
  --admin-card-hov:         #eef0f6;
  --admin-border:           #dcdfe8;
  --admin-accent:           #c98600;
  --admin-text:             #1a1d27;
  --admin-muted:            #5a6178;
  --admin-disabled:         #eceef2;
  --admin-disabled-text:    #9aa0b4;
  --admin-status-waiting:   #6b7494;
  --admin-status-progress:  #c98600;
  --admin-status-finished:  #2f9e63;
  --admin-status-cancelled: #c73438;
  --admin-status-walkower:  #6f5fd6;
  --admin-status-bye:       #2f84c0;
  /* Podium colors — darkened slightly for contrast on white */
  --admin-gold:             #b8860b;
  --admin-silver:           #7a8794;
  --admin-bronze:           #a8622e;
}

[data-theme="light"] .status-badge { background: rgba(0,0,0,.06); }
[data-theme="light"] .mecze-error  { color: #c73438; }


/* =============================================================================
   KLASYFIKACJA — final standings page (moved from klasyfikacja.php)
   Shares the --admin-* design tokens defined in the ADMIN DARK PAGES section
   above (same values were previously duplicated here under generic :root
   names). .btn-print was also dropped as a duplicate — mecze.php's version
   above is byte-for-byte identical and already applies to this page too.
   The shared chrome-hiding print rules now live in the global @media print
   block near the top of this file; only page-specific print rules remain
   below.
============================================================================= */

.klas-page {
  color:var(--admin-text); font-family:var(--admin-font-base);
  padding:24px 28px 48px;
  display:flex; flex-direction:column; align-items:center;
}
.klas-error {
  color:#f97373; font-family:var(--admin-font-cond); font-weight:600;
  padding:12px 0;
}
[data-theme="light"] .klas-error { color: #c73438; }

.klas-title {
  font-family:var(--admin-font-cond); font-size:1.3rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--admin-accent); margin-bottom:20px; text-align:center;
}
.klas-title-secondary {
  font-family:var(--admin-font-cond); font-size:1rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--admin-muted); margin:32px 0 12px; text-align:center;
}

/* --- Hide the site login/nav bar on this page only (screen, not just print).
       We target the container that holds the login forms via its children
       rather than the broad div.container which would also hide page content.
       Scoped to body:has(.klas-page) because .klas-page only renders on the
       klasyfikacja template — without this scope the rule hides top_turniej.php's
       turniej-switcher/user-menu bar (which also uses #loginform/.float_L/.float_R)
       on every page site-wide, which is the "top_turniej.php disappeared" bug. */
body:has(.klas-page) div.container:has(#loginform),
body:has(.klas-page) div.container:has(.float_L),
body:has(.klas-page) div.container:has(.float_R) { display:none !important; }

body:has(.klas-page) #loginform,
body:has(.klas-page) .float_L,
body:has(.klas-page) .float_R { display:none !important; }

/* --- Tournament header --- */
.klas-turniej-header {
  text-align:center; margin-bottom:24px;
}
.klas-turniej-nazwa {
  font-family:var(--admin-font-cond); font-size:1.6rem; font-weight:800;
  letter-spacing:.04em; color:var(--admin-text);
}
.klas-turniej-daty {
  font-family:var(--admin-font-cond); font-size:.95rem;
  color:var(--admin-muted); margin-top:4px;
}

/* --- Print button (bottom, centred) --- */
.klas-print-bar {
  display:flex; justify-content:center; width:100%; max-width:720px;
  margin-top:28px;
}

/* --- Print media: page-specific rules only (chrome-hiding is global, see top of file) --- */
@media print {
  .klas-page { padding:4mm 0; }
  /* Tournament header in print */
  .klas-turniej-nazwa { color:#000 !important; font-size:1.4rem !important; }
  .klas-turniej-daty  { color:#444 !important; }
  /* Table borders: outline survives border-collapse without clipping */
  table.klas-table { width:100%; outline:2px solid #333; }
  table.klas-table th, table.klas-table td {
    border:1px solid #999 !important; color:#000 !important;
  }
  table.klas-table thead th {
    background:#1a1a2e !important; color:#f0a500 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  /* Bold vivid place colours */
  td.col-place.place-1 { color:#c47a00 !important; }
  td.col-place.place-2 { color:#6a7f8e !important; }
  td.col-place.place-3 { color:#a0522d !important; }
  td.col-names { color:#000 !important; font-weight:700 !important; }
  td.col-repr  { color:#333 !important; }
  ul.player-list li { color:#333 !important; }
  ul.player-list li span.player-name { color:#000 !important; }
  tr.klas-podium-sep td {
    background:#f0a500 !important; height:2px !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .klas-title { color:#c47a00 !important; }
  .klas-title-secondary { color:#555 !important; }
}

/* --- Classification table --- */
table.klas-table {
  width:auto; min-width:480px; margin:0 auto;
  border-collapse:collapse; background:var(--admin-surface);
  /* outline instead of border+overflow:hidden so print doesn't clip the outer edge */
  outline:1px solid var(--admin-border); border-radius:var(--admin-radius);
}
table.klas-table th, table.klas-table td {
  border:1px solid var(--admin-border); padding:11px 18px;
  font-size:.88rem; text-align:left;
}
table.klas-table thead th {
  background:var(--admin-card); font-family:var(--admin-font-cond);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  font-size:.88rem; color:var(--admin-muted); text-align:center;
}
table.klas-table td.col-place, table.klas-table th.col-place {
  font-family:var(--admin-font-cond); font-weight:800;
  font-size:.88rem; text-align:center; white-space:nowrap;
  width:56px;
}
.place-1 { color:var(--admin-gold); }
.place-2 { color:var(--admin-silver); }
.place-3 { color:var(--admin-bronze); }
td.col-names { font-weight:600; }
td.col-repr  { color:var(--admin-muted); }

/* --- team_sklad player roster --- */
table.klas-table tr.sklad-players-row td {
  padding:0; border-top:none;
}
table.klas-table ul.player-list {
  list-style:none; padding:6px 18px 10px 60px;
}
table.klas-table ul.player-list li {
  font-size:.88rem; color:var(--admin-muted);
  padding:3px 0; line-height:1.4;
}
table.klas-table ul.player-list li span.player-name {
  color:var(--admin-text); font-weight:500;
}

tr.klas-empty-row td {
  background:var(--admin-surface); border-color:var(--admin-border);
  height:36px;
}

tr.klas-podium-sep td {
  padding:0; height:3px; border:none;
  background:linear-gradient(90deg, transparent, var(--admin-accent), transparent);
}


/* =============================================================================
   TOURNAMENT BRACKET — shared component
   Consolidated from three near-identical inline stylesheets:
   puchar_only.php (single-elimination, final only), puchar_3rd.php
   (single-elimination + 3rd place match), and brazylijka.php
   (double-elimination WB/LB bracket). All three used the same admin dark
   palette (already unified as --admin-* tokens elsewhere in this file) plus
   the same .bracket-page/.match/.team/.pdf-mode/.btn-pdf rules; only
   brazylijka.php adds the WB/LB-specific pieces (.bracket-half, .half-label,
   .lb-match, .match-sf, .sf-teams/.sf-vs, .centre-col). Those extra rules are
   included here too since they simply don't match anything on the simpler
   single-elimination pages' markup.
   .pdf-mode is a temporary forced-light state toggled by JS during PDF export
   (html2canvas) — unrelated to the site's light/dark toggle, left untouched.
============================================================================= */

.bracket-page {
  --bracket-final:     #22d9a0;
  --bracket-third:     #c084fc;
  --bracket-lb-accent: #1a8fff;
  --bracket-sf-color:  #f97316;
  --bracket-match-w:   172px;
  --bracket-sf-w:      300px;
  --bracket-gap-x:     48px;
  color:var(--admin-text); font-family:'Barlow',sans-serif;
  min-height:10vh; overflow-x:auto; overflow-y:auto;
  display:flex; flex-direction:column;
  align-items:center;
  padding-top:24px;
}

[data-theme="light"] .bracket-page {
  --bracket-final:     #178f68;
  --bracket-third:     #8b5cf6;
  --bracket-lb-accent: #1a73e8;
  --bracket-sf-color:  #c2410c;
}

.scroll-hint { text-align:center; font-size:.75rem; color:var(--admin-muted); padding:6px; display:none; }
@media(max-width:1100px){ .scroll-hint { display:block; } }

/* Base (single-elimination) layout */
.bracket-outer { padding:0 28px 32px; }
/* Double-elimination (brazylijka.php) layout: WB/LB side-by-side around a
   centre column. Detected via :has(.bracket-half) so the same .bracket-outer
   class works for both layouts without needing a page-type modifier class. */
.bracket-outer:has(.bracket-half) {
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:stretch;
}
.bracket-half { display:flex; flex-direction:column; min-width:0; height:100%; }
.half-label {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding-bottom:10px;
}
.half-label.wb { color:var(--admin-accent); opacity:.85; }
.half-label.lb { color:var(--bracket-lb-accent); opacity:.85; text-align:right; }

.bracket-grid { display:flex; align-items:stretch; gap:var(--bracket-gap-x); position:relative; flex:1; height:100%; }
.round-col { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; align-self:stretch; }
.round-label {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--admin-accent); opacity:.85; padding-bottom:8px; text-align:center;
}
.round {
  flex:1;
  display:flex; flex-direction:column;
  justify-content:space-evenly; align-items:center;
}
.final-col .round { justify-content:center; gap:22px; }

/* Match card */
.match {
  width:var(--bracket-match-w); background:var(--admin-card); border:1px solid var(--admin-border);
  border-radius:var(--admin-radius); overflow:hidden;
  transition:border-color .2s,box-shadow .2s; cursor:default; flex-shrink:0;
  margin-block:5px;
}
.match:hover                { border-color:var(--admin-accent); box-shadow:0 0 0 2px rgba(240,165,0,.15),0 4px 20px rgba(0,0,0,.4); }
.match.lb-match              { border-color:#1e3050; }
.match.lb-match:hover        { border-color:var(--bracket-lb-accent); box-shadow:0 0 0 2px rgba(26,143,255,.15),0 4px 20px rgba(0,0,0,.4); }
.match.final-match          { border-color:var(--bracket-final);   box-shadow:0 0 0 2px rgba(34,217,160,.25); }
.match.third-match          { border-color:var(--bracket-third);   box-shadow:0 0 0 2px rgba(192,132,252,.25); }
.match.match-sf              { border-color:var(--bracket-sf-color); box-shadow:0 0 0 2px rgba(249,115,22,.2); width:var(--bracket-sf-w); }
.match.match-sf:hover        { box-shadow:0 0 0 2px rgba(249,115,22,.4),0 4px 20px rgba(0,0,0,.4); }
.match.empty                { opacity:.3; }

.match-label {
  background:var(--admin-surface); border-bottom:1px solid var(--admin-border);
  font-family:'Barlow Condensed',sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--admin-muted); padding:3px 9px;
}
.match.lb-match    .match-label { color:var(--bracket-lb-accent); opacity:.9; }
.match.final-match .match-label { color:var(--bracket-final); }
.match.third-match .match-label { color:var(--bracket-third); }
.match.match-sf    .match-label { color:var(--bracket-sf-color); }

.team {
  padding:7px 9px; font-size:.81rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--admin-border); color:var(--admin-text); transition:background .15s;
}
.team:last-child { border-bottom:none; }
.team.tbd { color:var(--admin-muted); font-style:italic; }
.team:not(.tbd):hover { background:rgba(255,255,255,.04); }
[data-theme="light"] .team:not(.tbd):hover { background:rgba(0,0,0,.04); }

/* SF horizontal layout (double-elimination) */
.sf-teams { display:flex; align-items:stretch; }
.sf-teams .team { flex:1; border-bottom:none; border-right:1px solid var(--admin-border); text-align:center; }
.sf-teams .team:last-child { border-right:none; }
.sf-vs {
  padding:7px 6px; font-family:'Barlow Condensed',sans-serif; font-size:.7rem;
  font-weight:700; color:var(--admin-muted); display:flex; align-items:center; flex-shrink:0;
}

/* Centre column (double-elimination) */
.centre-col {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:24px;
  padding:0 calc(var(--bracket-gap-x)*.7);
  flex-shrink:0;
  align-self:stretch;
}
.centre-sf { display:flex; flex-direction:column; align-items:center; gap:6px; }
.centre-finals { display:flex; gap:20px; align-items:flex-start; }
.finals-item { display:flex; flex-direction:column; align-items:center; gap:6px; }
.centre-label {
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; text-align:center;
}

/* PDF capture: light theme applied temporarily during html2canvas export.
   Intentionally independent of the site's [data-theme] toggle. */
.pdf-mode .match         { background:#fff; border-color:#ccc; }
.pdf-mode .match-label   { background:#f0f0f0; border-color:#ddd; color:#555; }
.pdf-mode .match.final-match .match-label { color:#18a87e; }
.pdf-mode .match.third-match .match-label { color:#9060d0; }
.pdf-mode .match.final-match { border-color:#22d9a0; }
.pdf-mode .match.third-match { border-color:#c084fc; }
.pdf-mode .team           { color:#222; border-color:#eee; }
.pdf-mode .team.tbd       { color:#999; }
.pdf-mode .half-label     { color:#c47a00; }
.pdf-mode .half-label.lb  { color:#3b82f6; }
.pdf-mode .round-label    { color:#c47a00; }
.pdf-mode .centre-label   { color:#333; }

/* Generuj PDF button */
#pdf-capture-wrap { position:relative; }
.bracket-pdf-bar {
  display:flex; justify-content:center; padding:20px 0;
}
.btn-pdf {
  background:var(--admin-accent); border:none; border-radius:var(--admin-radius);
  color:#1a1200; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:.9rem; padding:10px 28px;
  cursor:pointer; letter-spacing:.04em; text-transform:uppercase;
}
.btn-pdf:hover { background:#d98e00; }
.btn-pdf:disabled { opacity:.5; cursor:wait; }


/* =============================================================================
   GROUP STANDINGS TABLE — shared component
   grupy.php and grupy_main.php contained byte-for-byte identical inline
   stylesheets (same markup for the main-system-groups view and the
   elimination-phase-groups view) — consolidated into one definition here.
   Uses the shared --admin-* tokens (same surface/card/border/accent/text/
   muted/radius/font values that were duplicated across both files).
============================================================================= */

.groups-page {
  --groups-diag:      #0c0e14;
  --groups-diag-line: #23283a;
  color:var(--admin-text); font-family:var(--admin-font-base);
  padding:24px 28px 48px; overflow-x:auto;
  display:flex; flex-direction:column; align-items:center;
}
[data-theme="light"] .groups-page {
  --groups-diag:      #e4e4ea;
  --groups-diag-line: #f4f4f8;
}
.groups-error {
  color:#f97373; font-family:var(--admin-font-cond); font-weight:600;
  padding:12px 0;
}
[data-theme="light"] .groups-error { color: #c73438; }

.group-block { margin-bottom:36px; display:flex; flex-direction:column; align-items:center; }
.group-title {
  font-family:var(--admin-font-cond); font-weight:700;
  font-size:1rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--admin-accent); padding-bottom:10px; text-align:center;
}
table.group-table {
  border-collapse:collapse; background:var(--admin-surface);
  border-radius:var(--admin-radius); overflow:hidden; margin:0 auto;
}
table.group-table th.kod-col {
  color:var(--admin-accent); font-weight:700;
}
table.group-table th, table.group-table td {
  border:1px solid var(--admin-border); padding:8px 14px;
  font-size:.85rem; text-align:center; white-space:nowrap;
}
table.group-table thead th {
  background:var(--admin-card); font-family:var(--admin-font-cond);
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  font-size:.72rem; color:var(--admin-muted);
  white-space:normal; word-break:normal; overflow-wrap:normal;
  hyphens:none; line-height:1.25; vertical-align:middle;
}
table.group-table thead th:not(.corner) {
  max-width:130px;
}
table.group-table tbody th {
  background:var(--admin-card); text-align:left;
  font-family:var(--admin-font-cond); font-weight:600;
  font-size:.82rem; color:var(--admin-text);
}
th.corner { background:var(--admin-surface); border-color:var(--admin-border); }
td.score-cell { color:var(--admin-text); font-weight:500; }
.score-main { font-weight:600; }
.score-sets {
  margin-top:2px; font-size:.68rem; font-weight:400;
  color:var(--admin-muted); letter-spacing:.02em;
}
th.stat-col { color:var(--admin-accent); }
td.stat-cell { font-weight:700; color:var(--admin-accent); }
.stat-main { font-weight:700; color:var(--admin-accent); }
.stat-sub {
  margin-top:2px; font-size:.68rem; font-weight:400;
  color:var(--admin-muted); letter-spacing:.02em;
}
td.diagonal {
  background:repeating-linear-gradient(
    45deg, var(--groups-diag), var(--groups-diag) 6px, var(--groups-diag-line) 6px, var(--groups-diag-line) 7px
  );
}
th.sort-col {
  cursor:pointer; user-select:none;
}
th.sort-col:hover { color:var(--admin-text); }

/* =============================================================================
   WYBÓR TURNIEJU — strona wyboru turnieju (wybor_turnieju.php)
============================================================================= */

.turniej-wybor-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
}

.turniej-wybor-card {
    width: 100%;
    max-width: 520px;
    text-align: center;
    padding: 40px 36px;
}

.turniej-wybor-card h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.turniej-wybor-tryb {
    margin-bottom: 28px;
    opacity: 0.75;
    font-size: 0.95rem;
}

.turniej-wybor-sekcja {
    margin-bottom: 20px;
}

.turniej-wybor-sekcja label {
    display: block;
    text-align: left;
    margin-bottom: 10px;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.turniej-wybor-brak {
    font-style: italic;
    opacity: 0.8;
}

.turniej-wybor-divider {
    border: none;
    border-top: 1px solid var(--es-border);
    margin: 24px 0;
}

/* Select "Aktywne turnieje" — nowoczesny wygląd, respektujący jasny/ciemny motyw */
.turniej-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--es-surface-2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23ff7a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 9px;
    padding: 18px 44px 18px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--es-text);
    border: 2px solid var(--es-border);
    border-radius: var(--es-radius);
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.turniej-select:hover {
    border-color: var(--es-border-hi);
}

.turniej-select:focus {
    border-color: var(--es-accent);
    box-shadow: 0 0 0 3px var(--es-accent-dim), 0 0 18px var(--es-accent-glow);
    transform: translateY(-1px);
}

/* Karta wyboru turnieju nie powinna "podskakiwać" na hover
   (nadpisuje ogólną regułę .content-box:hover) */
.turniej-wybor-card:hover {
    transform: none;
}

/* Akcje pod selectem: "Zakończone turnieje" i "Panel organizatora" — ten sam rozmiar/styl */
.turniej-wybor-akcje {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.turniej-wybor-akcje form {
    width: 100%;
}

.turniej-wybor-spacer {
    height: 48px;
}

.btn-akcja-turniej {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.85rem;
}

/* ------------------------------------------------------------------
   Hierarchia przycisków na "Wybór turnieju" — trzy poziomy zamiast
   jednego identycznego (domyślnie niebieskiego) stylu przycisku, żeby
   dało się od razu odróżnić "zrób to dalej" od "zmień widok" od
   "przejdź gdzie indziej". Kolory oparte o istniejące zmienne --es-*,
   więc trzymają się motywu jasny/ciemny.
------------------------------------------------------------------- */

/* Poziom 1 — akcja główna, jedna na widok (np. "Pokaż mecze") */
.btn-tier-primary {
    background: var(--es-accent);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px var(--es-accent-glow);
}

.btn-tier-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px var(--es-accent-glow);
}

/* Poziom 2 — zmiana widoku/trybu, nie kończy zadania (np. przełącznik
   aktywne/zakończone, pokaż/ukryj mapę) */
.btn-tier-secondary {
    background: transparent;
    color: var(--es-accent);
    border: 2px solid var(--es-border-hi);
    box-shadow: none;
}

.btn-tier-secondary:hover {
    background: var(--es-accent-dim);
    border-color: var(--es-accent);
    box-shadow: none;
}

/* Poziom 3 — wyjście gdzie indziej (np. Panel organizatora), celowo
   przygaszone, żeby nie konkurowało z akcjami widza */
.btn-tier-muted {
    background: transparent;
    color: var(--es-text-muted);
    border: 1px solid var(--es-border);
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.btn-tier-muted:hover {
    color: var(--es-text);
    border-color: var(--es-border-hi);
    transform: none;
    box-shadow: none;
}

/* Przełącznik jasny/ciemny — góra prawa strona, okrągły, bez domyślnego
   niebieskiego stylu przycisku i bez niebieskiej obwódki po kliknięciu */
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--es-text);
    border: 1px solid var(--es-border);
    border-radius: 50%;
    font-size: 1.3rem;
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
    background: var(--es-accent-dim);
    border-color: var(--es-border-hi);
    transform: translateY(-2px);
    box-shadow: none;
}

.theme-toggle:focus,
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--es-accent-dim);
}

/* Powrót do strony głównej — w rogu karty, nie w przepływie dokumentu,
   więc nie odpycha tytułu ani reszty zawartości */
.return-home-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--es-text);
    border: 1px solid var(--es-border);
    border-radius: 50%;
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.return-home-btn:hover {
    background: var(--es-accent-dim);
    border-color: var(--es-border-hi);
    transform: translateY(-2px);
    box-shadow: none;
}

.return-home-btn:focus,
.return-home-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--es-accent-dim);
}

.turniej-wybor-pokaz-mecze {
    margin-top: 16px;
}

.turniej-wybor-mapa-toggle {
    margin-top: 10px;
    width: 100%;
}

/* Panel mapy — świadomie szerszy niż wąska karta 520px, żeby mapa
   miała sens użytkowy; wyśrodkowany pod kartą dzięki
   .turniej-wybor-wrapper (flex-direction:column, align-items:center). */
.turniej-mapa-sekcja {
    width: 100%;
    margin-top: 14px;
}

.turniej-mapa {
    width: 100%;
    height: 320px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    overflow: hidden;
}

.turniej-mapa-popup {
    text-align: center;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.turniej-mapa-popup-btn {
    margin-top: 8px;
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* =============================================================================
   AKTYWNE MECZE — strona listy meczów (aktywne_mecze.php)
============================================================================= */

.aktywne-mecze-card {
    position: relative;
    width: 100%;
    max-width: 620px;
    padding: 40px 36px;
}

/* Karta nie powinna "podskakiwać" na hover (nadpisuje .content-box:hover) */
.aktywne-mecze-card:hover {
    transform: none;
    box-shadow: none;
}

.aktywne-mecze-card h1 {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 4px;
}

.mecze-podtytul {
    text-align: center;
    opacity: 0.75;
    margin-bottom: 28px;
}

.mecz-sekcja {
    margin-bottom: 28px;
}

.mecz-sekcja-tytul {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.65;
    margin-bottom: 12px;
}

.mecz-vs {
    margin: 0 8px;
    opacity: 0.55;
    font-weight: 400;
}

/* Nadchodzący mecz — mały wpis, dwie linie: czas + boisko, potem drużyny */
.mecz-nadchodzacy {
    padding: 8px 12px;
    margin-bottom: 4px;
    border: 1px solid var(--es-border);
    border-radius: calc(var(--es-radius) / 2);
    background: var(--es-surface);
    font-size: 0.85rem;
    text-align: left;
}

.mecz-nadchodzacy-info {
    font-weight: 700;
    color: var(--es-accent);
    margin-bottom: 2px;
}

.mecz-nadchodzacy-teams {
    color: var(--es-text-2);
}

/* Mecz w trakcie — wyraźny nagłówek + wynik + boisko */
.mecz-aktywny {
    padding: 18px 20px;
    margin-bottom: 12px;
    border: 2px solid var(--es-accent);
    border-radius: var(--es-radius);
    background: var(--es-surface-2);
    text-align: center;
    box-shadow: 0 0 18px var(--es-accent-glow);
}

.mecz-aktywny-etykieta {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--es-accent);
    margin-bottom: 8px;
}

.mecz-aktywny-teams {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.mecz-aktywny-wynik {
    font-size: 1.4rem;
    font-weight: 700;
}

.mecz-aktywny-wynik-detail {
    font-size: 0.9rem;
    opacity: 0.75;
    margin-top: 2px;
}

/* Mecz zakończony — mały, wyszarzony wpis */
.mecz-zakonczony {
    display: block;
    padding: 8px 12px;
    margin-bottom: 4px;
    border: 1px solid var(--es-border);
    border-radius: calc(var(--es-radius) / 2);
    background: var(--es-surface);
    color: var(--es-text-muted);
    font-size: 0.85rem;
    text-align: left;
}

.mecz-zakonczony-teams {
    display: block;
}

.mecz-zakonczony-wynik-wrapper {
    display: block;
    margin-top: 2px;
}

.mecz-zakonczony-wynik {
    font-weight: 700;
}

.mecz-zakonczony-wynik-detail {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: 6px;
}

.mecz-aktywny-sety {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
}

.mecz-set {
    padding: 4px 10px;
    border-radius: var(--es-radius-sm);
    background: var(--es-surface-3);
    font-size: 0.95rem;
    font-weight: 600;
}

.mecz-set-label {
    opacity: 0.65;
    font-weight: 500;
    margin-right: 2px;
}

.mecz-set-wygrany {
    color: var(--es-accent);
}

/* =============================================================================
   ROZPISKA WIDZ — strona z rozpiską/drabinką turnieju (rozpiska_widz.php)
   Bez wąskiej karty .content-box — drabinki/rozpiski bywają szerokie i
   potrzebują pełnej szerokości strony zamiast wyśrodkowanej karty 620px.
============================================================================= */

.rozpiska-wrapper {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 70px 24px 40px;
    overflow-x: auto;
    /* Zapobiega "pułapce" wyśrodkowanego overflow: jeśli dołączana treść
       (lub coś ją owijające) centruje się przez text-align:center /
       margin:0 auto / justify-content:center, a jest szersza niż ekran,
       przeglądarka pozwala doscrollować do prawej krawędzi, ale lewa
       (pierwsze kolumny) staje się matematycznie nieosiągalna przez scroll.
       Ustawienie tego kontenera jako flex z justify-content:flex-start
       wymusza wyrównanie do lewej na jego bezpośrednich dzieciach,
       niezależnie od tego, co same deklarują. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.rozpiska-wrapper > * {
    flex-shrink: 0;
    margin-left: 0 !important;
}

/* Powrót do poprzedniej strony (history.back) — góra lewa strona,
   ten sam styl co przełącznik motywu, tylko po przeciwnej stronie */
.return-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--es-text);
    border: 1px solid var(--es-border);
    border-radius: 50%;
    font-size: 1.3rem;
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.return-back-btn:hover {
    background: var(--es-accent-dim);
    border-color: var(--es-border-hi);
    transform: translateY(-2px);
    box-shadow: none;
}

.return-back-btn:focus,
.return-back-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--es-accent-dim);
}