/* Globale Variablen: Farben, Abstände, Schrift */
:root {
  --font-family:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base:      16px;
  --line-height-base:    1.5;
  --text-color:          #333;
  --background-color:    #fff;
  --background-alt:      #6c757d;
  --border-color:        #ddd;
  --primary-color:       #007bff;
  --hover-color:         #005177;

  --secondary-color:     #6c757d;
  --border-radius:       4px;
  --spacing-xs:          4px;
  --spacing-sm:          8px;
  --spacing-md:          16px;
  --spacing-lg:          24px;
}

/* Grundlegende Reset-Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 62px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--background-color);
}

/* Formularelemente */
form {
  margin: var(--spacing-lg) 0;
}

label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 1rem;
  line-height: inherit;
  color: var(--text-color);
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) var(--spacing-md);
  
  transition: border-color 0.2s, box-shadow 0.2s;
}

select,
textarea,
button {
  width: 100%
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

input[disabled],
select[disabled],
textarea[disabled],
button[disabled] {
  background-color: var(--background-alt);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Buttons */
button {
  display: inline-block;
  width: auto; /* Buttons schrumpfen nicht auf 100% */
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: center;
}


button.secondary {
  background-color: var(--secondary-color);
}

button.secondary:hover:not([disabled]) {
  background-color: darken(var(--secondary-color), 5%);
}



/* Responsive Tabellen (horizontales Scrollen) */
.table-responsive {
  overflow-x: auto;
}

/* Utility-Klassen für Abstände */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.p-sm  { padding: var(--spacing-sm); }
.p-md  { padding: var(--spacing-md); }

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Optional: Feine Schatten für Container */
.container {
  padding: var(--spacing-md);
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


/* 2. Einheitliches Button-Design */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  display: inline-block;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #0073aa;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #005177;
}

/* 3. Checkbox + Label in einer Zeile mit Rund-Umrandung */
.checkbox-container {
  min-width: 70px;
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  user-select: none; /* verhindert Text-Markierung bei Doppelklick */
}
.checkbox-container input[type="checkbox"] {
  margin: 0;
  margin-right: 0.5em;
  cursor: pointer;
}
.checkbox-container label {
  margin: 0;
  cursor: pointer;
}
/* Radio – komplett custom, runder Klickbereich */
.radio-container input[type="radio"] {
  /* Native Optik entfernen */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Gleiche Breite & Höhe */
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;

  /* Kreisförmiger Rahmen */
  border: 2px solid #0073aa;
  border-radius: 50%;
  background-color: #fff;

  position: relative;
  vertical-align: middle;
  cursor: pointer;
}

/* Unchecked-State – kein innerer Punkt */
.radio-container input[type="radio"]::before {
  content: '';
  display: none;
}

/* Checked-State – kleiner Kreis in der Mitte */
.radio-container input[type="radio"]:checked::before {
  content: '';
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: #0073aa;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Globale Max-Width für Input-Felder */


/* Globale Max-Width für Input-Felder 
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],

textarea,
select {
  width: 100%;
  max-width: 400px;      
  box-sizing: border-box; 
}
*/
/* Globale Max-Width für alle Form40pxare */
#ts-root form {
  width: 100%;              /* Formular nimmt maximal die volle Container-Breite ein */
  max-width: 400px;         /* hier deine Wunsch-Breite anpassen */
  margin-left: auto;        /* zentriert das Formular horizontal */
  margin-right: auto;
  box-sizing: border-box;   /* Padding und Border werden in die Breiten-Berechnung einbezogen */
  padding: var(--spacing-md); /* optional: etwas Innenabstand */
}

/* === Gleich breite Buttons in einer Zeile === */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);    /* Abstand zwischen den Buttons */
}

.button-group .button {
  flex: 1;                   /* beide Buttons nehmen gleich viel Platz ein */
  text-align: center;        /* Text zentrieren */
  box-sizing: border-box;    /* Padding innerhalb der Breiten-Berechnung */
  margin-bottom: 0;
}

/* Optional: Min-Width, damit sie nicht zu schmal werden */
.button-group .button {
  min-width: 120px;
}


/* Bricht aus dem ts-root-Margin aus */
/* assets/turnier-table.css oder global.css ganz unten */

#vrm-form{
  max-width: 800px !important;
  padding: 3em;
}
.checkbox-container{
  width: 70px;
}

/* Registrierungsformular – Fehlermeldungen & rote Umrandung */
.vr-error {
    color: #b93333;
    font-weight: 600;
    margin: 0.25rem 0;
    display: none;          /* wird per JS eingeblendet */
}

/* erhält das Feld die Klasse .vr-invalid, erscheint die rote Border */
.vr-invalid {
    border: 2px solid #b93333 !important;
    outline: none;          /* optional, um Doppellinien zu vermeiden */
}
/* assets/club-user-manage.css */
.cum-table {
    border-collapse: collapse;
    margin-top: 1em;
}
.cum-table th,
.cum-table td {
    border: 1px solid #ddd;
    padding: 0.5em 1em;
    text-align: left;
    background-color: #f9f9f9;
}
.cum-table th {
    background-color: var(--border-color);
}
.cum-actions button {
    border: 1px solid #ccc;
    padding: 0.4em 0.8em;
    margin-right: 0.5em;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s, border-color 0.2s;
}
.cum-actions button:hover {
    background-color: var(--hover-color);
    border-color: #999;
}
/* ab 300px: jede Zeile als eigener Block, Buttons unter dem Namen */
@media (max-width: 400px) {
  /* komplette Tabelle aus dem Tabellen-Layout nehmen */
  .cum-table,
  .cum-table thead,
  .cum-table tbody,
  .cum-table tr,
  .cum-table th,
  .cum-table td {
    display: block;
    width: 100%;
  }

  /* Kopfzeile verbergen */
  .cum-table thead {
    display: none;
  }

  /* Abstand zwischen den Einträgen */
  .cum-table tr {
    margin-bottom: 1em;
    border: 1px solid #ddd;
    padding: 0.5em;
  }

  /* Name separat mit Abstand zum Button-Block */
  .cum-name {
    margin-bottom: 0.5em;
    font-weight: bold;
  }

  /* Aktionen (Buttons) unter dem Namen */
  .cum-actions {
    display: flex;
    gap: 0.5em;
  }

  /* Buttons weiterhin in einer Zeile, aber umbrechbar */
  .cum-actions button {
    flex: 1;
    white-space: normal;
  }
}
.cum-table {
  margin: 1em auto;
}
button.button-secondary {
  display: block;
}

/*
  CSS separat in Ihre Plugin-/Theme-CSS-Datei einfügen:
*/
.anmeldungen-table {
    border-collapse: collapse;
    margin: 1em auto;
}
.anmeldungen-table th,
.anmeldungen-table td {
    border: 1px solid #ddd;
    padding: 0.5em 1em;
    text-align: left;
    background-color: #f9f9f9;
}
.anmeldungen-table th {
    background-color: var(--border-color);
}
.anmeldungen-actions button {
    border: 1px solid #ccc;
    padding: 0.4em 0.8em;
    margin-right: 0.5em;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s, border-color 0.2s;
}
.anmeldungen-actions button:hover {
    background-color: var(--hover-color);
    border-color: #999;
}
button.anmeldungen-back-button {
    display: block;
    margin: 1em auto;
}

/* Responsive ab 400px */
@media (max-width: 850px) {
    .anmeldungen-table,
    .anmeldungen-table thead,
    .anmeldungen-table tbody,
    .anmeldungen-table tr,
    .anmeldungen-table th,
    .anmeldungen-table td {
        display: block;
        width: 100%;
    }
    .anmeldungen-table thead {
        display: none;
    }
    .anmeldungen-table tr {
        margin-bottom: 1em;
        border: 1px solid #ddd;
        padding: 0.5em;
    }
    .anmeldungen-name {
        margin-bottom: 0.5em;
        font-weight: bold;
    }
    .anmeldungen-actions {
        display: flex;
        gap: 0.5em;
    }
    .anmeldungen-actions button {
        flex: 1;
        white-space: normal;
    }
}

/* Judo Styles */



.judo-teilnehmerliste {
  margin-top: 60px;
}

.judo-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.judo-table th,
.judo-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
/* Gesamtbreite des Formulars/Tabelle auf max. 600px setzen */

/* in deiner stylesheet.css */
.text-center {
  text-align: center;
}
/* in Deiner stylesheet.css */
/* Container zentrieren und Breite auf 70% setzen */
#turnier-editor {
  width: 70%;
  margin: 0 auto;
}

/* Optional: Tabellen innerhalb des Containers auf 100% der Container-Breite */
#turnier-editor .widefat {
  width: 100%;
  box-sizing: border-box;
}
/* Inhalt der Tabellenzellen zentrieren */
#turnier-editor .widefat td,
#turnier-editor .widefat th {
  text-align: center;
  vertical-align: middle; /* optional, für vertikale Zentrierung */
}
@media (max-width: 400px) {
  #turnier-editor {
    width: 100%;
  }
}

/* Nur Add-/Remove-Buttons (zw. Zurück-Button ausgenommen) */
#turnier-editor .button:not(.back-to-table),
#turnier-editor .add-registration,
#turnier-editor .remove-registration {
  background-color: #f1f1f1;           /* ganz helles Grau */
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  padding: 0.5em 1em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover-Zustand (nur für aktive Buttons) */
#turnier-editor .button:not(.back-to-table):hover,
#turnier-editor .add-registration:hover:not(.disabled),
#turnier-editor .remove-registration:hover:not(.disabled) {
  background-color: var(--hover-color);
  color: #fff;
}

/* Disabled-Status (grau aus Hintergrund-Alt) */
#turnier-editor .button.disabled,
#turnier-editor .add-registration.disabled,
#turnier-editor .remove-registration.disabled {
  background-color: var(--background-alt);
  color: #aaa;
  border-color: #ccc;
  cursor: default;
}

/* Text innerhalb des Elements zentrieren */
.spa-login-msg.error {
  text-align: center;
}

.center_element {
  text-align: center;
  margin: 1em auto; /* zentriert und Abstand oben/unten */
}
#ts-root{
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 3rem !important;
}

/* Variante 1 – reicht in den allermeisten Fällen */
#spa-root:not([data-view="turnier_table"]) {
  margin: 2rem;      /* Abstand nach Wunsch anpassen */
}

.wkp-list-back{
  max-width: auto !important;
}


/* Standard-Tabelle bleibt für große Bildschirme unverändert */
#turnier_table {
    width: 100%;
    border-collapse: collapse;
}

/* Responsive Anpassung */
@media (max-width: 500px) {
    #turnier_table thead {
        display: none; /* Tabellenkopf ausblenden */
    }

    #turnier_table,
    #turnier_table tbody,
    #turnier_table tr,
    #turnier_table td {
        display: block;
        width: 100%;
    }

    #turnier_table tr {
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        padding: 0.5rem;
        background: #f9f9f9;
    }

    #turnier_table td {
        text-align: left;
        padding: 0.5rem;
        position: relative;
    }

    /* Beschriftung jeder Zelle */
    #turnier_table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 0.3rem;
    }
}

.wkp_k_b_abbrechen{
  margin-top: 10px
}


/* Standard-Darstellung – hier ändert sich nichts */
.details-table          { width:100%; border-collapse:collapse; }
.details-table th,
.details-table td       { border:1px solid #ccc; padding:4px; }

/* -------- unter 550 px -------- */
/* Basis + bisherige Mobile-Regeln bleiben identisch … */

/* ---------- unter 550 px ---------- */
@media (max-width: 550px) {

  /* Kopfzeile ausblenden */
  .details-table thead { display:none; }

  /* Jede Datenzeile als 2-Zeilen-Grid */
  .details-table tbody tr {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;
    margin-bottom:.5rem;
    width: auto !important;
  }

  /* Turnier-Name über alle Spalten */
  .details-table tbody tr td:first-child {
    grid-column:1 / -1;
    font-weight:bold;
  }

  /* ---------- Labels vor die Werte setzen ---------- */
  /* 2. Zelle = Siege */
  .details-table tbody tr td:nth-child(2)::before {
    content:"Siege: ";
    font-weight:600;
  }

  /* 3. Zelle = Platz */
  .details-table tbody tr td:nth-child(3)::before {
    content:"Platz: ";
    font-weight:600;
  }

  /* 4. Zelle = Punkte */
  .details-table tbody tr td:nth-child(4)::before {
    content:"Punkte: ";
    font-weight:600;
  }
}

/* === club-user-manage.css ===================================== */
/* Basis – nur für die Neulinge-Tabelle */
.cum1-neulinge-table {
    width: 100%;
    border-collapse: collapse;
}
.cum1-neulinge-table th,
.cum1-neulinge-table td {
    padding: .5rem .75rem;
    text-align: left;
    border: 1px solid #e1e4e8;
}
.cum1-neulinge-table th {
    background: #f6f8fa;
    font-weight: 600;
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {

    .cum1-neulinge-table thead {
        display: none;                /* Kopf ausblenden */
    }
    .cum1-name,
    .cum1-email,
    .cum1-dob,
    .cum1-actions {
      padding-left: 70px !important;
    }

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

    .cum1-neulinge-table tr {
        margin-bottom: 1rem;
        background: #fff;
        border-radius: .5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,.06);
        overflow: hidden;
    }

    .cum1-neulinge-table td {
        position: relative;
        text-align: left;
        border: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .cum1-neulinge-table td:last-child {
        border-bottom: 0;
    }

    .cum1-neulinge-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        padding: .5rem .75rem;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        color: #57606a;
    }

    /* Aktionen-Zelle */
    .cum1-neulinge-table .cum1-actions {
        text-align: center;
        padding-left: 0 !important;
    }
    .cum1-neulinge-table .cum1-actions button {
        margin: .25rem .5rem;
        width: 120px;
    }
}
/* =============================================================== */