/* --- General Styles & Variables --- */
:root {
    --primary-color: #0073aa; --primary-hover: #005a87;
    --danger-color: #d63638; --danger-hover: #b02a2c;
    --light-gray: #f6f7f7; --medium-gray: #e0e0e0; --dark-gray: #555;
    --info-bg: #e7f5ff; --info-border: #b3d9ff; --info-text: #004085;
    --gold-bg: #fff3cd; --gold-border: #ffeeba; --gold-text: #856404;
    --highlight-bg: #fffb8f;
    --border-radius: 8px; --box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#turnier-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; max-width: 1200px; margin: 20px auto; padding: 10px; }
h1, h2 { color: var(--dark-gray); border-bottom: 2px solid var(--light-gray); padding-bottom: 10px; margin-top: 0; }
h3 { color: var(--primary-color); }
h4 { margin-bottom: 10px; border-bottom: 1px solid var(--medium-gray); padding-bottom: 5px; }
.card { background-color: #fff; padding: 25px; border-radius: var(--border-radius); margin-bottom: 25px; box-shadow: var(--box-shadow); }
hr { border: none; border-top: 1px solid var(--medium-gray); margin: 20px 0; }

/* --- Search Bar --- */
#search-bar-container {
    position: sticky; 
    top: 40px; /* Platz für WP Admin Bar. Falls keine Admin Bar da ist, auf 10px ändern. */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 10px; z-index: 1000;
    display: flex; gap: 10px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 20px;
    border: 1px solid var(--medium-gray);
}
#search-bar-container input { flex-grow: 1; }
#search-clear-btn { padding: 8px 15px; font-size: 1.1em; }
.highlight { background-color: var(--highlight-bg); border-radius: 3px; }


/* --- Forms & Buttons --- */
label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--dark-gray); }
input[type="text"], input[type="number"], select { width: 100%; padding: 12px; border-radius: var(--border-radius); border: 1px solid var(--medium-gray); box-sizing: border-box; transition: border-color 0.3s; }
input:focus, select:focus { outline: none; border-color: var(--primary-color); }
button { background-color: var(--primary-color); color: white; padding: 12px 20px; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 1em; font-weight: 600; transition: background-color 0.3s; }
button:hover { background-color: var(--primary-hover); }
button.secondary { background-color: #6c757d; }
button.secondary:hover { background-color: #5a6268; }
button.danger { background-color: var(--danger-color); }
button.danger:hover { background-color: var(--danger-hover); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.load-delete-wrapper { display: flex; gap: 10px; }
.load-delete-wrapper select { flex-grow: 1; }
.vorschlag-box { background-color: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text); padding: 15px; margin: 20px 0; border-radius: var(--border-radius); display: flex; justify-content: space-between; align-items: center; }
.vorschlag-box p { margin: 0; }
.vorschlag-box button { font-size: 0.9em; padding: 8px 12px; }
.card-nav { display: flex; gap: 10px; padding: 10px; background-color: var(--light-gray); margin-bottom: 20px; border-radius: var(--border-radius); }
.card-nav button { flex-grow: 1; background-color: #fff; color: var(--primary-color); border: 1px solid var(--medium-gray); }
.card-nav button:hover { background-color: #eef8ff; }
.card-nav button.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }

/* --- Tables & Game Pairings --- */
.gruppen-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.gruppen-header h2 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.gruppen-header button { padding: 8px 15px; font-size: 0.9em; }

.gruppe-tabelle, .platzierung-tabelle { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 1em; }
.gruppe-tabelle th, .gruppe-tabelle td, .platzierung-tabelle th, .platzierung-tabelle td { border: 1px solid var(--medium-gray); padding: 12px; text-align: center; }
.gruppe-tabelle th, .platzierung-tabelle th { background-color: var(--light-gray); font-weight: 600; }
.gruppe-tabelle tr:nth-child(even), .platzierung-tabelle tr:nth-child(even) { background-color: var(--light-gray); }
.gruppe-tabelle td:nth-child(2), .platzierung-tabelle td:nth-child(2) { text-align: left; font-weight: 500; }
.spiel-paarung { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 5px 15px; margin-bottom: 15px; padding: 10px; border-radius: var(--border-radius); background: #fdfdfd; border: 1px solid var(--light-gray); text-align: center; }
.team-name-label { grid-row: 1; font-weight: 500; word-break: break-word; }
.team-name-label:nth-of-type(1) { grid-column: 1; }
.team-name-label:nth-of-type(2) { grid-column: 3; }
.spiel-paarung .ergebnis-input:nth-of-type(1) { grid-column: 1; grid-row: 2; }
.spiel-paarung .doppelpunkt { grid-column: 2; grid-row: 2; font-size: 1.2em; font-weight: bold;}
.spiel-paarung .ergebnis-input:nth-of-type(2) { grid-column: 3; grid-row: 2; }
.ergebnis-input { width: 80px; text-align: center; font-size: 1.1em; font-weight: bold; margin: 0 auto; }

/* --- Tournament Bracket --- */
#turnierbaum-container { display: flex; overflow-x: auto; padding: 20px 0; }
.runde { display: flex; flex-direction: column; justify-content: space-around; flex-shrink: 0; width: 250px; margin-right: 40px; }
.runde:last-child { margin-right: 0; }
input:disabled { background-color: var(--light-gray); }
.match { background-color: #fff; border: 1px solid var(--medium-gray); border-radius: var(--border-radius); margin-bottom: 25px; position: relative; box-shadow: var(--box-shadow); padding: 15px 10px; text-align: center; }
.match .team-ko .team-name-label { display: block; font-weight: 500; margin-bottom: 5px; word-break: break-word; }
.match .ko-doppelpunkt { display: block; font-weight: bold; margin: 5px 0; }
.ergebnis-input-ko { width: 60px; text-align: center; font-weight: bold; margin: 0 auto; }

/* --- Winner List & Status --- */
#sieger-liste-container h2 { color: var(--primary-color); }
.platzierung-tabelle tr:first-child { background-color: var(--gold-bg); font-weight: bold; }
.platzierung-tabelle tr:first-child td { border-color: var(--gold-border); color: var(--gold-text); }
.platzierung-tabelle .platz { font-weight: bold; font-size: 1.1em; }

#speicher-status { padding: 10px 15px; border-radius: var(--border-radius); color: white; font-weight: 500; margin-left: 15px; opacity: 0; transition: opacity 0.5s; }
#speicher-status.success { background-color: #28a745; opacity: 1; }
#speicher-status.error { background-color: #dc3545; opacity: 1; }
#action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }