/* ──────────────────────────────────────────────────────────────────────────
   Sitzungs-Todo-Tool — Ergänzungen zur Design-Vorgabe (static/style.css)
   Nutzt dieselben Farb-/Radius-/Font-Tokens, ergänzt nur, was style.css
   nicht abdeckt (Chips, Aufgaben-Blöcke, Icon-Maskierung, Badges, ...).
   style.css selbst wird nicht verändert.
   ────────────────────────────────────────────────────────────────────── */

/* ── Bestätigungs-Modal (#modal-overlay): Toggle fehlt in style.css,
   dort ist offenbar vorgesehen, dass es dynamisch ein-/ausgeblendet wird. ── */
#modal-overlay.open { display: flex; }

/* ── Auswertungs-Grid unter der Aufgabenliste: vierte, bewusst freie Kachel ── */
.chart-card-empty {
  border: 1px dashed #E2DCC9;
  background: transparent;
  box-shadow: none;
}
.chart-pie {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto;
}
.modal-btn-confirm:hover { filter: brightness(.92); }

/* ── Pagination: Seitengrößen-Select auf gleiche Höhe wie die
   Seiten-Buttons (.page-btn, 2rem) bringen ── */
.pagination-left select {
  height: 2rem;
  line-height: 2rem;
  padding: 0 1.8rem 0 .6rem;
  box-sizing: border-box;
}

/* ── Icon-System ──────────────────────────────────────────────────────────
   Die Icons in /icons sind weiße Silhouetten auf transparentem Grund.
   Wir setzen sie als normale <img>, genau wie style.css es für seine
   eigenen Buttons vorsieht:
   - auf farbigen Flächen (nav button, .btn) sind sie bereits per
     style.css weiß eingefärbt (nav button img / .btn img).
   - auf hellen Flächen (Karten, Filterleiste, ...) nutzen wir dieselbe
     Grau-Türkis-Einfärbung wie .btn-icon img in style.css.
   - für "Löschen"-Buttons nutzen wir dieselbe Rot-Einfärbung wie
     .team-remove-btn img in style.css. */
.card-title img,
.group-header img,
.sort-toggle img,
.btn-secondary img,
.search-icon,
.mail-link img,
.kebab-menu button img,
.sel-search-wrap img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(52%) sepia(20%) saturate(250%) hue-rotate(0deg);
  vertical-align: middle;
  flex-shrink: 0;
}
.card-title img { width: 18px; height: 18px; }

/* .btn-outline ist jetzt dunkelgrün gefüllt wie .btn -> Icon weiß, wie .btn img in style.css */
.btn-outline img {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-btn-danger img {
  width: 15px;
  height: 15px;
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%) hue-rotate(330deg);
}

/* ── Logo (Header, oben links) ── */
.logo img { width: 50px; height: 50px; display: block; }

/* ── Zusätzliche Buttons ── */
.btn-secondary {
  background: #EDE8DD;
  color: #4a5568;
}
.btn-secondary:hover { background: #E2DAC8; transform: translateY(-1px); }

.btn-outline {
  background: #D97757;
  border: none;
  color: #fff;
  height: 2.4rem;
  padding: 0 1.4rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: all .2s;
}
.btn-outline:hover { background: #E4A089; transform: translateY(-1px); }

.icon-btn-danger {
  flex-shrink: 0;
  width: 2.1rem; height: 2.1rem;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 4px;
  cursor: pointer;
  color: #d92d20;
}
.icon-btn-danger:hover { background: #fad5d1; }

/* ── Teilnehmer-Chips ── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.chip {
  border: 1px solid #DCD2BE;
  background: #fff;
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .85rem;
  cursor: pointer;
  user-select: none;
  transition: all .12s;
  color: #4a5568;
}
.chip:hover { background: #F5EFE3; }
.chip.selected { background: #D97757; border-color: #D97757; color: #fff; }
.chip.selected:hover { background: #B8654A; }
.chip-remove { margin-left: .45rem; opacity: .8; }
.hint { font-size: .78rem; color: #A79E8E; margin-top: .35rem; }

/* ── Auswahl-Modal: Toggle (in style.css nicht vordefiniert,
   das Original legt/entfernt dieses Element vermutlich dynamisch im DOM) ── */
#attendee-sel-overlay { display: none; }
#attendee-sel-overlay.open { display: flex; }

/* ── Aufgaben-Blöcke (rechte Spalte "Neue Sitzung") ── */
.task-block {
  border: 1px solid #E2DCC9;
  border-radius: 6px;
  background: #FBF9F4;
  padding: .9rem 1rem;
  margin-bottom: .75rem;
  position: relative;
}
.task-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.task-block-head span { font-size: .78rem; font-weight: 600; color: #93897A; text-transform: uppercase; letter-spacing: .04em; }

/* ── Gruppen-Header in der Aufgabenliste ── */
.group-header {
  font-size: .98rem; font-weight: 600; color: #D97757;
  margin: 1.1rem 0 .5rem; padding-bottom: .35rem;
  border-bottom: 2px solid #E2D9CA;
  display: flex; align-items: center; gap: .5rem;
}
.group-header:first-child { margin-top: 0; }

/* ── Status-Badges Aufgaben ── */
.badge-open     { background: #fff3e0; color: #b8720a; }
.badge-done     { background: #e6f7ea; color: #00811a; }
.badge-overdue  { background: #fdecea; color: #d92d20; }
.status-pill { cursor: pointer; }

/* ── Sortier-Umschalter ── */
.sort-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #F0EEE6; border: 1px solid #E2DCC9; border-radius: 4px;
  padding: .38rem .7rem; font-size: .85rem; color: #555; cursor: pointer;
}
.sort-toggle:hover { background: #EAE4D6; }

/* ── Mail-Zuordnungs-Karte ── */
.mail-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid #EEE8DB;
  gap: 1rem; flex-wrap: wrap;
}
.mail-item:last-child { border-bottom: none; }
.mail-item-name { font-weight: 600; font-size: .92rem; color: #2E2F2F; }
.mail-item-meta { font-size: .8rem; color: #93897A; }
.mail-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: #D97757; text-decoration: none;
  border: 1px solid #D97757; padding: .35rem .75rem; border-radius: 4px;
}
.mail-link:hover { background: #E2D9CA; }

/* ── Adressbuch- / Projektlisten ── */
.record-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid #EEE8DB;
}
.record-row:last-child { border-bottom: none; }
.record-main { flex: 1; }
.record-title { font-size: .92rem; font-weight: 600; color: #2E2F2F; }
.record-sub { font-size: .8rem; color: #93897A; margin-top: .1rem; }

/* ── Datensicherung (Export/Import) ── */
.backup-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.file-input-hidden { display: none; }

/* ── Kebab-Menü (global, wird per JS über die jeweilige Zeile positioniert) ── */
#global-kebab-menu { position: fixed; top: 0; left: 0; }
.kebab-menu button {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* ── Aufgabenliste: Spaltenbreiten (9 Spalten: Aufgabe, Person, Projekt,
   Sitzung, Deadline, Priorität, Status, Erinnerung, Kebab) ──
   Überschreibt die generischen table-Regeln aus style.css, die für eine
   andere Tabelle (7 Spalten) gedacht sind. */
.tasks-table th:nth-child(1), .tasks-table td:nth-child(1) { width: 20%; }
.tasks-table th:nth-child(2), .tasks-table td:nth-child(2) { width: 11%; }
.tasks-table th:nth-child(3), .tasks-table td:nth-child(3) { width: 11%; }
.tasks-table th:nth-child(4), .tasks-table td:nth-child(4) { width: 14%; }
.tasks-table th:nth-child(5), .tasks-table td:nth-child(5) { width: 9%; }
.tasks-table th:nth-child(6), .tasks-table td:nth-child(6) { width: 8%; }
.tasks-table th:nth-child(7), .tasks-table td:nth-child(7) { width: 8%; }
.tasks-table th:nth-child(8), .tasks-table td:nth-child(8) { width: 11%; }
.tasks-table th:nth-child(9), .tasks-table td:nth-child(9) { width: 8%; overflow: visible; }
.tasks-table td:nth-child(9) { text-align: right; position: relative; }
.tasks-table th:nth-child(9) { text-align: right; }

/* ── Automatisches Speichern (Datensicherung) ── */
.autosave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.autosave-title { font-weight: 600; font-size: .92rem; color: #2E2F2F; margin-bottom: .2rem; }

/* ── Inhaltslinks innerhalb der Karten (z. B. Bibliotheken-Seite) ── */
main .card a { color: #D97757; }
main .card a:hover { color: #B8654A; }

/* ── Footer (Datenschutz / Dokumentation) ── */
.app-footer {
  width: min(1400px, calc(100% - 3rem));
  margin: .5rem auto 1.5rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  font-size: .8rem;
}
.app-footer a { color: #93897A; text-decoration: none; }
.app-footer a:hover { color: #D97757; text-decoration: underline; }

/* ── Responsive Layout-Helfer (iPhone / iPad) ──────────────────────────────
   style.css legt feste 2- bzw. 3-Spalten-Layouts über Inline-Styles fest.
   Diese Klassen ersetzen die Inline-Styles und brechen auf schmalen
   Bildschirmen (Handy/Tablet Hochformat) in eine Spalte um. */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.split-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-top: .6rem;
}
.split-2-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-top: 1rem;
}
.inline-add-form {
  display: flex;
  align-items: end;
  gap: .75rem;
  flex-wrap: wrap;
}
.inline-add-form .form-group { flex: 1; min-width: 160px; margin: 0; }
.inline-add-form .btn { flex-shrink: 0; }

@media (max-width: 900px) {
  .split-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .split-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .split-3 { grid-template-columns: 1fr; }
  .split-2-tight { grid-template-columns: 1fr; }
}

/* ── Kopfzeile: Navigation auf sehr schmalen Screens waagerecht scrollbar
   statt überlaufend/abgeschnitten ── */
@media (max-width: 560px) {
  header { gap: .75rem; padding: 0 1rem; }
  nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav button { flex-shrink: 0; padding: .5rem .85rem; font-size: .85rem; }
}

@media (max-width: 600px) {
  .task-block { padding: .75rem; }
  .app-footer { flex-direction: column; align-items: flex-end; gap: .5rem; }
}