:root{
    --bg:#f6f7f9; --card:#fff; --text:#111; --muted:#666;
    --b:#e5e7eb; --primary:#1f7aec; --primary-ghost:#e8f1fe;
  }
  *{box-sizing:border-box}
  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
       background:var(--bg); color:var(--text); margin:16px;}
  /** */
  body{font-family:sans-serif;background:#f4f4f4;margin:20px;}

  .header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .title{font-size:20px;font-weight:600}

  /* Segmented Control */
  .segmented{display:inline-flex;border:1px solid var(--b);border-radius:12px;overflow:hidden;background:#fff}
  .segmented button{
    appearance:none;border:0;background:transparent;padding:8px 12px;cursor:pointer;
    font-weight:600;color:var(--muted)
  }
  .segmented button.active{background:var(--primary-ghost);color:var(--primary)}
  .segmented button:focus{outline:2px solid var(--primary-ghost);outline-offset:0}

  /* Karten-/Tabellen-Styles */
  .panel{border:1px solid var(--b);border-radius:12px;padding:12px;background:var(--card);margin:0 0 16px}
  .panel h3{margin:0 0 8px;font-size:16px;color:var(--muted)}
  /** */
  .panel{border:1px solid #ddd;border-radius:8px;padding:12px;background:#fff;margin:0 0 16px}
  .panel h3{margin:0 0 8px;font-size:16px}

  table.user-table{width:100%;border-collapse:collapse}
  table.user-table th,table.user-table td{border-bottom:1px solid #eee;padding:8px;text-align:left}
  /** */
  table.user-table{width:100%;border-collapse:collapse}
  table.user-table th,table.user-table td{border-bottom:1px solid #eee;padding:8px;text-align:left}


  .status-toggle{border:1px solid var(--b);border-radius:999px;padding:8px 12px;background:#f9fafb;cursor:pointer}

  .hidden{display:none}

  /* Mobile: Kartenlayout */
  @media (max-width:600px){
    table.user-table thead{display:none;}
    table.user-table, table.user-table tbody, table.user-table tr, table.user-table td{
      display:block;width:100%;
    }
    table.user-table tr{
      border:1px solid #eee;border-radius:10px;padding:8px;margin-bottom:10px;background:#fff;
    }
    table.user-table td{border:none;padding:6px 0}
    table.user-table td::before{
      content: attr(data-label) ": ";
      font-weight:600;margin-right:6px;color:var(--muted);
    }
    .status-toggle{width:100%;padding:10px 12px;font-size:15px}
  }

  /** */
  .status-toggle{border:1px solid #ccc;border-radius:999px;padding:8px 12px;background:#f7f7f7;cursor:pointer}

  /** */
  /* Mobile Karten-Layout */
  @media (max-width:600px){
    table.user-table thead{display:none;}
    table.user-table, 
    table.user-table tbody, 
    table.user-table tr, 
    table.user-table td{
      display:block;
      width:100%;
    }
    table.user-table tr{
      border:1px solid #eee;
      border-radius:8px;
      padding:8px;
      margin-bottom:10px;
      background:#fff;
    }
    table.user-table td{
      border:none;
      padding:6px 0;
    }
    table.user-table td::before{
      content: attr(data-label) ": ";
      font-weight:600;
      margin-right:6px;
    }
    .status-toggle{
      width:100%;
      padding:10px 12px;
      font-size:15px;
    }
  }

/* Toolbar: Plus + Segmented Control nebeneinander, auf schmalen Screens umbrechen */
.toolbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Icon-Buttons für + und x – passend zu deinen runden Status-Badges */
.icon-btn {
  display: inline-flex;
  place-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { background: #f7f7f7; }
.icon-btn.add span { position: relative; top: -1px; } /* optische Mitte */
.icon-btn.danger { border-color: #e2a4a4; }
.icon-btn.danger:hover { background: #ffecec; }

/* Spalte für Aktionen in inaktiver Liste */
.user-table .col-actions { width: 36px; text-align: center; }

/* Mobile: Tabellenlabels bleiben, Aktionsspalte sichtbar lassen */
@media (max-width: 720px) {
  .user-table .col-actions[data-label]:before {
    content: ""; /* kein Labeltext vor dem Icon */
  }
}