/*
 * Eigene Ergänzungen zu Pico.css
 *
 * Hell/Dunkel folgt der Systemeinstellung – wie break-in.de.
 * Farben angelehnt an break-in.de und das Vereinswappen:
 *   Wappen-Gelb  #eddf1e  → Buttons (immer mit dunkler Schrift); im Dunkel-Modus auch Links
 *   Wappen-Blau  #315ab0  → Linie unter dem Kopf; im Hell-Modus Links (Gelb wäre auf Weiß unlesbar)
 *   Hintergrund/Text wie break-in.de: hell #ffffff/#111111, dunkel #222228/#fbfbfb
 *
 * Die Selektoren entsprechen denen von Pico, damit diese Werte Picos Standardwerte überschreiben.
 */

:root {
    --bi-yellow: #eddf1e;
    --bi-yellow-hover: #f5ea5a;
    --bi-blue: #315ab0;
    --bi-dark: #231f20;
}

/* hell */
:root:not([data-theme=dark]),
[data-theme=light] {
    --pico-background-color: #ffffff;
    --bi-text: #111111;
    --pico-color: var(--bi-text);

    --pico-primary: var(--bi-blue);
    --pico-primary-underline: rgba(49, 90, 176, 0.5);
    --pico-primary-hover: #24448a;
    --pico-primary-hover-underline: #24448a;
    --pico-primary-focus: rgba(49, 90, 176, 0.35);

    --pico-primary-background: var(--bi-yellow);
    --pico-primary-border: var(--bi-yellow);
    --pico-primary-hover-background: var(--bi-yellow-hover);
    --pico-primary-hover-border: var(--bi-yellow-hover);
    --pico-primary-inverse: var(--bi-dark);
}

/* dunkel */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-background-color: #222228;
        --bi-text: #fbfbfb;
    --pico-color: var(--bi-text);
        --pico-card-background-color: #2b2b32;
        --pico-card-sectioning-background-color: #313139;

        --pico-primary: var(--bi-yellow);
        --pico-primary-underline: rgba(237, 223, 30, 0.5);
        --pico-primary-hover: var(--bi-yellow-hover);
        --pico-primary-hover-underline: var(--bi-yellow-hover);
        --pico-primary-focus: rgba(237, 223, 30, 0.35);

        --pico-primary-background: var(--bi-yellow);
        --pico-primary-border: var(--bi-yellow);
        --pico-primary-hover-background: var(--bi-yellow-hover);
        --pico-primary-hover-border: var(--bi-yellow-hover);
        --pico-primary-inverse: var(--bi-dark);
    }
}

[data-theme=dark] {
    --pico-background-color: #222228;
    --bi-text: #fbfbfb;
    --pico-color: var(--bi-text);
    --pico-card-background-color: #2b2b32;
    --pico-card-sectioning-background-color: #313139;

    --pico-primary: var(--bi-yellow);
    --pico-primary-underline: rgba(237, 223, 30, 0.5);
    --pico-primary-hover: var(--bi-yellow-hover);
    --pico-primary-hover-underline: var(--bi-yellow-hover);
    --pico-primary-focus: rgba(237, 223, 30, 0.35);

    --pico-primary-background: var(--bi-yellow);
    --pico-primary-border: var(--bi-yellow);
    --pico-primary-hover-background: var(--bi-yellow-hover);
    --pico-primary-hover-border: var(--bi-yellow-hover);
    --pico-primary-inverse: var(--bi-dark);
}

body > header {
    border-bottom: 3px solid var(--bi-blue);
    margin-bottom: var(--pico-spacing);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    --pico-color: var(--bi-text); /* Titel in Textfarbe statt Linkfarbe */
    text-decoration: none;
}

.brand img {
    width: 40px;
    height: 40px;
}

footer {
    font-size: 0.85em;
}

/* Turnierkopf: Eckdaten links, Plakat rechts (auf schmalen Bildschirmen untereinander) */
.tournament-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pico-spacing);
    margin-bottom: var(--pico-spacing);
}

@media (min-width: 768px) {
    .tournament-head {
        grid-template-columns: 1fr 240px;
    }
}

.poster {
    width: 100%;
    max-width: 240px;
    border-radius: var(--pico-border-radius);
}

.tournament-card {
    display: flex;
    gap: var(--pico-spacing);
    align-items: center;
}

.thumb {
    width: 80px;
    border-radius: var(--pico-border-radius);
}

.description h3 {
    margin-top: 1.5em;
    font-size: 1.15rem;
}

/* Fakten als zweispaltige Liste */
.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
}

.facts dt {
    font-weight: 600;
}

.facts dd {
    margin: 0;
}

/* hervorgehobener Status (Texte aus StatusInfo) */
.status {
    border-left: 4px solid var(--pico-primary-background);
}

.status p:last-child {
    margin-bottom: 0;
}

.form-error,
.field-error {
    color: var(--pico-del-color);
}

/* unsichtbares Feld gegen Bots – für Menschen nicht sichtbar, auch nicht für Screenreader */
.hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Admin-Bereich --- */

form.inline {
    display: inline;
    margin: 0;
}

.btn-small {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    width: auto;
    margin: 0;
}

table.compact td,
table.compact th {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
}

td.actions {
    white-space: nowrap;
}

.flash {
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--bi-blue);
    background: var(--pico-card-background-color);
}

.flash-error {
    border-left-color: var(--pico-del-color);
}

.mail-body {
    white-space: pre-wrap;
    font-size: 0.85rem;
    padding: 0.75rem;
}

/* Druck (Teilnehmerliste): nur Turnierkopf und Zugelassene, ohne Menü und Knöpfe */
@media print {
    body > header,
    body > footer,
    .no-print,
    .flash,
    form,
    button {
        display: none !important;
    }

    :root {
        --pico-background-color: #ffffff;
        --pico-color: #000000;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    table.compact td,
    table.compact th {
        padding: 0.2rem 0.4rem;
        font-size: 10pt;
    }
}