/**
 * Gewinnerverwaltung - Stylesheet fuer den OEFFENTLICHEN Bereich
 * (index.php?page=public, inkl. Embed-Modus).
 *
 * WICHTIG: Diese Datei ist bewusst vollstaendig unter dem Namensraum
 * ".cc-awards" gekapselt (siehe README.md, Abschnitt "Oeffentlicher
 * Bereich"). Es werden AUSDRUECKLICH KEINE ungescopten, globalen
 * Element-Selektoren verwendet (kein body, table, input, button, h1,
 * ...), damit eine direkte Einbettung dieser Seite in eine bestehende
 * Webseite deren eigenes CSS nicht beeinflusst. Die einzige Ausnahme
 * ist ".cc-awards-body", die NUR dann greift, wenn diese Seite als
 * eigenstaendiges Dokument (auch im iframe) geladen wird - in diesem
 * Fall gibt es kein fremdes body-Element, das kollidieren koennte.
 *
 * Farben: direkt aus dem echten CreateCraft.eu-Theme (NamelessMC
 * "Cobalt", Datei cobalt.css) abgeleitet - sehr dunkler Hintergrund,
 * dunkle Karten, etwas hellere Eingabe-/Hover-Flaechen, helles Grau als
 * Standardschrift, Weiss fuer Ueberschriften/Betonung - unter dem
 * Namensraum "--cc-awards-*" definiert (siehe :root unten), bewusst als
 * eigener Variablensatz, damit diese Datei weiterhin unabhaengig von
 * assets/style.css bleibt (wird vom oeffentlichen Bereich NICHT
 * eingebunden). cobalt.css definiert selbst KEINEN Marken-Akzentton
 * (reines Graustufen-Theme mit rein semantischen Farben fuer Erfolg/
 * Warnung/Fehler) - fuer Links, Haupt-Buttons und die Suche wird daher
 * derselbe zurueckhaltende Blauton wie im internen Bereich verwendet.
 * Aktive Navigations-/Tab-Elemente ("Übersicht | Gewinner | Rangliste |
 * ...") folgen exakt dem in cobalt.css nachgewiesenen Muster (neutrale,
 * etwas hellere Flaeche #282828 + weisser Text), NICHT einer farbig
 * gefuellten Flaeche - siehe .ui.tabular.menu .active.item /
 * .user-nav-link.active in cobalt.css.
 */

:root {
    --cc-awards-page-bg: #101010;
    --cc-awards-card-bg: #161616;
    --cc-awards-card-bg-hover: #262626;
    --cc-awards-border: #303030;
    --cc-awards-border-strong: #3e3e3e;
    --cc-awards-text: #bdbdbd;
    --cc-awards-text-strong: #ffffff;
    --cc-awards-muted: #a1a1a1;
    --cc-awards-placeholder: #818a91;

    --cc-awards-primary: #5b9bd5;
    --cc-awards-primary-dark: #3d6f96;
    --cc-awards-primary-darker: #2d5470;
    --cc-awards-primary-contrast: #0b1520;

    --cc-awards-link: #7fb2e0;
    --cc-awards-link-hover: #a9cdf0;
    --cc-awards-link-visited: #9db8d6;
    --cc-awards-link-active: #5b9bd5;
    --cc-awards-focus: #ffffff;

    /* Aktive/hervorgehobene Navigation - unabhaengig von der
       Primärfarbe, nach dem realen cobalt.css-Muster. */
    --cc-awards-nav-active-bg: #282828;
    --cc-awards-nav-active-text: #ffffff;
    --cc-awards-nav-active-accent: var(--cc-awards-primary);

    --cc-awards-nav-hover: #202020;
    --cc-awards-badge-bg: #282828;
    --cc-awards-badge-text: #ffffff;
}

.cc-awards-body {
    margin: 0;
    padding: 0;
    background: var(--cc-awards-page-bg);
    color: var(--cc-awards-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Bewusst kein erzwungenes min-height: 100vh - der Embed-Rahmen
       soll so klein wie moeglich bleiben und sich am tatsaechlichen
       Inhalt orientieren. */
}

.cc-awards {
    box-sizing: border-box;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.25rem 1rem;
    font-size: 15px;
    line-height: 1.45;
}

.cc-awards *,
.cc-awards *::before,
.cc-awards *::after {
    box-sizing: border-box;
}

.cc-awards--embed {
    padding: 0.75rem;
    max-width: none;
}

/* ---------------------------------------------------------------------
   Links - alle Zustaende bewusst definiert, kein Verlass auf
   Browser-Standardfarben (insbesondere :visited).
   --------------------------------------------------------------------- */
.cc-awards a,
.cc-awards a:link {
    color: var(--cc-awards-link);
    text-decoration: none;
}
.cc-awards a:visited { color: var(--cc-awards-link-visited); }
.cc-awards a:hover { color: var(--cc-awards-link-hover); text-decoration: underline; }
.cc-awards a:active { color: var(--cc-awards-link-active); }
.cc-awards a:focus-visible {
    outline: 2px solid var(--cc-awards-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

.cc-awards-card {
    background: var(--cc-awards-card-bg);
    border: 1px solid var(--cc-awards-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.9rem;
}

.cc-awards-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    color: var(--cc-awards-text-strong);
}

.cc-awards-title--sub {
    font-size: 1rem;
    margin-top: 1rem;
}

.cc-awards-meta {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    color: var(--cc-awards-muted);
}

.cc-awards-empty {
    margin: 0;
    color: var(--cc-awards-muted);
    font-size: 0.92rem;
}

/* ---------------------------------------------------------------------
   Tabelle - auf schmalen Bildschirmen (< 560px) wird jede Zeile als
   Karte dargestellt (kein horizontales Scrollen/Ueberlaufen noetig).
   --------------------------------------------------------------------- */
.cc-awards-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.cc-awards-table {
    width: 100%;
    border-collapse: collapse;
}

.cc-awards-table th,
.cc-awards-table td {
    text-align: left;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--cc-awards-border);
    font-size: 0.9rem;
}

.cc-awards-table tbody tr:hover {
    background: var(--cc-awards-card-bg-hover);
}

.cc-awards-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cc-awards-muted);
    font-weight: 600;
}

.cc-awards-th-platz,
.cc-awards-platz { width: 3.5rem; white-space: nowrap; }

.cc-awards-th-points,
.cc-awards-points { white-space: nowrap; }

.cc-awards-th-prize,
.cc-awards-prize { min-width: 180px; }

@media (max-width: 560px) {
    .cc-awards-table thead { display: none; }

    .cc-awards-table,
    .cc-awards-table tbody,
    .cc-awards-table tr,
    .cc-awards-table td {
        display: block;
        width: 100%;
    }

    .cc-awards-table tr {
        border: 1px solid var(--cc-awards-border);
        border-radius: 8px;
        margin-bottom: 0.6rem;
        padding: 0.4rem 0.6rem;
    }

    .cc-awards-table tbody tr:hover { background: transparent; }

    .cc-awards-table td {
        border-bottom: none;
        padding: 0.25rem 0;
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .cc-awards-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cc-awards-muted);
        flex-shrink: 0;
    }
}

/* ---------------------------------------------------------------------
   Badges (Gewinne)
   --------------------------------------------------------------------- */
.cc-awards-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0 0.25rem 0.25rem 0;
    background: var(--cc-awards-badge-bg);
    color: var(--cc-awards-badge-text);
}

.cc-awards-badge-bronze { background: #3a2717; color: #e0a679; }
.cc-awards-badge-silber { background: #2c2f36; color: #cdd2db; }
.cc-awards-badge-gold   { background: #3a3110; color: #eecb5f; }
.cc-awards-badge-none   { background: transparent; color: var(--cc-awards-muted); font-weight: 500; }

/* ---------------------------------------------------------------------
   Navigation - steht IMMER direkt oben im Dokumentfluss (siehe
   pages/public/_kopf.php), NICHT sticky/fixiert (koennte in einem
   iframe zu Ueberlappungen/Problemen fuehren). Kompakt, KEINE
   vollstaendige Webseiten-Navigation.
   --------------------------------------------------------------------- */
.cc-awards-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem;
    margin: 0 0 0.9rem 0;
    background: var(--cc-awards-card-bg);
    border: 1px solid var(--cc-awards-border);
    border-radius: 12px;
}

.cc-awards-nav-link,
.cc-awards-nav-link:link,
.cc-awards-nav-link:visited {
    color: var(--cc-awards-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 7px;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
}

.cc-awards-nav-link:hover,
.cc-awards-nav-link:focus-visible {
    background: var(--cc-awards-nav-hover);
    color: var(--cc-awards-text-strong);
}

/* Aktiver Menüpunkt (z. B. "Übersicht | Gewinner | Rangliste | ..."):
   neutrale, helle Flaeche + weisser Text (reales cobalt.css-Muster),
   KEINE farbig gefuellte Flaeche - so bleibt der Kontrast zwischen
   Hintergrund und Schrift immer eindeutig, unabhaengig von :link/
   :visited. Ein duenner unterer Akzentstrich in der Primärfarbe
   ergaenzt dies rein optisch, ohne den Textkontrast zu beeinflussen. */
.cc-awards-nav-link--active,
.cc-awards-nav-link--active:link,
.cc-awards-nav-link--active:visited {
    background: var(--cc-awards-nav-active-bg);
    color: var(--cc-awards-nav-active-text);
    box-shadow: inset 0 -2px 0 var(--cc-awards-nav-active-accent);
}

.cc-awards-nav-link--active:hover,
.cc-awards-nav-link--active:focus-visible,
.cc-awards-nav-link--active:active {
    background: var(--cc-awards-nav-active-bg);
    color: var(--cc-awards-nav-active-text);
}

/* ---------------------------------------------------------------------
   Suche
   --------------------------------------------------------------------- */
.cc-awards-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cc-awards-search-input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cc-awards-border);
    border-radius: 6px;
    font-size: 0.92rem;
    background: var(--cc-awards-page-bg);
    color: var(--cc-awards-text);
}

.cc-awards-search-input::placeholder { color: var(--cc-awards-placeholder); opacity: 1; }

.cc-awards-search-input:focus-visible {
    outline: 2px solid var(--cc-awards-focus);
    outline-offset: 1px;
}

.cc-awards-search-button {
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 6px;
    background: var(--cc-awards-primary);
    color: var(--cc-awards-primary-contrast);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

/* Ab dem Hover-Zustand wird der Hintergrund bewusst deutlich dunkler -
   deshalb wechselt die Schrift hier auf Weiss statt der dunklen
   Ruhezustand-Kontrastfarbe (sonst wuerde der Kontrast in der Mitte der
   Skala unter 4.5:1 fallen). */
.cc-awards-search-button:hover { background: var(--cc-awards-primary-dark); color: #fff; }
.cc-awards-search-button:focus-visible,
.cc-awards-search-button:active { background: var(--cc-awards-primary-darker); color: #fff; }
.cc-awards-search-button:focus-visible {
    outline: 2px solid var(--cc-awards-focus);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Avatare (Minecraft-Spielerköpfe) - rein optisch, siehe
   includes/public_controllers.php -> render_public_avatar(). Feste,
   kleine Groessen (siehe config.php), keine Layoutverschiebung bei
   Ladefehler dank fixem width/height.
   --------------------------------------------------------------------- */
.cc-awards-avatar {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--cc-awards-border);
}

.cc-awards-avatar--large {
    border-radius: 6px;
}

.cc-awards-player-link,
.cc-awards-player-link:link,
.cc-awards-player-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--cc-awards-text);
    text-decoration: none;
}

.cc-awards-player-link:hover,
.cc-awards-player-link:focus-visible {
    color: var(--cc-awards-link-hover);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Monatsuebersicht: Jahresfilter + Karten-Grid. Keine festen
   Pixelbreiten - passt sich der verfuegbaren Breite des Host-/
   iframe-Bereichs an (auto-fill/minmax).
   --------------------------------------------------------------------- */
.cc-awards-uebersicht-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.cc-awards-uebersicht-kopf .cc-awards-title {
    margin-bottom: 0;
}

.cc-awards-jahrfilter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cc-awards-jahrfilter-label {
    font-size: 0.85rem;
    color: var(--cc-awards-muted);
}

.cc-awards-jahrfilter-select {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--cc-awards-border);
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--cc-awards-page-bg);
    color: var(--cc-awards-text);
}

.cc-awards-jahrfilter-select:focus-visible {
    outline: 2px solid var(--cc-awards-focus);
    outline-offset: 1px;
}

.cc-awards-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

/* Monatskarte: die GESAMTE Karte ist klickbar/bedienbar - der
   eigentliche Link ("Auswertung ansehen") bleibt der einzige
   fokussierbare/semantische Link (Tastatur, Screenreader), erhaelt per
   ::after aber eine unsichtbare, die ganze Karte ueberdeckende
   Klickflaeche ("stretched link"-Muster). So bleibt die Karte mit
   genau einem Link pro Karte barrierefrei bedienbar, waehrend Maus-
   und Touch-Nutzer ueberall in der Karte klicken/tippen koennen. */
.cc-awards-month-card {
    position: relative;
    background: var(--cc-awards-card-bg);
    border: 1px solid var(--cc-awards-border);
    border-radius: 12px;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cc-awards-month-card:hover {
    border-color: var(--cc-awards-primary);
    background: var(--cc-awards-card-bg-hover);
}

.cc-awards-month-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--cc-awards-text-strong);
}

.cc-awards-month-card-stats {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cc-awards-muted);
    line-height: 1.4;
}

.cc-awards-month-card-top3 {
    margin: 0;
    font-size: 0.8rem;
    color: var(--cc-awards-muted);
    overflow-wrap: anywhere;
}

.cc-awards-month-card-link,
.cc-awards-month-card-link:link,
.cc-awards-month-card-link:visited {
    margin-top: auto;
    padding-top: 0.4rem;
    color: var(--cc-awards-link);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}

.cc-awards-month-card-link:hover { color: var(--cc-awards-link-hover); text-decoration: underline; }

.cc-awards-month-card-link:focus-visible {
    outline: 2px solid var(--cc-awards-focus);
    outline-offset: 2px;
}

/* Stretched-link-Flaeche NUR auf der Monatskarte selbst (nicht auf dem
   gleichnamigen Link am Fuss der Jahresuebersicht-Karte, die keine
   .cc-awards-month-card umschliesst). */
.cc-awards-month-card > .cc-awards-month-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* ---------------------------------------------------------------------
   Monatskopf (gemeinsame Zusammenfassung Gewinner-/Rangliste-Ansicht):
   Top-3-Hervorhebung + Tabs.
   --------------------------------------------------------------------- */
.cc-awards-top3 {
    list-style: none;
    counter-reset: cc-awards-top3-counter;
    margin: 0 0 0.9rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cc-awards-top3-item {
    counter-increment: cc-awards-top3-counter;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
}

.cc-awards-top3-item::before {
    content: counter(cc-awards-top3-counter) ".";
    font-weight: 700;
    color: var(--cc-awards-muted);
    width: 1.1rem;
    flex-shrink: 0;
}

.cc-awards-top3-name {
    font-weight: 600;
}

.cc-awards-top3-points {
    color: var(--cc-awards-muted);
    font-size: 0.85rem;
}

.cc-awards-tabs {
    display: flex;
    gap: 0.4rem;
    border-top: 1px solid var(--cc-awards-border);
    padding-top: 0.75rem;
}

.cc-awards-tab,
.cc-awards-tab:link,
.cc-awards-tab:visited {
    padding: 0.35rem 0.75rem;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cc-awards-muted);
    background: var(--cc-awards-nav-hover);
    box-shadow: inset 0 -2px 0 transparent;
}

.cc-awards-tab:hover,
.cc-awards-tab:focus-visible {
    color: var(--cc-awards-text-strong);
}

/* Aktiver Tab (Gewinner/Rangliste-Umschalter): gleiches Muster wie die
   aktive Hauptnavigation - neutrale helle Flaeche + weisser Text. */
.cc-awards-tab--active,
.cc-awards-tab--active:link,
.cc-awards-tab--active:visited {
    background: var(--cc-awards-nav-active-bg);
    color: var(--cc-awards-nav-active-text);
    box-shadow: inset 0 -2px 0 var(--cc-awards-nav-active-accent);
}

.cc-awards-tab--active:hover,
.cc-awards-tab--active:focus-visible,
.cc-awards-tab--active:active {
    color: var(--cc-awards-nav-active-text);
    background: var(--cc-awards-nav-active-bg);
}

/* ---------------------------------------------------------------------
   Spielerprofil
   --------------------------------------------------------------------- */
.cc-awards-profile-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.cc-awards-profile-info {
    min-width: 0;
}

.cc-awards-profile-awards {
    margin: 0.4rem 0 0 0;
}

/* ---------------------------------------------------------------------
   Gewinnübersicht (aktuelle Regeln)
   --------------------------------------------------------------------- */
.cc-awards-regelliste {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.92rem;
}

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */
.cc-awards-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    font-size: 0.85rem;
}

.cc-awards-page-link,
.cc-awards-page-link:link,
.cc-awards-page-link:visited {
    color: var(--cc-awards-link);
    text-decoration: none;
    font-weight: 600;
}

.cc-awards-page-link:hover { color: var(--cc-awards-link-hover); text-decoration: underline; }
.cc-awards-page-link:active { color: var(--cc-awards-link-active); }
.cc-awards-page-link:focus-visible {
    outline: 2px solid var(--cc-awards-focus);
    outline-offset: 2px;
}

.cc-awards-page-link--disabled {
    color: var(--cc-awards-muted);
    font-weight: 600;
}

.cc-awards-page-info {
    color: var(--cc-awards-muted);
}