/*
 * Teilnehmer-App (TS_Join_App): Anmeldung, Registrierung, Login in der App-Hülle (.ts-ra).
 * Die bisherigen Formulare behalten ihre Klassen – hier werden ihre Farbvariablen auf die App-Farben
 * gelegt (hell/dunkel folgt data-theme) und die gemeinsamen Bausteine einheitlich gestaltet.
 */

/* Ohne zweiten Reiter: nur Bühne */
.ts-ja.is-single { grid-template-rows: 1fr; grid-template-areas: "stage"; grid-template-columns: 1fr; }

/* Farbvariablen der eingebetteten Formulare → App-Farben */
.ts-ja, .ts-ja .ts-ui {
    --rgx-bg: var(--ra-bg); --rgx-card: var(--ra-panel); --rgx-fg: var(--ra-tx); --rgx-mu: var(--ra-mu); --rgx-line: var(--ra-line);
    --rgx-ac: var(--ra-ok); --rgx-ac2: var(--ra-ac); --rgx-bad: var(--ra-bad); --rgx-soft: color-mix(in srgb, var(--ra-ok) 12%, var(--ra-panel));
    --ts-bg: var(--ra-bg); --ts-card: var(--ra-panel); --ts-border: var(--ra-line); --ts-border-2: var(--ra-line);
    --ts-text: var(--ra-tx); --ts-text-2: var(--ra-tx); --ts-muted: var(--ra-mu); --ts-muted-2: var(--ra-mu);
    --ts-primary: var(--ra-ac); --ts-primary-d: color-mix(in srgb, var(--ra-ac) 82%, #000); --ts-primary-bg: color-mix(in srgb, var(--ra-ac) 14%, var(--ra-panel)); --ts-primary-bd: color-mix(in srgb, var(--ra-ac) 40%, var(--ra-line));
    --ts-success: var(--ra-ok); --ts-success-bg: color-mix(in srgb, var(--ra-ok) 14%, var(--ra-panel)); --ts-success-bd: color-mix(in srgb, var(--ra-ok) 40%, var(--ra-line));
    --ts-danger: var(--ra-bad); --ts-danger-bg: color-mix(in srgb, var(--ra-bad) 14%, var(--ra-panel)); --ts-danger-bd: color-mix(in srgb, var(--ra-bad) 40%, var(--ra-line));
    --ts-warn: var(--ra-warn); --ts-warn-bg: color-mix(in srgb, var(--ra-warn) 14%, var(--ra-panel)); --ts-warn-bd: color-mix(in srgb, var(--ra-warn) 40%, var(--ra-line));
    --ts-info: var(--ra-ac); --ts-info-bg: color-mix(in srgb, var(--ra-ac) 12%, var(--ra-panel)); --ts-info-bd: color-mix(in srgb, var(--ra-ac) 35%, var(--ra-line));
    --ts-neutral-bg: var(--ra-panel-2);
    color: var(--ra-tx);
}

/* Kopfzeile */
.ts-ja-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ts-ja-title > div { min-width: 0; }
.ts-ja-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-ja-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; flex: 0 0 auto; }
.ts-ja-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--ra-ac) 22%, var(--ra-panel)); flex: 0 0 auto; }
.ts-ja .ts-fa-org { margin-left: 0; max-width: 110px; padding: 4px 8px 5px; }
.ts-ja .ts-fa-org img { max-height: 28px; }
@media (max-width: 560px) { .ts-ja .ts-fa-org { display: none; } }

/* Inhalt: eine gut lesbare Spalte */
.ts-ja-main { padding-bottom: 32px; }
.ts-ja-col { max-width: 680px; margin: 0 auto; }
.ts-ja-foot { max-width: 680px; margin: 24px auto 0; text-align: center; color: var(--ra-mu); font-size: 12px; }
.ts-ja-foot a { color: inherit; text-decoration: underline; }
.ts-ja-col h1, .ts-ja-col h2, .ts-ja-col h3, .ts-ja-col h4, .ts-ja-col legend, .ts-ja-col label, .ts-ja-col p, .ts-ja-col li, .ts-ja-col td, .ts-ja-col th { color: inherit; }
.ts-ja-col h2 { font-size: 19px; }
.ts-ja-col a:not(.ts-button):not(.rgx-btn):not(.ts-auth-btn):not(.button) { color: color-mix(in srgb, var(--ra-ac) 75%, var(--ra-tx)); text-decoration: underline; text-underline-offset: 2px; }
.ts-ja-col small, .ts-ja-col .description, .ts-ja-col .ts-help { color: var(--ra-mu); }

/* Karten: Formulare und Kästen der bisherigen Seiten */
.ts-ja-col .ts-team-registration > form, .ts-ja-col .ts-trainer-registration > form, .ts-ja-col .ts-form,
.ts-ja-col .ts-team-event-registration form, .ts-ja-col .ts-team-login, .ts-ja-col .ts-helfer-register > form {
    background: var(--ra-panel); border: 1px solid var(--ra-line); border-radius: 18px; padding: 18px; margin: 0 0 16px;
}
.ts-ja-col .ts-form .ts-form { background: none; border: 0; padding: 0; margin: 0; }

/* Eingabefelder */
.ts-ja-col input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.ts-ja-col select, .ts-ja-col textarea {
    width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
    color: var(--ra-tx) !important; background: var(--ra-panel-2) !important; border: 1.5px solid var(--ra-line) !important;
    border-radius: 12px !important; padding: 11px 13px !important; min-height: 46px; box-shadow: none !important; outline: none;
}
.ts-ja-col input:focus, .ts-ja-col select:focus, .ts-ja-col textarea:focus { border-color: var(--ra-ac) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ra-ac) 22%, transparent) !important; }
.ts-ja-col input::placeholder, .ts-ja-col textarea::placeholder { color: var(--ra-mu); opacity: 1; }
.ts-ja-col input[type="checkbox"], .ts-ja-col input[type="radio"] { accent-color: var(--ra-ac); width: 18px; height: 18px; }
.ts-ja-col input[type="file"] { color: var(--ra-mu); max-width: 100%; }
.ts-ja-col .ts-form-group { margin: 0 0 14px; }
.ts-ja-col .ts-form-group label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.ts-ja-col .ts-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .ts-ja-col .ts-form-row { grid-template-columns: 1fr; } }

/* Knöpfe */
.ts-ja-col .ts-button, .ts-ja-col .button, .ts-ja-col button[type="submit"], .ts-ja-col input[type="submit"], .ts-ja-col .ts-auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px;
    border-radius: 14px !important; border: 1px solid var(--ra-line) !important; background: var(--ra-panel-2) !important; color: var(--ra-tx) !important;
    font: inherit; font-weight: 800; text-decoration: none !important; cursor: pointer; box-shadow: none !important;
}
.ts-ja-col .ts-button-primary, .ts-ja-col .button-primary, .ts-ja-col button[type="submit"]:not(.rgx-link):not(.rgx-btn--no):not(.ts-auth-btn.is-ghost),
.ts-ja-col input[type="submit"], .ts-ja-col .ts-auth-btn.is-primary, .ts-ja-col .rgx-btn:not(.rgx-btn--no) {
    background: var(--ra-ac) !important; border-color: var(--ra-ac) !important; color: #fff !important;
}
.ts-ja-col .ts-button-primary:hover, .ts-ja-col button[type="submit"]:hover, .ts-ja-col .ts-auth-btn.is-primary:hover { filter: brightness(1.08); }
.ts-ja-col .ts-auth-btn.is-ghost, .ts-ja-col .rgx-link { background: transparent !important; border-color: transparent !important; color: var(--ra-mu) !important; font-weight: 600; min-height: 0; }
.ts-ja-col .ts-form-actions button, .ts-ja-col .rgx-btn { width: 100%; }
.ts-ja-col .rgx-btn { box-shadow: 0 10px 24px color-mix(in srgb, var(--ra-ac) 30%, transparent) !important; }
.ts-ja-col .rgx-btn--no { background: var(--ra-panel) !important; color: var(--ra-tx) !important; border: 1.5px solid var(--ra-line) !important; }
.ts-ja-col button:disabled, .ts-ja-col input[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

/* Meldungen */
.ts-ja-col .ts-notice, .ts-ja-col .ts-alert, .ts-ja-col .notice { border-radius: 14px; color: var(--ra-tx); }
.ts-ja-col .ts-notice p, .ts-ja-col .ts-alert p { margin: .3em 0; }

/* Online-Anmeldung (rgx): Kopfbild übernimmt die App-Kopfzeile */
.ts-ja .rgx-wrap { max-width: none; padding: 0; }
.ts-ja .rgx-hero, .ts-ja .rgx-foot { display: none; }
.ts-ja .rgx-steps { margin-top: 4px; }

/* Login & Konto (ts-auth) */
.ts-ja .ts-auth { padding: 2vh 0 0; }
.ts-ja .ts-auth-card { max-width: 460px; background: var(--ra-panel); border-color: var(--ra-line); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.ts-ja .ts-auth-brand { color: var(--ra-ac); }
.ts-ja .ts-auth-form label { color: var(--ra-tx); }
.ts-ja .ts-auth-or { color: var(--ra-mu); }
.ts-ja .ts-auth-or::before, .ts-ja .ts-auth-or::after { background: var(--ra-line); }

/* Tabellen (Turnierlisten) */
.ts-ja-col table { width: 100%; border-collapse: collapse; background: var(--ra-panel); border-radius: 14px; overflow: hidden; }
.ts-ja-col th, .ts-ja-col td { border-color: var(--ra-line) !important; background: transparent !important; color: var(--ra-tx) !important; }

/* Feste Farben aus älteren Vorlagen (z. B. Helfer-Registrierung) im dunklen Schema angleichen */
.ts-ja[data-theme="dark"] .ts-ja-col [style*="background:#fff"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="background: #fff"],
.ts-ja[data-theme="dark"] .ts-ja-col [style*="background:#ffffff"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="background:white"],
.ts-ja[data-theme="dark"] .ts-ja-col [style*="background:#f9fafb"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="background:#f6f7f7"],
.ts-ja[data-theme="dark"] .ts-ja-col [style*="background:#f0f0f1"] { background: var(--ra-panel) !important; }
.ts-ja[data-theme="dark"] .ts-ja-col [style*="background:#f0f9ff"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="background: #f0f9ff"] { background: color-mix(in srgb, var(--ra-ac) 12%, var(--ra-panel)) !important; }
.ts-ja[data-theme="dark"] .ts-ja-col [style*="border:1px solid #ddd"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="border: 1px solid #ddd"],
.ts-ja[data-theme="dark"] .ts-ja-col [style*="border:1px solid #e5e7eb"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="border:1px solid #bae6fd"] { border-color: var(--ra-line) !important; }
.ts-ja[data-theme="dark"] .ts-ja-col [style*="color:#646970"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="color:#50575e"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="color: #6b7280"],
.ts-ja[data-theme="dark"] .ts-ja-col [style*="color:#6b7280"] { color: var(--ra-mu) !important; }
.ts-ja[data-theme="dark"] .ts-ja-col [style*="color:#1d2327"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="color:#111827"], .ts-ja[data-theme="dark"] .ts-ja-col [style*="color: #1d2327"] { color: var(--ra-tx) !important; }
.ts-ja[data-theme="dark"] .ts-ja-col [style*="color:#155724"] { color: var(--ra-ok) !important; }

/* Am Rechner: etwas mehr Luft */
@media (min-width: 1024px) {
    .ts-ja-col { padding-top: 6px; }
}

/* Handy: kurze Reiter, Unterzeile einzeilig */
.ts-ja .ts-ra-tab-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-ja .ts-ra-tab { min-width: 0; padding: 0 2px; }
.ts-ja-title .ts-ra-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
    .ts-ja .ts-ra-tab { font-size: 11px; }
    .ts-ja-title h1 { font-size: 19px; }
    .ts-ja-logo, .ts-ja-ico { width: 36px; height: 36px; font-size: 19px; }
}

/* Gegen Theme-Styles absichern: Reiter ohne Theme-Knopfoptik, Raster nie breiter als der Bildschirm */
.ts-ja { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ts-ja:not(.is-single) { grid-template-columns: 220px minmax(0, 1fr); } }
.ts-ja .ts-ra-nav { min-width: 0; overflow: hidden; }
.ts-ja .ts-ra-tab { border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; color: var(--ra-mu) !important; text-transform: none; letter-spacing: normal; border-radius: 12px !important; }
.ts-ja .ts-ra-tab.is-active { background: var(--ra-panel-2) !important; color: var(--ra-tx) !important; }
.ts-ja .ts-ra-theme { color: var(--ra-tx) !important; }