/* Tournament App – Frontend Styles
   Alle Grautöne haben einen leichten Blauanteil (wie --tio-primary)
*/

:root {
    /* Primärfarbe: Anthrazit mit Blauanteil */
    --tio-primary:    #2d3748;
    --tio-primary-dk: #1a202c;
    --tio-primary-lt: #4a5568;

    /* Blaugraue Abstufungen */
    --tio-gray-100: #f7f8fa;   /* Hintergründe */
    --tio-gray-200: #edf0f4;   /* Hover, Karten */
    --tio-gray-300: #dde2ea;   /* Borders */
    --tio-gray-400: #b8c2cf;   /* Disabled, Platzhalter */
    --tio-gray-600: #718096;   /* Sekundärtext */

    /* Semantische Farben (entsättigt) */
    --tio-success:  #3d6b4f;
    --tio-warning:  #8a6d2e;
    --tio-danger:   #8b3a3a;

    /* Match-Seiten */
    --tio-win-bg:   #ececec;   /* Gewinner-Seite */
    --tio-draw-bg:  #f3f3f3;   /* Unentschieden */

    /* Allgemein */
    --tio-bg:       var(--tio-gray-100);
    --tio-border:   var(--tio-gray-300);
    --tio-radius:   6px;
    --tio-shadow:   0 1px 3px rgba(45,55,72,.07);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
.tio-wrapper {
    font-family: inherit;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.tio-nav { border-bottom: none; margin-bottom: 1rem; padding: .75rem 0 .5rem; }
.tio-nav ul { display: flex; gap: .75rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.tio-nav a {
    display: inline-block;
    padding: .35rem 0;
    border-radius: 0;
    text-decoration: none;
    color: var(--tio-primary);
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 2px solid transparent;
    transition: border-color .15s, color .15s;
}
.tio-nav a:hover { background: none; color: var(--tio-primary); border-bottom-color: var(--tio-primary); }
.tio-nav a.tio-home { color: var(--tio-gray-600); font-weight: 600; }

/* ── Titles ──────────────────────────────────────────────────────────────── */
.tio-title { font-size: 1.75rem; font-weight: 700; margin-bottom: .75rem; }
.tio-meta  { color: var(--tio-gray-600); margin-bottom: 1rem; }
.tio-back  { margin-bottom: 1rem; }
.tio-back a { color: var(--tio-primary); text-decoration: none; font-weight: 500; }
.tio-section-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tio-primary);
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--tio-border);
    margin-bottom: .9rem;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.tio-badge { display: inline-block; padding: .2em .6em; border-radius: 99px; font-size: .75rem; font-weight: 600; }
.tio-badge-green  { background: #e3ede8; color: #2a5c3f; }
.tio-badge-yellow { background: #f5edda; color: #6b5020; }
.tio-badge-blue   { background: #dfe7f3; color: #2a4070; }
.tio-badge-red    { background: #f3dede; color: #6b2a2a; }
.tio-badge-gray   { background: var(--tio-gray-200); color: var(--tio-primary-lt); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.tio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-bottom: 1.5rem;
    background: #fff;
    border-radius: var(--tio-radius);
    overflow: hidden;
    box-shadow: var(--tio-shadow);
}
.tio-table th {
    background: var(--tio-primary);
    color: #fff;
    text-align: left;
    padding: .6rem .9rem;
    font-weight: 600;
}
.tio-table td {
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--tio-border);
    vertical-align: middle;
}
.tio-table tbody tr:last-child td { border-bottom: none; }
.tio-table tbody tr:hover { background: var(--tio-gray-100); }
.tio-table a { color: var(--tio-primary); text-decoration: none; }
.tio-table a:hover { text-decoration: underline; }

.tio-standings-table th,
.tio-standings-table td { white-space: nowrap; }
.tio-standings-table td:first-child { font-weight: 700; text-align: center; width: 2rem; }


/* ── Filter form ─────────────────────────────────────────────────────────── */
.tio-filter-form {
    display: flex; gap: .5rem; flex-wrap: wrap;
    align-items: center; margin-bottom: 1rem;
}
.tio-filter-form select {
    padding: .4rem .75rem;
    border: 1px solid var(--tio-border);
    border-radius: var(--tio-radius);
    font-size: .9rem;
    background: #fff;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tio-btn-sm {
    display: inline-block; padding: .3rem .7rem;
    background: var(--tio-primary); color: #fff !important;
    border-radius: var(--tio-radius); font-size: .8rem;
    text-decoration: none !important; font-weight: 500; white-space: nowrap;
}
.tio-btn-sm:hover { background: var(--tio-primary-dk); }

/* ── Ext-Link ────────────────────────────────────────────────────────────── */
.tio-ext-link {
    font-size: 1rem; color: var(--tio-gray-600);
    text-decoration: none; margin-left: .35rem;
    opacity: .5; vertical-align: middle;
    transition: opacity .15s;
}
.tio-ext-link:hover { opacity: 1; color: var(--tio-primary); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tio-tabs { display: flex; gap: .25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tio-tab {
    padding: .45rem 1rem;
    border: 1px solid var(--tio-border);
    border-radius: var(--tio-radius) var(--tio-radius) 0 0;
    text-decoration: none; color: var(--tio-gray-600);
    font-weight: 500; font-size: .9rem;
    background: var(--tio-gray-100);
    transition: background .15s, color .15s;
}
.tio-tab-active,
.tio-tab:hover { background: var(--tio-primary); color: #fff !important; border-color: var(--tio-primary); }

.tio-tabs-secondary .tio-tab { font-size: .85rem; }

/* ── ELO-Tabs (Button-Style, kein Seitenreload) ─────────────────────────── */
.tio-elo-tabs { display: flex; gap: .35rem; margin-bottom: .75rem; flex-wrap: wrap; }
.tio-elo-tab {
    padding: .4rem .9rem;
    border: 1px solid var(--tio-border);
    border-radius: var(--tio-radius);
    background: var(--tio-gray-100); color: var(--tio-gray-600);
    font-size: .875rem; font-weight: 500;
    cursor: pointer; transition: background .15s, color .15s;
}
.tio-elo-tab.active,
.tio-elo-tab:hover { background: var(--tio-primary); color: #fff; border-color: var(--tio-primary); }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.tio-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle;
}
.tio-avatar-placeholder {
    background: var(--tio-primary-lt); color: #fff;
    font-weight: 700; font-size: .9rem;
}

/* ── Spielerprofil Header ────────────────────────────────────────────────── */
.tio-player-header {
    display: flex; gap: 1.25rem; align-items: flex-start;
    margin-bottom: 1.5rem; padding: 1.25rem;
    background: #fff; border-radius: var(--tio-radius); box-shadow: var(--tio-shadow);
}
.tio-player-info .tio-title { margin-bottom: .2rem; }
.tio-aliases { color: var(--tio-gray-600); font-size: .875rem; margin-bottom: .25rem; }
.tio-club { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; }
.tio-club-inline-logo { width: 20px; height: 20px; object-fit: contain; }

/* ── Stat Cards ──────────────────────────────────────────────────────────── */
.tio-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: .875rem; margin-bottom: 1.5rem;
}
.tio-stat-card {
    background: #fff; border-radius: var(--tio-radius);
    box-shadow: var(--tio-shadow); padding: .875rem; text-align: center;
}
.tio-stat-label { font-size: .73rem; color: var(--tio-gray-600); margin-bottom: .3rem; }
.tio-stat-value { font-size: 1.3rem; font-weight: 700; color: var(--tio-primary); }

/* ── Sections ────────────────────────────────────────────────────────────── */
.tio-section {
    background: #fff; border-radius: var(--tio-radius);
    box-shadow: var(--tio-shadow); padding: 1.25rem; margin-bottom: 1.25rem;
}
.tio-section h3 { margin-top: 0; }
.tio-list { padding-left: 1.2rem; }
.tio-list li { margin-bottom: .35rem; }
.tio-list a { color: var(--tio-primary); text-decoration: none; }
.tio-list a:hover { text-decoration: underline; }

.tio-positive { color: var(--tio-success); font-weight: 600; }
.tio-negative { color: var(--tio-danger); font-weight: 600; }
.tio-elo-table td { font-size: .85rem; }

/* ── Spielerliste ────────────────────────────────────────────────────────── */
.tio-player-cell { display: flex; align-items: center; gap: .6rem; }
.tio-club-logos  { display: flex; gap: .25rem; align-items: center; margin-left: .25rem; }
.tio-club-thumb  { width: 20px; height: 20px; object-fit: contain; border-radius: 2px; filter: grayscale(100%); opacity: 0.5; transition: filter .2s ease, opacity .2s ease; }
.tio-club-thumb:hover { filter: grayscale(0%); opacity: 1; }

/* ── Turnier-Detail ──────────────────────────────────────────────────────── */
.tio-discipline  { margin-bottom: 2rem; }
.tio-discipline-title { border-bottom: 2px solid var(--tio-border); padding-bottom: .4rem; }
.tio-group       { margin-bottom: 1.5rem; }
.tio-group-final { border-left: 3px solid var(--tio-primary); padding-left: .75rem; }
.tio-group-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.tio-mode-badge  {
    font-size: .75rem; background: var(--tio-gray-100);
    border: 1px solid var(--tio-border); padding: .15em .5em;
    border-radius: 99px; font-weight: 400;
}

/* ── Matches ─────────────────────────────────────────────────────────────── */
.tio-matches { margin-top: 1rem; }
.tio-round   { margin-bottom: 1rem; }
.tio-round-name {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tio-gray-600); margin-bottom: .4rem;
}

/* Match-Zeile: 3 Spalten – linke Hälfte | Doppelpunkt | rechte Hälfte */
.tio-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    border: 1px solid var(--tio-border);
    border-radius: var(--tio-radius);
    overflow: hidden;
    margin-bottom: .3rem;
    font-size: .875rem;
    background: #fff;
}
.tio-match-running { border-left: 3px solid var(--tio-warning); }

/* Hälften */
.tio-match-half {
    display: flex;
    align-items: center;
    padding: .45rem .75rem;
    gap: .5rem;
    min-width: 0;
}
.tio-match-half-a { flex-direction: row; }          /* Name links, Score rechts */
.tio-match-half-b { flex-direction: row-reverse; }  /* Score links, Name rechts */

.tio-match-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tio-match-score-half { flex-shrink: 0; font-size: 1rem; color: var(--tio-primary); min-width: 1.2rem; text-align: center; }

/* Trennzeichen */
.tio-match-sep {
    display: flex; align-items: center; justify-content: center;
    padding: 0 .4rem;
    color: var(--tio-gray-400);
    font-size: .9rem;
    border-left: 1px solid var(--tio-border);
    border-right: 1px solid var(--tio-border);
}

/* Hintergrundfarben */
.tio-side-win  { background: var(--tio-win-bg); }
.tio-side-loss { background: #fff; }
.tio-side-draw { background: var(--tio-draw-bg); }

/* ── Vereine ─────────────────────────────────────────────────────────────── */
.tio-clubs-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.tio-club-card {
    display: flex; flex-direction: column;
    background: var(--tio-gray-100); border: 1px solid var(--tio-border);
    border-radius: var(--tio-radius); box-shadow: var(--tio-shadow);
    color: inherit; overflow: hidden;
    transition: box-shadow .15s;
}
.tio-club-card:hover { box-shadow: 0 2px 10px rgba(45,55,72,.15); }
.tio-club-card-link {
    display: flex; flex-direction: column; flex: 1;
    text-decoration: none; color: inherit;
}
.tio-club-logo-wrap {
    height: 90px; display: flex; align-items: center; justify-content: center;
    padding: .75rem; background: #fff; border-bottom: 1px solid var(--tio-border);
}
.tio-club-logo { max-width: 100%; max-height: 70px; object-fit: contain; }
.tio-club-logo-placeholder {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--tio-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700;
}
.tio-club-card-body { padding: .75rem 1rem .25rem; flex: 1; }
.tio-club-card-name { font-size: 1rem; font-weight: 700; margin: 0; color: var(--tio-primary); }
.tio-club-card-footer {
    padding: .4rem 1rem .4rem; font-size: .8rem; color: var(--tio-gray-600);
    margin-top: auto;
}
.tio-club-card-website {
    padding: 0 1rem .75rem; font-size: .8rem;
}
.tio-club-website { color: var(--tio-primary); text-decoration: none; font-weight: 500; }
.tio-club-logo-large { max-width: 150px; margin-bottom: 1rem; }

.tio-club-members-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .875rem; margin-bottom: 1.5rem;
}
.tio-member-card {
    display: flex; flex-direction: column; align-items: center;
    padding: .875rem .5rem .625rem;
    background: var(--tio-gray-100); border: 1px solid var(--tio-border);
    border-radius: var(--tio-radius);
    text-decoration: none; color: inherit;
    transition: box-shadow .15s;
}
.tio-member-card:hover { box-shadow: 0 2px 8px rgba(45,55,72,.12); }
.tio-member-card-top { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1; }
.tio-member-name { font-size: .85rem; font-weight: 600; text-align: center; color: var(--tio-primary); }
.tio-member-elo  { font-size: .75rem; color: var(--tio-gray-600); margin-top: auto; padding-top: .4rem; }

/* ── Ranglisten – Mode Toggle ────────────────────────────────────────────── */
.tio-ranking-section { margin-bottom: 1.5rem; }
.tio-mode-toggle {
    display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.tio-mode-btn {
    padding: .5rem 1.25rem; border-radius: 99px;
    border: 2px solid var(--tio-primary); color: var(--tio-primary);
    font-weight: 700; font-size: .95rem;
    text-decoration: none; transition: background .15s, color .15s;
}
.tio-mode-btn.active,
.tio-mode-btn:hover { background: var(--tio-primary); color: #fff; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
.tio-empty { color: var(--tio-gray-600); padding: 1.5rem 0; }
.tio-error { color: var(--tio-danger); padding: 1.5rem 0; }
.tio-description { margin-bottom: 1.5rem; }
.tio-standings { margin-bottom: 1rem; }
.tio-standings h5, .tio-matches h5 {
    font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tio-gray-600); margin-bottom: .5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tio-player-header { flex-direction: column; }
    .tio-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .tio-filter-form { flex-direction: column; align-items: stretch; }
    .tio-club-members-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .tio-match { font-size: .8rem; }
}

/* ── Fix 1: Match-Hälften korrekt ───────────────────────────────────────── */
/* Beide Hälften: row-Richtung, Hintergrund bis zum Rand */
.tio-match-half-a {
    flex-direction: row;           /* Name | Score */
    justify-content: space-between;
}
.tio-match-half-b {
    flex-direction: row;           /* Score | Name */
    justify-content: space-between;
}
/* Score auf Seite B: fester Platz links */
.tio-match-half-b .tio-match-score-half {
    order: -1;                     /* Score vor Name */
    text-align: left;
}
/* Name rechts ausrichten auf Seite B */
.tio-match-half-b .tio-match-name {
    text-align: right;
}

/* ── Standalone-Modus: nur Container-Wrap ───────────────────────────────── */
.tio-standalone-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
/* Im Theme-Modus: Home-Link verstecken */
.tio-nav a.tio-home { display: none; }
.tio-standalone .tio-nav a.tio-home { display: inline-block; }

/* ── Fix 5: Vereinslogo in Spielerprofil 28px ────────────────────────────── */
.tio-club-inline-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}

/* Vereinslogos in Tabellen (Spielerliste, Standings, Rankings) */
.tio-club-thumb {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 2px;
    vertical-align: middle;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: filter .2s ease, opacity .2s ease;
}
.tio-club-thumb:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.tio-club-logos {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Fix 6: Mobile – Spalten ausblenden ──────────────────────────────────── */
/* show-mobile: nur auf Mobile sichtbar (für Emoji-Ersatz) */
.tio-show-mobile { display: none; }
.tio-show-prelim-mobile { display: none; }

@media (max-width: 600px) {
    .tio-hide-mobile { display: none !important; }
    .tio-show-mobile { display: inline !important; }
    /* Vorrunden-Tabelle Mobile: nur #, Name (ohne Avatar/Verein), Ø Punkte */
    .tio-prelim-table .tio-hide-prelim-mobile { display: none !important; }
    .tio-prelim-table .tio-show-prelim-mobile { display: inline !important; }
    /* Match kompakter auf Mobile */
    .tio-match-half { padding: .35rem .4rem; }
    .tio-match-name { font-size: .8rem; }
    .tio-club-members-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .tio-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .tio-player-header { flex-direction: column; }
    .tio-filter-form { flex-direction: column; align-items: stretch; }
    .tio-match { font-size: .8rem; }
}

@media (max-width: 900px) {
    /* Vorrunden-Tabelle Tablet: ELO weg, Stat-Spalten weg */
    .tio-prelim-table .tio-hide-prelim-tablet { display: none !important; }
}