/* ========== Formularrahmen ========== */
form.eingabe-formular {
    /* Einheitliches Layout für ALLE Formulare */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px 12px;                  /* Zeilen- / Spaltenabstand */
    background: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid transparent;
    align-items: end;                /* Labels + Felder schön bündig */
}

/* Optionaler Bearbeitungsmodus-Rahmen */
form.eingabe-formular.edit-mode {
    border-color: #ff9800;
    background: #fff3e0;
}

/* ========== Form-Felder ========== */
form.eingabe-formular .form-field {
    display: flex;
    flex-direction: column;          /* Label über Input */
    margin-bottom: 0;                /* Abstand wird über grid-gap geregelt */
    min-width: 0;                    /* verhindert Überlaufen in Grid-Spalten */
}

/* Labels */
form.eingabe-formular label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}

/* Inputs, Selects, Buttons – volle Spaltenbreite */
form.eingabe-formular input,
form.eingabe-formular select,
form.eingabe-formular button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
    background: #fff;
}

/* Fokuszustand */
form.eingabe-formular input:focus,
form.eingabe-formular select:focus,
form.eingabe-formular button:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,0.15);
}

/* Buttons im Formular */
form.eingabe-formular button {
    background: #0073aa;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease-in-out;
}
form.eingabe-formular button:hover {
    background: #005f8a;
}

/* Utility: Elemente über ganze Zeile ziehen (falls benötigt) */
form.eingabe-formular .full-row {
    grid-column: 1 / -1;
}

/* Kleinere Bildschirme: minimal schmalere Spalten zulassen */
@media (max-width: 600px) {
    form.eingabe-formular {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        padding: 14px;
    }
}

/* Speziell: Login-Formular (optional, sorgt für extra saubere Linie) */
form.eingabe-formular.login-form {
    /* nutzt dasselbe Grid, nur etwas mehr „Bündigkeit“ */
    align-items: end;
}

/* ========== Tabellen-Styling ========== */
table.formular-tabelle {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

table.formular-tabelle th,
table.formular-tabelle td {
    border: 1px solid #ddd;
    padding: 10px 8px;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.3;
}

table.formular-tabelle th {
    background: #f1f1f1;
    font-weight: 600;
    white-space: nowrap;
}

table.formular-tabelle tr:nth-child(even) {
    background: #fafafa;
}

table.formular-tabelle a {
    color: #0073aa;
    text-decoration: none;
}
table.formular-tabelle a:hover {
    text-decoration: underline;
}

/* Sort-Indikator (optional, wenn du Klassen setzt) */
table.formular-tabelle th.sorted-asc,
table.formular-tabelle th.sorted-desc {
    background: #e9ecef;
}

/* Aktionen-Spalte kompakt */
table.formular-tabelle td.actions,
table.formular-tabelle th.actions {
    white-space: nowrap;
    width: 1%;
}
table.formular-tabelle td.actions .btn + .btn {
    margin-left: 6px;
}

/* ========== Buttons (Allgemein / Tabellen-Aktionen / Pagination) ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    background: #e9ecef;
    color: #111;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn:hover {
    background: #dde2e6;
}
.btn-sm {
    padding: 6px 10px;
    font-size: 12.5px;
}
.btn .icon {
    font-size: 14px;
    line-height: 1;
}

.btn-primary {
    background: #0073aa;
    color: #fff;
    border-color: #006093;
}
.btn-primary:hover {
    background: #005f8a;
}

.btn-danger {
    background: #d32f2f;
    color: #fff;
    border-color: #b71c1c;
}
.btn-danger:hover {
    background: #b71c1c;
}

/* Pagination-Container (falls benutzt) */
.pagination {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ========== Feinheiten & Kompatibilität ========== */
/* Verhindert super-schmale Eingabefelder, falls Container sehr eng ist */
form.eingabe-formular input[type="email"],
form.eingabe-formular input[type="text"],
form.eingabe-formular input[type="date"],
form.eingabe-formular select {
    min-width: 0;  /* wichtig innerhalb von CSS-Grid */
}

/* Safari/Firefox: Buttons nicht strecken, wenn in Grid */
form.eingabe-formular > button,
form.eingabe-formular .btn {
    width: auto;   /* Buttons bleiben kompakt */
    justify-self: start;
}

/* Links in Tabellen-Headern neutraler (Sortier-Links) */
table.formular-tabelle th a {
    color: inherit;
    text-decoration: none;
}
table.formular-tabelle th a:hover {
    text-decoration: underline;
}

/* Optional: Disable-State */
button[disabled],
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
a.btn-danger {
    background: #d9534f;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
}
a.btn-danger:hover {
    background: #c9302c;
}
/* Halbbreite Felder (zwei nebeneinander) */
form.eingabe-formular .form-field.half {
    grid-column: span 1;
}
/* Sortier-Indikatoren im Tabellenkopf */
table.formular-tabelle th.sorted-asc::after {
    content: " ▲";
    font-size: 11px;
    color: #0073aa;
}
table.formular-tabelle th.sorted-desc::after {
    content: " ▼";
    font-size: 11px;
    color: #0073aa;
}



/* =================== Trainingsplan-Design (aus trainingsplan-formular) =================== */
.tp-wrap { max-width: 1100px; margin: 1rem auto; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.tp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width: 768px){ .tp-grid-2 { grid-template-columns: 1fr 1fr; } }
.tp-field label { display:block; font-weight: 600; margin-bottom: 6px; }
.tp-input, .tp-textarea { width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; box-sizing:border-box; background:#fff; }
.tp-textarea { min-height: 120px; }

.tp-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:10px; border:1px solid #111827; background:#111827; color:#fff; text-decoration:none; cursor:pointer; }
.tp-btn.secondary { background:#fff; color:#111827; border-color:#d1d5db; }
.tp-btn.small { padding:.4rem .7rem; font-size:.9rem; }

.tp-alert { margin: 0 0 12px 0; padding: 10px 12px; border-radius: 10px; }
.tp-alert-success { background:#ecfdf5; border:1px solid #10b981; }
.tp-alert-info    { background:#eff6ff; border:1px solid #60a5fa; }
.tp-alert-error   { background:#fef2f2; border:1px solid #ef4444; }

table.tp-table { text-align: center; width:100%; border-collapse: collapse; margin-top: 8px; }
table.tp-table th, table.tp-table td { border:1px solid #e5e7eb; padding:8px; vertical-align: top; }
table.tp-table th { text-align:left; background:#f9fafb; }

.tp-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tp-actions form { margin:0; padding:0; }                /* Formular-Rand entfernen */
.tp-actions button.tp-btn,
.tp-actions a.tp-btn { line-height:1; padding:.4rem .7rem; } /* gleiche Innenabstände */
button.tp-btn { appearance:none; -webkit-appearance:none; }  /* Submit/UA-Styles neutralisieren */

.tp-muted { color:#6b7280; font-size:.9rem; }
.tp-bar { display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; margin-bottom:.75rem; border:1px dashed #d1d5db; border-radius:10px; background:#f9fafb; }

.tp-section { margin: .75rem 0; }
.tp-section h3 { margin: .25rem 0; }
.tp-note { font-size:.9rem; color:#374151; }
.tp-inline { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.tp-inline .tp-field { min-width: 240px; }
.tp-small { font-size:.9rem; }

/* Status-Badges */
.tp-badge { display:inline-block; padding:.1rem .4rem; border-radius:6px; font-size:.8rem; border:1px solid #d1d5db; background:#f9fafb; color:#374151; }
.tp-badge.warn { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
.tp-badge.ok   { background:#ecfdf5; border-color:#10b981; color:#065f46; }

/* Zustände für Zeilen */
.tp-row-disabled { background: #f3f4f6; } /* grau: bereits dieser Plan */
/* .tp-conflict bewusst neutral gehalten – ggf. Theme-Override später setzen */
.tp-conflict { background: transparent; }

/* härtere Regeln, um Theme-Resets in Tabellen zu übersteuern */
table .tp-input,
table .tp-textarea {
  padding: 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box;
}

/* Datum/Zeit auf Chrome/Safari nicht “klein” darstellen */
.tp-input[type="date"],
.tp-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
  line-height: 1.25;
}
/* noch spezifischer, falls nötig */
.tp-wrap table .tp-input,
.tp-wrap table .tp-textarea {
  padding: 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
}
/* Bemerkung-Box für Veranstaltungen */

.tp-bemerkung-box{
  width:100%;
  border:2px solid #d1d5db;
  border-radius:10px;
  background:#f9fafb;
  padding:12px 16px;
  margin:.75rem 0;
}
.tp-bemerkung-box strong{display:block;margin-bottom:.25rem;font-size:1.15rem;}
.tp-bemerkung-box .text{font-size:1.05rem;line-height:1.5;color:#111827;}

.tp-bemerkung-box strong {
  display: block;
  margin-bottom: .25rem;
  font-size: 1.15rem;
}