:root{--c:#2563eb}
*{box-sizing:border-box}
body{background:#fff;color:#111;font:16px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0}
header,footer{display:flex;align-items:center;gap:.75rem;padding:12px 16px;border-bottom:1px solid #eee}
.version{margin-left:auto;color:#666;font-size:.9em}
.nav{display:flex;gap:.5rem;align-items:center}
main{padding:16px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.row{display:flex;align-items:center}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-top:1px solid #eee}
.badge{display:inline-block;border:1px solid #e5e7eb;border-radius:999px;padding:.05rem .45rem;font-size:.8em;color:#374151}
.overdue{border-color:#ef4444;color:#b91c1c}
.small{color:#555;font-size:.9em}
.status-done{text-decoration:line-through;color:#777}

.list-item{display:flex;align-items:flex-start;gap:.75rem;border-top:1px solid #f1f1f1;padding:10px 4px}
.list-item .clickable{flex:1;min-width:0;cursor:pointer}
.list-item .actions{margin-left:auto;display:flex;gap:.5rem}
button{appearance:none;background:var(--c);color:#fff;border:none;border-radius:8px;padding:.45rem .7rem;cursor:pointer}
button.muted{background:#e5e7eb;color:#111}
input,select,textarea{width:100%;box-sizing:border-box;padding:.45rem .55rem;border:1px solid #e5e7eb;border-radius:8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#111;color:#fff;padding:.5rem .75rem;border-radius:10px;opacity:0;transition:.2s}
.toast.show{opacity:1}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none}
.modal-backdrop.show{display:block}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;min-width:min(640px,96vw);max-width:96vw;box-shadow:0 10px 25px rgba(0,0,0,.2)}
.modal header{display:flex;align-items:center;gap:.5rem;padding:10px 12px;border-bottom:1px solid #eee}
.modal form{padding:12px;display:flex;flex-direction:column;gap:.6rem}
.modal .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}
/* Fix: Listen-Layout nach links, volle Breite */
.card { text-align: left; }

#list{
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* volle Breite */
  gap: 0;                 /* optional: Zwischenräume, z.B. 6px */
}

.list-item{
  width: 100%;            /* volle Zeile */
  justify-content: flex-start;
  align-items: flex-start;
}

.list-item .clickable{
  flex: 1;                /* Inhalt nimmt die Breite neben der Checkbox */
  min-width: 0;
  text-align: left;
}

/* Buttons weiterhin rechts befestigen */
.list-item .actions{
  margin-left: auto;
}
/* --- Listen-Layout fix --- */
#list{ 
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
}

.list-item{
  display:flex;
  align-items:flex-start;
  gap:12px;              /* Abstand zwischen Checkbox, Text, Actions */
  width:100%;
}

/* Checkbox bleibt links, bekommt keine Flex-Ausdehnung */
.list-item > input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:4px;
}

/* Der Inhalt soll als Spalte laufen und die ganze Breite nutzen */
.list-item .clickable{
  display:flex;          /* WICHTIG: eigener Flex-Container */
  flex-direction:column;
  flex:1 1 auto;         /* strecken */
  min-width:0;
  text-align:left;
  margin-left:0;         /* falls irgendwo auto gesetzt war */
}

/* Buttons bleiben rechts, aber ohne den Inhalt zu verdrängen */
.list-item .actions{
  flex:0 0 auto;
  margin-left:12px;
}
/* --- Listen-Layout: robuster Fix --- */
#list{
  display:block !important;
  width:100% !important;
}

#list .list-item{
  display:grid !important;
  grid-template-columns: auto 1fr auto; /* Checkbox | Inhalt | Buttons */
  align-items:start;
  gap:12px;
  width:100% !important;
  text-align:left;
}

#list .list-item > input[type="checkbox"]{
  margin-top:6px;
}

#list .list-item .clickable{
  min-width:0 !important;
  overflow-wrap:anywhere;
}

#list .list-item .actions{
  display:flex;
  gap:.5rem;
  margin-left:0 !important;
}
/* ---------- Mobile-Optimierungen ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 520px; }            /* damit Spalten nicht umbrechen */

@media (max-width: 720px){
  header { flex-wrap: wrap; gap: .5rem; }
  header .nav { flex-wrap: wrap; gap: .5rem; }
  header .nav a, header .nav button { padding: .4rem .55rem; font-size: .95rem; }

  main { padding: 12px; }
  .card { padding: 10px; border-radius: 10px; }

  /* Tabellen auf schmalen Screens scrollen lassen */
  .table { min-width: 600px; }
  .table th, .table td { white-space: nowrap; }
}