/* ============================================================
   01. GRUNDLAYOUT
============================================================ */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f4f6;
    color: #111827;
    line-height: 1.5;
}


/* ============================================================
   02. HEADER
============================================================ */

header {
    background: #1f2937;
    color: white;
    padding: 22px 24px;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
}

header h1 {
    margin: 0 0 3px 0;
    font-size: 24px;
    font-weight: 600;
}

header p {
    margin: 0;
    color: #d1d5db;
    font-size: 14px;
}


/* ============================================================
   03. HAUPTBEREICH
============================================================ */

main {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 24px;
}


/* ============================================================
   04. KARTEN
============================================================ */

.card {
    margin-bottom: 20px;
    padding: 24px;

    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.card h2 {
    margin-top: 0;
    margin-bottom: 18px;

    font-size: 20px;
    font-weight: 600;
}

.card h3 {
    margin: 0 0 14px 0;

    font-size: 17px;
    font-weight: 600;
}


/* ============================================================
   05. SEITENKOPF
============================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.page-header h2 {
    margin-bottom: 4px;
}

.page-header p {
    margin: 0;
    color: #6b7280;
}


/* ============================================================
   06. BUTTONS
============================================================ */

.button-group {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 16px;

    border: 1px solid #2563eb;
    border-radius: 6px;

    background: #2563eb;
    color: white;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    cursor: pointer;
}

.button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.button.secondary {
    background: white;
    color: #374151;

    border-color: #d1d5db;
}

.button.secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}


/* ============================================================
   07. FORMULARE – ALLGEMEIN
============================================================ */

.form-group {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;

    color: #374151;
}

input,
select {
    width: 100%;
    min-height: 38px;

    padding: 8px 10px;

    border: 1px solid #d1d5db;
    border-radius: 6px;

    background: white;
    color: #111827;

    font-family: inherit;
    font-size: 14px;
}

input:focus,
select:focus {
    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 2px rgba(37, 99, 235, 0.12);
}

input::placeholder {
    color: #9ca3af;
}


/* ============================================================
   08. ALLGEMEINES FORMULARRASTER
============================================================ */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(220px, 1fr));

    gap: 18px 24px;
}


/* ============================================================
   09. FORMULARABSCHNITTE
============================================================ */

.form-section {
    margin-top: 30px;
    padding-top: 24px;

    border-top: 1px solid #e5e7eb;
}

.form-section p {
    margin: -6px 0 16px 0;

    color: #6b7280;

    font-size: 14px;
}


/* ============================================================
   10. TURNIERFORMULAR
============================================================ */

.turnier-form-grid {
    display: grid;

    grid-template-columns:
        1fr
        1.4fr
        1fr;

    gap: 20px 24px;

    width: 100%;
    max-width: 1050px;
}

.turnier-form-grid .form-group {
    min-width: 0;
}

#terminschutznummer {
    width: 220px;
    max-width: 100%;
}


/* ============================================================
   11. TURNIERDATUM
============================================================ */

.turnier-datum-gruppe {
    min-width: 0;
}

.turnier-datum {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr)
        auto minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    width: 100%;
}

.feld-hinweis {
    font-size: 13px;

    color: #6b7280;

    white-space: nowrap;
}

.turnier-datum input {
    width: 100%;
    min-width: 0;
}


/* ============================================================
   12. RICHTER
============================================================ */

.richter-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(420px, 1fr));

    gap: 24px 36px;

    max-width: 1050px;
}

.richter-gruppe {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.richter-gruppe > label {
    font-size: 13px;
    font-weight: 600;

    color: #374151;
}

.richter-zeile {
    display: grid;

    grid-template-columns:
        minmax(190px, 1fr)
        minmax(160px, 0.8fr);

    gap: 14px;
}

.richter-zeile input {
    min-width: 0;
}


/* ============================================================
   13. PRÜFUNGSARTEN
============================================================ */

.disziplin-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(140px, 1fr));

    gap: 10px 14px;

    width: 100%;
    max-width: 700px;
}

.disziplin-grid .checkbox-item {
    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 36px;

    padding: 7px 10px;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background: #fafafa;

    white-space: nowrap;

    cursor: pointer;
}

.disziplin-grid .checkbox-item:hover {
    background: #f3f4f6;
}

.checkbox-item input {
    width: auto;
    min-height: auto;

    margin: 0;
}


/* ============================================================
   14. VK-PRÜFUNGSARTEN
============================================================ */

.vk-pruefung-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(100px, 1fr));

    gap: 10px 14px;

    width: 100%;
    max-width: 700px;

    margin-top: 10px;
    margin-bottom: 10px;
}

.vk-pruefung-grid .checkbox-item {
    display: flex;
    align-items: center;

    gap: 8px;

    min-height: 36px;

    padding: 7px 10px;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background: #fafafa;

    white-space: nowrap;

    cursor: pointer;
}

.vk-pruefung-grid .checkbox-item:hover {
    background: #f3f4f6;
}

.vk-pruefung-grid .checkbox-item input {
    width: auto;
    min-height: auto;

    margin: 0;
}


/* ============================================================
   15. ALLGEMEINE ABSCHNITTSKÖPFE
============================================================ */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.section-header h2 {
    margin-bottom: 4px;
}

.section-header p {
    margin: 0;

    color: #6b7280;
}


/* ============================================================
   16. TURNIERINFORMATIONEN
============================================================ */

.turnier-details {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 1px;

    overflow: hidden;

    background: #e5e7eb;

    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.turnier-info {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 16px 18px;

    background: white;
}

.info-label {
    font-size: 13px;

    color: #6b7280;
}

.turnier-info strong {
    font-size: 16px;

    color: #111827;
}


/* ============================================================
   17. TABELLEN
============================================================ */

.table-container {
    width: 100%;

    overflow-x: auto;
}

table {
    width: 100%;

    border-collapse: collapse;

    font-size: 14px;
}

th {
    padding: 10px 12px;

    background: #f9fafb;

    border-bottom: 1px solid #e5e7eb;

    text-align: left;

    font-weight: 600;

    color: #374151;
}

td {
    padding: 10px 12px;

    border-bottom: 1px solid #e5e7eb;
}

tr:hover td {
    background: #fafafa;
}


/* ============================================================
   18. TABELLENBUTTONS
============================================================ */

.edit-button,
.delete-button {
    padding: 5px 9px;

    border-radius: 5px;

    font-size: 12px;

    cursor: pointer;
}

.edit-button {
    border: 1px solid #d1d5db;

    background: white;
    color: #374151;
}

.edit-button:hover {
    background: #f3f4f6;
}

.delete-button {
    border: 1px solid #fecaca;

    background: #fef2f2;
    color: #b91c1c;
}

.delete-button:hover {
    background: #fee2e2;
}


/* ============================================================
   19. TEAMFORMULAR
============================================================ */

#teamForm h3 {
    margin-top: 40px;
    margin-bottom: 20px;
}

#teamForm h3:first-child {
    margin-top: 10px;
}


/* ============================================================
   20. TEAMSTATUS IN TABELLEN
============================================================ */

/* Mehrfachstarter in verschiedenen Disziplinen */

#teamTabelle tr.mehrfachstarter td {
    background-color: #f0f8f0;
}


/* Mögliche doppelte Meldung in derselben Disziplin */

#teamTabelle tr.doppelte-meldung td {
    background-color: #fff0f0;
}

.mehrfachstarter-button {
    background-color: #f0f8f0;
    color: #2f5d3a;

    border: 1px solid #b9d8bd;
}

.mehrfachstarter-button:hover {
    background-color: #e2f2e4;
}


/* ============================================================
   21. ERGEBNIS-RADIOBUTTONS
============================================================ */

.ergebnis-radio {
    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    max-width: 16px !important;

    min-height: 16px !important;
    max-height: 16px !important;

    padding: 0 !important;
    margin: 0 8px 0 0 !important;

    flex: 0 0 16px !important;
}


/* ============================================================
   22. DK – LEINE CHECKBOX
============================================================ */

.vk3-feld input.dk-leine-checkbox {
    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    padding: 0;
    margin: 0;
}

/* ============================================================
   23. ZENTRALE VARIABLEN
============================================================ */

:root {
    --sidebar-width: 220px;

    --navy: #16283d;
    --navy-dark: #102033;
    --navy-hover: #223b56;
    --navy-active: #294b6e;

    --dashboard-bg: #f3f4f6;
    --dashboard-surface: #ffffff;
    --dashboard-soft: #f7f8fa;

    --dashboard-border: #e1e5ea;

    --dashboard-text: #172033;
    --dashboard-muted: #6b7280;

    --dashboard-danger: #963737;
}


/* ============================================================
   24. APP-LAYOUT
============================================================ */

.app-layout {
    min-height: 100vh;

    background: var(--dashboard-bg);
}


/* ============================================================
   25. SIDEBAR
============================================================ */

.sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    background: var(--navy);

    overflow-y: auto;

    z-index: 100;
}


/* ============================================================
   26. SIDEBAR – TITEL
============================================================ */

.sidebar-logo {
    min-height: 64px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    padding: 0 17px;

    background: var(--navy-dark);
}

.sidebar-logo-text {
    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;
}


/* ============================================================
   27. SIDEBAR – NAVIGATION
============================================================ */

.sidebar-nav {
    flex: 1;

    padding: 12px 9px;
}

.sidebar-link {
    min-height: 38px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    margin-bottom: 2px;

    padding: 7px 11px;

    border-radius: 5px;

    color: #d4dde6;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.25;

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.sidebar-link:hover {
    background: var(--navy-hover);

    color: #ffffff;
}

.sidebar-link.active {
    background: var(--navy-active);

    color: #ffffff;

    font-weight: 600;
}


/* ============================================================
   28. SIDEBAR – BEREICHSÜBERSCHRIFTEN
============================================================ */

.sidebar-section {
    margin: 18px 11px 6px;

    color: #8393a5;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.09em;
}


/* ============================================================
   29. SIDEBAR – FOOTER / LOGOUT
============================================================ */

.sidebar-footer {
    margin-top: auto;

    padding: 16px;
}

.sidebar-logout {
    display: block;

    width: 100%;

    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;

    background: transparent;
    color: #ffffff;

    font-size: 14px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s;
}

.sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.3);
}


/* ============================================================
   30. HAUPTBEREICH DES APP-LAYOUTS
============================================================ */

main.main-content {
    width: auto;
    max-width: none;

    min-height: 100vh;

    box-sizing: border-box;

    margin: 0;
    margin-left: var(--sidebar-width);

    padding: 0;

    background: var(--dashboard-bg);
}


/* ============================================================
   31. TOPBAR
============================================================ */

header.topbar {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    margin: 0;

    padding: 11px 28px;

    background: #ffffff;
    color: var(--dashboard-text);

    border-bottom: 1px solid var(--dashboard-border);
}

header.topbar h1 {
    margin: 0 0 2px;

    color: var(--dashboard-text);

    font-size: 19px;
    font-weight: 700;
}

.topbar-subtitle {
    margin: 0;

    color: var(--dashboard-muted);

    font-size: 12px;
}


/* ============================================================
   32. ALLGEMEINER SEITENINHALT
============================================================ */

.page-content {
    padding: 22px 28px 30px;
}

.page-content > .card {
    max-width: none;

    margin: 0 0 12px;

    padding: 16px 18px;

    border: 1px solid var(--dashboard-border);
    border-radius: 7px;

    box-shadow:
        0 1px 4px rgba(15, 23, 42, 0.04);
}


/* ============================================================
   33. DASHBOARD – WILLKOMMENSBEREICH
============================================================ */

.dashboard-hero {
    margin: 22px 28px;

    padding: 23px 24px 24px;

    background: var(--navy);

    border-radius: 8px;

    box-shadow:
        0 2px 7px rgba(15, 23, 42, 0.07);
}

.dashboard-hero-header {
    max-width: 700px;

    margin-bottom: 17px;
}

.dashboard-hero-header .hero-label {
    display: block;

    margin-bottom: 5px;

    color: #9fadb9;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.dashboard-hero-header h2 {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.25;
}

.dashboard-hero-header p {
    margin: 0;

    color: #bdc8d3;

    font-size: 12px;
}


/* ============================================================
   34. DASHBOARD – TURNIER-PANEL
============================================================ */

.hero-tournament-panel {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d8dee5;
    border-radius: 6px;
}


/* ============================================================
   35. DASHBOARD – TURNIERAUSWAHL
============================================================ */

.hero-tournament-selection {
    display: flex;
    align-items: flex-end;

    gap: 12px;

    padding: 14px 15px;
}

.hero-field {
    flex: 0 0 330px;

    width: 330px;
    min-width: 0;
}

.hero-field label {
    display: block;

    margin-bottom: 5px;

    color: #4b5563;

    font-size: 11px;
    font-weight: 600;
}

.hero-field select {
    width: 100%;
    height: 37px;

    box-sizing: border-box;

    padding: 0 11px;

    background: #ffffff;
    color: var(--dashboard-text);

    border: 1px solid #cbd3db;
    border-radius: 5px;

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.hero-field select:hover {
    border-color: #aeb8c2;
}

.hero-field select:focus {
    border-color: var(--navy-active);

    box-shadow:
        0 0 0 2px rgba(41, 75, 110, 0.10);
}


/* ============================================================
   36. DASHBOARD – AKTIONSBUTTONS
============================================================ */

.hero-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.hero-button {
    height: 37px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 0 14px;

    border: 1px solid transparent;
    border-radius: 5px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.hero-button.primary {
    background: var(--navy);

    border-color: var(--navy);

    color: #ffffff;
}

.hero-button.primary:hover:not(:disabled) {
    background: var(--navy-hover);

    border-color: var(--navy-hover);
}

.hero-button.secondary {
    background: #ffffff;

    border-color: #cbd3db;

    color: #26374a;
}

.hero-button.secondary:hover {
    background: #f4f5f6;

    border-color: #aeb8c2;
}

.hero-button.danger {
    background: #ffffff;

    border-color: #d9bcbc;

    color: var(--dashboard-danger);
}

.hero-button.danger:hover:not(:disabled) {
    background: #fdf5f5;

    border-color: #c99393;
}

.hero-button:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}


/* ============================================================
   37. DASHBOARD – UNTERER TURNIERBEREICH
============================================================ */

.hero-tournament-bottom {
    display: flex;
    align-items: stretch;

    background: var(--dashboard-soft);

    border-top: 1px solid var(--dashboard-border);
}


/* ============================================================
   38. DASHBOARD – TURNIERDATEN
============================================================ */

.hero-tournament-details {
    flex: 1;

    display: grid;

    grid-template-columns:
        minmax(180px, 1.4fr)
        minmax(110px, 0.8fr)
        minmax(160px, 1fr)
        minmax(130px, 0.8fr);
}

.hero-info-item {
    min-width: 0;

    box-sizing: border-box;

    padding: 10px 14px;

    border-right: 1px solid var(--dashboard-border);
}

.hero-info-item span {
    display: block;

    margin-bottom: 2px;

    color: #7b8490;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.hero-info-item strong {
    display: block;

    overflow: hidden;

    color: var(--dashboard-text);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.35;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ============================================================
   39. DASHBOARD – TURNIER BEARBEITEN
============================================================ */

.hero-edit-link {
    min-width: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 0 15px;

    background: #ffffff;

    color: var(--navy-active);

    border-left: 1px solid var(--dashboard-border);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.15s ease;
}

.hero-edit-link:hover {
    background: #f3f4f6;
}


/* ============================================================
   40. DASHBOARD / DISZIPLIN-KARTEN
============================================================ */

.dashboard-grid,
.dashboard-vk-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(120px, 1fr));

    gap: 8px;
}

.dashboard-card {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 9px 12px;

    background: white;

    border: 1px solid #e5e7eb;
    border-radius: 5px;

    color: inherit;

    text-align: center;
    text-decoration: none;

    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
}

.dashboard-card:hover {
    border-color: #2563eb;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08);

    transform: translateY(-2px);
}

.dashboard-card-title {
    margin: 0;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;
}

.dashboard-card-text {
    display: none;
}


/* ============================================================
   41. SEITENKARTEN – ABSCHNITTSKOPF
============================================================ */

.page-content .section-header {
    gap: 20px;

    margin-bottom: 10px;
}

.page-content .section-header h2 {
    margin: 0;

    font-size: 16px;

    line-height: 1.2;
}

.page-content .section-header p {
    display: none;
}

/* ============================================================
   42. TEAMS – STATISTIK
============================================================ */

.team-statistics {
    display: flex;

    width: fit-content;

    margin-bottom: 18px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--dashboard-border);
    border-radius: 6px;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.04);
}

.team-statistic {
    min-width: 135px;

    padding: 11px 16px;

    border-right: 1px solid var(--dashboard-border);
}

.team-statistic:last-child {
    border-right: 0;
}

.team-statistic-label {
    display: block;

    margin-bottom: 3px;

    color: var(--dashboard-muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.team-statistic strong {
    color: var(--dashboard-text);

    font-size: 19px;
    font-weight: 700;
}


/* ============================================================
   43. STARTNUMMERN – HINWEISE
============================================================ */

.startnummern-info {
    max-width: 950px;

    margin-bottom: 20px;

    padding: 13px 15px;

    background: #f7f8fa;

    border: 1px solid var(--dashboard-border);
    border-radius: 5px;
}

.startnummern-info p {
    margin: 0 0 7px;

    color: #5f6875;

    font-size: 12px;
    line-height: 1.5;
}

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

.startnummern-info strong {
    color: #26374a;

    font-weight: 700;
}


/* ============================================================
   44. GRUPPENVERWALTUNG – GRUPPE ANLEGEN
============================================================ */

.gruppen-anlegen-zeile {
    display: flex;
    align-items: flex-end;

    gap: 12px;
}

.gruppen-anlegen-zeile .form-field {
    width: 180px;
}


/* ============================================================
   45. GRUPPENVERWALTUNG – GRUPPENEINTRÄGE
============================================================ */

.gruppen-eintrag {
    margin-bottom: 12px;

    padding: 14px 16px;

    background: #f7f8fa;

    border: 1px solid var(--dashboard-border);
    border-radius: 6px;
}

.gruppen-eintrag:last-child {
    margin-bottom: 0;
}

.gruppen-eintrag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.gruppen-eintrag-kopf > div:first-child {
    display: flex;
    align-items: center;

    gap: 12px;
}

.gruppen-disziplin {
    color: var(--dashboard-muted);

    font-size: 12px;
}

.gruppen-eintrag-teams {
    margin-top: 10px;
    padding-top: 10px;

    border-top: 1px solid var(--dashboard-border);
}


/* ============================================================
   46. GRUPPENVERWALTUNG – TEAMZEILEN
============================================================ */

.gruppen-team-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 38px;

    padding: 5px 0;

    border-bottom: 1px solid #e5e7eb;
}

.gruppen-team-zeile:last-child {
    border-bottom: 0;
}


/* ============================================================
   47. GRUPPENVERWALTUNG – SUCHE
============================================================ */

.gruppen-suche {
    max-width: 400px;

    margin-bottom: 14px;
}

.gruppen-suche label {
    display: block;

    margin-bottom: 5px;
}


/* ============================================================
   48. GRUPPENVERWALTUNG – TEAMAUSWAHL
============================================================ */

.gruppen-team-liste {
    max-height: 430px;

    overflow-y: auto;

    margin: 12px 0 16px;

    border: 1px solid var(--dashboard-border);
    border-radius: 5px;
}

.gruppen-team-auswahl {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 12px;

    border-bottom: 1px solid #e5e7eb;

    cursor: pointer;
}

.gruppen-team-auswahl:last-child {
    border-bottom: 0;
}

.gruppen-team-auswahl:hover {
    background: #f7f8fa;
}

.gruppen-team-auswahl input {
    width: auto;

    margin: 0;
}


/* ============================================================
   49. GRUPPENVERWALTUNG – FILTER
============================================================ */

.gruppen-filter {
    display: flex;
    align-items: flex-end;

    gap: 12px;

    margin-bottom: 14px;
}

.gruppen-filter .gruppen-suche {
    flex: 1;

    max-width: 400px;

    margin-bottom: 0;
}

.gruppen-disziplin-filter {
    width: 220px;
}

.gruppen-disziplin-filter label {
    display: block;

    margin-bottom: 5px;
}


/* ============================================================
   50. TURNIERTAGE ZUORDNEN
============================================================ */

.turniertage-tabelle {
    width: 100%;

    table-layout: fixed;
}

.turniertage-tabelle th:nth-child(1) {
    width: 22%;
}

.turniertage-tabelle th:nth-child(2) {
    width: 15%;
}

.turniertage-tabelle th:nth-child(3) {
    width: 15%;
}

.turniertage-tabelle th:nth-child(4) {
    width: 28%;
}

.turniertage-tabelle th:nth-child(5) {
    width: 20%;
}

.turniertage-tabelle .turniertag-auswahl {
    width: 100%;
}


/* ============================================================
   51. ABTEILUNGEN – MEHRTÄGIGES TURNIER
============================================================ */

#abteilungenAnzahl {
    display: flex;
    align-items: center;

    gap: 30px;

    width: 100%;
}

#abteilungenAnzahl .abteilung-tag {
    font-size: 18px;
    font-weight: 600;

    white-space: nowrap;
}


/* ============================================================
   52. MAXIMALE STARTANZAHL ÜBERSCHRITTEN
============================================================ */

.startlimit-ueberschritten,
.startlimit-ueberschritten:hover,
.startlimit-ueberschritten td,
.startlimit-ueberschritten:hover td {
    background-color: #ffe6e6 !important;
}

.startlimit-warnung {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin-left: 6px;

    border-radius: 50%;

    background-color: #c62828;
    color: white;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    cursor: help;
}


/* ============================================================
   53. ABGEMELDETE STARTS
============================================================ */

.start-abgemeldet,
.start-abgemeldet:hover,
.start-abgemeldet td,
.start-abgemeldet:hover td {
    background-color: #f1f1f1 !important;

    color: #888;
}

.start-abgemeldet td {
    text-decoration: line-through;
}


/* ============================================================
   54. VK / ERFASSUNG – TEAMAUSWAHL
============================================================ */

.vk3-team-zeile {
    display: flex;
    align-items: center;

    gap: 20px;
}

.vk3-team-zeile label {
    width: 140px;

    flex-shrink: 0;

    font-weight: 600;
}

.vk3-team-zeile select {
    width: 420px;
    max-width: 100%;
}


/* ============================================================
   55. VK / ERFASSUNG – TEAM-SUCHE
============================================================ */

.vk3-team-suche-zeile {
    flex-wrap: wrap;
}

.vk3-team-suche-zeile #teamSuche {
    width: 220px;
    max-width: 100%;
    min-width: 0;
}

.vk3-team-suche-zeile .vk3-suche-label {
    width: auto;
}

#teamSucheStatus:empty,
#teamSuchtreffer:empty {
    display: none;
}


/* ============================================================
   56. VK / ERFASSUNG
============================================================ */

.vk3-erfassung {
    width: 100%;
}

.vk3-zeile {
    display: flex;
    align-items: center;

    gap: 24px;

    min-height: 54px;

    border-bottom: 1px solid #e5e7eb;
}

.vk3-disziplin {
    width: 150px;

    flex-shrink: 0;

    font-weight: 600;
}

.vk3-feld {
    display: flex;
    align-items: center;

    gap: 8px;
}

.vk3-feld label {
    width: 50px;

    flex-shrink: 0;

    font-size: 13px;

    color: #374151;
}

.vk3-feld input {
    width: 100px;
    min-height: 36px;

    padding: 6px 8px;
}


/* ============================================================
   57. VK / ERGEBNISLISTEN-AUSWAHL
============================================================ */

.vk3-ergebnisliste-auswahl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;
}

.vk3-auswahl-label {
    font-weight: 600;
}

.vk3-radio {
    display: flex;
    align-items: center;

    gap: 7px;

    cursor: pointer;
}

.vk3-radio input {
    width: auto;
    min-height: auto;

    margin: 0;
}


/* ============================================================
   58. ERGEBNIS / ABBRUCH
============================================================ */

#abbruch {
    width: 360px;
    max-width: 100%;
}

#ergebnis {
    margin-left: 30px;
}

/* ============================================================
   59. RESPONSIVE – BIS 1000 PX
============================================================ */

@media (max-width: 1000px) {

    .hero-tournament-selection {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-field {
        min-width: 0;
    }

    .hero-actions {
        justify-content: flex-start;
    }

    .hero-tournament-bottom {
        flex-direction: column;
    }

    .hero-tournament-details {
        grid-template-columns:
            1fr 1fr;
    }

    .hero-info-item:nth-child(2) {
        border-right: 0;
    }

    .hero-info-item:nth-child(1),
    .hero-info-item:nth-child(2) {
        border-bottom:
            1px solid var(--dashboard-border);
    }

    .hero-edit-link {
        min-height: 38px;

        border-top:
            1px solid var(--dashboard-border);

        border-left: 0;
    }
}


/* ============================================================
   60. RESPONSIVE – BIS 800 PX
============================================================ */

@media (max-width: 800px) {

    main {
        margin-top: 20px;

        padding: 0 16px;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .turnier-details {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .turnier-form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .richter-grid {
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   61. RESPONSIVE – BIS 750 PX
============================================================ */

@media (max-width: 750px) {

    :root {
        --sidebar-width: 180px;
    }


    /* --------------------------------------------------------
       Sidebar
    -------------------------------------------------------- */

    .sidebar-logo {
        padding: 0 13px;
    }

    .sidebar-logo-text {
        font-size: 14px;
    }

    .sidebar-nav {
        padding-left: 7px;
        padding-right: 7px;
    }

    .sidebar-link {
        padding-left: 9px;
        padding-right: 9px;

        font-size: 12px;
    }


    /* --------------------------------------------------------
       Topbar
    -------------------------------------------------------- */

    header.topbar {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* --------------------------------------------------------
       Dashboard
    -------------------------------------------------------- */

    .dashboard-hero {
        margin: 17px 20px;

        padding: 19px;
    }

    .dashboard-hero-header h2 {
        font-size: 19px;
    }

    .hero-actions {
        flex-wrap: wrap;
    }


    /* --------------------------------------------------------
       Seiteninhalt
    -------------------------------------------------------- */

    .page-content {
        padding: 18px 20px 25px;
    }


    /* --------------------------------------------------------
       Teamstatistik
    -------------------------------------------------------- */

    .team-statistics {
        width: 100%;
    }

    .team-statistic {
        flex: 1;

        min-width: 0;
    }
}


/* ============================================================
   62. RESPONSIVE – BIS 700 PX
============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       Gruppen anlegen
    -------------------------------------------------------- */

    .gruppen-anlegen-zeile {
        align-items: stretch;
        flex-direction: column;
    }

    .gruppen-anlegen-zeile .form-field {
        width: 100%;
    }


    /* --------------------------------------------------------
       Gruppeneinträge
    -------------------------------------------------------- */

    .gruppen-eintrag-kopf {
        align-items: flex-start;
        flex-direction: column;
    }

    .gruppen-team-zeile {
        align-items: flex-start;
        flex-direction: column;
    }


    /* --------------------------------------------------------
       Gruppenfilter
    -------------------------------------------------------- */

    .gruppen-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .gruppen-filter .gruppen-suche,
    .gruppen-disziplin-filter {
        width: 100%;
        max-width: none;
    }
}


/* ============================================================
   63. RESPONSIVE – BIS 600 PX
============================================================ */

@media (max-width: 600px) {

    /* --------------------------------------------------------
       Grundlayout
    -------------------------------------------------------- */

    .card {
        padding: 18px;
    }


    /* --------------------------------------------------------
       Sidebar
    -------------------------------------------------------- */

    .sidebar {
        position: static;

        width: 100%;
        height: auto;
    }

    .sidebar-logo {
        min-height: 55px;
    }

    .sidebar-nav {
        padding-bottom: 10px;
    }


    /* --------------------------------------------------------
       Hauptbereich
    -------------------------------------------------------- */

    main.main-content {
        margin-left: 0;
    }

    .page-content {
        padding: 14px;
    }


    /* --------------------------------------------------------
       Topbar
    -------------------------------------------------------- */

    header.topbar {
        min-height: 58px;

        padding: 10px 16px;
    }


    /* --------------------------------------------------------
       Dashboard
    -------------------------------------------------------- */

    .dashboard-hero {
        margin: 14px;

        padding: 17px;
    }

    .dashboard-hero-header {
        margin-bottom: 14px;
    }

    .dashboard-hero-header h2 {
        font-size: 18px;
    }

    .hero-tournament-selection {
        padding: 12px;
    }

    .hero-actions {
        flex-direction: column;

        width: 100%;
    }

    .hero-button {
        width: 100%;
    }

    .hero-tournament-details {
        grid-template-columns:
            1fr;
    }

    .hero-info-item {
        border-right: 0;

        border-bottom:
            1px solid var(--dashboard-border);
    }

    .hero-info-item:last-child {
        border-bottom: 0;
    }


    /* --------------------------------------------------------
       Formulare
    -------------------------------------------------------- */

    .turnier-form-grid {
        grid-template-columns:
            1fr;
    }

    .form-grid {
        grid-template-columns:
            1fr;
    }


    /* --------------------------------------------------------
       Richter
    -------------------------------------------------------- */

    .richter-zeile {
        grid-template-columns:
            1fr 1fr;
    }


    /* --------------------------------------------------------
       Turnierinformationen
    -------------------------------------------------------- */

    .turnier-details {
        grid-template-columns:
            1fr;
    }


    /* --------------------------------------------------------
       Abschnittsköpfe
    -------------------------------------------------------- */

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }


    /* --------------------------------------------------------
       Turnierdatum
    -------------------------------------------------------- */

    .turnier-datum {
        display: grid;

        grid-template-columns:
            35px 180px;

        gap: 8px 10px;

        align-items: center;
        justify-content: start;

        width: 100%;
        min-width: 0;
    }

    .turnier-datum input[type="date"] {
        width: 180px;
        min-width: 0;
        max-width: 180px;
    }

    .turnier-datum .feld-hinweis {
        width: auto;
    }


    /* --------------------------------------------------------
       Prüfungsarten
    -------------------------------------------------------- */

    .disziplin-grid,
    .vk-pruefung-grid {
        grid-template-columns:
            1fr;

        width: 100%;
        max-width: 100%;
    }

    .disziplin-grid .checkbox-item,
    .vk-pruefung-grid .checkbox-item {
        width: 100%;
        min-width: 0;

        white-space: normal;
    }


    /* --------------------------------------------------------
       VK-Erfassung
    -------------------------------------------------------- */

    .vk3-team-zeile {
        display: block;
    }

    .vk3-team-zeile label {
        display: block;

        width: auto;

        margin-bottom: 6px;
    }

    .vk3-team-zeile select {
        width: 100%;
    }

    .vk3-zeile {
        flex-wrap: wrap;

        gap: 10px 16px;

        padding: 10px 0;
    }

    .vk3-disziplin {
        width: 100%;
    }

    .vk3-feld label {
        width: auto;
    }

    .vk3-feld input {
        width: 90px;
    }


    /* --------------------------------------------------------
       Ergebnislisten-Auswahl
    -------------------------------------------------------- */

    .vk3-ergebnisliste-auswahl {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }


    /* --------------------------------------------------------
       Teamstatistik
    -------------------------------------------------------- */

    .team-statistics {
        flex-direction: column;
    }

    .team-statistic {
        border-right: 0;

        border-bottom:
            1px solid var(--dashboard-border);
    }

    .team-statistic:last-child {
        border-bottom: 0;
    }
}


/* ============================================================
   64. RESPONSIVE – BIS 450 PX
============================================================ */

@media (max-width: 450px) {

    .richter-zeile {
        grid-template-columns:
            1fr;
    }
}



/* =====================================================
   TEAMS DUPLIZIEREN – POPUP
   ===================================================== */

#teamsDuplizierenDialog {
    width: min(850px, 90vw);
    max-width: 850px;
    height: min(750px, 85vh);
    max-height: 85vh;
    padding: 28px 32px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
}

#teamsDuplizierenDialog::backdrop {
    background: rgba(0, 0, 0, 0.35);
}


/* Überschrift */

#teamsDuplizierenDialog h2 {
    margin-top: 0;
    font-size: 22px;
}

#teamsDuplizierenDialog .section-header p {
    font-size: 14px;
    margin-bottom: 20px;
}


/* Suche */

#teamsDuplizierenSuche {
    width: 100%;
    font-size: 14px;
}


/* Ergebnisliste */

#teamsDuplizierenErgebnisse {
    max-height: 470px;
    overflow-y: auto;
    margin-top: 15px !important;
    border-top: 1px solid #ddd;
}

#teamsDuplizierenErgebnisse label {
    font-size: 14px;
    line-height: 1.3;
    min-height: 42px;
}

#teamsDuplizierenErgebnisse input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

#teamsDuplizierenErgebnisse span {
    white-space: nowrap;
}


/* Auswahl-Anzeige */

#teamsDuplizierenAuswahlText {
    font-size: 14px;
    font-weight: 600;
}